From 1290711f947739dcccc00fe33eb53f686d4170e9 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Mon, 20 Nov 2017 17:53:12 +0100 Subject: [PATCH] CSS: Dark styles for menu --- public/css/icinga/base.less | 11 ++ public/css/icinga/layout-structure.less | 10 +- public/css/icinga/layout.less | 17 +-- public/css/icinga/menu.less | 161 +++++++++++++++++------- public/css/icinga/responsive.less | 10 -- public/img/icons/search.png | Bin 491 -> 1352 bytes 6 files changed, 141 insertions(+), 68 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index dcacb0171..5c79ec3b2 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -46,6 +46,17 @@ @tr-active-color: #E5F9FF; @tr-hover-color: #F5FDFF; +// Menu colors +@menu-bg-color: #494949; +@menu-active-bg-color: #333; +@menu-flyout-bg-color: @body-bg-color; +@menu-color: @text-color-inverted; +@menu-highlight-color: @icinga-blue; +@menu-2ndlvl-color: #c4c4c4; +@menu-2ndlvl-highlight-color: @text-color-inverted; +@menu-flyout-bg-color: @body-bg-color; +@menu-flyout-color: @text-color; + // Font families @font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @font-family-fixed: "Liberation Mono", "Lucida Console", Courier, monospace; diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less index cee595064..806627fa2 100644 --- a/public/css/icinga/layout-structure.less +++ b/public/css/icinga/layout-structure.less @@ -6,15 +6,14 @@ html { #layout { height: 100%; - left: 0; - position: fixed; - top: 0; width: 100%; + position: fixed; + left: 0; + top: 0; } #header { width: 100%; - padding-bottom: 3em; position: fixed; left: 0; @@ -24,7 +23,6 @@ html { #sidebar { width: 12em; - position: fixed; bottom: 0; left: 0; @@ -32,9 +30,9 @@ html { } #main { + position: fixed; bottom: 0; left: 12em; - position: fixed; right: 0; top: 2.25em; } diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index d5ed36a6f..5ecd9a535 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -56,8 +56,8 @@ width: 100%; &:focus { - outline: none; opacity: .6; + outline: none; } } @@ -127,7 +127,12 @@ } // Mobile menu +#layout.minimal-layout #sidebar { + background-color: @menu-bg-color; +} + #mobile-menu-toggle { + color: @menu-color; text-align: right; > button { @@ -142,10 +147,6 @@ } } -#sidebar { - background-color: @gray-lighter; -} - .container, .error-message { // Don't outline containers and error messages when focused because they receive focus for accessibility only @@ -246,7 +247,7 @@ html.no-js .controls > .tabs { z-index: 2; } -// Collpased sidebar +// Collapsed sidebar #layout.sidebar-collapsed { #header-logo-container { height: 3.167em; @@ -300,8 +301,10 @@ html.no-js .controls > .tabs { } #search:focus { - background-color: @gray-lighter; + background-color: @menu-bg-color; + border-radius: 0 .25em .25em 0; box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2); + color: @menu-color; padding-left: 3.75em; width: 20em; position: fixed; diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 1c384ba9f..c8b765ae8 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -10,11 +10,14 @@ @icon-width: 1.7em; // 1.5em width + 0.2em right margin #menu { + background-color: @menu-bg-color; + box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3); height: 100%; overflow: auto; } #layout:not(.minimal-layout) #menu { + // Space for the #toggle-sidebar button padding-bottom: 2.25em; } @@ -23,21 +26,13 @@ > a { &:focus { - color: @icinga-blue; outline: none; } &:hover { - color: @icinga-blue; text-decoration: none; } } - - &.active { - > a { - color: @icinga-blue; - } - } } #layout:not(.sidebar-collapsed) #menu .nav-item > a { @@ -54,28 +49,37 @@ } #menu .nav-level-1 > .nav-item { - border-left: 5px solid transparent; line-height: 2.167em; // 26 px + color: @menu-color; &.active { - > a > .badge { - display: none; + > a { + font-weight: @font-weight-bold; + letter-spacing: .02em; + + > .badge { + display: none; + } } - background-color: @body-bg-color; - border-color: @icinga-blue; + background-color: @menu-active-bg-color; } &.no-icon > a { - margin-left: @icon-width; + padding-left: @icon-width; } > a { - padding: 0.5em 0.5em; // 6px 6px + padding: 0.5em 0.5em 0.5em .75em; + + &:focus, &:hover { + color: @menu-highlight-color; + } } - > a:active ~ .nav-level-2 > li { - display: block; + // Balance icon weight for non active menu items + &:not(.active) > a > i { + opacity: 0.8 } } @@ -83,11 +87,49 @@ // Collapse menu by default display: none; line-height: 1.833em; // 22px - margin-left: @icon-width; + padding-left: @icon-width; > a { + color: @menu-2ndlvl-color; font-size: @font-size-small; - padding: 0.364em 0.545em; // 4px 6px + padding: 0.364em 0.545em 0.364em .8em; + + &:hover, &:focus { + color: @menu-2ndlvl-highlight-color; + } + } + + &.active { + background-color: @menu-highlight-color; + overflow: hidden; + position: relative; + + > a { + &:focus, &:hover { + font-weight: @font-weight-bold; + } + } + } + + // Little caret on active level-2 item + &.active:after { + background-color: @body-bg-color; + box-shadow: 0 0 1em 0 rgba(0,0,0,.6); + content: ""; + display: block; + height: 1.25em; + width: 1.25em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + position: absolute; + top: .5em; + right: -.75em; + } + + &.active > a { + color: @menu-color; } } @@ -111,10 +153,14 @@ line-height: 1; margin: 0 0.5em -.05em 0.25em; width: 1em; + -webkit-filter: invert(100%); + -moz-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } -#menu .user-nav-item { - background-color: @gray-light; +.nav-item:hover img.icon { + opacity: .6; } #menu input.search { @@ -122,13 +168,13 @@ background-size: 1em auto; border: none; border-left: 5px solid transparent; + color: @menu-color; line-height: 2.167em; padding-left: @icon-width + 0.5em; width: 100%; &.active { - background-color: @body-bg-color; - border-color: @icinga-blue; + background-color: @menu-active-bg-color; } } @@ -139,6 +185,7 @@ #menu .nav-level-2 > .badge-nav-item > a > .badge { margin-top: 0.2em; + margin-right: .5em } // Hovered menu @@ -146,28 +193,52 @@ #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover { > .nav-level-2 { &:before { - border: 0.5em solid rgba(0, 0, 0, 0); - border-right-color: @text-color; + background-color: @menu-flyout-bg-color; + border-bottom: 1px solid @gray-light; + border-left: 1px solid @gray-light; content: ""; + height: 1em; + margin-left: -.5em; + margin-top: 0.625em; + transform: rotate(45deg); width: 1em; - position: fixed; - margin-left: -1em; - margin-top: 0.5em; + position: absolute; } - background-color: @text-color; - color: @text-color-inverted; + background-color: @menu-flyout-bg-color; + border: 1px solid @gray-light; + border-radius: .25em; + box-shadow: 0 0 1em 0 rgba(0,0,0,.3); padding: @vertical-padding 0; - position: fixed; width: 14em; + position: fixed; > .nav-item { display: block; - margin-left: 0.5em; + padding-left: 0; + position: relative; - > a:hover { - color: @text-color-inverted; - text-decoration: underline; + > a { + color: @menu-flyout-color; + padding-left: 1.5em; + + &:hover, &:focus { + background-color: @tr-active-color; + } + } + + &.active > a { + color: @menu-color; + + &:focus, &:hover { + background-color: @menu-highlight-color; + font-weight: @font-weight-bold; + } + } + + // Hide activity caret when displayed as flyout + &:after { + display: none; } } } @@ -184,7 +255,7 @@ #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover { > .nav-level-2 { // Position relative to parent - margin-left: 15.583em; + margin-left: 16em; margin-top: -3.167em; } } @@ -192,7 +263,7 @@ #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover { > .nav-level-2 { // Position relative to parent - margin-left: 3.583em; + margin-left: 4em; margin-top: -3.333em; } } @@ -238,18 +309,20 @@ .search-reset { background: none; border: 0; + color: @menu-color; cursor: pointer; display: none; height: 100%; padding: 0; + user-select: none; position: absolute; right: 0; top: 0; - user-select: none; -} -.search-reset:focus { - outline: 0; + &:focus, &:hover { + color: @menu-highlight-color; + outline: none; + } } // Override forms.less @@ -305,15 +378,13 @@ input[type=text].search-input { background: none; border: none; padding: 0; - color: @gray-light; - position: absolute; bottom: 0; right: 0; i { - background: @body-bg-color; + background-color: @body-bg-color; border-radius: .25em 0 0 .25em; font-size: 1.5em; width: 2em; @@ -325,7 +396,7 @@ input[type=text].search-input { &:hover, &:focus { i { - color: @icinga-blue; + color: @menu-highlight-color; } } } diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less index 3af0a8b02..c88c4efb9 100644 --- a/public/css/icinga/responsive.less +++ b/public/css/icinga/responsive.less @@ -106,16 +106,6 @@ #layout.twocols #col2 { border-left: 1px solid @gray-lighter; display: block; - - > .controls > .tabs:before { - background-color: @icinga-blue; - content: ""; - display: block; - height: 3em; - margin-left: -1px; - width: 1px; - position: fixed; - } } #layout.twocols > #main > .container { diff --git a/public/img/icons/search.png b/public/img/icons/search.png index a66c3ca95b50879192508d22c4b3544b140246ad..638be2ecb9953ce5ecf1a2e4126f1e1dde06ded7 100644 GIT binary patch literal 1352 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4(FKU<%C)i71Ki^|4CM&(%vz$xlkv ztH>-n*TA>HIW;5GqpB!1xXLdi zxhgx^GDXSWj?1RP3TQxXYDuC(MQ%=Bu~mhw64+cTAR8pCucQE0Qj%?}6yY17;GAES zs$i;Ts%M~N$E9FXl#*r@k>g7FXt#Bv$C=6)S^`fSBQuTAW;zSx}OhpQivaGchT@w8U0P2`H}sHM}G<4Pkm- zG1U9OfY1lY=o{)8=p!o!dJFCr6x9`p1sIA`D>BnuBjDF+Xl$`>eo87(CD>e`&0sMgS05BT`q20RMzlUW zrhy!IT1m|VCXgavN{CK<-^{?k*p%t)98etO?xf)9>TG6cX=bKtq-V&$pfRy@;(hJr zK#Ak_w=^It!Hm*)pfU@dfO#rUKjg8ykK>V zw(F85cXq1fU3gvT>$~asmpRXi_dU1qe{RG6=Hi-J##vR0)Ae6W+}L0wJUetwzsZAT zg8IybS1-67dMFV3_AT3N(e=C5MqNGsH=CE+)0s7T?uQMlUa~$ce0agjadSoRj?lA5 z#9R7X_wI@b_;Kr!aBAHqi`ZxU-Cr|QIKHJNs{ZX3-XC%Hg=J!;<-C}($iF-LzY2vL z+1sjablxM|%#q9zFe71#LftQkNjLq??W$5-r~bM3{*UK0mGG&Ni#yIKWg3Yr+0J!3 z$X3%(wJOMM+M=uf_t%;R{oPko8qSa<@AG-7@Eqw6kw#~~*Ixc(!*JYo&QtB5-qi*_ zw5nDvsw`WW$?JDcJ1U9W@A|^Ge%-G>=ATr|^I!VlC&wMbjGZmNb{3tl`)0YP^~I{1 ztE@Ti9j4F8pY@+<=DYO23j8;|0rNCxfk$L90|U1(2s1Lwnj-;>B5qF?#}JF&rI+@5 z#RLklKe*4ElRPo3LxVFzJ!9pBvfU;^tle*eBe?c8JKZ~=wtj^BJ=zagQYaZhNGcXK?qLn$?b@Rl!9K{mI8_Dz^7FFJsv=n<3)R z)yKcZpUV8@_V{GIb?NoSZWV1|hWyDqv!iYwFKWZY=-s9piQ#bBg)Xq9b{E5)|3hM)qBYyw{b3#c}2nYxWd5(!XldL4Obc;O_!yEPMcM%?^kt zB0_|KB1tQV2o{16P(geI8;cbFc>uu_TA4x{wGq^qB7zSfWEM4QY(jb)jc0McgERL# zbD45y=G$R*JKb(qKO)K;7I3mTTEp$kx@1Ij`andvi}QGaxA=ooxQO?-o>_mj0ukj7 zE@39KZVVPglz;trg{{nbZU`u4Y7UQaJhN`LjTuoUv4NYJ_32=40{8J`R5LWA-@~P0<6rci+ZoT*a}b{tIR^>-s;yz)cr0k4wXP3;Tpe_<)xvSjXAS`gI8S zUqqCHc!Ow=Gnw`K*gy;N5tsJ_G{^xw#|ix0GteN1^!D=OFMN)5_llc_TL1t607*qo IM6N<$g27_M`2YX_