summaryrefslogtreecommitdiffhomepage
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rwxr-xr-xthemes/luci-theme-material/htdocs/luci-static/material/css/style.css205
1 files changed, 162 insertions, 43 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index 17db81edb..e7f095fa9 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -59,11 +59,23 @@
bottom: 0;
text-align: center;
line-height: 3em;
+ background: inherit;
}
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
+.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
+.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
+.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
+.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
+.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
+.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
+.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
+.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
+.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
+.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
+
.cbi-button-up,
.cbi-button-down,
.cbi-value-helpicon,
@@ -461,7 +473,7 @@ h4 {
}
.cbi-section {
- margin: 2rem 0 0 0;
+ margin: 1rem 0 0 0;
padding: 2rem;
border: 0;
font-weight: normal;
@@ -491,6 +503,7 @@ fieldset > fieldset {
box-shadow: none;
}
+.cbi-section > h3:first-child,
.panel-title {
width: 100%;
display: block;
@@ -499,6 +512,7 @@ fieldset > fieldset {
font-size: 1.4rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
+ margin: 0;
}
table {
@@ -518,41 +532,18 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
white-space: nowrap;
}
-.td.cbi-value-field,
-.cbi-section-table-cell {
- text-align: center;
- display: inline-block;
- flex: 10;
-}
-
.cbi-section-table-cell {
white-space: nowrap;
align-self: flex-end;
- flex: 1;
-}
-
-.td.cbi-value-field[data-title]::before {
- content: attr(data-title);
- padding: .5rem;
- display: block;
- white-space: nowrap;
+ flex: 1 1 auto;
}
.cbi-section-table {
border: none;
}
-.tr.cbi-section-table-titles,
-.tr.cbi-section-table-descr {
- display: none;
-}
-
.cbi-section-table-row {
text-align: center;
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- justify-content: space-between;
margin-bottom: 1rem;
background: #f4f4f4;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -562,17 +553,6 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
margin-bottom: 0;
}
-.cbi-section-table-row[data-title]::before {
- content: attr(data-title);
- display: block;
- width: 100%;
- margin: .25rem;
- padding: .25rem .25rem .5rem .25rem;
- border-bottom: 1px solid rgba(0, 0, 0, .26);
- text-align: center;
- font-size: 1rem;
-}
-
.cbi-section-table-row > .cbi-value-field .cbi-input-select,
.cbi-section-table-row > .cbi-value-field .cbi-input-text,
.cbi-section-table-row > .cbi-value-field .cbi-input-password,
@@ -580,6 +560,11 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
width: 100%;
}
+.cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
+.cbi-section-table-row > .cbi-value-field input.cbi-input-password {
+ width: calc(100% - 1.5rem);
+}
+
div > table > tbody > tr:nth-of-type(2n),
div > .table > .tbody > .tr:nth-of-type(2n) {
background-color: #f9f9f9;
@@ -852,6 +837,33 @@ form.inline + form.inline,
border: none;
}
+.td[data-title]::before {
+ content: attr(data-title) ":\20";
+ font-weight: bold;
+ text-align: left;
+ display: none;
+ padding: .25rem 0;
+ white-space: nowrap;
+}
+
+.tr.placeholder .td[data-title]::before {
+ display: none;
+}
+
+.tr[data-title]::before,
+.tr.cbi-section-table-titles.named::before {
+ content: attr(data-title) "\20";
+ font-weight: bold;
+ text-align: center;
+ display: table-cell;
+ align-self: center;
+ flex: 1 1 5%;
+ padding: .25rem;
+ white-space: normal;
+ word-wrap: break-word;
+ vertical-align: middle;
+}
+
.cbi-rowstyle-2 {
background-color: #eee;
}
@@ -1045,18 +1057,28 @@ form.inline + form.inline,
display: none
}
-.left {
+.left, .left::before {
text-align: left !important;
}
-.right {
+.right, .right::before {
text-align: right !important;
}
-.center {
+.center, .center::before {
text-align: center !important;
}
+.top {
+ align-self: flex-start !important;
+ vertical-align: top !important;
+}
+
+.bottom {
+ align-self: flex-end !important;
+ vertical-align: bottom !important;
+}
+
.inline {
display: inline;
}
@@ -1082,6 +1104,12 @@ form.inline + form.inline,
width: 15rem;
}
+.th[data-type="button"], .td[data-type="button"],
+.th[data-type="fvalue"], .td[data-type="fvalue"] {
+ flex: 1 1 2em;
+ text-align: center;
+}
+
.ifacebadge {
display: inline-flex;
border-bottom: 1px solid #CCCCCC;
@@ -1124,7 +1152,7 @@ td > .ifacebadge,
}
.network-status-table .ifacebox-body > span {
- flex: 10;
+ flex: 10 10 auto;
}
.network-status-table .ifacebox-body > div {
@@ -1133,7 +1161,7 @@ td > .ifacebadge,
}
.network-status-table .ifacebox-body .ifacebadge {
- flex: 1;
+ flex: 1 1 auto;
margin: .5em .25em 0 .25em;
padding: .5em;
min-width: 220px;
@@ -1303,6 +1331,11 @@ td > .ifacebadge,
height: 1rem;
}
+.td .cbi-input-checkbox,
+.td .cbi-input-radio {
+ margin-top: 0;
+}
+
.cbi-value-field > input + .cbi-value-description {
padding: 0;
}
@@ -1805,10 +1838,29 @@ body.lang_pl.node-main-login .cbi-value-title {
}
.th, .td {
- flex: 1;
- flex-basis: 33%;
+ flex: 2 2 25%;
+ align-self: flex-start;
overflow: hidden;
text-overflow: ellipsis;
+ word-wrap: break-word;
+ display: inline-block;
+ }
+
+ .td select,
+ .td input[type="text"] {
+ word-wrap: normal;
+ width: 100%;
+ }
+
+ .td [data-dynlist] > input,
+ .td input.cbi-input-password {
+ width: calc(100% - 1.5rem);
+ }
+
+ .td[data-type="button"],
+ .td[data-type="fvalue"] {
+ flex: 1 1 12.5%;
+ text-align: left;
}
.th.cbi-value-field,
@@ -1817,6 +1869,54 @@ body.lang_pl.node-main-login .cbi-value-title {
.td.cbi-section-table-cell {
flex-basis: auto;
}
+
+ .cbi-section-table-row {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ .td.cbi-value-field,
+ .cbi-section-table-cell {
+ text-align: center;
+ display: inline-block;
+ flex: 10 10 auto;
+ }
+
+ .td.cbi-section-actions {
+ text-align: right;
+ align-self: flex-end;
+ vertical-align: bottom;
+ }
+
+ .tr.table-titles,
+ .tr.cbi-section-table-titles,
+ .tr.cbi-section-table-descr {
+ display: none;
+ }
+
+ .tr[data-title]::before,
+ .tr.cbi-section-table-titles.named::before {
+ display: block;
+ flex: 1 1 100%;
+ background: #eef;
+ font-size: .9rem;
+ border-bottom: 1px solid rgba(0, 0, 0, .26);
+ }
+
+ .td[data-title] {
+ text-align: left;
+ }
+
+ .td[data-title]::before {
+ display: block;
+ }
+
+ .hide-sm,
+ .hide-xs {
+ display: none;
+ }
}
@media screen and (max-width: 480px) {
@@ -1959,6 +2059,25 @@ body.lang_pl.node-main-login .cbi-value-title {
.td.cbi-value-field {
flex-basis: 100%;
}
+
+ .td.cbi-value-field[data-type="dvalue"] {
+ flex-basis: 50%;
+ }
+
+ .td.cbi-value-field[data-type="button"],
+ .td.cbi-value-field[data-type="fvalue"] {
+ flex-basis: 25%;
+ text-align: left;
+ }
+
+ .tr[data-title]::before,
+ .tr.cbi-section-table-titles.named::before {
+ font-size: 1rem;
+ }
+
+ .hide-xs {
+ display: none;
+ }
}
@media screen and (min-width: 992px) {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-23 15:23:04 +0000