luci-theme-material: add back removed color variables

Partially reverts 2bdabf14c30320ef0433828b1a080f6b8fe9c430 by adding back the deleted color variables as the custom.css was used by users to override the theme with their own colors. To maintain backwards compatibility with users we should not remove/rename these as it will result in colors being applied incorrectly.

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 b2eb0602eb9ebb4b8d2572a46069e8f6f82de088..ed5f88a42a46bf2cdda5531bbca0caa1aa8d01d7 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -212,7 +212,7 @@ select,
 select:not([multiple="multiple"]):focus,
 input:not(.cbi-button):focus,
 .cbi-dropdown:focus {
-       border-color: var(--primary-color);
+       border-color: var(--main-color);
 }
 
 .cbi-dropdown,
@@ -346,7 +346,7 @@ small {
        overflow-x: auto;
        width: calc(0% + 15rem);
        height: calc(100% - 4rem);
-       background-color: var(--white-color);
+       background-color: var(--menu-bg-color);
        transition: visibility 400ms, width 400ms;
 }
 
@@ -379,8 +379,8 @@ small {
 }
 
 header {
-       color: var(--secondary-color);
-       background: var(--primary-color);
+       color: var(--header-color);
+       background: var(--header-bg);
 }
 
 header > .fill > .container {
@@ -407,7 +407,7 @@ header > .fill > .container > .brand {
        cursor: default;
        vertical-align: text-bottom;
        text-decoration: none;
-       color: var(--white-color);
+       color: var(--header-color);
 }
 
 header > .fill > .container > .status {
@@ -429,8 +429,8 @@ header > .fill > .container > .status > * {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
-       color: var(--white-color);
-       background: var(--secondary-color);
+       color: var(--header-color);
+       background: var(--header-bg);
        padding: .5rem;
        transition: box-shadow .2s;
        box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
@@ -463,9 +463,9 @@ header > .fill > .container > .status > * {
 #modemenu > li.divider {
        margin-left: .25rem;
        margin-right: .25rem;
-       border: .5rem solid var(--gray-color);
-       border-left: 1px solid var(--gray-color);
-       border-right: 1px solid var(--gray-color);
+       border: .5rem solid var(--submenu-bg-hover);
+       border-left: 1px solid var(--submenu-bg-hover);
+       border-right: 1px solid var(--submenu-bg-hover);
        border-radius: 1rem;
 }
 
@@ -561,7 +561,7 @@ 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 {
@@ -569,7 +569,7 @@ header > .fill > .container > .status > * {
 }
 
 .main > .main-left > .nav > li.active {
-       background-color: var(--primary-color);
+       background-color: var(--submenu-bg-hover-active);
 }
 
 .main > .main-left > .nav > li.slide.active {
@@ -597,7 +597,7 @@ header > .fill > .container > .status > * {
        width: 100%;
        padding: .5rem 1rem;
        text-decoration: none;
-       color: var(--black-color-low);
+       color: var(--main-menu-color);
 }
 
 .main > .main-left > .nav > .slide > .menu::before {
@@ -635,7 +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: var(--gray-color);
+       background: var(--submenu-bg-hover);
 }
 
 .main > .main-left > .nav > .slide:hover {
@@ -643,7 +643,7 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active {
-       background-color: var(--primary-color);
+       background-color: var(--submenu-bg-hover-active);
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li > a {
@@ -657,15 +657,15 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
-       background: var(--gray-color);
+       background: var(--submenu-bg-hover);
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
-       color: #5f6368;
+       color: var(--menu-color-hover);
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
-       background-color: var(--primary-color);
+       background-color: var(--main-color);
 }
 
 /* ripple effect */
@@ -1156,7 +1156,7 @@ td > table > tbody > tr > td,
 
 .tabs > li[class~="active"],
 .tabs > li:hover {
-       border-bottom-color: var(--primary-color);
+       border-bottom-color: var(--main-color);
 }
 
 .tabs > li:hover {
@@ -1172,7 +1172,7 @@ td > table > tbody > tr > td,
 }
 
 .tabs > li[class~="active"] > a {
-       color: var(--primary-color);
+       color: var(--main-color);
 }
 
 .cbi-tabmenu {
@@ -1561,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(--black-color-low);
+       color: var(--main-menu-color);
 }
 
 .cbi-dropdown > ul > li[display],
@@ -1643,7 +1643,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
        width: 0;
        height: 100%;
        transition: width .25s ease-in;
-       background: var(--light-blue-color);
+       background: var(--bar-bg);
 }
 
 .cbi-progressbar::after {
@@ -2016,7 +2016,7 @@ td > .ifacebadge,
 }
 
 .ifacebox-head.active {
-       background: var(--light-blue-color);
+       background: var(--bar-bg);
 }
 
 .ifacebox-body {

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 b9ad8bbeb86b1af91357f63482b57b4a6a2c21c7..704df80d8d96f77c6a59640843df9151a753086d 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,3 +1,10 @@
+/**
+       The CSS variables in this file should be treated as a public API. The
+       colors have been put in a separate file to allow end users to
+       override the color variables with their own values by creating their
+       own custom.css file, which mean we can't delete/rename defined
+       variables which is already used in cascade.css.
+*/
 :root {
        /** General colors */
        --white-color: #ffffff;
@@ -22,9 +29,19 @@
        --light-blue-color-high: #46b8da;
        --on-light-blue-color: var(--white-color);
        
-       --primary-color: #00B5E2;
+       --main-color: #00B5E2;
        --secondary-color: #0099cc;
 
+       --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;
+
        --notice-color: #002B49;
        --on-notice-color: var(--white-color);