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

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>

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";
 }