mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-09-24 10:27:46 +02:00
Merge pull request #4406 from Icinga/disable-dark-theme
Disable dark theme
This commit is contained in:
Johannes Meyer
commit
d52d7591d9
@ -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;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<?= $tabs ?>
|
||||
</div>
|
||||
<div id="about" class="content content-centered">
|
||||
<?= $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)) ?>
|
||||
<dl class="name-value-list">
|
||||
<?php if (isset($version['appVersion'])): ?>
|
||||
<dt><?= $this->translate('Icinga Web 2 Version') ?></dt>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
|
||||
175
public/css/icinga/legacy-theme.less
Normal file
175
public/css/icinga/legacy-theme.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user