diff --git a/application/forms/PreferenceForm.php b/application/forms/PreferenceForm.php index 7fd9b02d0..b9770f5de 100644 --- a/application/forms/PreferenceForm.php +++ b/application/forms/PreferenceForm.php @@ -247,6 +247,9 @@ class PreferenceForm extends Form ] ); + // Temporarily disabled. Re-enabled with v2.10 + $this->removeElement('theme_mode'); + /** @var GettextTranslator $translator */ $translator = StaticTranslator::$instance; diff --git a/application/views/scripts/about/index.phtml b/application/views/scripts/about/index.phtml index 47a122a96..0485f5cf8 100644 --- a/application/views/scripts/about/index.phtml +++ b/application/views/scripts/about/index.phtml @@ -2,7 +2,7 @@
- img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?> + img('img/icinga-logo-big-dark.png', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
translate('Icinga Web 2 Version') ?>
diff --git a/library/Icinga/Web/LessCompiler.php b/library/Icinga/Web/LessCompiler.php index cbf486122..e3efede80 100644 --- a/library/Icinga/Web/LessCompiler.php +++ b/library/Icinga/Web/LessCompiler.php @@ -3,6 +3,7 @@ namespace Icinga\Web; +use Icinga\Application\Icinga; use Icinga\Application\Logger; use Icinga\Util\LessParser; @@ -48,6 +49,8 @@ class LessCompiler */ protected $source; + private $defaultThemeOverride = false; + /** * Path of the LESS theme * @@ -142,6 +145,14 @@ class LessCompiler return $lessFiles; } + /** + * @deprecated Don't use + */ + public function enableDefaultThemeOverride() + { + $this->defaultThemeOverride = true; + } + /** * Set the path to the LESS theme * @@ -241,6 +252,12 @@ class LessCompiler // able to override other variables, that's what themes are for $this->source = $varExports . "\n\n" . $this->source; + if ($this->defaultThemeOverride) { + $this->source .= file_get_contents( + Icinga::app()->getBaseDir('public/css/icinga') . '/legacy-theme.less' + ); + } + if ($this->theme !== null) { $this->source .= file_get_contents($this->theme); } diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index 53b56bd14..54fcc0c30 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -107,6 +107,7 @@ class StyleSheet $app = Icinga::app(); $this->app = $app; $this->lessCompiler = new LessCompiler(); + $this->lessCompiler->enableDefaultThemeOverride(); $this->pubPath = $app->getBaseDir('public'); $this->collect(); } @@ -175,6 +176,9 @@ class StyleSheet } } + // Temporarily disabled. Re-enabled with v2.10 + $mode = 'none'; + $this->lessCompiler->setThemeMode($this->pubPath . '/css/modes/'. $mode . '.less'); } diff --git a/public/css/icinga/legacy-theme.less b/public/css/icinga/legacy-theme.less new file mode 100644 index 000000000..931de5540 --- /dev/null +++ b/public/css/icinga/legacy-theme.less @@ -0,0 +1,175 @@ +// base.less +@gray: #7F7F7F; +@gray-semilight: #A9A9A9; +@gray-light: #C9C9C9; +@gray-lighter: #EEEEEE; +@gray-lightest: #F7F7F7; +@icinga-blue: #0095BF; +@low-sat-blue: #dae3e6; +@low-sat-blue-dark: #becbcf; +@body-bg-color: #fff; +@text-color: @black; +@text-color-light: @gray; +@tr-active-color: #E5F9FF; +@tr-hover-color: #F5FDFF; +@menu-bg-color: #494949; +@menu-active-bg-color: #333; +@menu-color: @text-color-inverted; +@menu-hover-bg-color: mix(#000, @menu-bg-color, 20); +@menu-search-hover-bg-color: mix(#000, @menu-bg-color, 20); +@menu-active-hover-bg-color: mix(#000, @menu-active-bg-color, 20); +@menu-2ndlvl-highlight-bg-color: darken(@menu-bg-color, 20); +@tab-hover-bg-color: rgba(0,0,0,.1); + +.container { + &:before, + > .content:before { + background-image: url(../img/icinga-loader-light.gif); + } +} + +// badges.less +.badge { + background-color: @gray-light; +} + +// controls.less +.controls input.search, +input.search { + background-image: url(../img/icons/search.png); +} + +@fp-calendarBackground: #ffffff; +@fp-calendarBorderColor: @fp-dayHoverBackground; + +@fp-arrowColor: fadeout(@fp-dayForeground, 40%); +@fp-arrow_hover_color: #f64747; + +@fp-monthForeground: fadeout(black, 10%); +@fp-monthBackground: transparent; + +@fp-weekdaysBackground: transparent; +@fp-weekdaysForeground: fadeout(black, 46%); +@fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%); + +@fp-dayForeground: #393939; +@fp-dayHoverBackground: #e6e6e6; +@fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%); +@fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%); +@fp-selectedDayBackground: #569FF7; +@fp-todayColor: #959ea9; + +@fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3); + +@fp-hoverInvertedBg: fadeout(black, 95%); + +@fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%); +@fp-hoverNumChooserBg: fadeout(black, 90%); +@fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); + +.icinga-datetime-picker .flatpickr-day.today { + &:hover, + &:focus { + color: #fff; + } +} + +// layout-structure.less + +#sidebar:after { + display: none; +} + +// layout.less +#header-logo-container { + .var(background, icinga-blue); +} + +// login.less +#login { + color: @white; + + background-color: #06062B; + + input[type=text], + input[type=password], + .toggle-slider { + border-color: #404d72; + background-color: #404d72; + + &:before { + border-color: #282e39; + background-color: #282E39; + } + } + + input[type="checkbox"]:checked + .toggle-switch .toggle-slider { + border-color: #00C3ED; + background-color: #00C3ED; + } +} + +// menu.less +#menu .nav-level-1 > .nav-item { + &.active { + color: @menu-color; + } + + &:not(.selected) > a:hover, + &:not(.selected) > a:focus { + background-color: mix(#000, @menu-bg-color, 20); + } +} + +#menu .nav-level-2 > .nav-item { + &.active > a { + color: @menu-color; + } +} + +#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li { + &.nav-item:not(.badge-nav-item) { + &:not(.selected):not(.active) a:hover, + &:not(.selected):not(.active) a:focus { + background-color: darken(@menu-bg-color, 20); + color: @menu-2ndlvl-highlight-color; + } + } + + &.badge-nav-item:not(.selected) { + a:hover, + a:focus { + &:first-of-type, + &:first-of-type ~ a { + color: white; + background-color: darken(@menu-bg-color, 20); + } + } + } +} + +// Hovered menu +#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover, +#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { + > .nav-level-2 { + > .nav-item { + &:not(.active) { + a:hover, a:focus { + &:first-of-type, + &:first-of-type ~ a { + background-color: @tr-active-color; + } + } + } + } + } +} + +// tabs.less +.tabs { + background-color: @icinga-blue; + + > li > a { + color: @body-bg-color; + } +} diff --git a/public/css/themes/colorblind.less b/public/css/themes/colorblind.less index cf92013e1..1af0c2a32 100644 --- a/public/css/themes/colorblind.less +++ b/public/css/themes/colorblind.less @@ -1,15 +1,15 @@ /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */ -@color-ok: fade(#77E08E, 50%); +@color-ok: #CCFFD7; @color-critical: #FE5566; -@color-critical-handled: fade(#FE5566, 50%); +@color-critical-handled: #FF99AA; @color-warning: #EAD010; -@color-warning-handled: fade(#EAD010, 50%); +@color-warning-handled: #FFF399; @color-unknown: #7791E0; -@color-unknown-handled: fade(#7791E0, 50%); +@color-unknown-handled: #B8C6FF; @color-unreachable: @color-unknown; @color-unreachable-handled: @color-unknown-handled; -@color-pending:fade(#FFFFFF, 75%); +@color-pending: #000000; /* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */ .badge { @@ -18,32 +18,32 @@ .state-ok, .state-up { - color: @text-color; + color: black; } .state-warning, .state-critical, .state-down, .state-unknown { &.handled { - color: @text-color; + color: black; } } .state-warning, .state-critical, .state-down, .state-unknown { - color: @text-color-inverted; + color: white; } .state-warning:not(.handled) { - text-shadow: 0 0 3px mix(@text-color, @color-warning, 60); + text-shadow: 0 0 3px mix(#000000, @color-warning, 60); } .state-critical:not(.handled), .state-down:not(.handled) { - text-shadow: 0 0 1px mix(@text-color, @color-critical, 20); + text-shadow: 0 0 1px mix(#000000, @color-critical, 20); } .state-unknown:not(.handled), .state-unreachable:not(.handled) { - text-shadow: 0 0 1px mix(@text-color, @color-unknown, 20); + text-shadow: 0 0 1px mix(#000000, @color-unknown, 20); } .processinfo .process > div.backend-running { diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index 995127ba8..cdcd9f5bd 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -2,15 +2,6 @@ @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; @@ -22,19 +13,15 @@ @color-unreachable-handled: #800080; @color-pending: #0000EE; -// Icinga colors -@low-sat-blue: #dae3e6; - -// Background color for -@body-bg-color: @white; - @text-color: #191919; @text-color-light: #555555; @menu-highlight-color: white; +@menu-highlight-hover-bg-color: white; @menu-2ndlvl-color: white; @menu-2ndlvl-highlight-color: white; -@menu-2ndlvl-active-hover-color: @text-color; +@menu-2ndlvl-active-bg-color: black; +@menu-2ndlvl-active-hover-color: white; #menu ul.nav-level-1 > .nav-item > a { &:focus, &:hover { @@ -42,24 +29,6 @@ } } -#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; @@ -74,53 +43,37 @@ 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 { + background-color: @text-color-light; } -.badge.handled, -.badge.state-ok, -.state-badge.handled, -.state-badge.state-ok { +.badge.handled { background-color: @body-bg-color !important; - color: @text-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-critical, &.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; } } @@ -189,8 +142,7 @@ } } -.icinga-controls, -.search-editor { +.icinga-controls { input:not([type="checkbox"]):not([type="radio"]), .toggle-switch .toggle-slider:before, .toggle-switch > .toggle-slider, @@ -205,30 +157,3 @@ margin: 1px; } } - -.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 { - border: 1px solid @icinga-blue; -} - -.view-mode-switcher > label { - border: 1px solid @icinga-blue; - - &:not(:first-of-type) { - border-left: none; - } -} diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less index 04fd0e67d..064dbecfd 100644 --- a/public/css/themes/solarized-dark.less +++ b/public/css/themes/solarized-dark.less @@ -48,6 +48,7 @@ @tr-hover-color: @base02; // Menu colors +@menu-color: #DBDBDB; @menu-bg-color: @base02; @menu-2ndlvl-active-bg-color: lighten(@base03, 5%); @menu-highlight-hover-bg-color: @base03; @@ -66,6 +67,33 @@ // Form colors @button-primary-color: lighten(@base02, 20); +// Datetime picker colors +@fp-calendarBackground: #3f4458; +@fp-calendarBorderColor: darken(#3f4458, 50%); + +@fp-monthForeground: #fff; +@fp-monthBackground: #3f4458; + +@fp-weekdaysBackground: transparent; +@fp-weekdaysForeground: #fff; + +@fp-dayForeground: fadeout(white, 5%); +@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%); + +@fp-todayColor: #eee; +@fp-today_fg_color: #3f4458; + +@fp-selectedDayBackground: #80CBC4; + +.icinga-datetime-picker .flatpickr-day.today { + &:hover, + &:focus { + color: @fp-today_fg_color; + } +} + +// Datetime picker colors (end) + #sidebar { background-color: @base02; box-shadow: inset -0.5em 0 1em rgba(0,0,0,0.3);