tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 15:54:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

menu.less: Use appropriate color variables based on usage

Browse Source
This commit is contained in:
Johannes Meyer 2021-04-13 10:43:52 +02:00
parent 4481c5b9c4
commit 06d0621a12
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/icinga/base.less
View File

@ -62,10 +62,11 @@
// Menu colors // Menu colors
@menu-bg-color: #06062B; @menu-bg-color: #06062B;
@menu-active-bg-color: #181742; @menu-active-bg-color: #181742;
@menu-flyout-bg-color: @body-bg-color;
@menu-color: #DBDBDB; @menu-color: #DBDBDB;
@menu-active-color: @text-color;
@menu-highlight-color: @icinga-blue; @menu-highlight-color: @icinga-blue;
@menu-2ndlvl-color: #c4c4c4; @menu-2ndlvl-color: #c4c4c4;
@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
@menu-2ndlvl-highlight-color: @text-color-inverted; @menu-2ndlvl-highlight-color: @text-color-inverted;
@menu-flyout-bg-color: @body-bg-color; @menu-flyout-bg-color: @body-bg-color;
@menu-flyout-color: @text-color; @menu-flyout-color: @text-color;

16
public/css/icinga/menu.less
View File

@ -68,7 +68,7 @@
color: @menu-color; color: @menu-color;
&.active { &.active {
color: @text-color; color: @menu-active-color;
> a > .badge { > a > .badge {
display: none; display: none;
@ -92,7 +92,7 @@
&:not(.selected) > a:hover, &:not(.selected) > a:hover,
&:not(.selected) > a:focus { &:not(.selected) > a:focus {
background-color: fade(@text-color-inverted, 50%) background-color: fade(@menu-bg-color, 50%)
} }
// Balance icon weight for non active menu items // Balance icon weight for non active menu items
@ -123,7 +123,7 @@
position: absolute; position: absolute;
right: -.75em; right: -.75em;
background-color: @body-bg-color; background-color: @menu-bg-color;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6); box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: ""; content: "";
display: block; display: block;
@ -167,7 +167,7 @@
} }
&.active > a { &.active > a {
color: @body-bg-color; color: @menu-2ndlvl-highlight-color;
} }
} }
@ -324,7 +324,7 @@
} }
a.badge { a.badge {
color: white; color: @text-color-inverted;
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 1em; margin-right: 1em;
padding: .25em; padding: .25em;
@ -500,7 +500,7 @@ html.no-js #toggle-sidebar {
&.nav-item:not(.badge-nav-item) { &.nav-item:not(.badge-nav-item) {
&:not(.selected):not(.active):hover, &:not(.selected):not(.active):hover,
&:not(.selected):not(.active):focus { &:not(.selected):not(.active):focus {
background-color: @tr-hover-color; background-color: @menu-2ndlvl-highlight-bg-color;
} }
} }
} }
@ -518,7 +518,7 @@ html.no-js #toggle-sidebar {
} }
&.badge-nav-item a.badge { &.badge-nav-item a.badge {
color: @body-bg-color; color: @text-color-inverted;
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 1em; margin-right: 1em;
padding: .25em; padding: .25em;
@ -533,7 +533,7 @@ html.no-js #toggle-sidebar {
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li { #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) { &.badge-nav-item:not(.selected) {
&:hover { &:hover {
background-color: @tr-hover-color; background-color: @menu-2ndlvl-highlight-bg-color;
} }
} }
} }