luci-theme-bootstrap: align CSS with markup changes
Add changes to make the theme render correctly with the latest markup, requires further refinement and tuning in the future. Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich
parent
f714f684fa
commit
b453624dce
1 changed files with 150 additions and 91 deletions
|
|
@ -215,7 +215,8 @@ a:hover {
|
|||
* ---------------------------------------------------------------------------------------- */
|
||||
p,
|
||||
.cbi-map-descr,
|
||||
.cbi-section-descr {
|
||||
.cbi-section-descr,
|
||||
.table .tr.cbi-section-table-descr .th {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
|
|
@ -229,7 +230,7 @@ p small {
|
|||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h3, legend,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
|
|
@ -265,14 +266,14 @@ h2 small {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3,
|
||||
h3, legend,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3, legend {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -645,6 +646,26 @@ textarea[readonly] {
|
|||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.cbi-optionals,
|
||||
.cbi-section-create {
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.cbi-section-create {
|
||||
margin: -3px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cbi-section-create > * {
|
||||
margin: 3px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.cbi-section-create > * > input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.cbi-page-actions {
|
||||
background: #f5f5f5;
|
||||
|
|
@ -706,6 +727,7 @@ textarea[readonly] {
|
|||
padding: 0;
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table .th, .table .td {
|
||||
|
|
@ -732,6 +754,19 @@ textarea[readonly] {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tr.placeholder {
|
||||
height: calc(3em + 20px);
|
||||
}
|
||||
|
||||
.tr.placeholder > .td {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
/* Patterns.less
|
||||
* Repeatable UI elements outside the base styles provided from the scaffolding
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
|
@ -1244,99 +1279,67 @@ footer {
|
|||
outline: 1px dotted #666;
|
||||
}
|
||||
|
||||
.btn.primary,
|
||||
.cbi-page-actions .cbi-button-apply,
|
||||
.cbi-page-actions .cbi-button-save,
|
||||
.cbi-page-actions .cbi-button-reset {
|
||||
color: #ffffff;
|
||||
padding: 5px 14px 6px;
|
||||
background-color: #0064cd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient(to bottom, #049cdb, #0064cd);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #0064cd #0064cd #003f81;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cbi-input-invalid,
|
||||
.cbi-value-error input {
|
||||
color: #FF0000;
|
||||
border-color: #FF0000;
|
||||
}
|
||||
|
||||
.cbi-button-up,
|
||||
.cbi-input-up {
|
||||
background-position: center center;
|
||||
background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-down,
|
||||
.cbi-input-down {
|
||||
background-position: center center;
|
||||
background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-find,
|
||||
.cbi-input-find {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-positive,
|
||||
.cbi-button-fieldadd,
|
||||
.cbi-button-add,
|
||||
.cbi-input-add {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-apply,
|
||||
.cbi-input-apply {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-reset,
|
||||
.cbi-input-reset {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-edit,
|
||||
.cbi-input-edit {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-remove,
|
||||
.cbi-input-remove {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-reload,
|
||||
.cbi-input-reload {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
}
|
||||
|
||||
.cbi-button-link,
|
||||
.cbi-input-link {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
.cbi-button-save {
|
||||
border-color: #4a4;
|
||||
color: #4a4;
|
||||
}
|
||||
|
||||
.cbi-button-neutral,
|
||||
.cbi-button-download,
|
||||
.cbi-input-download {
|
||||
background-position: 6px center, left top;
|
||||
padding-left: 28px;
|
||||
background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
.cbi-button-find,
|
||||
.cbi-button-link,
|
||||
.cbi-button-up,
|
||||
.cbi-button-down {
|
||||
border-color: #444;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.btn.primary,
|
||||
.cbi-button-action,
|
||||
.cbi-button-apply,
|
||||
.cbi-button-reload,
|
||||
.cbi-button-edit {
|
||||
border-color: #0069d6;
|
||||
color: #0069d6;
|
||||
}
|
||||
|
||||
.cbi-button-negative,
|
||||
.cbi-section-remove .cbi-button,
|
||||
.cbi-button-reset,
|
||||
.cbi-button-remove {
|
||||
border-color: #c44;
|
||||
color: #c44;
|
||||
}
|
||||
|
||||
.btn.primary,
|
||||
.cbi-button-action.important,
|
||||
.cbi-page-actions .cbi-button-apply,
|
||||
.cbi-section-actions .cbi-button-edit {
|
||||
color: #fff;
|
||||
background: #0069d6;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cbi-button-positive.important,
|
||||
.cbi-page-actions .cbi-button-save {
|
||||
color: #fff;
|
||||
background: #4a4;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cbi-page-actions .cbi-button-apply + .cbi-button-save {
|
||||
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
|
||||
color: #4a4;
|
||||
}
|
||||
|
||||
.cbi-dropdown {
|
||||
|
|
@ -1492,6 +1495,58 @@ footer {
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
.cbi-tooltip-container {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.cbi-tooltip {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
left: -1000px;
|
||||
opacity: 0;
|
||||
transition: opacity .25s ease-out;
|
||||
}
|
||||
|
||||
.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
|
||||
left: auto;
|
||||
opacity: 1;
|
||||
transition: opacity .25s ease-in;
|
||||
}
|
||||
|
||||
.zonebadge .cbi-tooltip {
|
||||
padding: 1px;
|
||||
background: inherit;
|
||||
margin: -1.6em 0 0 -5px;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 3px #444;
|
||||
}
|
||||
|
||||
.zonebadge .cbi-tooltip > * {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.zone-forwards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zone-forwards > * {
|
||||
flex: 1 1 40%;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.zone-forwards > span {
|
||||
flex-basis: 10%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zone-forwards .zone-src,
|
||||
.zone-forwards .zone-dest {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn.active, .btn:active {
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
|
@ -1751,9 +1806,13 @@ table table td,
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cbi-value-description { display: inline; }
|
||||
|
||||
.cbi-value-description img { vertical-align: middle; }
|
||||
.cbi-value-description {
|
||||
background-image: url(/luci-static/resources/cbi/help.gif);
|
||||
background-position: .25em .2em;
|
||||
background-repeat: no-repeat;
|
||||
margin: .25em 0 0 0;
|
||||
padding: 0 0 0 1.7em;
|
||||
}
|
||||
|
||||
.cbi-section-error {
|
||||
border: 1px solid #FF0000;
|
||||
|
|
@ -1852,6 +1911,7 @@ table table td,
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ifacebadge.large,
|
||||
.network-status-table .ifacebox-body .ifacebadge {
|
||||
flex: 1;
|
||||
margin: .5em .25em 0 .25em;
|
||||
|
|
@ -1866,7 +1926,6 @@ table table td,
|
|||
white-space: nowrap;
|
||||
color: #666666;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zonebadge > em,
|
||||
|
|
|
|||
Loading…
Reference in a new issue