tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 07:44:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4398 from Icinga/light-mode-integrated

Browse Source 
Integrate light theme as mode in default theme
This commit is contained in:
Johannes Meyer 2021-06-23 17:43:33 +02:00 committed by GitHub
commit ac108c9de8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 391 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
library/Icinga/Util/LessParser.php
View File

@ -3,11 +3,66 @@
namespace Icinga\Util; namespace Icinga\Util;
use Less_Tree_Anonymous;
use Less_Tree_Expression;
use Less_Tree_Quoted;
use Less_Tree_Value;
use lessc; use lessc;
require_once 'lessphp/lessc.inc.php'; require_once 'lessphp/lessc.inc.php';
class LessParser extends lessc class LessParser extends lessc
{ {
// Overwrite methods here public function __construct()
{
$this->registerFunction('extract-variable-default', [$this, 'extractVariableDefault']);
}
/**
* Extract default from given variable call
*
* How to use:
*
* color: extract-variable-default(@mixin-parameter);
* color: @mixin-parameter;
*
* border: extract-variable-default(1px solid @mixin-parameter);
* border: 1px solid @mixin-parameter;
*
* background: drop-shadow(5px 0 3px extract-variable-default(@mixin-parameter, true));
* background: drop-shadow(5px 0 3px @mixin-parameter);
*
* @param mixed $value
* @param bool $valAsDefault
*
* @return mixed
*/
public function extractVariableDefault($value, $valAsDefault = false)
{
$defaultValue = 'inherit';
if ($value instanceof Less_Tree_Quoted) {
$stripped = preg_replace(
'~var\s*\(\s*[-\w]+\s*,\s*([^)]+)\)~',
'$1',
$value->value,
-1,
$replacements
);
if ($replacements > 0) {
$defaultValue = $stripped;
}
} elseif ($value instanceof Less_Tree_Expression) {
foreach ($value->value as $i => $item) {
$value->value[$i] = $this->extractVariableDefault($item, true);
}
return $value;
}
if ($valAsDefault && $defaultValue === 'inherit') {
return $value;
}
return new Less_Tree_Value([new Less_Tree_Anonymous($defaultValue)]);
}
} }

19
modules/doc/public/css/module.less
View File

@ -2,13 +2,20 @@
// Mixins // Mixins
.gradient(@a: @gray-lighter; @b: @gray-lightest) { .gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: ~"var(--gray-lightest, @{gray-lightest})") {
background: extract-variable-default(@a);
background: @a; background: @a;
background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true)));
background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b)); background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b));
background: -webkit-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -webkit-linear-gradient(top, @a, @b); background: -webkit-linear-gradient(top, @a, @b);
background: -moz-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -moz-linear-gradient(top, @a, @b); background: -moz-linear-gradient(top, @a, @b);
background: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -ms-linear-gradient(top, @a, @b); background: -ms-linear-gradient(top, @a, @b);
background: -o-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: -o-linear-gradient(top, @a, @b); background: -o-linear-gradient(top, @a, @b);
background: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true));
background: linear-gradient(to bottom, @a, @b); background: linear-gradient(to bottom, @a, @b);
} }
@ -24,11 +31,13 @@ pre > code {
} }
.chapter a { .chapter a {
border-bottom: 1px @gray-light dotted; border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
&:hover { &:hover {
border-bottom: 1px @text-color solid; border-bottom: 1px solid;
.var(border-bottom-color, text-color);
text-decoration: none; text-decoration: none;
} }
} }
@ -41,7 +50,7 @@ pre > code {
.rounded-corners(); .rounded-corners();
background: @icinga-blue; background: @icinga-blue;
color: @text-color-on-icinga-blue; .var(color, text-color-on-icinga-blue);
padding: 0 0.3em 0 0.3em; padding: 0 0.3em 0 0.3em;
} }
@ -88,7 +97,7 @@ tbody > tr:nth-child(odd) {
} }
tbody > tr:nth-child(even) { tbody > tr:nth-child(even) {
background: @body-bg-color; .var(background, body-bg-color);
} }
td, th { td, th {

99
modules/monitoring/public/css/module.less
View File

@ -2,8 +2,9 @@
.monitoring-statusbar { .monitoring-statusbar {
position: relative; position: relative;
background-color: @body-bg-color; .var(background-color, body-bg-color);
border-top: 1px solid @gray-lighter; border-top: 1px solid;
.var(border-top-color, gray-lighter);
padding: .25em @gutter; padding: .25em @gutter;
line-height: 1.3; line-height: 1.3;
@ -35,7 +36,7 @@
} }
&.-inactive { &.-inactive {
color: @gray-light; .var(color, gray-light);
} }
} }
} }
@ -70,7 +71,7 @@
color: white; color: white;
} }
.group-grid-cell > div.state-none { .group-grid-cell > div.state-none {
background-color: @gray-light; .var(background-color, gray-light);
} }
} }
@ -155,10 +156,10 @@
} }
.service-on { .service-on {
color: @text-color-light; .var(color, text-color-light);
> a { > a {
color: @text-color; .var(color, text-color);
letter-spacing: normal; letter-spacing: normal;
font-weight: bold; font-weight: bold;
} }
@ -195,7 +196,7 @@
padding: .25em .5em; padding: .25em .5em;
&:hover { &:hover {
background-color: @gray-lighter; .var(background-color, gray-lighter);
text-decoration: none; text-decoration: none;
} }
} }
@ -254,7 +255,7 @@
.tactical div.box.header { .tactical div.box.header {
margin: 10px; margin: 10px;
min-height: 8em; min-height: 8em;
color: @text-color-inverted; .var(color, text-color-inverted);
font-size: @font-size-dashboard; font-size: @font-size-dashboard;
} }
@ -285,8 +286,10 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
} }
div.box.monitoringfeatures { div.box.monitoringfeatures {
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
border-left: 15px solid;
.var(border-left-color, "gray");
} }
div.box.monitoringfeatures div.box-separator { div.box.monitoringfeatures div.box-separator {
@ -302,8 +305,10 @@ div.box.monitoringfeatures a.feature-highlight {
} }
div.box.hostservicechecks { div.box.hostservicechecks {
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
border-left: 15px solid;
.var(border-left-color, "gray");
} }
div.box.hostservicechecks th { div.box.hostservicechecks th {
@ -315,15 +320,18 @@ div.box.hostservicechecks th {
div.box.process { div.box.process {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
border-left: 15px solid;
.var(border-left-color, "gray");
margin-bottom: 1em; margin-bottom: 1em;
margin-right: 1em; margin-right: 1em;
} }
.process div.box.header { .process div.box.header {
min-height: 5em; min-height: 5em;
border-bottom:1px solid @gray-lighter; border-bottom:1px solid;
.var(border-bottom-color, gray-lighter);
} }
.process > .boxview > div.box { .process > .boxview > div.box {
@ -334,7 +342,8 @@ div.box.process {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom:1px solid @gray-lighter; border-bottom:1px solid;
.var(border-bottom-color, gray-lighter);
} }
.process th { .process th {
@ -373,13 +382,16 @@ div.backend-not-running {
div.box.features { div.box.features {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
border-left: 15px solid;
.var(border-left-color, "gray");
} }
.features div.box.header { .features div.box.header {
min-height: 5em; min-height: 5em;
border-bottom:1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
} }
.features > .boxview > div.box { .features > .boxview > div.box {
@ -390,7 +402,8 @@ div.box.features {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom:1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
} }
@ -399,9 +412,11 @@ div.box.features {
div.box.stats { div.box.stats {
width: 100%; width: 100%;
max-width: 50em; max-width: 50em;
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
color: @text-color; border-left: 15px solid;
.var(border-left-color, "gray");
.var(color, text-color);
} }
.stats > .boxview > div.box { .stats > .boxview > div.box {
@ -414,12 +429,13 @@ div.box.stats {
} }
.stats > table > thead { .stats > table > thead {
color: @gray; .var(color, "gray");
} }
.stats > h2 { .stats > h2 {
text-align: left; text-align: left;
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
> .hosts-summary, > .hosts-summary,
> .services-summary { > .services-summary {
@ -439,8 +455,10 @@ div.box.stats {
div.timeline-legend { div.timeline-legend {
padding: 0.5em; padding: 0.5em;
margin-top: 2em; margin-top: 2em;
border: 1px solid @gray-lighter; border: 1px solid;
border-left: 15px solid @gray; .var(border-color, gray-lighter);
border-left: 15px solid;
.var(border-left-color, "gray");
h2 { h2 {
margin: 0; margin: 0;
@ -460,7 +478,7 @@ div.timeline-legend {
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
color: @text-color-inverted; .var(color, text-color-inverted);
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-top: 2px; padding-top: 2px;
@ -606,7 +624,7 @@ form.instance-features span.description, form.object-features span.description {
text-align: left; text-align: left;
margin-right: 0; margin-right: 0;
width: @name-value-table-name-width; width: @name-value-table-name-width;
color: @text-color-light; .var(color, text-color-light);
label { label {
font-size: inherit; font-size: inherit;
@ -645,49 +663,50 @@ form.instance-features span.description, form.object-features span.description {
& + span.hint { & + span.hint {
margin: .35em; margin: .35em;
color: @gray-light; .var(color, gray-light);
font-style: italic; font-style: italic;
} }
} }
} }
.plugin-output { .plugin-output {
border-left: 5px solid @gray-lighter; border-left: 5px solid;
.var(border-left-color, gray-lighter);
padding: 0.66em 0.33em; padding: 0.66em 0.33em;
.state-critical { .state-critical {
background-color: @color-critical; background-color: @color-critical;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-ok { .state-ok {
background-color: @color-ok; background-color: @color-ok;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-unknown { .state-unknown {
background-color: @color-unknown; background-color: @color-unknown;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-warning { .state-warning {
background-color: @color-warning; background-color: @color-warning;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-down { .state-down {
background-color: @color-down; background-color: @color-down;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
.state-up { .state-up {
background-color: @color-up; background-color: @color-up;
color: @body-bg-color; .var(color, body-bg-color);
padding: 0.2em; padding: 0.2em;
} }
} }
@ -696,10 +715,12 @@ form.instance-features span.description, form.object-features span.description {
.markdown, .markdown,
.plugin-output { .plugin-output {
a { a {
border-bottom: 1px @gray-light dotted; border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
&:hover { &:hover {
border-bottom: 1px @text-color solid; border-bottom: 1px solid;
.var(border-bottom-color, text-color);
text-decoration: none; text-decoration: none;
} }
} }

8
modules/monitoring/public/css/service-grid.less
View File

@ -5,7 +5,7 @@
white-space: nowrap; white-space: nowrap;
td { td {
color: @gray-light; .var(color, gray-light);
padding: 0.2em; padding: 0.2em;
text-align: center; text-align: center;
width: 1em; width: 1em;
@ -33,11 +33,11 @@
font-size: 130%; font-size: 130%;
a { a {
color: @text-color; .var(color, text-color);
outline: none; outline: none;
&:hover { &:hover {
color: @text-color-light; .var(color, text-color-light);
} }
&:focus, &:active { &:focus, &:active {
color: @icinga-blue; color: @icinga-blue;
@ -66,7 +66,7 @@ form.filter-toggle {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-left: .5em; margin-left: .5em;
color: @gray-light; .var(color, gray-light);
} }
input[type="checkbox"]:checked ~ label { input[type="checkbox"]:checked ~ label {

19
modules/monitoring/public/css/tables.less
View File

@ -46,7 +46,7 @@
// Host name and IP addresses in the host and service detail view // Host name and IP addresses in the host and service detail view
.host-meta { .host-meta {
color: @text-color-light; .var(color, text-color-light);
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -59,7 +59,7 @@
// Notification recipient in the notifications overview // Notification recipient in the notifications overview
.notification-recipient { .notification-recipient {
color: @text-color-light; .var(color, text-color-light);
float: right; float: right;
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -91,7 +91,7 @@
// Plugin output in overviews // Plugin output in overviews
.overview-plugin-output { .overview-plugin-output {
color: @text-color-light; .var(color, text-color-light);
font-family: @font-family-fixed; font-family: @font-family-fixed;
font-size: @font-size-small; font-size: @font-size-small;
margin: 0; margin: 0;
@ -133,7 +133,7 @@
// Service description if in the service detail view // Service description if in the service detail view
.service-meta { .service-meta {
color: @text-color-light; .var(color, text-color-light);
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -151,7 +151,7 @@
&.state-critical, &.state-critical,
&.state-down { &.state-down {
background-color: @color-critical; background-color: @color-critical;
color: @text-color-inverted; .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
@ -162,7 +162,7 @@
&.state-warning { &.state-warning {
background-color: @color-warning; background-color: @color-warning;
color: @text-color-inverted; .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
@ -173,7 +173,7 @@
&.state-unknown { &.state-unknown {
background-color: @color-unknown; background-color: @color-unknown;
color: @text-color-inverted; .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
@ -184,7 +184,7 @@
&.state-unreachable { &.state-unreachable {
background-color: @color-unreachable; background-color: @color-unreachable;
color: @text-color-inverted; .var(color, text-color-inverted);
&.handled { &.handled {
background-color: inherit; background-color: inherit;
@ -195,7 +195,8 @@
// State class for history events // State class for history events
&.state-no-state { &.state-no-state {
border-left: @border-left-width solid @text-color-light; border-left: @border-left-width solid;
.var(border-left-color, text-color-light);
} }
* { * {

4
public/css/icinga/about.less
View File

@ -7,7 +7,7 @@
.about-social i { .about-social i {
font-size: 1.7em; font-size: 1.7em;
color: @text-color; .var(color, text-color);
} }
.about-social i:hover { .about-social i:hover {
@ -23,7 +23,7 @@
margin: 0.5em; margin: 0.5em;
padding: 0; padding: 0;
font-size: 5em; font-size: 5em;
color: @text-color; .var(color, text-color);
} }
.about-links i:hover { .about-links i:hover {

21
public/css/icinga/audit.less
View File

@ -5,7 +5,8 @@
li { li {
.rounded-corners(3px); .rounded-corners(3px);
border: 1px solid @low-sat-blue; border: 1px solid;
.var(border-color, low-sat-blue);
&.active { &.active {
border-color: @icinga-blue; border-color: @icinga-blue;
@ -19,13 +20,14 @@
} }
h3 { h3 {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
} }
h3 em, h3 em,
.previews em, .previews em,
.privilege-label em { .privilege-label em {
color: @text-color-light; .var(color, text-color-light);
} }
h3 em { h3 em {
font-weight: normal; font-weight: normal;
@ -35,7 +37,7 @@
} }
.icon { .icon {
color: @gray-light; .var(color, gray-light);
&.granted { &.granted {
color: @color-granted; color: @color-granted;
@ -58,7 +60,8 @@
&:hover .spacer { &:hover .spacer {
.transition(opacity .25s .25s ease-in); .transition(opacity .25s .25s ease-in);
border: 0 dashed @gray-light; border: 0 dashed;
.var(border-color, gray-light);
border-top-width: .2em; border-top-width: .2em;
opacity: 1; opacity: 1;
} }
@ -78,7 +81,8 @@
} }
.connector { .connector {
border: 0 solid @gray-lighter; border: 0 solid;
.var(border-color, gray-lighter);
border-bottom-width: 2px; border-bottom-width: 2px;
&.granted { &.granted {
@ -97,7 +101,8 @@
.role { .role {
.rounded-corners(1em); .rounded-corners(1em);
border: 2px solid @gray-lighter; border: 2px solid;
.var(border-color, gray-lighter);
&.granted { &.granted {
border: 2px solid @color-granted; border: 2px solid @color-granted;
@ -110,7 +115,7 @@
.restriction { .restriction {
font-family: @font-family-fixed; font-family: @font-family-fixed;
background-color: @gray-lighter; .var(background-color, gray-lighter);
} }
} }

4
public/css/icinga/badges.less
View File

@ -8,8 +8,8 @@
.bg-stateful(); .bg-stateful();
.rounded-corners(); .rounded-corners();
background-color: @gray; .var(background-color, "gray");
color: @badge-color; .var(color, badge-color);
display: inline-block; display: inline-block;
font-family: @font-family-wide; font-family: @font-family-wide;
font-size: @font-size-small; font-size: @font-size-small;

58
public/css/icinga/base.less
View File

@ -60,7 +60,10 @@
// Menu colors // Menu colors
@menu-bg-color: #06062B; @menu-bg-color: #06062B;
@menu-hover-bg-color: fade(@menu-bg-color, 50%);
@menu-search-hover-bg-color: darken(@menu-bg-color, 20%);
@menu-active-bg-color: #181742; @menu-active-bg-color: #181742;
@menu-active-hover-bg-color: darken(@menu-active-bg-color, 20%);
@menu-color: #DBDBDB; @menu-color: #DBDBDB;
@menu-active-color: @text-color; @menu-active-color: @text-color;
@menu-highlight-color: @icinga-blue; @menu-highlight-color: @icinga-blue;
@ -69,6 +72,7 @@
@menu-2ndlvl-highlight-color: @text-color-inverted; @menu-2ndlvl-highlight-color: @text-color-inverted;
@menu-flyout-bg-color: @body-bg-color; @menu-flyout-bg-color: @body-bg-color;
@menu-flyout-color: @text-color; @menu-flyout-color: @text-color;
@tab-hover-bg-color: fade(@body-bg-color, 50%);
// Other colors // Other colors
@color-granted: #59cd59; @color-granted: #59cd59;
@ -95,6 +99,40 @@
@vertical-padding: 0.5em; // 6px @vertical-padding: 0.5em; // 6px
@horizontal-padding: 1em; // 12px @horizontal-padding: 1em; // 12px
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
:root {
--body-bg-color: #F5F9FA;
--badge-color: #F5F9FA;
--text-color-inverted: #F5F9FA;
--text-color-on-icinga-blue: #F5F9FA;
--menu-flyout-bg-color: #F5F9FA;
--tab-hover-bg-color: fade(#F5F9FA, 50%);
--menu-color: #676767;
--menu-bg-color: #DEECF1;
--menu-hover-bg-color: fade(#DEECF1, 50%);
--menu-search-hover-bg-color: darken(#DEECF1, 20%);
--menu-active-bg-color: #EDF7FC;
--menu-active-hover-bg-color: darken(#EDF7FC, 20%);
--menu-2ndlvl-color: #7E8182;
--text-color: #535353;
--text-color-light: fade(#535353, 75%);
--link-color: #535353;
--menu-active-color: #535353;
--menu-flyout-color: #535353;
--low-sat-blue: #DEECF1;
--low-sat-blue-dark: #c0cccd;
--gray: #7F7F7F;
--gray-semilight: #A9A9A9;
--gray-light: #C9C9C9;
--gray-lighter: #EEEEEE;
--gray-lightest: #F7F7F7;
}
}
// Make padding not affect the final computed width of an element // Make padding not affect the final computed width of an element
html { html {
box-sizing: border-box; box-sizing: border-box;
@ -128,7 +166,8 @@ blockquote, p, pre {
} }
blockquote { blockquote {
border-left: 5px solid @gray-lighter; border-left: 5px solid;
.var(border-left-color, gray-lighter);
padding: 0.667em 0.333em; padding: 0.667em 0.333em;
} }
@ -138,7 +177,8 @@ h1, h2, h3, h4, h5, h6 {
} }
h1 { h1 {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
font-size: 1.333em; font-size: 1.333em;
} }
@ -164,7 +204,7 @@ h6 {
} }
pre { pre {
background-color: @gray-lightest; .var(background-color, gray-lightest);
font-family: @font-family-fixed; font-family: @font-family-fixed;
font-size: @font-size-small; font-size: @font-size-small;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -200,7 +240,8 @@ td, th {
content: ""; content: "";
display: block; display: block;
background: @body-bg-color url(../img/icinga-loader.gif) no-repeat center center; background: url(../img/icinga-loader.gif) no-repeat center center;
.var(background-color, body-bg-color);
background-size: 4em 4em; background-size: 4em 4em;
opacity: 0; opacity: 0;
@ -232,3 +273,12 @@ td, th {
top: 2.5em; top: 2.5em;
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
.container {
&:before,
> .content:before {
background-image: url(../img/icinga-loader-light.gif)
}
}
}

10
public/css/icinga/controls.less
View File

@ -43,6 +43,14 @@ input.search {
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
#menu input.search,
.controls input.search,
input.search {
background-image: url(../img/icons/search.png);
}
}
.backend-selection, .backend-selection,
.pagination-control, .pagination-control,
.selection-info, .selection-info,
@ -122,7 +130,7 @@ input.search {
padding: 0.5em; padding: 0.5em;
} }
> a:hover { > a:hover {
background-color: @gray-lighter; .var(background-color, gray-lighter);
text-decoration: none; text-decoration: none;
} }
} }

40
public/css/icinga/forms.less
View File

@ -110,7 +110,8 @@ form.icinga-form.inline .control-label-group {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
border-top: 1px solid @gray-light; border-top: 1px solid;
.var(border-top-color, gray-light);
legend, .description { legend, .description {
margin-left: .7em; margin-left: .7em;
@ -148,7 +149,7 @@ form.icinga-form .control-group .toggle-switch ~ .control-info {
input[type="time"], input[type="time"],
textarea, textarea,
select { select {
background-color: @low-sat-blue; .var(background-color, low-sat-blue);
} }
} }
@ -291,17 +292,17 @@ form.icinga-form .form-controls {
} }
input[type="submit"].btn-remove { input[type="submit"].btn-remove {
.button(@body-bg-color, @color-critical, darken(@color-critical, 10%)); .button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%));
} }
input[type="submit"].btn-cancel { input[type="submit"].btn-cancel {
.button(@body-bg-color, @gray, @black); .button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", @black);
} }
button.noscript-apply { button.noscript-apply {
color: @gray; .var(color, "gray");
background-color: @gray-lightest; .var(background-color, gray-lightest);
border-color: @gray; .var(border-color, "gray");
border-width: 1px; border-width: 1px;
} }
} }
@ -338,8 +339,9 @@ form.inline {
top: 0; top: 0;
display: inline-block; display: inline-block;
background: @low-sat-blue; .var(background, low-sat-blue);
border: 1px solid @low-sat-blue; border: 1px solid;
.var(border-color, low-sat-blue);
box-sizing: content-box; box-sizing: content-box;
border-radius: 1em; border-radius: 1em;
height: 4/3em; height: 4/3em;
@ -352,9 +354,10 @@ form.inline {
top: 0; top: 0;
left: 0; left: 0;
background: @text-color-inverted; .var(background, text-color-inverted);
border-radius: 1em; border-radius: 1em;
border: 1px solid @low-sat-blue; border: 1px solid;
.var(border-color, low-sat-blue);
box-sizing: border-box; box-sizing: border-box;
content: ""; content: "";
display: block; display: block;
@ -376,6 +379,7 @@ form.inline {
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider { .icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40); box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px fade(@icinga-blue, 40);
} }
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before { .icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
@ -390,12 +394,12 @@ form.inline {
cursor: default; cursor: default;
& > .toggle-slider { & > .toggle-slider {
background-color: @gray-light; .var(background-color, gray-light);
border-color: @gray-light; .var(border-color, gray-light);
&:before { &:before {
background-color: @gray-lighter; .var(background-color, gray-lighter);
border-color: @gray-light; .var(border-color, gray-light);
} }
} }
} }
@ -407,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group {
.icinga-controls { .icinga-controls {
input[disabled], input[disabled],
select[disabled] { select[disabled] {
background: @gray-lighter; .var(background-color, gray-lighter);
border-color: transparent; border-color: transparent;
} }
} }
@ -458,7 +462,7 @@ form.icinga-form {
} }
.form-description { .form-description {
background-color: fade(@gray, 5%); .var(background-color, "gray");
} }
.errors { .errors {
@ -476,7 +480,7 @@ form.icinga-form {
} }
form.icinga-form .form-info { form.icinga-form .form-info {
color: @text-color-light; .var(color, text-color-light);
font-size: @font-size-small; font-size: @font-size-small;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;

9
public/css/icinga/health.less
View File

@ -2,10 +2,10 @@
.app-health { .app-health {
header { header {
color: @text-color-light; .var(color, text-color-light);
span { span {
color: @text-color; .var(color, text-color);
} }
} }
@ -36,12 +36,13 @@
} }
tr:not(:last-child) td { tr:not(:last-child) td {
border: 0 solid @gray-light; border: 0 solid;
.var(border-color, gray-light);
border-bottom-width: 1px; border-bottom-width: 1px;
} }
section { section {
color: @text-color-light; .var(color, text-color-light);
font-family: @font-family-fixed; font-family: @font-family-fixed;
} }
} }

39
public/css/icinga/layout.less
View File

@ -20,7 +20,7 @@
#guest-error-message { #guest-error-message {
.fadein(); .fadein();
color: @body-bg-color; .var(color, body-bg-color);
font-size: 2em; font-size: 2em;
} }
@ -32,7 +32,7 @@
} }
#header-logo-container { #header-logo-container {
background: @menu-bg-color; .var(background, menu-bg-color);
height: 6em; height: 6em;
padding: 1.25em; padding: 1.25em;
width: 16em; width: 16em;
@ -81,8 +81,8 @@
} }
#layout { #layout {
background-color: @body-bg-color; .var(background-color, body-bg-color);
color: @text-color; .var(color, text-color);
font-family: @font-family; font-family: @font-family;
} }
@ -141,11 +141,11 @@
// Mobile menu // Mobile menu
#layout.minimal-layout #sidebar { #layout.minimal-layout #sidebar {
background-color: @menu-bg-color; .var(background-color, menu-bg-color);
} }
#mobile-menu-toggle { #mobile-menu-toggle {
color: @menu-color; .var(color, menu-color);
text-align: right; text-align: right;
> button { > button {
@ -204,11 +204,12 @@
} }
#notifications > li { #notifications > li {
color: @text-color; .var(color, text-color);
display: block; display: block;
line-height: 2.5em; line-height: 2.5em;
border-left: .5em solid @gray-light; border-left: .5em solid;
background: @body-bg-color; .var(border-left-color, gray-light);
.var(background, body-bg-color);
margin-bottom: 1px; margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25); box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
@ -225,10 +226,10 @@
&.error { &.error {
border-color: @color-down; border-color: @color-down;
background: @color-down; background: @color-down;
color: @body-bg-color; .var(color, body-bg-color);
.icon { .icon {
color: @body-bg-color; .var(color, body-bg-color);
} }
} }
@ -251,10 +252,10 @@
&.warning { &.warning {
border-color: @color-warning; border-color: @color-warning;
background: @color-warning; background: @color-warning;
color: @body-bg-color; .var(color, body-bg-color);
.icon { .icon {
color: @body-bg-color; .var(color, body-bg-color);
} }
} }
} }
@ -332,10 +333,10 @@
} }
#search:focus { #search:focus {
background-color: @menu-bg-color; .var(background-color, menu-bg-color);
border-radius: 0 .25em .25em 0; border-radius: 0 .25em .25em 0;
box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2); box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
color: @menu-color; .var(color, menu-color);
width: 20em; width: 20em;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
@ -356,3 +357,11 @@
} }
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
#header-logo,
#mobile-menu-logo,
#about .icinga-logo {
filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
}
}

4
public/css/icinga/login.less
View File

@ -4,7 +4,7 @@
#login { #login {
height: 100%; height: 100%;
background-color: @menu-bg-color; .var(background-color, menu-bg-color);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
text-align: center; text-align: center;
@ -125,7 +125,7 @@
padding: 1em; padding: 1em;
a { a {
color: @text-color-inverted; .var(color, text-color-inverted);
font-weight: bold; font-weight: bold;
} }
} }

39
public/css/icinga/main.less
View File

@ -89,12 +89,12 @@ a:hover > .icon-cancel {
.action-link(); .action-link();
.rounded-corners(3px); .rounded-corners(3px);
background: @low-sat-blue; .var(background, low-sat-blue);
display: inline-block; display: inline-block;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
&:hover { &:hover {
background: @low-sat-blue-dark; .var(background, low-sat-blue-dark);
text-decoration: none; text-decoration: none;
} }
} }
@ -105,11 +105,12 @@ a:hover > .icon-cancel {
margin: 0; margin: 0;
> dt { > dt {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
margin-bottom: 0.25em; margin-bottom: 0.25em;
&:hover { &:hover {
background-color: @gray-lightest; .var(background-color, gray-lightest);
> .remove-action { > .remove-action {
visibility: visible; visibility: visible;
@ -127,7 +128,7 @@ a:hover > .icon-cancel {
} }
.comment-time { .comment-time {
color: @text-color-light; .var(color, text-color-light);
font-size: @font-size-small; font-size: @font-size-small;
} }
@ -138,7 +139,7 @@ a:hover > .icon-cancel {
} }
> dt { > dt {
color: @text-color-light; .var(color, text-color-light);
font-size: @font-size-small; font-size: @font-size-small;
} }
} }
@ -162,11 +163,13 @@ a:hover > .icon-cancel {
} }
thead { thead {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
} }
tbody tr { tbody tr {
border-bottom: 1px solid @gray-lightest; border-bottom: 1px solid;
.var(border-bottom-color, gray-lightest);
border-left: 5px solid transparent; border-left: 5px solid transparent;
&:last-child { &:last-child {
@ -196,7 +199,7 @@ a:hover > .icon-cancel {
} }
.name-value-table > tbody > tr > th { .name-value-table > tbody > tr > th {
color: @text-color-light; .var(color, text-color-light);
// Reset default font-weight // Reset default font-weight
font-weight: normal; font-weight: normal;
padding-left: 0; padding-left: 0;
@ -274,15 +277,15 @@ a:hover > .icon-cancel {
margin-top: -1em; margin-top: -1em;
margin-right: .25em; margin-right: .25em;
background: @gray-lighter; .var(background, gray-lighter);
color: @gray; .var(color, "gray");
border: none; border: none;
-webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
-moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
box-shadow: 0 0 1/3em rgba(0,0,0,.3); box-shadow: 0 0 1/3em rgba(0,0,0,.3);
&:hover { &:hover {
background: @gray-light; .var(background, gray-light);
} }
} }
@ -324,7 +327,8 @@ a:hover > .icon-cancel {
content: ""; content: "";
display: block; display: block;
height: 2em; height: 2em;
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color); background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -337,7 +341,8 @@ a:hover > .icon-cancel {
&:after { &:after {
opacity: 0; opacity: 0;
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color); background: linear-gradient(transparent, @body-bg-color);
background: linear-gradient(transparent, var(--body-bg-color, @body-bg-color));
} }
} }
@ -372,7 +377,7 @@ a:hover > .icon-cancel {
.module-dependencies { .module-dependencies {
.unmet-dependencies { .unmet-dependencies {
background-color: @color-warning; background-color: @color-warning;
color: @text-color-on-icinga-blue; .var(color, text-color-on-icinga-blue);
padding: .25em .5em; padding: .25em .5em;
margin-left: -.5em; margin-left: -.5em;
} }
@ -380,12 +385,12 @@ a:hover > .icon-cancel {
.name-value-table { .name-value-table {
> caption { > caption {
font-weight: normal; font-weight: normal;
color: @text-color-light; .var(color, text-color-light);
} }
> tbody > tr > th { > tbody > tr > th {
font-weight: bold; font-weight: bold;
color: @text-color; .var(color, text-color);
} }
.missing { .missing {

69
public/css/icinga/menu.less
View File

@ -10,7 +10,7 @@
@icon-width: 1.7em; // 1.5em width + 0.2em right margin @icon-width: 1.7em; // 1.5em width + 0.2em right margin
#menu { #menu {
background-color: @menu-bg-color; .var(background-color, menu-bg-color);
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@ -65,16 +65,16 @@
#menu .nav-level-1 > .nav-item { #menu .nav-level-1 > .nav-item {
line-height: 2.167em; // 26 px line-height: 2.167em; // 26 px
color: @menu-color; .var(color, menu-color);
&.active { &.active {
color: @menu-active-color; .var(color, menu-active-color);
> a > .badge { > a > .badge {
display: none; display: none;
} }
background-color: @menu-active-bg-color; .var(background-color, menu-active-bg-color);
} }
&.no-icon > a { &.no-icon > a {
@ -87,12 +87,12 @@
&.active:not(.selected) > a:focus, &.active:not(.selected) > a:focus,
&.active:not(.selected) > a:hover { &.active:not(.selected) > a:hover {
background-color: darken(@menu-active-bg-color, 20); .var(background-color, menu-active-hover-bg-color);
} }
&:not(.selected) > a:hover, &:not(.selected) > a:hover,
&:not(.selected) > a:focus { &:not(.selected) > a:focus {
background-color: fade(@menu-bg-color, 50%) .var(background-color, menu-hover-bg-color);
} }
// Balance icon weight for non active menu items // Balance icon weight for non active menu items
@ -110,11 +110,11 @@
#menu ul:not(.nav-level-2) > .selected > a { #menu ul:not(.nav-level-2) > .selected > a {
background-color: @menu-highlight-color; background-color: @menu-highlight-color;
color: @text-color-inverted; .var(color, text-color-inverted);
&:hover { &:hover {
color: @text-color-inverted; .var(color, text-color-inverted);
} }
&:after { &:after {
@ -123,7 +123,7 @@
position: absolute; position: absolute;
right: -.75em; right: -.75em;
background-color: @body-bg-color; .var(background-color, body-bg-color);
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6); box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: ""; content: "";
display: block; display: block;
@ -139,7 +139,7 @@
line-height: 1.833em; // 22px line-height: 1.833em; // 22px
> a { > a {
color: @menu-2ndlvl-color; .var(color, menu-2ndlvl-color);
font-size: @font-size-small; font-size: @font-size-small;
padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small; padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
} }
@ -154,7 +154,7 @@
&.active:after { &.active:after {
.transform(rotate(45deg)); .transform(rotate(45deg));
background-color: @body-bg-color; .var(background-color, body-bg-color);
box-shadow: 0 0 1em 0 rgba(0,0,0,.6); box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
content: ""; content: "";
display: block; display: block;
@ -210,19 +210,19 @@
background: transparent url('../img/icons/search_white.png') no-repeat 1em center; background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
background-size: 1em auto; background-size: 1em auto;
border: none; border: none;
color: @menu-color; .var(color, menu-color);
line-height: 2.167em; line-height: 2.167em;
padding: .25em; padding: .25em;
padding-left: @icon-width + .75em; padding-left: @icon-width + .75em;
width: 100%; width: 100%;
&.active { &.active {
background-color: @menu-active-bg-color; .var(background-color, menu-active-bg-color);
} }
&:hover, &:hover,
&:focus { &:focus {
background-color: darken(@menu-bg-color, 20); .var(background-color, menu-search-hover-bg-color);
} }
} }
@ -240,8 +240,9 @@
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover, #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 { #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
> .nav-level-2 { > .nav-level-2 {
background-color: @menu-flyout-bg-color; .var(background-color, menu-flyout-bg-color);
border: 1px solid @gray-light; border: 1px solid;
.var(border-color, gray-light);
border-radius: .25em; border-radius: .25em;
box-shadow: 0 0 1em 0 rgba(0,0,0,.3); box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
padding: @vertical-padding 0; padding: @vertical-padding 0;
@ -252,9 +253,11 @@
&:after { &:after {
.transform(rotate(45deg)); .transform(rotate(45deg));
background-color: @body-bg-color; .var(background-color, body-bg-color);
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
border-left: 1px solid @gray-light; .var(border-bottom-color, gray-light);
border-left: 1px solid;
.var(border-left-color, gray-light);
content: ""; content: "";
display: block; display: block;
height: 1.1em; height: 1.1em;
@ -270,7 +273,7 @@
position: relative; position: relative;
> a { > a {
color: @menu-flyout-color; .var(color, menu-flyout-color);
padding-left: 1.5em; padding-left: 1.5em;
} }
@ -281,7 +284,7 @@
} }
&.active > a { &.active > a {
color: @menu-color; .var(color, menu-color);
} }
// Hide activity caret when displayed as flyout // Hide activity caret when displayed as flyout
@ -324,7 +327,7 @@
} }
a.badge { a.badge {
color: @text-color-inverted; .var(color, text-color-inverted);
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 1em; margin-right: 1em;
padding: .25em; padding: .25em;
@ -350,7 +353,7 @@
li { li {
display: block; display: block;
a, button[type="submit"] { a, button[type="submit"] {
background-color: @body-bg-color; .var(background-color, body-bg-color);
border: none; border: none;
left: -999px; left: -999px;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -384,13 +387,13 @@
} }
.search-input:focus ~ .search-reset:hover { .search-input:focus ~ .search-reset:hover {
background-color: darken(@menu-active-bg-color, 20); .var(background-color, menu-active-hover-bg-color);
} }
.search-reset { .search-reset {
background: none; background: none;
border: 0; border: 0;
color: @menu-color; .var(color, menu-color);
cursor: pointer; cursor: pointer;
display: none; display: none;
height: 100%; height: 100%;
@ -402,7 +405,7 @@
&:focus, &:focus,
&:hover { &:hover {
background-color: darken(@menu-bg-color, 20); .var(background-color, menu-search-hover-bg-color);
outline: none; outline: none;
} }
} }
@ -415,19 +418,19 @@ input[type=text].search-input {
} }
.search-input:focus:-moz-placeholder { // FF 18- .search-input:focus:-moz-placeholder { // FF 18-
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus::-moz-placeholder { // FF 19+ .search-input:focus::-moz-placeholder { // FF 19+
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus:-ms-input-placeholder { .search-input:focus:-ms-input-placeholder {
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus::-webkit-input-placeholder { .search-input:focus::-webkit-input-placeholder {
color: @gray-light; .var(color, gray-light);
} }
.search-input ~ .search-reset { .search-input ~ .search-reset {
@ -454,14 +457,14 @@ input[type=text].search-input {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
color: @text-color-light; .var(color, text-color-light);
position: absolute; position: absolute;
bottom: 0.2em; bottom: 0.2em;
right: 0; right: 0;
z-index: 3; z-index: 3;
i { i {
background-color: @body-bg-color; .var(background-color, body-bg-color);
border-radius: .25em 0 0 .25em; border-radius: .25em 0 0 .25em;
font-size: 1.125em; font-size: 1.125em;
width: 2em; width: 2em;
@ -518,7 +521,7 @@ html.no-js #toggle-sidebar {
} }
&.badge-nav-item a.badge { &.badge-nav-item a.badge {
color: @text-color-inverted; .var(color, text-color-inverted);
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 1em; margin-right: 1em;
padding: .25em; padding: .25em;

8
public/css/icinga/mixins.less
View File

@ -6,11 +6,14 @@
box-shadow: @arguments; box-shadow: @arguments;
} }
.button(@background-color: @body-bg-color, @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) { .button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@icinga-blue, 10%)) {
.rounded-corners(3px); .rounded-corners(3px);
background-color: extract-variable-default(@background-color);
background-color: @background-color; background-color: @background-color;
border: extract-variable-default(2px solid @border-font-color);
border: 2px solid @border-font-color; border: 2px solid @border-font-color;
color: extract-variable-default(@border-font-color);
color: @border-font-color; color: @border-font-color;
cursor: pointer; cursor: pointer;
line-height: normal; line-height: normal;
@ -24,7 +27,9 @@
&:focus, &:focus,
&:hover, &:hover,
&.btn-primary { &.btn-primary {
background-color: extract-variable-default(@border-font-color);
background-color: @border-font-color; background-color: @border-font-color;
color: extract-variable-default(@background-color);
color: @background-color; color: @background-color;
} }
@ -32,6 +37,7 @@
&.btn-primary:hover { &.btn-primary:hover {
background-color: @color-dark; background-color: @color-dark;
border-color: @color-dark; border-color: @color-dark;
color: extract-variable-default(@background-color);
color: @background-color; color: @background-color;
} }

6
public/css/icinga/modal.less
View File

@ -64,10 +64,10 @@
top: .75em; top: .75em;
right: .75em; right: .75em;
background-color: @gray; .var(background-color, "gray");
border: none; border: none;
border-radius: 50%; border-radius: 50%;
color: @text-color-inverted; .var(color, text-color-inverted);
height: 1.5em; height: 1.5em;
line-height: 1em; line-height: 1em;
padding: 0; padding: 0;
@ -102,7 +102,7 @@
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
background-color: @body-bg-color; .var(background-color, body-bg-color);
border-radius: .5em; border-radius: .5em;
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6); box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
flex: 1; flex: 1;

6
public/css/icinga/responsive.less
View File

@ -140,7 +140,8 @@
// Columns // Columns
#layout.twocols #col2 { #layout.twocols #col2 {
border-left: 1px solid @gray-lighter; border-left: 1px solid;
.var(border-left-color, gray-lighter);
} }
#layout.twocols.wide-layout #col2 { #layout.twocols.wide-layout #col2 {
@ -158,7 +159,8 @@
} }
#layout.twocols #col2 { #layout.twocols #col2 {
border-left: 1px solid @gray-lighter; border-left: 1px solid;
.var(border-left-color, gray-lighter);
&:empty { &:empty {
display: flex; display: flex;

7
public/css/icinga/setup.less
View File

@ -376,7 +376,7 @@ form#setup_requirements {
padding: 0.2em; padding: 0.2em;
margin: -1em -1em 1em; margin: -1em -1em 1em;
text-align: center; text-align: center;
color: @text-color; .var(color, text-color);
background-color: #f6fafa; background-color: #f6fafa;
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
@ -421,8 +421,9 @@ form#setup_requirements {
height: 15em; height: 15em;
margin: 1em; margin: 1em;
padding: 0.3em; padding: 0.3em;
border: 1px solid @gray-semilight; border: 1px solid;
background-color: @gray-lightest; .var(border-color, gray-semilight);
.var(background-color, gray-lightest);
.header { .header {
height: 2.5em; height: 2.5em;

21
public/css/icinga/tabs.less
View File

@ -3,7 +3,7 @@
// Styles for tab navigation of containers // Styles for tab navigation of containers
.tabs { .tabs {
background-color: @menu-bg-color; .var(background-color, menu-bg-color);
letter-spacing: -0.417em; letter-spacing: -0.417em;
} }
@ -27,18 +27,18 @@
} }
> a { > a {
color: @menu-color; .var(color, menu-color);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: fade(@body-bg-color, 50%); .var(background, tab-hover-bg-color);
} }
} }
&.active > a, &.active > a,
> a:focus { > a:focus {
background-color: @body-bg-color; .var(background-color, body-bg-color);
color: @text-color; .var(color, text-color);
} }
} }
@ -55,8 +55,8 @@
.tabs > li > .close-container-control:hover, .tabs > li > .close-container-control:hover,
.tabs > li > .refresh-container-control:focus, .tabs > li > .refresh-container-control:focus,
.tabs > li > .refresh-container-control:hover { .tabs > li > .refresh-container-control:hover {
background-color: @body-bg-color; .var(background-color, body-bg-color);
color: @text-color; .var(color, text-color);
text-decoration: none; text-decoration: none;
} }
@ -64,8 +64,9 @@
.box-shadow(); .box-shadow();
.rounded-corners(0 0 0.3em 0.3em); .rounded-corners(0 0 0.3em 0.3em);
background-color: @body-bg-color; .var(background-color, body-bg-color);
border: 1px solid @gray-light; border: 1px solid;
.var(border-color, gray-light);
border-top: none; border-top: none;
margin-left: -1px; margin-left: -1px;
min-width: 14em; min-width: 14em;
@ -73,7 +74,7 @@
} }
.tabs > .dropdown-nav-item > ul > li:hover > a { .tabs > .dropdown-nav-item > ul > li:hover > a {
background-color: @gray-lighter; .var(background-color, gray-lighter);
text-decoration: none; text-decoration: none;
} }

47
public/css/icinga/widgets.less
View File

@ -1,13 +1,14 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#announcements > ul { #announcements > ul {
background-color: @body-bg-color; .var(background-color, body-bg-color);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
> li { > li {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid;
.var(border-bottom-color, gray-lighter);
line-height: 1.5em; line-height: 1.5em;
padding: 0.5em 1em 0.5em 3em; padding: 0.5em 1em 0.5em 3em;
@ -117,7 +118,7 @@
} }
.link-description { .link-description {
color: @text-color-light; .var(color, text-color-light);
} }
.link-icon { .link-icon {
@ -195,14 +196,14 @@ table.multiselect tr[href] td {
} }
ul.tree li.active { ul.tree li.active {
background-color: @gray-lightest; .var(background-color, gray-lightest);
} }
button { button {
padding: .5em; padding: .5em;
border: none; border: none;
background: none; background: none;
color: @text-color; .var(color, text-color);
&:hover, &:focus { &:hover, &:focus {
color: @icinga-blue; color: @icinga-blue;
@ -226,7 +227,7 @@ form.role-form {
} }
.control-label-group em { .control-label-group em {
color: @text-color-light; .var(color, text-color-light);
font-style: normal; font-style: normal;
} }
@ -259,7 +260,7 @@ form.role-form {
h3 em { h3 em {
font-size: .857em; font-size: .857em;
font-weight: normal; font-weight: normal;
color: @text-color-light; .var(color, text-color-light);
} }
h4 { h4 {
@ -286,7 +287,8 @@ form.role-form {
} }
.collapsible-control { .collapsible-control {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
cursor: pointer; cursor: pointer;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -362,7 +364,7 @@ ul.tree li::before, ul.tree li::after {
position: absolute; position: absolute;
right: auto; right: auto;
left: -0.2em; left: -0.2em;
border-color: @gray-light; .var(border-color, gray-light);
border-style: dotted; border-style: dotted;
border-width: 0; border-width: 0;
} }
@ -404,7 +406,7 @@ ul.tree li a {
line-height: 2em; line-height: 2em;
padding: 0 .5em; padding: 0 .5em;
text-decoration: none; text-decoration: none;
color: @gray; .var(color, "gray");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0.8em 0.4em; background-position: 0.8em 0.4em;
} }
@ -414,7 +416,7 @@ ul.tree li a.error {
} }
ul.tree li a:hover { ul.tree li a:hover {
color: @text-color; .var(color, text-color);
text-decoration: underline; text-decoration: underline;
} }
@ -458,8 +460,9 @@ ul.tree li a.error:hover {
position: relative; position: relative;
.flyover-content { .flyover-content {
background-color: @body-bg-color; .var(background-color, body-bg-color);
border: 1px solid @gray-lighter; border: 1px solid;
.var(border-color, gray-lighter);
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
@ -467,9 +470,11 @@ ul.tree li a.error:hover {
} }
&.flyover-arrow-top .flyover-content:before { &.flyover-arrow-top .flyover-content:before {
background: @body-bg-color; .var(background, body-bg-color);
border-left: 1px solid @gray-lighter; border-left: 1px solid;
border-top: 1px solid @gray-lighter; .var(border-left-color, gray-lighter);
border-top: 1px solid;
.var(border-top-color, gray-lighter);
content: ""; content: "";
height: 1em; height: 1em;
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
@ -543,8 +548,8 @@ ul.tree li a.error:hover {
} }
.slice-state-not-checked { .slice-state-not-checked {
stroke: @gray-light; .var(stroke, gray-light);
background: @gray-light; .var(background, gray-light);
} }
.donut { .donut {
@ -561,7 +566,7 @@ ul.tree li a.error:hover {
.donut-label { .donut-label {
font-weight: bold; font-weight: bold;
fill: @text-color; .var(fill, text-color);
} }
.donut-label { .donut-label {
@ -570,7 +575,7 @@ ul.tree li a.error:hover {
} }
.donut-label-big { .donut-label-big {
color: @gray-light; .var(color, gray-light);
font-size: 6em; font-size: 6em;
line-height: 0; line-height: 0;
text-anchor: middle; text-anchor: middle;
@ -584,7 +589,7 @@ ul.tree li a.error:hover {
} }
.donut-label-small { .donut-label-small {
fill: @text-color; .var(fill, text-color);
font-size: 1.2em; font-size: 1.2em;
text-anchor: middle; text-anchor: middle;
-moz-transform: translateY(0.35em); -moz-transform: translateY(0.35em);

50
public/css/themes/icinga-light-theme.less
View File

@ -1,50 +0,0 @@
@original-menu-bg-color: #06062B;
@original-low-sat-blue: #404d72;
@gray: #7F7F7F;
@gray-semilight: #A9A9A9;
@gray-light: #C9C9C9;
@gray-lighter: #EEEEEE;
@gray-lightest: #F7F7F7;
@text-color: #535353;
@body-bg-color: #F5F9FA;
@menu-bg-color: #DEECF1;
@menu-color: #676767;
@menu-active-bg-color: #EDF7FC;
@menu-2ndlvl-color: #7E8182;
@low-sat-blue: #DEECF1;
@low-sat-blue-dark: #c0cccd;
#header-logo,
#mobile-menu-logo,
#about .icinga-logo {
filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
}
#menu input.search,
.controls input.search,
input.search {
background-image: url(../img/icons/search.png);
}
#login {
background-color: @original-menu-bg-color;
input[type=password],
input[type=text] {
background-color: @original-low-sat-blue;
}
}
.container {
&:before,
> .content:before {
background-image: url(../img/icinga-loader-light.gif)
}
}