tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css: Fix menu hover/focus styles

This commit is contained in:
Johannes Meyer 2021-07-01 17:47:14 +02:00
parent da950c8559
commit dedb63b7af
2 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,16 +63,20 @@
// Menu colors
@menu-bg-color: #06062B;
@menu-hover-bg-color: fade(@menu-bg-color, 50%);
@menu-search-hover-bg-color: darken(@menu-bg-color, 20%);
@menu-hover-bg-color: lighten(@menu-bg-color, 5%);
@menu-search-hover-bg-color: @menu-hover-bg-color;
@menu-active-bg-color: #181742;
@menu-active-hover-bg-color: darken(@menu-active-bg-color, 20%);
@menu-active-hover-bg-color: lighten(@menu-active-bg-color, 5%);
@menu-color: #DBDBDB;
@menu-active-color: @text-color;
@menu-highlight-color: @icinga-blue;
@menu-highlight-hover-bg-color: @icinga-blue-dark;
@menu-2ndlvl-color: #c4c4c4;
@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
@menu-2ndlvl-highlight-color: @text-color-inverted;
@menu-2ndlvl-active-bg-color: @menu-highlight-color;
@menu-2ndlvl-active-color: @text-color-inverted;
@menu-2ndlvl-active-hover-bg-color: darken(@menu-2ndlvl-active-bg-color, 5%);
@menu-2ndlvl-active-hover-color: @menu-2ndlvl-active-color;
@menu-flyout-bg-color: @body-bg-color;
@menu-flyout-color: @text-color;
@tab-hover-bg-color: fade(@body-bg-color, 50%);
@ -118,10 +122,11 @@
--menu-color: #676767;
--menu-bg-color: #DEECF1;
--menu-hover-bg-color: fade(#DEECF1, 50%);
--menu-search-hover-bg-color: darken(#DEECF1, 20%);
--menu-hover-bg-color: darken(#DEECF1, 10%);
--menu-search-hover-bg-color: darken(#DEECF1, 10%);
--menu-active-bg-color: #EDF7FC;
--menu-active-hover-bg-color: darken(#EDF7FC, 20%);
--menu-highlight-hover-bg-color: darken(#EDF7FC, 20%);
--menu-2ndlvl-color: #7E8182;
--text-color: #535353;

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

@ -112,9 +112,9 @@
.var(background-color, menu-highlight-color);
.var(color, text-color-inverted);
&:hover {
.var(color, text-color-inverted);
&:hover,
&:focus {
.var(background-color, menu-highlight-hover-bg-color);
}
&:after {
@ -145,7 +145,6 @@
}
&.active {
.var(background-color, menu-highlight-color);
overflow: hidden;
position: relative;
}
@ -167,7 +166,13 @@
}
&.active > a {
.var(color, menu-2ndlvl-highlight-color);
.var(color, menu-2ndlvl-active-color);
.var(background-color, menu-2ndlvl-active-bg-color);
&:hover, &:focus {
.var(color, menu-2ndlvl-active-hover-color);
.var(background-color, menu-2ndlvl-active-hover-bg-color);
}
}
}
@ -216,6 +221,13 @@
padding-left: @icon-width + .75em;
width: 100%;
&:focus::placeholder {
.var(color, menu-color);
}
&:focus::-ms-input-placeholder {
color: @menu-color;
}
&.active {
.var(background-color, menu-active-bg-color);
}
@ -278,8 +290,8 @@
}
&:not(.active) {
&:hover, &:focus {
.var(background-color, tr-active-color);
a:hover, a:focus {
.var(background-color, menu-2ndlvl-highlight-bg-color);
}
}
@ -501,8 +513,8 @@ html.no-js #toggle-sidebar {
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.nav-item:not(.badge-nav-item) {
&:not(.selected):not(.active):hover,
&:not(.selected):not(.active):focus {
&:not(.selected):not(.active) a:hover,
&:not(.selected):not(.active) a:focus {
.var(background-color, menu-2ndlvl-highlight-bg-color);
}
}
@ -535,7 +547,8 @@ html.no-js #toggle-sidebar {
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) {
&:hover {
a:hover,
a:focus {
.var(background-color, menu-2ndlvl-highlight-bg-color);
}
}