css: Remove solarized-dark theme
This commit is contained in:
Johannes Meyer
parent
48e0f1bd1f
commit
c5343f5575
|
|
@ -36,7 +36,6 @@ class StyleSheet
|
|||
const THEME_WHITELIST = [
|
||||
'colorblind',
|
||||
'high-contrast',
|
||||
'solarized-dark',
|
||||
'Winter'
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
@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 <a>
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue