From 8ca6cc32b2c789a3149861159ad258f2cb9491e3 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 28 Apr 2024 14:39:39 +0200 Subject: Adding upstream version 2.11.4. Signed-off-by: Daniel Baumann --- public/css/icinga/configmenu.less | 303 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 303 insertions(+) create mode 100644 public/css/icinga/configmenu.less (limited to 'public/css/icinga/configmenu.less') diff --git a/public/css/icinga/configmenu.less b/public/css/icinga/configmenu.less new file mode 100644 index 0000000..05e50e8 --- /dev/null +++ b/public/css/icinga/configmenu.less @@ -0,0 +1,303 @@ +#menu { + margin-bottom: 3em; +} + +.sidebar-collapsed #menu { + margin-bottom: 8em; +} + +#menu .config-menu { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: @menu-bg-color; + margin-top: auto; + + > ul { + display: flex; + flex-wrap: nowrap; + padding: 0; + + > li { + > a { + padding: 0.5em 0.5em 0.5em 0.75em; + line-height: 2.167em; + white-space: nowrap; + text-decoration: none; + + } + + &:hover .nav-level-1 { + display: block; + } + } + + li.active a:after { + display: none; + } + + .user-nav-item { + width: 100%; + overflow: hidden; // necessary for .text-ellipsis of + + > a { + overflow: hidden; + text-overflow: ellipsis; + } + + &:not(.active):hover a, + &:not(.active) a:focus { + background: @menu-hover-bg-color; + } + } + + .config-nav-item { + line-height: 2; + display: flex; + align-items: center; + position: relative; + + > button { + background: none; + border: none; + display: block; + .rounded-corners(); + + > .state-badge { + position: absolute; + pointer-events: none; + } + + .icon { + opacity: .8; + font-size: 1.25em; + + &:before { + margin-right: 0; + } + } + } + + &:hover > button { + background: fade(@menu-hover-bg-color, 25); + + > .state-badge { + display: none; + } + } + + button:focus { + background: fade(@menu-hover-bg-color, 25); + } + + &.active > button { + color: @text-color-inverted; + background: @icinga-blue; + } + } + + .state-badge { + line-height: 1.2; + padding: .25em; + font-family: @font-family-wide; + } + } + + .nav-level-1 li { + &.badge-nav-item > a { + display: flex; + align-items: baseline; + width: 100%; + + .state-badge { + margin-left: auto; + } + } + } + + .nav-item-logout { + color: @color-critical; + border-top: 1px solid @gray-lighter; + } + + .user-ball { + .ball(); + .ball-size-l(); + .ball-solid(@icinga-blue); + + // icingadb-web/public/css/common.less: .user-ball + font-weight: bold; + text-transform: uppercase; + + // compensate border vertically and add space to the right; + margin: -1px .2em -2px 0; + border: 1px solid @text-color-inverted; + font-style: normal; + line-height: 1.2; + } +} + +#layout:not(.sidebar-collapsed) #menu .config-menu { + .user-nav-item { + > a { + padding-right: 4.75em; + } + + &.active.selected + .config-nav-item { + > button { + color: @text-color-inverted; + } + } + } + + .config-nav-item { + position: absolute; + right: 2.5em; + bottom: 0; + top: 0; + + .state-badge { + left: -1em; + top: 0; + } + } + + .flyout { + bottom: 100%; + right: -2em; + width: 15em; + } +} + +.sidebar-collapsed #menu .config-menu { + ul { + flex-direction: column; + + .user-ball { + margin-left: .25em * 1.5/2; + margin-right: .5em + .25em * 1.5/2; + width: 2em * 1.5/2 ; + height: 2em * 1.5/2; + font-size: 2/1.5em; + line-height: 1; + } + + .config-nav-item { + padding-right: 0; + margin-bottom: 3em; + + .icon { + font-size: 1.5em; + } + + button { + position: relative; + width: 3em; + margin: .125em .5em; + padding: .5em .75em; + + .state-badge { + right: -.25em; + bottom: -.25em; + font-size: .75em; + + overflow: hidden; + text-overflow: ellipsis; + max-width: 4em; + } + } + } + } + + .flyout { + bottom: 0; + left: 100%; + width: 14em; + + &:before { + left: -.6em; + bottom: 1em; + transform: rotate(135deg); + } + } +} + +.flyout { + display: none; + position: absolute; + border: 1px solid @gray-lighter; + background: @body-bg-color; + box-shadow: 0 0 1em 0 rgba(0,0,0,.25); + z-index: 1; + .rounded-corners(); + + a { + font-size: 11/12em; + padding: 0.364em 0.545em 0.364em 2em; + line-height: 2; + + &:hover { + text-decoration: none; + background: @menu-2ndlvl-highlight-bg-color; + } + } + + h3 { + font-size: 10/12em; + color: @text-color-light; + letter-spacing: .1px; + padding: 0.364em 0.545em 0.364em 0.545em; + margin: 0; + } + + .flyout-content { + overflow: auto; + // Partially escape to have ems calculated + max-height: calc(~"100vh - " 50/12em); + padding: .5em 0; + position: relative; + } + + // Caret + &:before { + content: ""; + display: block; + position: absolute; + transform: rotate(45deg); + background: @body-bg-color; + border-bottom: 1px solid @gray-lighter; + border-right: 1px solid @gray-lighter; + height: 1.1em; + width: 1.1em; + bottom: -.6em; + right: 2.5em; + } +} + +// Prevent flyout to vanish on autorefresh +#layout.config-flyout-open .config-nav-item { + .flyout { + display: block; + } + + > button > .state-badge { + display: none; + } +} + +#layout.minimal-layout .config-menu { + display: none; +} + +#layout.minimal-layout #menu { + margin-bottom: 0; +} + +#layout:not(.minimal-layout) #menu .primary-nav { + .user-nav-item, + .configuration-nav-item, + .system-nav-item { + display: none; + } +} -- cgit v1.2.3