diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:46:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:46:43 +0000 |
commit | 3e02d5aff85babc3ffbfcf52313f2108e313aa23 (patch) | |
tree | b01f3923360c20a6a504aff42d45670c58af3ec5 /public/css/themes | |
parent | Initial commit. (diff) | |
download | icingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.tar.xz icingaweb2-3e02d5aff85babc3ffbfcf52313f2108e313aa23.zip |
Adding upstream version 2.12.1.upstream/2.12.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'public/css/themes')
-rw-r--r-- | public/css/themes/Winter.less | 30 | ||||
-rw-r--r-- | public/css/themes/colorblind.less | 29 | ||||
-rw-r--r-- | public/css/themes/high-contrast.less | 250 |
3 files changed, 309 insertions, 0 deletions
diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less new file mode 100644 index 0000000..2edf4f8 --- /dev/null +++ b/public/css/themes/Winter.less @@ -0,0 +1,30 @@ +/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ + +@icinga-blue: #2b95ff; +@control-color: @icinga-blue; + +.letitsnow { + background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png'); + animation: ~"snow" 10s linear infinite; +} + +#header-logo { + background-image: url('../img/winter/logo_icinga_big_winter.png'); +} + +/* Snow, from http://codepen.io/NickyCDK/pen/AIonk */ +#login, #header-logo-container, #main > .container > .controls > .tabs { + .letitsnow() +} + +@keyframes ~"snow" { + 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} + 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} + 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} +} + +#menu ul.nav-level-1 > .nav-item { + &:focus, &:hover { + .letitsnow() + } +} diff --git a/public/css/themes/colorblind.less b/public/css/themes/colorblind.less new file mode 100644 index 0000000..c6df585 --- /dev/null +++ b/public/css/themes/colorblind.less @@ -0,0 +1,29 @@ +/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */ + +@color-ok: fade(#77E08E, 25%); +@color-critical: #FE5566; +@color-critical-handled: fade(@color-critical, 33%); +@color-warning: #B0A029; +@color-warning-handled: fade(@color-warning, 33%); +@color-unknown: #7791E0; +@color-unknown-handled: fade(@color-unknown, 50%); +@color-unreachable: @color-unknown; +@color-unreachable-handled: @color-unknown-handled; +@color-pending: fade(#FFFFFF, 75%); + +/* Adapt font color to match handled / unhandled states */ +.badge, +.state-badge { + font-weight: bold; + color: @text-color !important; + + &.handled, + &.state-up, + &.state-ok { + color: fade(@text-color, 75%) !important; + } +} + +.processinfo .process > div.backend-running { + color: @text-color; +} diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less new file mode 100644 index 0000000..b22ffd5 --- /dev/null +++ b/public/css/themes/high-contrast.less @@ -0,0 +1,250 @@ +/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */ + +@icinga-blue: #006D8C; + +// Gray colors +@gray: #7F7F7F; +@gray-semilight: #A9A9A9; +@gray-light: #C9C9C9; +@gray-lighter: #EEEEEE; +@gray-lightest: #F7F7F7; +@disabled-gray: #9a9a9a; + +// State colors +@color-ok: #006400; +@color-critical: #EE0000; +@color-critical-handled: #EE0000; +@color-warning: #8B5A00; +@color-warning-handled: #8B5A00; +@color-unknown: #800080; +@color-unknown-handled: #800080; +@color-unreachable: #800080; +@color-unreachable-handled: #800080; +@color-pending: #0000EE; + +// Icinga colors +@low-sat-blue: #dae3e6; +@low-sat-blue-dark: #c0cccd; + +// Background color for <body> +@body-bg-color: @white; + +@text-color: #191919; +@text-color-light: #555555; + +@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 { + text-decoration: underline; + } +} + +#menu ul.nav-level-1 > .nav-item.active > a, +#menu .nav-level-1 > .nav-item.active:not(.selected) > a:hover { + color: @text-color; + background-color: @white; +} + +#menu .nav-level-2 > .nav-item.active { + background-color: @white; + + a { + color: @text-color; + } + + > a:focus, > a:hover { + opacity: 1; + } +} + +#menu .nav-level-2 > .nav-item > a { + &:hover, &:focus { + text-decoration: underline; + } +} + +#menu ul:not(.nav-level-2) > .selected > a { + color: @text-color; +} + +#menu .active > a { + text-decoration: underline; +} + +.badge:not(.handled), +.state-badge:not(.handled) { + &.state-warning { + border: 1px solid @color-warning; + } + + &.state-critical, + &.state-down { + border: 1px solid @color-critical; + } + + &.state-unreachable { + border: 1px solid @color-unreachable; + } + + &.state-unknown { + border: 1px solid @color-unknown; + } + + &.state-ok, + &.state-up { + border: 1px solid @color-ok; + } +} + +.badge.handled, +.badge.state-ok, +.state-badge.handled, +.state-badge.state-ok { + background-color: @body-bg-color !important; + color: @text-color !important; + + &.state-warning { + border: 1px solid @color-warning-handled; + } + + &.state-critical, + &.state-down { + border: 1px solid @color-critical-handled; + } + + &.state-unreachable { + border: 1px solid @color-unreachable-handled; + } + + &.state-unknown { + border: 1px solid @color-unknown-handled; + } +} + +.boxview a:focus { + color: @text-color; + text-decoration: underline; +} + +.icinga-module.module-monitoring { + @timeline-notification-color: #1650CF; + @timeline-hard-state-color: #A24600; + @timeline-comment-color: #346964; + @timeline-ack-color: #855D18; + @timeline-downtime-start-color: #515151; + @timeline-downtime-end-color: #5e5e2f; + + // Unfortunately it does not suffice to only override the timeline colors here, because our less compiler seems to + // have the related style block in module.less already evaluated + + .timeline-notification { + background-color: @timeline-notification-color; + + &.extrapolated { + background-color: lighten(@timeline-notification-color, 20%); + } + } + + .timeline-hard-state { + background-color: @timeline-hard-state-color; + + &.extrapolated { + background-color: lighten(@timeline-hard-state-color, 20%); + } + } + + .timeline-comment { + background-color: @timeline-comment-color; + + &.extrapolated { + background-color: lighten(@timeline-comment-color, 20%); + } + } + + .timeline-ack { + background-color: @timeline-ack-color; + + &.extrapolated { + background-color: lighten(@timeline-ack-color, 20%); + } + } + + .timeline-downtime-start { + background-color: @timeline-downtime-start-color; + + &.extrapolated { + background-color: lighten(@timeline-downtime-start-color, 20%); + } + } + + .timeline-downtime-end { + background-color: @timeline-downtime-end-color; + + &.extrapolated { + background-color: lighten(@timeline-downtime-end-color, 20%); + } + } +} + +.icinga-controls { + input:not([type="checkbox"]):not([type="radio"]), + .toggle-switch .toggle-slider:before, + .toggle-switch > .toggle-slider, + select, + textarea { + border: 1px solid @icinga-blue; + } + + input[type="checkbox"]:not(:checked) + .toggle-switch .toggle-slider:before { + height: 1.166666667em; + width: 1.166666667em; + margin: 1px; + } +} + +.search-suggestions { + input:not([type="checkbox"]):not([type="radio"]), + .toggle-switch .toggle-slider:before, + .toggle-switch > .toggle-slider, + select, + textarea { + border: none; + } +} + +.icinga-module.module-icingadb .list-item.overdue { + background: none; + + header > *:not(time), + .caption { + opacity: 1; + } +} + +.controls input.search, +input.search { + background-image: url(../img/icons/search.png); +} + +.search-bar, +.button-link, +.view-mode-switcher > label { + border: 1px solid @icinga-blue; +} + +// compensate for 1px border +.filter-input-area { + padding: 1/12em !important; +} + +.view-mode-switcher > label { + padding: (10/16)*.25em (10/16)*.5em !important; + + &:not(:first-of-type) { + border-left: none; + } +} |