openwrt-mirror/luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci.git synced 2025-12-21 19:14:34 +04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7008 from dannil/material-color-variables

Browse Source 
luci-theme-material: add back removed color variables
This commit is contained in:
Florian Eckert
2024-03-25 07:56:39 +01:00
committed by GitHub
parent e0542c28fb eeddf40ac9
commit 41c18218f3
2 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View File

@@ -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 {

19
themes/luci-theme-material/htdocs/luci-static/material/custom.css
View File

@@ -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);