diff --git a/doc/80-Upgrading.md b/doc/80-Upgrading.md index 2617f0321..0acbf2071 100644 --- a/doc/80-Upgrading.md +++ b/doc/80-Upgrading.md @@ -5,6 +5,10 @@ v2.6 to v2.8 requires to follow the instructions for v2.7 too. ## Upgrading to Icinga Web 2 2.10.x +**General** + +* The theme "solarized-dark" has been removed due to the introduction of the new default dark mode. + **Deprecations** * Builtin support for PDF exports using the `dompdf` library will be dropped with version 2.12. diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index 022797ad6..7e1993609 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -36,7 +36,6 @@ class StyleSheet const THEME_WHITELIST = [ 'colorblind', 'high-contrast', - 'solarized-dark', 'Winter' ]; @@ -161,7 +160,16 @@ class StyleSheet } if ($themePath = self::getThemeFile($theme)) { - $this->lessCompiler->setTheme($themePath); + if ($this->app->isCli() || is_file($themePath) && is_readable($themePath)) { + $this->lessCompiler->setTheme($themePath); + } else { + $themePath = null; + Logger::warning(sprintf( + 'Theme "%s" set by user "%s" has not been found.', + $theme, + ($user = Auth::getInstance()->getUser()) !== null ? $user->getUsername() : 'anonymous' + )); + } } if (! $themePath || in_array($theme, self::THEME_WHITELIST, true)) { diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less deleted file mode 100644 index 39493e239..000000000 --- a/public/css/themes/solarized-dark.less +++ /dev/null @@ -1,340 +0,0 @@ -/*! 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; -@low-sat-blue: @base00; - -@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-2ndlvl-active-bg-color: lighten(@base03, 5%); -@menu-highlight-hover-bg-color: @base03; -@menu-flyout-color: @text-color; -@menu-color: @text-color; -@menu-2ndlvl-active-color: @text-color; -@menu-active-color: @text-color; -@menu-active-hover-bg-color: darken(@base03, 5); -@menu-active-bg-color: darken(@base03, 3); -@menu-2ndlvl-color: @text-color; -@menu-2ndlvl-active-hover-color: @text-color; -@menu-2ndlvl-active-hover-bg-color: @menu-hover-bg-color; -@menu-highlight-color: darken(@base03, 3); -@menu-2ndlvl-highlight-bg-color: darken(@base03, 5); - -// Form colors -@button-primary-color: lighten(@base02, 20); - -#sidebar { - background-color: @base02; - box-shadow: inset -0.5em 0 1em rgba(0,0,0,0.3); -} -#header-logo-container { - background-color: transparent; -} -#menu { - background-color: transparent; - box-shadow: none; -} - -.tabs { - background-color: @base02; - - > li > a { - color: @base00; - } -} - -.action-link { - color: @link-color; -} -.button-link { - background-color: @base02; - - &:hover { - background-color: darken(@base03, 5); - } -} - -input, select { - background-color: @body-bg-color; -} - -#login { - background: #06062B; -} - -#login-footer { - color: @base01; -} - -#about > img { - width: 0; - height: 0; - padding: 55.5px 160px; - - background: url(../img/icinga-logo-big.png); - background-size: contain; -} - -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 { - ul:not(.nav-level-2) > .selected > a { - color: @text-color; - } -} - -.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; - } -}