summaryrefslogtreecommitdiffhomepage
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/cascade.css234
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/custom.css51
2 files changed, 153 insertions, 132 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 337a938df5..b2eb0602eb 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -181,7 +181,7 @@ select {
padding: .36rem .8rem;
color: #555;
border: thin solid #ccc;
- background-color: #fff;
+ background-color: var(--white-color);
background-image: none;
}
@@ -212,8 +212,7 @@ select,
select:not([multiple="multiple"]):focus,
input:not(.cbi-button):focus,
.cbi-dropdown:focus {
- border-color: #09c;
- border-color: var(--main-color);
+ border-color: var(--primary-color);
}
.cbi-dropdown,
@@ -345,12 +344,9 @@ small {
top: 4rem;
float: left;
overflow-x: auto;
- width: 15%;
width: calc(0% + 15rem);
- height: 100%;
height: calc(100% - 4rem);
- background-color: #fff;
- background-color: var(--menu-bg-color);
+ background-color: var(--white-color);
transition: visibility 400ms, width 400ms;
}
@@ -383,10 +379,8 @@ small {
}
header {
- color: #fff;
- color: var(--header-color);
- background: #09c;
- background: var(--header-bg);
+ color: var(--secondary-color);
+ background: var(--primary-color);
}
header > .fill > .container {
@@ -413,8 +407,7 @@ header > .fill > .container > .brand {
cursor: default;
vertical-align: text-bottom;
text-decoration: none;
- color: #fff;
- color: var(--header-color);
+ color: var(--white-color);
}
header > .fill > .container > .status {
@@ -436,10 +429,8 @@ header > .fill > .container > .status > * {
display: flex;
flex-wrap: wrap;
align-items: center;
- color: #fff;
- color: var(--header-color);
- background: #09c;
- background: var(--header-bg);
+ color: var(--white-color);
+ background: var(--secondary-color);
padding: .5rem;
transition: box-shadow .2s;
box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
@@ -459,22 +450,22 @@ header > .fill > .container > .status > * {
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
- color: #fff !important;
+ color: var(--white-color) !important;
border-radius: 3px;
background-color: #bfbfbf;
text-shadow: none;
}
#modemenu > li > a.active {
- background-color: #002B49 !important;
+ background-color: var(--dark-blue-color) !important;
}
#modemenu > li.divider {
margin-left: .25rem;
margin-right: .25rem;
- border: .5rem solid var(--submenu-bg-hover);
- border-left: 1px solid var(--submenu-bg-hover);
- border-right: 1px solid var(--submenu-bg-hover);
+ border: .5rem solid var(--gray-color);
+ border-left: 1px solid var(--gray-color);
+ border-right: 1px solid var(--gray-color);
border-radius: 1rem;
}
@@ -482,27 +473,6 @@ header > .fill > .container > .status > * {
display: flex;
}
-.danger {
- background-color: #ff7d60 !important;
-}
-
-.warning {
- background-color: #f0e68c !important;
-}
-
-.success {
- background-color: #5cb85c !important;
-}
-
-.notice,
-[data-indicator]:not([data-style="inactive"]) {
- background-color: #002B49 !important;
-}
-
-.error {
- color: #f00;
-}
-
.alert,
.alert-message {
font-weight: bold;
@@ -510,7 +480,6 @@ header > .fill > .container > .status > * {
padding: 1rem;
border: 0;
border-radius: 0 !important;
- background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
text-shadow: 1px 1px rgba(0, 0, 0, .1);
}
@@ -528,6 +497,44 @@ header > .fill > .container > .status > * {
padding: .3rem .6rem;
}
+.alert-message.notice,
+.label.notice {
+ background-color: var(--notice-color);
+ color: var(--on-notice-color);
+}
+
+.alert-message.danger,
+.btn.danger,
+.label.danger {
+ background-color: var(--danger-color);
+ color: var(--on-danger-color);
+}
+
+.alert-message.warning,
+.btn.warning,
+.label.warning {
+ background-color: var(--warning-color);
+ color: var(--on-warning-color);
+}
+
+.alert-message.success,
+.btn.success,
+.label.success {
+ background-color: var(--success-color);
+ color: var(--on-success-color);
+}
+
+.alert-message.error,
+.btn.error,
+.label.error {
+ background-color: var(--on-error-color);
+ color: var(--error-color);
+}
+
+[data-indicator]:not([data-style="inactive"]) {
+ background-color: var(--notice-color) !important;
+}
+
.container .alert,
.container .alert-message {
margin-top: 1rem;
@@ -555,16 +562,14 @@ header > .fill > .container > .status > * {
.main > .main-left > .nav > li a {
display: block;
color: #5f6368;
- color: var(--menu-color);
}
.main > .main-left > .nav > li.active > a {
- color: #fff;
+ color: var(--white-color);
}
.main > .main-left > .nav > li.active {
- background-color: #09c;
- background-color: var(--submenu-bg-hover-active);
+ background-color: var(--primary-color);
}
.main > .main-left > .nav > li.slide.active {
@@ -592,8 +597,7 @@ header > .fill > .container > .status > * {
width: 100%;
padding: .5rem 1rem;
text-decoration: none;
- color: #202124;
- color: var(--main-menu-color);
+ color: var(--black-color-low);
}
.main > .main-left > .nav > .slide > .menu::before {
@@ -631,8 +635,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
.main > .main-left > .nav > li:hover,
.main > .main-left > .nav > .slide > .menu:hover {
- background: #d4d4d4;
- background: var(--submenu-bg-hover);
+ background: var(--gray-color);
}
.main > .main-left > .nav > .slide:hover {
@@ -640,8 +643,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
}
.main > .main-left > .nav > .slide > .slide-menu > .active {
- background-color: #09c;
- background-color: var(--submenu-bg-hover-active);
+ background-color: var(--primary-color);
}
.main > .main-left > .nav > .slide > .slide-menu > li > a {
@@ -651,22 +653,19 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
}
.main > .main-left > .nav > .slide > .slide-menu > .active > a {
- color: #fff;
+ color: var(--white-color);
}
.main > .main-left > .nav > .slide > .slide-menu > li:hover {
- background: #d4d4d4;
- background: var(--submenu-bg-hover);
+ background: var(--gray-color);
}
.main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
- color: #202124;
- color: var(--menu-color-hover);
+ color: #5f6368;
}
.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
- background-color: #09c;
- background-color: var(--main-color);
+ background-color: var(--primary-color);
}
/* ripple effect */
@@ -692,7 +691,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
transform: scale(10, 10);
pointer-events: none;
opacity: 0;
- background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
+ background-image: radial-gradient(circle, var(--black-color) 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
}
@@ -767,7 +766,7 @@ h5 {
padding: 2rem;
border: 0;
border-radius: 0;
- background-color: #fff;
+ background-color: var(--white-color);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
@@ -890,7 +889,7 @@ tr > th,
.cbi-section-table-row {
margin-bottom: 1rem;
text-align: center !important;
- background: #f4f4f4;
+ background: var(--white-color-low);
}
.cbi-section-table-row:last-child {
@@ -915,7 +914,7 @@ tr > th,
div > table > tbody > tr:nth-of-type(2n),
div > .table > .tr:nth-of-type(2n) {
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
}
/* fix multiple table */
@@ -1042,8 +1041,8 @@ td > table > tbody > tr > td,
.cbi-button[name="restart"],
.cbi-button[onclick="hide_empty(this)"] {
font-weight: bold;
- border: thin solid #bfbfbf;
- background-color: #d4d4d4;
+ border: thin solid var(--gray-color-high);
+ background-color: var(--gray-color);
}
/* dark blue */
@@ -1059,9 +1058,9 @@ td > table > tbody > tr > td,
.cbi-button[value^="Back"],
.cbi-button-neutral[onclick="handleConfig(event)"] {
font-weight: normal;
- color: #fff;
- border: thin solid #2e6da4;
- background-color: #337ab7;
+ color: var(--on-dark-blue-color);
+ border: thin solid var(--dark-blue-color-high);
+ background-color: var(--dark-blue-color);
}
/* light blue */
@@ -1076,9 +1075,9 @@ td > table > tbody > tr > td,
.cbi-button[value$="Apply"],
.cbi-button[onclick="addKey(event)"] {
font-weight: normal;
- color: #fff;
- border: thin solid #46b8da;
- background-color: #5bc0de;
+ color: var(--on-light-blue-color);
+ border: thin solid var(--light-blue-color-high);
+ background-color: var(--light-blue-color);
}
/* red */
@@ -1092,9 +1091,9 @@ td > table > tbody > tr > td,
.cbi-button[onclick="reboot(this)"],
.cbi-button-neutral[value="Restart"] {
font-weight: normal;
- color: #fff;
- border: thin solid #d43f3a;
- background-color: #d9534f;
+ color: var(--on-red-color);
+ border: thin solid var(--red-color-high);
+ background-color: var(--red-color);
}
/* yellow */
@@ -1106,9 +1105,9 @@ td > table > tbody > tr > td,
.cbi-button[onclick="handleReset(event)"],
.cbi-button-neutral[value="Disable"] {
font-weight: normal;
- color: #fff;
- border: thin solid #eea236;
- background-color: #f0ad4e;
+ color: var(--on-yellow-color);
+ border: thin solid var(--yellow-color-high);
+ background-color: var(--yellow-color);
}
/* green */
@@ -1118,9 +1117,9 @@ td > table > tbody > tr > td,
.cbi-button[value="Download"],
.cbi-button[value="Save mtdblock"] {
font-weight: normal;
- color: #fff;
- border: thin solid #4cae4c;
- background-color: #5cb85c;
+ color: var(--on-green-color);
+ border: thin solid var(--green-color-high);
+ background-color: var(--green-color);
}
.cbi-page-actions .cbi-button-link:first-child {
@@ -1140,7 +1139,7 @@ td > table > tbody > tr > td,
.tabs {
margin: 0 -2rem;
padding-left: .5rem;
- background-color: #fff;
+ background-color: var(--white-color);
}
.tabs > li,
@@ -1157,8 +1156,7 @@ td > table > tbody > tr > td,
.tabs > li[class~="active"],
.tabs > li:hover {
- border-bottom-color: #09c;
- border-bottom-color: var(--main-color);
+ border-bottom-color: var(--primary-color);
}
.tabs > li:hover {
@@ -1174,12 +1172,11 @@ td > table > tbody > tr > td,
}
.tabs > li[class~="active"] > a {
- color: #09c;
- color: var(--main-color);
+ color: var(--primary-color);
}
.cbi-tabmenu {
- border: thin solid #d4d4d4;
+ border: thin solid var(--gray-color);
border-bottom: 0;
}
@@ -1188,16 +1185,16 @@ td > table > tbody > tr > td,
}
.cbi-tabmenu > li[class~="cbi-tab"] {
- background-color: #fff;
+ background-color: var(--white-color);
}
.cbi-tabmenu {
- background-color: #d4d4d4;
+ background-color: var(--gray-color);
}
.cbi-section .cbi-section-remove:nth-of-type(2n),
.container > .cbi-section .cbi-section-node:nth-of-type(2n) {
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
}
[data-tab-title] {
@@ -1218,18 +1215,18 @@ td > table > tbody > tr > td,
.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
}
.cbi-section-node-tabbed {
margin-top: 0;
padding: 0;
- border: thin solid #d4d4d4;
+ border: thin solid var(--gray-color);
border-top: 0;
}
.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
}
.cbi-value-field,
@@ -1281,8 +1278,8 @@ td > table > tbody > tr > td,
}
.cbi-input-invalid {
- color: #f00;
- border-bottom-color: #f00;
+ color: var(--error-color);
+ border-bottom-color: var(--error-color);
}
.cbi-section-error {
@@ -1290,7 +1287,7 @@ td > table > tbody > tr > td,
line-height: 1.42857143;
margin: 18px;
padding: 6px;
- border: thin solid #f00;
+ border: thin solid var(--error-color);
border-radius: 3px;
background-color: #fce6e6;
}
@@ -1301,7 +1298,7 @@ td > table > tbody > tr > td,
.cbi-section-error ul li {
font-weight: bold;
- color: #f00;
+ color: var(--error-color);
}
.td[data-title]::before {
@@ -1332,7 +1329,7 @@ td > table > tbody > tr > td,
}
.cbi-rowstyle-1 {
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
}
.cbi-rowstyle-2 {
@@ -1342,7 +1339,7 @@ td > table > tbody > tr > td,
.cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down,
body:not(.Interfaces) .cbi-rowstyle-2:first-child {
- background-color: #fff !important;
+ background-color: var(--white-color) !important;
}
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
@@ -1401,9 +1398,9 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
padding: 0 6px;
content: "\00D7";
pointer-events: auto;
- color: #fff;
- border: thin solid #d43f3a;
- background-color: #d9534f;
+ color: var(--white-color);
+ border: thin solid var(--red-color);
+ background-color: var(--red-color-high);
}
.cbi-dynlist > .item > span {
@@ -1500,7 +1497,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
font-weight: bold;
display: none;
color: #777;
- text-shadow: 1px 1px 0 #fff;
+ text-shadow: 1px 1px 0 var(--white-color);
}
.cbi-dropdown > ul > li {
@@ -1564,7 +1561,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
border: thin solid #918e8c;
background: #f6f6f6;
box-shadow: 0 0 4px #918e8c;
- color: var(--main-menu-color);
+ color: var(--black-color-low);
}
.cbi-dropdown > ul > li[display],
@@ -1646,8 +1643,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
width: 0;
height: 100%;
transition: width .25s ease-in;
- background: #5bc0de;
- background: var(--bar-bg);
+ background: var(--light-blue-color);
}
.cbi-progressbar::after {
@@ -1693,7 +1689,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
margin: 5em auto;
padding: 1em;
border-radius: 3px !important;
- background: #fff;
+ background: var(--white-color);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
@@ -1736,7 +1732,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
.modal p {
padding-left: .25rem;
word-break: break-word;
- color: #fff;
}
.modal label.btn {
@@ -1749,10 +1744,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
padding-top: 0.2rem;
}
-.modal label.warning {
- background-color: #f0ad4e !important;
-}
-
.modal.cbi-modal {
max-width: 90%;
max-height: none;
@@ -1889,7 +1880,7 @@ td > .ifacebadge,
min-width: 220px;
margin: .5em .25em 0 .25em;
padding: .5em;
- background-color: #fff;
+ background-color: var(--white-color);
}
#dsl_status_table .ifacebox-body span > strong {
@@ -1903,7 +1894,7 @@ td > .ifacebadge,
width: 100%;
min-height: 14rem;
padding: .8rem;
- color: #000;
+ color: var(--black-color);
}
#syslog {
@@ -2001,7 +1992,7 @@ td > .ifacebadge,
#iwsvg,
#iwsvg2,
#bwsvg {
- border: thin solid #d4d4d4 !important;
+ border: thin solid var(--gray-color) !important;
}
#iwsvg,
@@ -2015,7 +2006,7 @@ td > .ifacebadge,
flex-direction: column;
min-width: 100px;
border-bottom: thin solid #ccc;
- background-color: #f9f9f9;
+ background-color: var(--white-color-low);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
}
@@ -2025,8 +2016,7 @@ td > .ifacebadge,
}
.ifacebox-head.active {
- background: #5bc0de;
- background: var(--bar-bg);
+ background: var(--light-blue-color);
}
.ifacebox-body {
@@ -2129,7 +2119,7 @@ span[data-tooltip] .label {
pointer-events: none;
opacity: 0;
border-radius: 3px;
- background: #fff;
+ background: var(--white-color);
box-shadow: 0 0 2px #444;
}
@@ -2179,7 +2169,7 @@ span[data-tooltip] .label {
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
- color: #fff !important;
+ color: var(--white-color) !important;
border-radius: 3px;
background-color: #bfbfbf;
text-shadow: none;
@@ -2269,7 +2259,7 @@ input[name="nslookup"] {
margin-top: 2rem !important;
padding: 1rem 3.5rem 2rem;
text-align: left;
- background-color: #fff;
+ background-color: var(--white-color);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
index b2515fb5aa..b9ad8bbeb8 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
@@ -1,13 +1,44 @@
:root {
- --main-color: #00B5E2;
- --header-bg: #00B5E2;
- --header-color: #fff;
- --bar-bg: #5bc0de;
- --menu-bg-color: #fff;
- --menu-color: #5f6368;
- --menu-color-hover: #202124;
- --main-menu-color: #202124;
- --submenu-bg-hover: #d4d4d4;
- --submenu-bg-hover-active: #00B5E2;
+ /** General colors */
+ --white-color: #ffffff;
+ --white-color-low: #f9f9f9;
+ --black-color: #000000;
+ --black-color-low: #202124;
+ --yellow-color: #f0ad4e;
+ --yellow-color-high: #eea236;
+ --on-yellow-color: var(--white-color);
+ --red-color: #d9534f;
+ --red-color-high: #d43f3a;
+ --on-red-color: var(--white-color);
+ --green-color: #5cb85c;
+ --green-color-high: #4cae4c;
+ --on-green-color: var(--white-color);
+ --dark-blue-color: #337ab7;
+ --dark-blue-color-high: #2e6da4;
+ --on-dark-blue-color: var(--white-color);
+ --gray-color: #d4d4d4;
+ --gray-color-high: #bfbfbf;
+ --light-blue-color: #5bc0de;
+ --light-blue-color-high: #46b8da;
+ --on-light-blue-color: var(--white-color);
+
+ --primary-color: #00B5E2;
+ --secondary-color: #0099cc;
+
+ --notice-color: #002B49;
+ --on-notice-color: var(--white-color);
+
+ --danger-color: var(--red-color);
+ --on-danger-color: var(--on-red-color);
+
+ --warning-color: #f0e68c;
+ --on-warning-color: var(--black-color);
+
+ --success-color: var(--green-color);
+ --on-success-color: var(--on-green-color);
+
+ --error-color: #ff0000;
+ --on-error-color: var(--white-color);
+
--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 01:03:20 +0000