/*! Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */ /* solarized colors: http://simianuprising.com/wp-content/uploads/2012/08/solarized-reference-horizontal.png */ // Solarized base colors @base01: #586e75; @base00: #657b83; @base02: #073645; @base03: #002b36; @base0: #839496; @base1: #93a1a1; @base2: #eee8d5; // Gray colors @gray: @base1; @gray-light: @base01; @gray-lighter: #00222b; @gray-lightest: @base02; // Icinga colors @icinga-blue: @base1; @color-ok: #859900; @color-critical: #dc322f; @color-critical-handled: #a82523; @color-warning: #cf9b00; @color-warning-handled: #b58900; @color-unknown: #6c71c4; @color-unknown-handled: #444f83; @color-unreachable: #2aa198; @color-unreachable-handled: #1d736c; @color-pending: #268bd2; // Notification colors // Background color for @body-bg-color: @base03; // Text colors @text-color: @base2; @text-color-light: @base1; @text-color-on-icinga-blue: @base2; @text-color-inverted: @base02; // Text color on @link-color: @base0; @tr-active-color: @base01; @tr-hover-color: @base02; // Menu colors @menu-bg-color: @base02; @menu-active-bg-color: @base03; @menu-highlight-color: @icinga-blue; @menu-2ndlvl-color: #c4c4c4; @menu-flyout-color: @text-color; // Form colors @button-primary-color: lighten(@base02, 20); #header { background-color: @base02; } .tabs > li > a { color: @base00; } .action-link { color: @link-color; } input, select { background-color: @body-bg-color; } #login { background: @base02; .control-label { color: @base0; } input[type=submit] { color: @base0; background-color: @base02; } } #login-footer { color: @base01; } textarea { background-color: @base01; } .control-button, input[type="submit"] { color: @base0; } .badge.handled { background-color: @body-bg-color !important; color: @text-color; &.state-warning { border: 1px solid @color-warning-handled; margin-top: -1px; } &.state-critical { border: 1px solid @color-critical-handled; margin-top: -1px; } &.state-down { border: 1px solid @color-critical-handled; margin-top: -1px; } &.state-unreachable { border: 1px solid @color-unreachable-handled; margin-top: -1px; } &.state-unknown { border: 1px solid @color-unknown-handled; margin-top: -1px; } } #menu { background-color: @base02; input.search { color: @text-color; background-image: url(../img/icons/search_white.png); &:focus { background-image: url(../img/icons/search_white.png) !important; } } .nav-level-1 > .nav-item { color: @text-color; &.active, &:hover { color: @text-color; background-color: darken(@base03, 5); } &.active:not(.selected) { background-color: darken(@base03, 3); & > a:focus, & > a:hover { background-color: darken(@base03, 5); } } } .nav-level-2 > .nav-item { color: @text-color; background-color: darken(@base03, 3); &.active, &:hover { a { color: @text-color; } background-color: @base00; } &.active.selected { background-color: @button-primary-color; } &:not(.selected):not(.active) > a:hover, &:not(.selected):not(.active) > a:focus { color: @text-color; } } ul:not(.nav-level-2) > .selected > a { background-color: darken(@base03, 3); color: @text-color; &:after { background-color: darken(@base03, 3); box-shadow: 0 0 1em 0 rgba(0,0,0,0.6); } } .nav-level-2 > .nav-item:not(.selected):not(.active) { & > a:hover, & > a:focus { background-color: darken(@base03, 5); } } .nav-itemxx{ &:hover, &:hover > a, &.active, &.active > a { color: @text-color !important; //background-color: @base01 !important; } } } .boxview a:focus { color: @text-color; text-decoration: underline; } table.avp tbody th { background-color: transparent; } .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-module.module-monitoring { .tactical { .box { border-color: @body-bg-color !important; } div.box.contents { background: @body-bg-color; } } } .icinga-module.module-director { form { input[type=text], input[type=password], textarea, select, .director-suggestions li { background-color: @body-bg-color; border-bottom: 1px solid @gray-light; } .director-suggestions li:hover { background-color: @icinga-blue; } ul.extensible-set input[type=text] { background-color: @icinga-blue; color: @base2; } p.description { background-color: @base02; } option { background-color: @body-bg-color; } } dd.active ul.extensible-set input[type=text], ul.extensible-set.sortable input[type=text] { background: @body-bg-color; border: 1px solid @gray-light; } ul.main-actions li a { color: @icinga-blue; } } /* Form styles */ @input-background: lighten(@base02, 5); .icinga-controls { input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea, select { background-color: @input-background; } & .toggle-switch .toggle-slider { background: @input-background; border: 2px solid @input-background; } & .toggle-switch .toggle-slider:before { background: @body-bg-color; border: 1px solid @body-bg-color; } & input[type="checkbox"]:checked + .toggle-switch .toggle-slider { background-color: @button-primary-color; border: 1px solid @button-primary-color; } & input[type="checkbox"]:focus + .toggle-switch .toggle-slider { box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@button-primary-color, 40); } & input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before { border: 1px solid @button-primary-color; } } .button { background-color: @input-background; border: 2px solid @input-background; color: @text-color; &:focus, &:hover, &.btn-primary { background-color: lighten(@base02, 15); border-color: lighten(@base02, 15); color: @text-color; } &.btn-primary:focus, &.btn-primary:hover { background-color: @button-primary-color; border-color: @button-primary-color; color: @text-color; } }