From dedb63b7af23cfe4f7d50e226409a153824e5892 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 1 Jul 2021 17:47:14 +0200 Subject: [PATCH 1/5] css: Fix menu hover/focus styles --- public/css/icinga/base.less | 17 +++++++++++------ public/css/icinga/menu.less | 33 +++++++++++++++++++++++---------- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index c903d692d..74435b562 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -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; diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 0257b4c5b..250f4cc29 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -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); } } From 39f3d9723505e5289b5d221dd4731c978ab4c6f2 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 1 Jul 2021 17:47:37 +0200 Subject: [PATCH 2/5] Winter.less: Adjust menu adjustments --- public/css/themes/Winter.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less index f522a3df5..0669542ca 100644 --- a/public/css/themes/Winter.less +++ b/public/css/themes/Winter.less @@ -8,6 +8,8 @@ @tr-active-color: #dadeea; @tr-hover-color: #c6cfe4; +@menu-2ndlvl-highlight-bg-color: transparent; +@menu-2ndlvl-active-color: @text-color; /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */ #login, #header-logo-container, #main > .container > .controls > .tabs { @@ -61,4 +63,4 @@ > a:hover, > a:focus { color: white; } -} \ No newline at end of file +} From 23aa65627282cd4da92a83db066b77165ae62a73 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 1 Jul 2021 17:47:59 +0200 Subject: [PATCH 3/5] high-contrast.less: Adjust menu adjustments --- public/css/themes/high-contrast.less | 1 + 1 file changed, 1 insertion(+) diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index 90ef7d82b..995127ba8 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -34,6 +34,7 @@ @menu-highlight-color: white; @menu-2ndlvl-color: white; @menu-2ndlvl-highlight-color: white; +@menu-2ndlvl-active-hover-color: @text-color; #menu ul.nav-level-1 > .nav-item > a { &:focus, &:hover { From a494eb1c74710d6344f2e577eec41c6c4774389f Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 1 Jul 2021 17:48:14 +0200 Subject: [PATCH 4/5] solarized-dark.less: Adjust menu adjustments --- public/css/themes/solarized-dark.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less index c4cdd7687..a8587901d 100644 --- a/public/css/themes/solarized-dark.less +++ b/public/css/themes/solarized-dark.less @@ -51,6 +51,8 @@ @menu-bg-color: @base02; @menu-active-bg-color: @base03; @menu-highlight-color: @icinga-blue; +@menu-2ndlvl-active-bg-color: lighten(@base03, 5%); +@menu-highlight-hover-bg-color: @base03; @menu-2ndlvl-color: #c4c4c4; @menu-flyout-color: @text-color; From edf97e9560ce8aa39e9b559ff6ec77d21fe1c1ac Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Fri, 2 Jul 2021 08:55:32 +0200 Subject: [PATCH 5/5] compat.less: Define `@menu-2ndlvl-highlight-color` --- public/css/icinga/compat.less | 1 + 1 file changed, 1 insertion(+) diff --git a/public/css/icinga/compat.less b/public/css/icinga/compat.less index 95f7c2772..d57a18945 100644 --- a/public/css/icinga/compat.less +++ b/public/css/icinga/compat.less @@ -24,6 +24,7 @@ @colorFormNotificationWarning: #ffaa44; @colorFormNotificationError: #ff5566; @colorPetrol: @icinga-blue; +@menu-2ndlvl-highlight-color: @menu-2ndlvl-active-color; table.action { .common-table();