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 @@
= $tabs ?>
- = $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
+ = $this->img('img/icinga-logo-big-dark.png', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
- = $this->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);