Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-material: improve theming system colors and contrasts

Browse source 
This changed spawned from trying to make certain text colors readable (such as white text on white background in many dialogs) introduced by commit 4ee2bc6 (ref: #5841) which made obvious the need to improve the color and contrast situation in the theme.

Alot of colors were duplicated in cascade.css and made for a hard time to align colors across different elements. This commit tries to rectify that by introducing variables for all commonly used colors.

* All base colors (white, blue, red, green, blue, yellow, etc) has been consolidated and moved to common variables
* Introduced more specific selectors for info levels to avoid colors bleeding over to other elements
* Removed duplicated properties which were overriden at the next row

Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
This commit is contained in:
Daniel Nilsson 2024-02-22 20:50:09 +01:00 committed by Paul Donald
parent 85c0429651
commit 3acc8bc373
2 changed files with 153 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

234
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View file

@ -181,7 +181,7 @@ select {
padding: .36rem .8rem; padding: .36rem .8rem;
color: #555; color: #555;
border: thin solid #ccc; border: thin solid #ccc;
background-color: #fff; background-color: var(--white-color);
background-image: none; background-image: none;
} }
@ -212,8 +212,7 @@ select,
select:not([multiple="multiple"]):focus, select:not([multiple="multiple"]):focus,
input:not(.cbi-button):focus, input:not(.cbi-button):focus,
.cbi-dropdown:focus { .cbi-dropdown:focus {
border-color: #09c; border-color: var(--primary-color);
border-color: var(--main-color);
} }
.cbi-dropdown, .cbi-dropdown,
@ -345,12 +344,9 @@ small {
top: 4rem; top: 4rem;
float: left; float: left;
overflow-x: auto; overflow-x: auto;
width: 15%;
width: calc(0% + 15rem); width: calc(0% + 15rem);
height: 100%;
height: calc(100% - 4rem); height: calc(100% - 4rem);
background-color: #fff; background-color: var(--white-color);
background-color: var(--menu-bg-color);
transition: visibility 400ms, width 400ms; transition: visibility 400ms, width 400ms;
} }
@ -383,10 +379,8 @@ small {
} }
header { header {
color: #fff; color: var(--secondary-color);
color: var(--header-color); background: var(--primary-color);
background: #09c;
background: var(--header-bg);
} }
header > .fill > .container { header > .fill > .container {
@ -413,8 +407,7 @@ header > .fill > .container > .brand {
cursor: default; cursor: default;
vertical-align: text-bottom; vertical-align: text-bottom;
text-decoration: none; text-decoration: none;
color: #fff; color: var(--white-color);
color: var(--header-color);
} }
header > .fill > .container > .status { header > .fill > .container > .status {
@ -436,10 +429,8 @@ header > .fill > .container > .status > * {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
color: #fff; color: var(--white-color);
color: var(--header-color); background: var(--secondary-color);
background: #09c;
background: var(--header-bg);
padding: .5rem; padding: .5rem;
transition: box-shadow .2s; transition: box-shadow .2s;
box-shadow: 0 2px 5px rgb(0 0 0 / 26%); box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
@ -459,22 +450,22 @@ header > .fill > .container > .status > * {
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: #fff !important; color: var(--white-color) !important;
border-radius: 3px; border-radius: 3px;
background-color: #bfbfbf; background-color: #bfbfbf;
text-shadow: none; text-shadow: none;
} }
#modemenu > li > a.active { #modemenu > li > a.active {
background-color: #002B49 !important; background-color: var(--dark-blue-color) !important;
} }
#modemenu > li.divider { #modemenu > li.divider {
margin-left: .25rem; margin-left: .25rem;
margin-right: .25rem; margin-right: .25rem;
border: .5rem solid var(--submenu-bg-hover); border: .5rem solid var(--gray-color);
border-left: 1px solid var(--submenu-bg-hover); border-left: 1px solid var(--gray-color);
border-right: 1px solid var(--submenu-bg-hover); border-right: 1px solid var(--gray-color);
border-radius: 1rem; border-radius: 1rem;
} }
@ -482,27 +473,6 @@ header > .fill > .container > .status > * {
display: flex; 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,
.alert-message { .alert-message {
font-weight: bold; font-weight: bold;
@ -510,7 +480,6 @@ header > .fill > .container > .status > * {
padding: 1rem; padding: 1rem;
border: 0; border: 0;
border-radius: 0 !important; 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); 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); text-shadow: 1px 1px rgba(0, 0, 0, .1);
} }
@ -528,6 +497,44 @@ header > .fill > .container > .status > * {
padding: .3rem .6rem; 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,
.container .alert-message { .container .alert-message {
margin-top: 1rem; margin-top: 1rem;
@ -555,16 +562,14 @@ header > .fill > .container > .status > * {
.main > .main-left > .nav > li a { .main > .main-left > .nav > li a {
display: block; display: block;
color: #5f6368; color: #5f6368;
color: var(--menu-color);
} }
.main > .main-left > .nav > li.active > a { .main > .main-left > .nav > li.active > a {
color: #fff; color: var(--white-color);
} }
.main > .main-left > .nav > li.active { .main > .main-left > .nav > li.active {
background-color: #09c; background-color: var(--primary-color);
background-color: var(--submenu-bg-hover-active);
} }
.main > .main-left > .nav > li.slide.active { .main > .main-left > .nav > li.slide.active {
@ -592,8 +597,7 @@ header > .fill > .container > .status > * {
width: 100%; width: 100%;
padding: .5rem 1rem; padding: .5rem 1rem;
text-decoration: none; text-decoration: none;
color: #202124; color: var(--black-color-low);
color: var(--main-menu-color);
} }
.main > .main-left > .nav > .slide > .menu::before { .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 > li:hover,
.main > .main-left > .nav > .slide > .menu:hover { .main > .main-left > .nav > .slide > .menu:hover {
background: #d4d4d4; background: var(--gray-color);
background: var(--submenu-bg-hover);
} }
.main > .main-left > .nav > .slide:hover { .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 { .main > .main-left > .nav > .slide > .slide-menu > .active {
background-color: #09c; background-color: var(--primary-color);
background-color: var(--submenu-bg-hover-active);
} }
.main > .main-left > .nav > .slide > .slide-menu > li > a { .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 { .main > .main-left > .nav > .slide > .slide-menu > .active > a {
color: #fff; color: var(--white-color);
} }
.main > .main-left > .nav > .slide > .slide-menu > li:hover { .main > .main-left > .nav > .slide > .slide-menu > li:hover {
background: #d4d4d4; background: var(--gray-color);
background: var(--submenu-bg-hover);
} }
.main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a { .main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
color: #202124; color: #5f6368;
color: var(--menu-color-hover);
} }
.main > .main-left > .nav > .slide > .slide-menu > .active:hover { .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
background-color: #09c; background-color: var(--primary-color);
background-color: var(--main-color);
} }
/* ripple effect */ /* ripple effect */
@ -692,7 +691,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
transform: scale(10, 10); transform: scale(10, 10);
pointer-events: none; pointer-events: none;
opacity: 0; 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-repeat: no-repeat;
background-position: 50%; background-position: 50%;
} }
@ -767,7 +766,7 @@ h5 {
padding: 2rem; padding: 2rem;
border: 0; border: 0;
border-radius: 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); 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 { .cbi-section-table-row {
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center !important; text-align: center !important;
background: #f4f4f4; background: var(--white-color-low);
} }
.cbi-section-table-row:last-child { .cbi-section-table-row:last-child {
@ -915,7 +914,7 @@ tr > th,
div > table > tbody > tr:nth-of-type(2n), div > table > tbody > tr:nth-of-type(2n),
div > .table > .tr:nth-of-type(2n) { div > .table > .tr:nth-of-type(2n) {
background-color: #f9f9f9; background-color: var(--white-color-low);
} }
/* fix multiple table */ /* fix multiple table */
@ -1042,8 +1041,8 @@ td > table > tbody > tr > td,
.cbi-button[name="restart"], .cbi-button[name="restart"],
.cbi-button[onclick="hide_empty(this)"] { .cbi-button[onclick="hide_empty(this)"] {
font-weight: bold; font-weight: bold;
border: thin solid #bfbfbf; border: thin solid var(--gray-color-high);
background-color: #d4d4d4; background-color: var(--gray-color);
} }
/* dark blue */ /* dark blue */
@ -1059,9 +1058,9 @@ td > table > tbody > tr > td,
.cbi-button[value^="Back"], .cbi-button[value^="Back"],
.cbi-button-neutral[onclick="handleConfig(event)"] { .cbi-button-neutral[onclick="handleConfig(event)"] {
font-weight: normal; font-weight: normal;
color: #fff; color: var(--on-dark-blue-color);
border: thin solid #2e6da4; border: thin solid var(--dark-blue-color-high);
background-color: #337ab7; background-color: var(--dark-blue-color);
} }
/* light blue */ /* light blue */
@ -1076,9 +1075,9 @@ td > table > tbody > tr > td,
.cbi-button[value$="Apply"], .cbi-button[value$="Apply"],
.cbi-button[onclick="addKey(event)"] { .cbi-button[onclick="addKey(event)"] {
font-weight: normal; font-weight: normal;
color: #fff; color: var(--on-light-blue-color);
border: thin solid #46b8da; border: thin solid var(--light-blue-color-high);
background-color: #5bc0de; background-color: var(--light-blue-color);
} }
/* red */ /* red */
@ -1092,9 +1091,9 @@ td > table > tbody > tr > td,
.cbi-button[onclick="reboot(this)"], .cbi-button[onclick="reboot(this)"],
.cbi-button-neutral[value="Restart"] { .cbi-button-neutral[value="Restart"] {
font-weight: normal; font-weight: normal;
color: #fff; color: var(--on-red-color);
border: thin solid #d43f3a; border: thin solid var(--red-color-high);
background-color: #d9534f; background-color: var(--red-color);
} }
/* yellow */ /* yellow */
@ -1106,9 +1105,9 @@ td > table > tbody > tr > td,
.cbi-button[onclick="handleReset(event)"], .cbi-button[onclick="handleReset(event)"],
.cbi-button-neutral[value="Disable"] { .cbi-button-neutral[value="Disable"] {
font-weight: normal; font-weight: normal;
color: #fff; color: var(--on-yellow-color);
border: thin solid #eea236; border: thin solid var(--yellow-color-high);
background-color: #f0ad4e; background-color: var(--yellow-color);
} }
/* green */ /* green */
@ -1118,9 +1117,9 @@ td > table > tbody > tr > td,
.cbi-button[value="Download"], .cbi-button[value="Download"],
.cbi-button[value="Save mtdblock"] { .cbi-button[value="Save mtdblock"] {
font-weight: normal; font-weight: normal;
color: #fff; color: var(--on-green-color);
border: thin solid #4cae4c; border: thin solid var(--green-color-high);
background-color: #5cb85c; background-color: var(--green-color);
} }
.cbi-page-actions .cbi-button-link:first-child { .cbi-page-actions .cbi-button-link:first-child {
@ -1140,7 +1139,7 @@ td > table > tbody > tr > td,
.tabs { .tabs {
margin: 0 -2rem; margin: 0 -2rem;
padding-left: .5rem; padding-left: .5rem;
background-color: #fff; background-color: var(--white-color);
} }
.tabs > li, .tabs > li,
@ -1157,8 +1156,7 @@ td > table > tbody > tr > td,
.tabs > li[class~="active"], .tabs > li[class~="active"],
.tabs > li:hover { .tabs > li:hover {
border-bottom-color: #09c; border-bottom-color: var(--primary-color);
border-bottom-color: var(--main-color);
} }
.tabs > li:hover { .tabs > li:hover {
@ -1174,12 +1172,11 @@ td > table > tbody > tr > td,
} }
.tabs > li[class~="active"] > a { .tabs > li[class~="active"] > a {
color: #09c; color: var(--primary-color);
color: var(--main-color);
} }
.cbi-tabmenu { .cbi-tabmenu {
border: thin solid #d4d4d4; border: thin solid var(--gray-color);
border-bottom: 0; border-bottom: 0;
} }
@ -1188,16 +1185,16 @@ td > table > tbody > tr > td,
} }
.cbi-tabmenu > li[class~="cbi-tab"] { .cbi-tabmenu > li[class~="cbi-tab"] {
background-color: #fff; background-color: var(--white-color);
} }
.cbi-tabmenu { .cbi-tabmenu {
background-color: #d4d4d4; background-color: var(--gray-color);
} }
.cbi-section .cbi-section-remove:nth-of-type(2n), .cbi-section .cbi-section-remove:nth-of-type(2n),
.container > .cbi-section .cbi-section-node: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] { [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-remove:nth-of-type(4n+3),
.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) { .cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
background-color: #f9f9f9; background-color: var(--white-color-low);
} }
.cbi-section-node-tabbed { .cbi-section-node-tabbed {
margin-top: 0; margin-top: 0;
padding: 0; padding: 0;
border: thin solid #d4d4d4; border: thin solid var(--gray-color);
border-top: 0; border-top: 0;
} }
.cbi-tabcontainer > .cbi-value:nth-of-type(2n) { .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
background-color: #f9f9f9; background-color: var(--white-color-low);
} }
.cbi-value-field, .cbi-value-field,
@ -1281,8 +1278,8 @@ td > table > tbody > tr > td,
} }
.cbi-input-invalid { .cbi-input-invalid {
color: #f00; color: var(--error-color);
border-bottom-color: #f00; border-bottom-color: var(--error-color);
} }
.cbi-section-error { .cbi-section-error {
@ -1290,7 +1287,7 @@ td > table > tbody > tr > td,
line-height: 1.42857143; line-height: 1.42857143;
margin: 18px; margin: 18px;
padding: 6px; padding: 6px;
border: thin solid #f00; border: thin solid var(--error-color);
border-radius: 3px; border-radius: 3px;
background-color: #fce6e6; background-color: #fce6e6;
} }
@ -1301,7 +1298,7 @@ td > table > tbody > tr > td,
.cbi-section-error ul li { .cbi-section-error ul li {
font-weight: bold; font-weight: bold;
color: #f00; color: var(--error-color);
} }
.td[data-title]::before { .td[data-title]::before {
@ -1332,7 +1329,7 @@ td > table > tbody > tr > td,
} }
.cbi-rowstyle-1 { .cbi-rowstyle-1 {
background-color: #f9f9f9; background-color: var(--white-color-low);
} }
.cbi-rowstyle-2 { .cbi-rowstyle-2 {
@ -1342,7 +1339,7 @@ td > table > tbody > tr > td,
.cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down, .cbi-rowstyle-2 .cbi-button-down,
body:not(.Interfaces) .cbi-rowstyle-2:first-child { 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 { .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; padding: 0 6px;
content: "\00D7"; content: "\00D7";
pointer-events: auto; pointer-events: auto;
color: #fff; color: var(--white-color);
border: thin solid #d43f3a; border: thin solid var(--red-color);
background-color: #d9534f; background-color: var(--red-color-high);
} }
.cbi-dynlist > .item > span { .cbi-dynlist > .item > span {
@ -1500,7 +1497,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
font-weight: bold; font-weight: bold;
display: none; display: none;
color: #777; color: #777;
text-shadow: 1px 1px 0 #fff; text-shadow: 1px 1px 0 var(--white-color);
} }
.cbi-dropdown > ul > li { .cbi-dropdown > ul > li {
@ -1564,7 +1561,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
border: thin solid #918e8c; border: thin solid #918e8c;
background: #f6f6f6; background: #f6f6f6;
box-shadow: 0 0 4px #918e8c; box-shadow: 0 0 4px #918e8c;
color: var(--main-menu-color); color: var(--black-color-low);
} }
.cbi-dropdown > ul > li[display], .cbi-dropdown > ul > li[display],
@ -1646,8 +1643,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
width: 0; width: 0;
height: 100%; height: 100%;
transition: width .25s ease-in; transition: width .25s ease-in;
background: #5bc0de; background: var(--light-blue-color);
background: var(--bar-bg);
} }
.cbi-progressbar::after { .cbi-progressbar::after {
@ -1693,7 +1689,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
margin: 5em auto; margin: 5em auto;
padding: 1em; padding: 1em;
border-radius: 3px !important; 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); 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 { .modal p {
padding-left: .25rem; padding-left: .25rem;
word-break: break-word; word-break: break-word;
color: #fff;
} }
.modal label.btn { .modal label.btn {
@ -1749,10 +1744,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
padding-top: 0.2rem; padding-top: 0.2rem;
} }
.modal label.warning {
background-color: #f0ad4e !important;
}
.modal.cbi-modal { .modal.cbi-modal {
max-width: 90%; max-width: 90%;
max-height: none; max-height: none;
@ -1889,7 +1880,7 @@ td > .ifacebadge,
min-width: 220px; min-width: 220px;
margin: .5em .25em 0 .25em; margin: .5em .25em 0 .25em;
padding: .5em; padding: .5em;
background-color: #fff; background-color: var(--white-color);
} }
#dsl_status_table .ifacebox-body span > strong { #dsl_status_table .ifacebox-body span > strong {
@ -1903,7 +1894,7 @@ td > .ifacebadge,
width: 100%; width: 100%;
min-height: 14rem; min-height: 14rem;
padding: .8rem; padding: .8rem;
color: #000; color: var(--black-color);
} }
#syslog { #syslog {
@ -2001,7 +1992,7 @@ td > .ifacebadge,
#iwsvg, #iwsvg,
#iwsvg2, #iwsvg2,
#bwsvg { #bwsvg {
border: thin solid #d4d4d4 !important; border: thin solid var(--gray-color) !important;
} }
#iwsvg, #iwsvg,
@ -2015,7 +2006,7 @@ td > .ifacebadge,
flex-direction: column; flex-direction: column;
min-width: 100px; min-width: 100px;
border-bottom: thin solid #ccc; 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); 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 { .ifacebox-head.active {
background: #5bc0de; background: var(--light-blue-color);
background: var(--bar-bg);
} }
.ifacebox-body { .ifacebox-body {
@ -2129,7 +2119,7 @@ span[data-tooltip] .label {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
border-radius: 3px; border-radius: 3px;
background: #fff; background: var(--white-color);
box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444;
} }
@ -2179,7 +2169,7 @@ span[data-tooltip] .label {
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: #fff !important; color: var(--white-color) !important;
border-radius: 3px; border-radius: 3px;
background-color: #bfbfbf; background-color: #bfbfbf;
text-shadow: none; text-shadow: none;
@ -2269,7 +2259,7 @@ input[name="nslookup"] {
margin-top: 2rem !important; margin-top: 2rem !important;
padding: 1rem 3.5rem 2rem; padding: 1rem 3.5rem 2rem;
text-align: left; 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); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
} }

51
themes/luci-theme-material/htdocs/luci-static/material/custom.css
View file

@ -1,13 +1,44 @@
:root { :root {
--main-color: #00B5E2; /** General colors */
--header-bg: #00B5E2; --white-color: #ffffff;
--header-color: #fff; --white-color-low: #f9f9f9;
--bar-bg: #5bc0de; --black-color: #000000;
--menu-bg-color: #fff; --black-color-low: #202124;
--menu-color: #5f6368; --yellow-color: #f0ad4e;
--menu-color-hover: #202124; --yellow-color-high: #eea236;
--main-menu-color: #202124; --on-yellow-color: var(--white-color);
--submenu-bg-hover: #d4d4d4; --red-color: #d9534f;
--submenu-bg-hover-active: #00B5E2; --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"; --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
} }