mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-04-08 17:15:08 +02:00
Merge pull request #4398 from Icinga/light-mode-integrated
Integrate light theme as mode in default theme
This commit is contained in:
Johannes Meyer
GitHub
commit
ac108c9de8
@ -3,11 +3,66 @@
|
||||
|
||||
namespace Icinga\Util;
|
||||
|
||||
use Less_Tree_Anonymous;
|
||||
use Less_Tree_Expression;
|
||||
use Less_Tree_Quoted;
|
||||
use Less_Tree_Value;
|
||||
use lessc;
|
||||
|
||||
require_once 'lessphp/lessc.inc.php';
|
||||
|
||||
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)]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,20 @@
|
||||
|
||||
// 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: -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-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
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: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
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: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true));
|
||||
background: linear-gradient(to bottom, @a, @b);
|
||||
}
|
||||
|
||||
@ -24,11 +31,13 @@ pre > code {
|
||||
}
|
||||
|
||||
.chapter a {
|
||||
border-bottom: 1px @gray-light dotted;
|
||||
border-bottom: 1px dotted;
|
||||
.var(border-bottom-color, gray-light);
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px @text-color solid;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -41,7 +50,7 @@ pre > code {
|
||||
.rounded-corners();
|
||||
|
||||
background: @icinga-blue;
|
||||
color: @text-color-on-icinga-blue;
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
padding: 0 0.3em 0 0.3em;
|
||||
}
|
||||
|
||||
@ -88,7 +97,7 @@ tbody > tr:nth-child(odd) {
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(even) {
|
||||
background: @body-bg-color;
|
||||
.var(background, body-bg-color);
|
||||
}
|
||||
|
||||
td, th {
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
|
||||
.monitoring-statusbar {
|
||||
position: relative;
|
||||
background-color: @body-bg-color;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
.var(background-color, body-bg-color);
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
padding: .25em @gutter;
|
||||
line-height: 1.3;
|
||||
|
||||
@ -35,7 +36,7 @@
|
||||
}
|
||||
|
||||
&.-inactive {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -70,7 +71,7 @@
|
||||
color: white;
|
||||
}
|
||||
.group-grid-cell > div.state-none {
|
||||
background-color: @gray-light;
|
||||
.var(background-color, gray-light);
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,10 +156,10 @@
|
||||
}
|
||||
|
||||
.service-on {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
|
||||
> a {
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
letter-spacing: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -195,7 +196,7 @@
|
||||
padding: .25em .5em;
|
||||
|
||||
&:hover {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -254,7 +255,7 @@
|
||||
.tactical div.box.header {
|
||||
margin: 10px;
|
||||
min-height: 8em;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
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 {
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
|
||||
div.box.monitoringfeatures div.box-separator {
|
||||
@ -302,8 +305,10 @@ div.box.monitoringfeatures a.feature-highlight {
|
||||
}
|
||||
|
||||
div.box.hostservicechecks {
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
|
||||
div.box.hostservicechecks th {
|
||||
@ -315,15 +320,18 @@ div.box.hostservicechecks th {
|
||||
div.box.process {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
margin-bottom: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.process div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.process > .boxview > div.box {
|
||||
@ -334,7 +342,8 @@ div.box.process {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom:1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.process th {
|
||||
@ -373,13 +382,16 @@ div.backend-not-running {
|
||||
div.box.features {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
}
|
||||
|
||||
.features div.box.header {
|
||||
min-height: 5em;
|
||||
border-bottom:1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
}
|
||||
|
||||
.features > .boxview > div.box {
|
||||
@ -390,7 +402,8 @@ div.box.features {
|
||||
margin-top: 0;
|
||||
margin-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 {
|
||||
width: 100%;
|
||||
max-width: 50em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
color: @text-color;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
.var(color, text-color);
|
||||
}
|
||||
|
||||
.stats > .boxview > div.box {
|
||||
@ -414,12 +429,13 @@ div.box.stats {
|
||||
}
|
||||
|
||||
.stats > table > thead {
|
||||
color: @gray;
|
||||
.var(color, "gray");
|
||||
}
|
||||
|
||||
.stats > h2 {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
|
||||
> .hosts-summary,
|
||||
> .services-summary {
|
||||
@ -439,8 +455,10 @@ div.box.stats {
|
||||
div.timeline-legend {
|
||||
padding: 0.5em;
|
||||
margin-top: 2em;
|
||||
border: 1px solid @gray-lighter;
|
||||
border-left: 15px solid @gray;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-left: 15px solid;
|
||||
.var(border-left-color, "gray");
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
@ -460,7 +478,7 @@ div.timeline-legend {
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 2px;
|
||||
@ -606,7 +624,7 @@ form.instance-features span.description, form.object-features span.description {
|
||||
text-align: left;
|
||||
margin-right: 0;
|
||||
width: @name-value-table-name-width;
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
|
||||
label {
|
||||
font-size: inherit;
|
||||
@ -645,49 +663,50 @@ form.instance-features span.description, form.object-features span.description {
|
||||
|
||||
& + span.hint {
|
||||
margin: .35em;
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-output {
|
||||
border-left: 5px solid @gray-lighter;
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
padding: 0.66em 0.33em;
|
||||
|
||||
.state-critical {
|
||||
background-color: @color-critical;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-ok {
|
||||
background-color: @color-ok;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-warning {
|
||||
background-color: @color-warning;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-down {
|
||||
background-color: @color-down;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.state-up {
|
||||
background-color: @color-up;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
@ -696,10 +715,12 @@ form.instance-features span.description, form.object-features span.description {
|
||||
.markdown,
|
||||
.plugin-output {
|
||||
a {
|
||||
border-bottom: 1px @gray-light dotted;
|
||||
border-bottom: 1px dotted;
|
||||
.var(border-bottom-color, gray-light);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px @text-color solid;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
white-space: nowrap;
|
||||
|
||||
td {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
padding: 0.2em;
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
@ -33,11 +33,11 @@
|
||||
font-size: 130%;
|
||||
|
||||
a {
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
}
|
||||
&:focus, &:active {
|
||||
color: @icinga-blue;
|
||||
@ -66,10 +66,10 @@ form.filter-toggle {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: .5em;
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked ~ label {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
// Host name and IP addresses in the host and service detail view
|
||||
.host-meta {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
// Notification recipient in the notifications overview
|
||||
.notification-recipient {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
float: right;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
@ -91,7 +91,7 @@
|
||||
|
||||
// Plugin output in overviews
|
||||
.overview-plugin-output {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-family: @font-family-fixed;
|
||||
font-size: @font-size-small;
|
||||
margin: 0;
|
||||
@ -133,7 +133,7 @@
|
||||
|
||||
// Service description if in the service detail view
|
||||
.service-meta {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
@ -151,7 +151,7 @@
|
||||
&.state-critical,
|
||||
&.state-down {
|
||||
background-color: @color-critical;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
&.state-warning {
|
||||
background-color: @color-warning;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
@ -173,7 +173,7 @@
|
||||
|
||||
&.state-unknown {
|
||||
background-color: @color-unknown;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
@ -184,7 +184,7 @@
|
||||
|
||||
&.state-unreachable {
|
||||
background-color: @color-unreachable;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
&.handled {
|
||||
background-color: inherit;
|
||||
@ -195,7 +195,8 @@
|
||||
|
||||
// State class for history events
|
||||
&.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);
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
.about-social i {
|
||||
font-size: 1.7em;
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
}
|
||||
|
||||
.about-social i:hover {
|
||||
@ -23,7 +23,7 @@
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 5em;
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
}
|
||||
|
||||
.about-links i:hover {
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
|
||||
li {
|
||||
.rounded-corners(3px);
|
||||
border: 1px solid @low-sat-blue;
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
|
||||
&.active {
|
||||
border-color: @icinga-blue;
|
||||
@ -19,13 +20,14 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid @gray-light;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
}
|
||||
|
||||
h3 em,
|
||||
.previews em,
|
||||
.privilege-label em {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
}
|
||||
h3 em {
|
||||
font-weight: normal;
|
||||
@ -35,7 +37,7 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
|
||||
&.granted {
|
||||
color: @color-granted;
|
||||
@ -58,7 +60,8 @@
|
||||
|
||||
&:hover .spacer {
|
||||
.transition(opacity .25s .25s ease-in);
|
||||
border: 0 dashed @gray-light;
|
||||
border: 0 dashed;
|
||||
.var(border-color, gray-light);
|
||||
border-top-width: .2em;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -78,7 +81,8 @@
|
||||
}
|
||||
|
||||
.connector {
|
||||
border: 0 solid @gray-lighter;
|
||||
border: 0 solid;
|
||||
.var(border-color, gray-lighter);
|
||||
border-bottom-width: 2px;
|
||||
|
||||
&.granted {
|
||||
@ -97,7 +101,8 @@
|
||||
|
||||
.role {
|
||||
.rounded-corners(1em);
|
||||
border: 2px solid @gray-lighter;
|
||||
border: 2px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
|
||||
&.granted {
|
||||
border: 2px solid @color-granted;
|
||||
@ -110,7 +115,7 @@
|
||||
|
||||
.restriction {
|
||||
font-family: @font-family-fixed;
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
.bg-stateful();
|
||||
.rounded-corners();
|
||||
|
||||
background-color: @gray;
|
||||
color: @badge-color;
|
||||
.var(background-color, "gray");
|
||||
.var(color, badge-color);
|
||||
display: inline-block;
|
||||
font-family: @font-family-wide;
|
||||
font-size: @font-size-small;
|
||||
|
||||
@ -60,7 +60,10 @@
|
||||
|
||||
// Menu colors
|
||||
@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-hover-bg-color: darken(@menu-active-bg-color, 20%);
|
||||
@menu-color: #DBDBDB;
|
||||
@menu-active-color: @text-color;
|
||||
@menu-highlight-color: @icinga-blue;
|
||||
@ -69,6 +72,7 @@
|
||||
@menu-2ndlvl-highlight-color: @text-color-inverted;
|
||||
@menu-flyout-bg-color: @body-bg-color;
|
||||
@menu-flyout-color: @text-color;
|
||||
@tab-hover-bg-color: fade(@body-bg-color, 50%);
|
||||
|
||||
// Other colors
|
||||
@color-granted: #59cd59;
|
||||
@ -95,6 +99,40 @@
|
||||
@vertical-padding: 0.5em; // 6px
|
||||
@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
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
@ -128,7 +166,8 @@ blockquote, p, pre {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid @gray-lighter;
|
||||
border-left: 5px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
padding: 0.667em 0.333em;
|
||||
}
|
||||
|
||||
@ -138,7 +177,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
font-size: 1.333em;
|
||||
}
|
||||
|
||||
@ -164,7 +204,7 @@ h6 {
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: @gray-lightest;
|
||||
.var(background-color, gray-lightest);
|
||||
font-family: @font-family-fixed;
|
||||
font-size: @font-size-small;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
@ -200,7 +240,8 @@ td, th {
|
||||
content: "";
|
||||
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;
|
||||
|
||||
opacity: 0;
|
||||
@ -232,3 +273,12 @@ td, th {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
.pagination-control,
|
||||
.selection-info,
|
||||
@ -122,7 +130,7 @@ input.search {
|
||||
padding: 0.5em;
|
||||
}
|
||||
> a:hover {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,7 +110,8 @@ form.icinga-form.inline .control-label-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-top: 1px solid @gray-light;
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-light);
|
||||
|
||||
legend, .description {
|
||||
margin-left: .7em;
|
||||
@ -148,7 +149,7 @@ form.icinga-form .control-group .toggle-switch ~ .control-info {
|
||||
input[type="time"],
|
||||
textarea,
|
||||
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 {
|
||||
.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 {
|
||||
.button(@body-bg-color, @gray, @black);
|
||||
.button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", @black);
|
||||
}
|
||||
|
||||
button.noscript-apply {
|
||||
color: @gray;
|
||||
background-color: @gray-lightest;
|
||||
border-color: @gray;
|
||||
.var(color, "gray");
|
||||
.var(background-color, gray-lightest);
|
||||
.var(border-color, "gray");
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
@ -338,8 +339,9 @@ form.inline {
|
||||
top: 0;
|
||||
|
||||
display: inline-block;
|
||||
background: @low-sat-blue;
|
||||
border: 1px solid @low-sat-blue;
|
||||
.var(background, low-sat-blue);
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
box-sizing: content-box;
|
||||
border-radius: 1em;
|
||||
height: 4/3em;
|
||||
@ -352,9 +354,10 @@ form.inline {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background: @text-color-inverted;
|
||||
.var(background, text-color-inverted);
|
||||
border-radius: 1em;
|
||||
border: 1px solid @low-sat-blue;
|
||||
border: 1px solid;
|
||||
.var(border-color, low-sat-blue);
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: block;
|
||||
@ -376,6 +379,7 @@ form.inline {
|
||||
|
||||
.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 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 {
|
||||
@ -390,12 +394,12 @@ form.inline {
|
||||
cursor: default;
|
||||
|
||||
& > .toggle-slider {
|
||||
background-color: @gray-light;
|
||||
border-color: @gray-light;
|
||||
.var(background-color, gray-light);
|
||||
.var(border-color, gray-light);
|
||||
|
||||
&:before {
|
||||
background-color: @gray-lighter;
|
||||
border-color: @gray-light;
|
||||
.var(background-color, gray-lighter);
|
||||
.var(border-color, gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -407,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group {
|
||||
.icinga-controls {
|
||||
input[disabled],
|
||||
select[disabled] {
|
||||
background: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
@ -458,7 +462,7 @@ form.icinga-form {
|
||||
}
|
||||
|
||||
.form-description {
|
||||
background-color: fade(@gray, 5%);
|
||||
.var(background-color, "gray");
|
||||
}
|
||||
|
||||
.errors {
|
||||
@ -476,7 +480,7 @@ form.icinga-form {
|
||||
}
|
||||
|
||||
form.icinga-form .form-info {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-size: @font-size-small;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
.app-health {
|
||||
header {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
|
||||
span {
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,12 +36,13 @@
|
||||
}
|
||||
|
||||
tr:not(:last-child) td {
|
||||
border: 0 solid @gray-light;
|
||||
border: 0 solid;
|
||||
.var(border-color, gray-light);
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
section {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-family: @font-family-fixed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
#guest-error-message {
|
||||
.fadein();
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
#header-logo-container {
|
||||
background: @menu-bg-color;
|
||||
.var(background, menu-bg-color);
|
||||
height: 6em;
|
||||
padding: 1.25em;
|
||||
width: 16em;
|
||||
@ -81,8 +81,8 @@
|
||||
}
|
||||
|
||||
#layout {
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
font-family: @font-family;
|
||||
}
|
||||
|
||||
@ -141,11 +141,11 @@
|
||||
|
||||
// Mobile menu
|
||||
#layout.minimal-layout #sidebar {
|
||||
background-color: @menu-bg-color;
|
||||
.var(background-color, menu-bg-color);
|
||||
}
|
||||
|
||||
#mobile-menu-toggle {
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
text-align: right;
|
||||
|
||||
> button {
|
||||
@ -204,11 +204,12 @@
|
||||
}
|
||||
|
||||
#notifications > li {
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
display: block;
|
||||
line-height: 2.5em;
|
||||
border-left: .5em solid @gray-light;
|
||||
background: @body-bg-color;
|
||||
border-left: .5em solid;
|
||||
.var(border-left-color, gray-light);
|
||||
.var(background, body-bg-color);
|
||||
margin-bottom: 1px;
|
||||
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
|
||||
|
||||
@ -225,10 +226,10 @@
|
||||
&.error {
|
||||
border-color: @color-down;
|
||||
background: @color-down;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
|
||||
.icon {
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -251,10 +252,10 @@
|
||||
&.warning {
|
||||
border-color: @color-warning;
|
||||
background: @color-warning;
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
|
||||
.icon {
|
||||
color: @body-bg-color;
|
||||
.var(color, body-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -332,10 +333,10 @@
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
background-color: @menu-bg-color;
|
||||
.var(background-color, menu-bg-color);
|
||||
border-radius: 0 .25em .25em 0;
|
||||
box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
width: 20em;
|
||||
position: fixed;
|
||||
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,7 +4,7 @@
|
||||
|
||||
#login {
|
||||
height: 100%;
|
||||
background-color: @menu-bg-color;
|
||||
.var(background-color, menu-bg-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
text-align: center;
|
||||
@ -125,7 +125,7 @@
|
||||
padding: 1em;
|
||||
|
||||
a {
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,12 +89,12 @@ a:hover > .icon-cancel {
|
||||
.action-link();
|
||||
.rounded-corners(3px);
|
||||
|
||||
background: @low-sat-blue;
|
||||
.var(background, low-sat-blue);
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
&:hover {
|
||||
background: @low-sat-blue-dark;
|
||||
.var(background, low-sat-blue-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -105,11 +105,12 @@ a:hover > .icon-cancel {
|
||||
margin: 0;
|
||||
|
||||
> dt {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
&:hover {
|
||||
background-color: @gray-lightest;
|
||||
.var(background-color, gray-lightest);
|
||||
|
||||
> .remove-action {
|
||||
visibility: visible;
|
||||
@ -127,7 +128,7 @@ a:hover > .icon-cancel {
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
@ -138,7 +139,7 @@ a:hover > .icon-cancel {
|
||||
}
|
||||
|
||||
> dt {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
@ -162,11 +163,13 @@ a:hover > .icon-cancel {
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid @gray-light;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid @gray-lightest;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lightest);
|
||||
border-left: 5px solid transparent;
|
||||
|
||||
&:last-child {
|
||||
@ -196,7 +199,7 @@ a:hover > .icon-cancel {
|
||||
}
|
||||
|
||||
.name-value-table > tbody > tr > th {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
// Reset default font-weight
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
@ -274,15 +277,15 @@ a:hover > .icon-cancel {
|
||||
margin-top: -1em;
|
||||
margin-right: .25em;
|
||||
|
||||
background: @gray-lighter;
|
||||
color: @gray;
|
||||
.var(background, gray-lighter);
|
||||
.var(color, "gray");
|
||||
border: none;
|
||||
-webkit-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);
|
||||
|
||||
&:hover {
|
||||
background: @gray-light;
|
||||
.var(background, gray-light);
|
||||
}
|
||||
}
|
||||
|
||||
@ -324,7 +327,8 @@ a:hover > .icon-cancel {
|
||||
content: "";
|
||||
display: block;
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -337,7 +341,8 @@ a:hover > .icon-cancel {
|
||||
|
||||
&:after {
|
||||
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 {
|
||||
.unmet-dependencies {
|
||||
background-color: @color-warning;
|
||||
color: @text-color-on-icinga-blue;
|
||||
.var(color, text-color-on-icinga-blue);
|
||||
padding: .25em .5em;
|
||||
margin-left: -.5em;
|
||||
}
|
||||
@ -380,12 +385,12 @@ a:hover > .icon-cancel {
|
||||
.name-value-table {
|
||||
> caption {
|
||||
font-weight: normal;
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
}
|
||||
|
||||
> tbody > tr > th {
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
}
|
||||
|
||||
.missing {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@icon-width: 1.7em; // 1.5em width + 0.2em right margin
|
||||
|
||||
#menu {
|
||||
background-color: @menu-bg-color;
|
||||
.var(background-color, menu-bg-color);
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
@ -65,16 +65,16 @@
|
||||
|
||||
#menu .nav-level-1 > .nav-item {
|
||||
line-height: 2.167em; // 26 px
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
|
||||
&.active {
|
||||
color: @menu-active-color;
|
||||
.var(color, menu-active-color);
|
||||
|
||||
> a > .badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
background-color: @menu-active-bg-color;
|
||||
.var(background-color, menu-active-bg-color);
|
||||
}
|
||||
|
||||
&.no-icon > a {
|
||||
@ -87,12 +87,12 @@
|
||||
|
||||
&.active:not(.selected) > a:focus,
|
||||
&.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:focus {
|
||||
background-color: fade(@menu-bg-color, 50%)
|
||||
.var(background-color, menu-hover-bg-color);
|
||||
}
|
||||
|
||||
// Balance icon weight for non active menu items
|
||||
@ -110,11 +110,11 @@
|
||||
|
||||
#menu ul:not(.nav-level-2) > .selected > a {
|
||||
background-color: @menu-highlight-color;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
|
||||
|
||||
&:hover {
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@ -123,7 +123,7 @@
|
||||
position: absolute;
|
||||
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);
|
||||
content: "";
|
||||
display: block;
|
||||
@ -139,7 +139,7 @@
|
||||
line-height: 1.833em; // 22px
|
||||
|
||||
> a {
|
||||
color: @menu-2ndlvl-color;
|
||||
.var(color, menu-2ndlvl-color);
|
||||
font-size: @font-size-small;
|
||||
padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
|
||||
}
|
||||
@ -154,7 +154,7 @@
|
||||
&.active:after {
|
||||
.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);
|
||||
content: "";
|
||||
display: block;
|
||||
@ -210,19 +210,19 @@
|
||||
background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
|
||||
background-size: 1em auto;
|
||||
border: none;
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
line-height: 2.167em;
|
||||
padding: .25em;
|
||||
padding-left: @icon-width + .75em;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
background-color: @menu-active-bg-color;
|
||||
.var(background-color, menu-active-bg-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&: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) #menu .nav-level-1 > .nav-item:not(.active).hover {
|
||||
> .nav-level-2 {
|
||||
background-color: @menu-flyout-bg-color;
|
||||
border: 1px solid @gray-light;
|
||||
.var(background-color, menu-flyout-bg-color);
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-radius: .25em;
|
||||
box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
|
||||
padding: @vertical-padding 0;
|
||||
@ -252,9 +253,11 @@
|
||||
&:after {
|
||||
.transform(rotate(45deg));
|
||||
|
||||
background-color: @body-bg-color;
|
||||
border-bottom: 1px solid @gray-light;
|
||||
border-left: 1px solid @gray-light;
|
||||
.var(background-color, body-bg-color);
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-light);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1.1em;
|
||||
@ -270,7 +273,7 @@
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
color: @menu-flyout-color;
|
||||
.var(color, menu-flyout-color);
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
@ -281,7 +284,7 @@
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
}
|
||||
|
||||
// Hide activity caret when displayed as flyout
|
||||
@ -324,7 +327,7 @@
|
||||
}
|
||||
|
||||
a.badge {
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
flex: 0 1 auto;
|
||||
margin-right: 1em;
|
||||
padding: .25em;
|
||||
@ -350,7 +353,7 @@
|
||||
li {
|
||||
display: block;
|
||||
a, button[type="submit"] {
|
||||
background-color: @body-bg-color;
|
||||
.var(background-color, body-bg-color);
|
||||
border: none;
|
||||
left: -999px;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
@ -384,13 +387,13 @@
|
||||
}
|
||||
|
||||
.search-input:focus ~ .search-reset:hover {
|
||||
background-color: darken(@menu-active-bg-color, 20);
|
||||
.var(background-color, menu-active-hover-bg-color);
|
||||
}
|
||||
|
||||
.search-reset {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 100%;
|
||||
@ -402,7 +405,7 @@
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken(@menu-bg-color, 20);
|
||||
.var(background-color, menu-search-hover-bg-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -415,19 +418,19 @@ input[type=text].search-input {
|
||||
}
|
||||
|
||||
.search-input:focus:-moz-placeholder { // FF 18-
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
|
||||
.search-input:focus::-moz-placeholder { // FF 19+
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
|
||||
.search-input:focus:-ms-input-placeholder {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
|
||||
.search-input:focus::-webkit-input-placeholder {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
}
|
||||
|
||||
.search-input ~ .search-reset {
|
||||
@ -454,14 +457,14 @@ input[type=text].search-input {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
position: absolute;
|
||||
bottom: 0.2em;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
|
||||
i {
|
||||
background-color: @body-bg-color;
|
||||
.var(background-color, body-bg-color);
|
||||
border-radius: .25em 0 0 .25em;
|
||||
font-size: 1.125em;
|
||||
width: 2em;
|
||||
@ -518,7 +521,7 @@ html.no-js #toggle-sidebar {
|
||||
}
|
||||
|
||||
&.badge-nav-item a.badge {
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
flex: 0 1 auto;
|
||||
margin-right: 1em;
|
||||
padding: .25em;
|
||||
|
||||
@ -6,11 +6,14 @@
|
||||
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);
|
||||
|
||||
background-color: extract-variable-default(@background-color);
|
||||
background-color: @background-color;
|
||||
border: extract-variable-default(2px solid @border-font-color);
|
||||
border: 2px solid @border-font-color;
|
||||
color: extract-variable-default(@border-font-color);
|
||||
color: @border-font-color;
|
||||
cursor: pointer;
|
||||
line-height: normal;
|
||||
@ -24,7 +27,9 @@
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.btn-primary {
|
||||
background-color: extract-variable-default(@border-font-color);
|
||||
background-color: @border-font-color;
|
||||
color: extract-variable-default(@background-color);
|
||||
color: @background-color;
|
||||
}
|
||||
|
||||
@ -32,6 +37,7 @@
|
||||
&.btn-primary:hover {
|
||||
background-color: @color-dark;
|
||||
border-color: @color-dark;
|
||||
color: extract-variable-default(@background-color);
|
||||
color: @background-color;
|
||||
}
|
||||
|
||||
|
||||
@ -64,10 +64,10 @@
|
||||
top: .75em;
|
||||
right: .75em;
|
||||
|
||||
background-color: @gray;
|
||||
.var(background-color, "gray");
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: @text-color-inverted;
|
||||
.var(color, text-color-inverted);
|
||||
height: 1.5em;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
@ -102,7 +102,7 @@
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: @body-bg-color;
|
||||
.var(background-color, body-bg-color);
|
||||
border-radius: .5em;
|
||||
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
|
||||
flex: 1;
|
||||
|
||||
@ -140,7 +140,8 @@
|
||||
// Columns
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
}
|
||||
|
||||
#layout.twocols.wide-layout #col2 {
|
||||
@ -158,7 +159,8 @@
|
||||
}
|
||||
|
||||
#layout.twocols #col2 {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
|
||||
&:empty {
|
||||
display: flex;
|
||||
|
||||
@ -376,7 +376,7 @@ form#setup_requirements {
|
||||
padding: 0.2em;
|
||||
margin: -1em -1em 1em;
|
||||
text-align: center;
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
background-color: #f6fafa;
|
||||
border: 1px solid lightgrey;
|
||||
}
|
||||
@ -421,8 +421,9 @@ form#setup_requirements {
|
||||
height: 15em;
|
||||
margin: 1em;
|
||||
padding: 0.3em;
|
||||
border: 1px solid @gray-semilight;
|
||||
background-color: @gray-lightest;
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-semilight);
|
||||
.var(background-color, gray-lightest);
|
||||
|
||||
.header {
|
||||
height: 2.5em;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// Styles for tab navigation of containers
|
||||
|
||||
.tabs {
|
||||
background-color: @menu-bg-color;
|
||||
.var(background-color, menu-bg-color);
|
||||
letter-spacing: -0.417em;
|
||||
}
|
||||
|
||||
@ -27,18 +27,18 @@
|
||||
}
|
||||
|
||||
> a {
|
||||
color: @menu-color;
|
||||
.var(color, menu-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: fade(@body-bg-color, 50%);
|
||||
.var(background, tab-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a,
|
||||
> a:focus {
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,8 +55,8 @@
|
||||
.tabs > li > .close-container-control:hover,
|
||||
.tabs > li > .refresh-container-control:focus,
|
||||
.tabs > li > .refresh-container-control:hover {
|
||||
background-color: @body-bg-color;
|
||||
color: @text-color;
|
||||
.var(background-color, body-bg-color);
|
||||
.var(color, text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -64,8 +64,9 @@
|
||||
.box-shadow();
|
||||
.rounded-corners(0 0 0.3em 0.3em);
|
||||
|
||||
background-color: @body-bg-color;
|
||||
border: 1px solid @gray-light;
|
||||
.var(background-color, body-bg-color);
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-light);
|
||||
border-top: none;
|
||||
margin-left: -1px;
|
||||
min-width: 14em;
|
||||
@ -73,7 +74,7 @@
|
||||
}
|
||||
|
||||
.tabs > .dropdown-nav-item > ul > li:hover > a {
|
||||
background-color: @gray-lighter;
|
||||
.var(background-color, gray-lighter);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
||||
|
||||
#announcements > ul {
|
||||
background-color: @body-bg-color;
|
||||
.var(background-color, body-bg-color);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-lighter);
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 1em 0.5em 3em;
|
||||
|
||||
@ -117,7 +118,7 @@
|
||||
}
|
||||
|
||||
.link-description {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
@ -195,14 +196,14 @@ table.multiselect tr[href] td {
|
||||
}
|
||||
|
||||
ul.tree li.active {
|
||||
background-color: @gray-lightest;
|
||||
.var(background-color, gray-lightest);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: .5em;
|
||||
border: none;
|
||||
background: none;
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: @icinga-blue;
|
||||
@ -226,7 +227,7 @@ form.role-form {
|
||||
}
|
||||
|
||||
.control-label-group em {
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -259,7 +260,7 @@ form.role-form {
|
||||
h3 em {
|
||||
font-size: .857em;
|
||||
font-weight: normal;
|
||||
color: @text-color-light;
|
||||
.var(color, text-color-light);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -286,7 +287,8 @@ form.role-form {
|
||||
}
|
||||
|
||||
.collapsible-control {
|
||||
border-bottom: 1px solid @gray-light;
|
||||
border-bottom: 1px solid;
|
||||
.var(border-bottom-color, gray-light);
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
@ -362,7 +364,7 @@ ul.tree li::before, ul.tree li::after {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
left: -0.2em;
|
||||
border-color: @gray-light;
|
||||
.var(border-color, gray-light);
|
||||
border-style: dotted;
|
||||
border-width: 0;
|
||||
}
|
||||
@ -404,7 +406,7 @@ ul.tree li a {
|
||||
line-height: 2em;
|
||||
padding: 0 .5em;
|
||||
text-decoration: none;
|
||||
color: @gray;
|
||||
.var(color, "gray");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.8em 0.4em;
|
||||
}
|
||||
@ -414,7 +416,7 @@ ul.tree li a.error {
|
||||
}
|
||||
|
||||
ul.tree li a:hover {
|
||||
color: @text-color;
|
||||
.var(color, text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -458,8 +460,9 @@ ul.tree li a.error:hover {
|
||||
position: relative;
|
||||
|
||||
.flyover-content {
|
||||
background-color: @body-bg-color;
|
||||
border: 1px solid @gray-lighter;
|
||||
.var(background-color, body-bg-color);
|
||||
border: 1px solid;
|
||||
.var(border-color, gray-lighter);
|
||||
box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
@ -467,9 +470,11 @@ ul.tree li a.error:hover {
|
||||
}
|
||||
|
||||
&.flyover-arrow-top .flyover-content:before {
|
||||
background: @body-bg-color;
|
||||
border-left: 1px solid @gray-lighter;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
.var(background, body-bg-color);
|
||||
border-left: 1px solid;
|
||||
.var(border-left-color, gray-lighter);
|
||||
border-top: 1px solid;
|
||||
.var(border-top-color, gray-lighter);
|
||||
content: "";
|
||||
height: 1em;
|
||||
-ms-transform: rotate(45deg);
|
||||
@ -543,8 +548,8 @@ ul.tree li a.error:hover {
|
||||
}
|
||||
|
||||
.slice-state-not-checked {
|
||||
stroke: @gray-light;
|
||||
background: @gray-light;
|
||||
.var(stroke, gray-light);
|
||||
.var(background, gray-light);
|
||||
}
|
||||
|
||||
.donut {
|
||||
@ -561,7 +566,7 @@ ul.tree li a.error:hover {
|
||||
|
||||
.donut-label {
|
||||
font-weight: bold;
|
||||
fill: @text-color;
|
||||
.var(fill, text-color);
|
||||
}
|
||||
|
||||
.donut-label {
|
||||
@ -570,7 +575,7 @@ ul.tree li a.error:hover {
|
||||
}
|
||||
|
||||
.donut-label-big {
|
||||
color: @gray-light;
|
||||
.var(color, gray-light);
|
||||
font-size: 6em;
|
||||
line-height: 0;
|
||||
text-anchor: middle;
|
||||
@ -584,7 +589,7 @@ ul.tree li a.error:hover {
|
||||
}
|
||||
|
||||
.donut-label-small {
|
||||
fill: @text-color;
|
||||
.var(fill, text-color);
|
||||
font-size: 1.2em;
|
||||
text-anchor: middle;
|
||||
-moz-transform: translateY(0.35em);
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user