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>

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 337a938df50f1692c4daca314a0c1d165e7aa9cc..b2eb0602eb9ebb4b8d2572a46069e8f6f82de088 100644 (file)
--- 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 b2515fb5aa4c89902f5d6c2df55830094854baba..b9ad8bbeb86b1af91357f63482b57b4a6a2c21c7 100644 (file)
--- 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";
 }