tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4337 from Icinga/feature/icinga-dark-theme-login 

Feature/icinga dark theme login
This commit is contained in:
Johannes Meyer 2021-06-23 08:01:45 +02:00 committed by GitHub
parent 6640eced19 4e6049c115
commit fd8795a10c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 517 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
application/forms/Authentication/LoginForm.php
View File

@ -50,7 +50,7 @@ class LoginForm extends Form
'autocapitalize' => 'off',
'autocomplete' => 'username',
'class' => false === isset($formData['username']) ? 'autofocus' : '',
'label' => $this->translate('Username'),
'placeholder' => $this->translate('Username'),
'required' => true
)
);
@ -60,7 +60,7 @@ class LoginForm extends Form
array(
'required' => true,
'autocomplete' => 'current-password',
'label' => $this->translate('Password'),
'placeholder' => $this->translate('Password'),
'class' => isset($formData['username']) ? 'autofocus' : ''
)
);

22
application/layouts/scripts/body.phtml
View File

@ -3,6 +3,8 @@
use Icinga\Web\Url;
use Icinga\Web\Notification;
use Icinga\Authentication\Auth;
use ipl\Html\HtmlString;
use ipl\Web\Widget\Icon;
$moduleName = $this->layout()->moduleName;
if ($moduleName !== 'default') {
@ -70,7 +72,25 @@ if ($this->layout()->inlineLayout) {
$notifications = Notification::getInstance();
if ($notifications->hasMessages()) {
foreach ($notifications->popMessages() as $m) {
echo '<li class="' . $m->type . '">' . $this->escape($m->message) . '</li>';
switch ($m->type) {
case 'success':
$icon = new HtmlString(new Icon('check-circle'));
break;
case 'error':
$icon = new HtmlString(new Icon('times'));
break;
case 'warning':
$icon = new HtmlString(new Icon('exclamation-triangle'));
break;
case 'info':
$icon = new HtmlString(new Icon('info-circle'));
break;
default:
$icon = '';
break;
}
echo '<li class="' . $m->type . '">' . $icon . $this->escape($m->message) . '</li>';
}
}
?></ul>

2
application/views/scripts/about/index.phtml
View File

@ -2,7 +2,7 @@
<?= $tabs ?>
</div>
<div id="about" class="content content-centered">
<?= $this->img('img/icinga-logo-big-dark.png', null, array('width' => 320)) ?>
<?= $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
<dl class="name-value-list">
<?php if (isset($version['appVersion'])): ?>
<dt><?= $this->translate('Icinga Web 2 Version') ?></dt>

15
application/views/scripts/authentication/login.phtml
View File

@ -1,7 +1,5 @@
<div id="login">
<div class="login-wrapper">
<div class="login-form centered-ghost" data-base-target="layout">
<div class="login-form-content centered-content">
<div class="login-form" data-base-target="layout">
<div role="status" class="sr-only">
<?= $this->translate(
'Welcome to Icinga Web 2. For users of the screen reader Jaws full and expectant compliant'
@ -9,7 +7,7 @@
. ' Chrome, Safari and Firefox.'
) ?>
</div>
<div class="logo-wrapper"><div id="icinga-logo" class="invert" aria-hidden="true"></div></div>
<div class="logo-wrapper"><div id="icinga-logo" aria-hidden="true"></div></div>
<?php if ($requiresSetup): ?>
<p class="config-note"><?= sprintf(
$this->translate(
@ -28,7 +26,6 @@
<?= $this->qlink($this->translate('icinga.com'), 'https://icinga.com') ?>
</div>
</div>
</div>
<ul id="social">
<li>
<?= $this->qlink(
@ -67,4 +64,10 @@
</li>
</ul>
</div>
</div>
<div id="orb-analytics" class="orb" ><?= $this->img('img/orb-analytics.png'); ?></div>
<div id="orb-automation" class="orb"><?= $this->img('img/orb-automation.png'); ?></div>
<div id="orb-cloud" class="orb"><?= $this->img('img/orb-cloud.png'); ?></div>
<div id="orb-icinga" class="orb"><?= $this->img('img/orb-icinga.png'); ?></div>
<div id="orb-infrastructure" class="orb"><?= $this->img('img/orb-infrastructure.png'); ?></div>
<div id="orb-metrics" class="orb" ><?= $this->img('img/orb-metrics.png'); ?></div>
<div id="orb-notifactions" class="orb"><?= $this->img('img/orb-notifications.png'); ?></div>

2
modules/monitoring/application/views/scripts/show/contact.phtml
View File

@ -13,7 +13,7 @@
</div>
<?php return; endif ?>
<table class="avp" style="width: 70%">
<table class="name-value-table">
<tbody>
<tr>
<th style="width: 20%"></th>

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

@ -7,21 +7,6 @@
padding: .25em @gutter;
line-height: 1.3;
&:before {
background: -webkit-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
content: "";
display: block;
height: 6px;
position: absolute;
left: 0;
right: 0;
top: -7px;
}
.services-summary,
.hosts-summary {
float: right;
@ -621,7 +606,7 @@ form.instance-features span.description, form.object-features span.description {
text-align: left;
margin-right: 0;
width: @name-value-table-name-width;
color: @gray;
color: @text-color-light;
label {
font-size: inherit;

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

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

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

@ -2,13 +2,15 @@
// Black colors
@black: #535353;
@white: #fff;
// Gray colors
@gray: #7F7F7F;
@gray-semilight: #A9A9A9;
@gray-light: #C9C9C9;
@gray-lighter: #EEEEEE;
@gray-lightest: #F7F7F7;
@gray: #c4c4c4;
@gray-semilight: #888;
@gray-light: #5c5c5c;
@gray-lighter: #4b4b4b;
@gray-lightest: #3a3a3a;
@disabled-gray: #9a9a9a;
@ -28,10 +30,10 @@
@color-pending: #77aaff;
// Icinga colors
@icinga-blue: #0095BF;
@icinga-blue: #00C3ED;
@icinga-secondary: #EF4F98;
@low-sat-blue: #dae3e6;
@low-sat-blue-dark: #becbcf;
@low-sat-blue: #404d72;
@low-sat-blue-dark: #434374;
@icinga-blue-light: #a5c4cd;
@icinga-blue-dark: #0081a6;
@ -42,27 +44,28 @@
@color-notification-warning: @color-warning-handled;
// Background color for <body>
@body-bg-color: #fff;
@body-bg-color: #282E39;
// Text colors
@text-color: @black;
@text-color: @white;
@text-color-inverted: @body-bg-color;
@text-color-light: @gray;
@text-color-light: fade(@text-color, 75%);
@text-color-on-icinga-blue: @body-bg-color;
// Text color on <a>
@link-color: @text-color;
@tr-active-color: #E5F9FF;
@tr-hover-color: #F5FDFF;
@tr-active-color: rgba(0,195,237,0.5);
@tr-hover-color: rgba(0,195,237,0.2);
// Menu colors
@menu-bg-color: #494949;
@menu-active-bg-color: #333;
@menu-flyout-bg-color: @body-bg-color;
@menu-color: @text-color-inverted;
@menu-bg-color: #06062B;
@menu-active-bg-color: #181742;
@menu-color: #DBDBDB;
@menu-active-color: @text-color;
@menu-highlight-color: @icinga-blue;
@menu-2ndlvl-color: #c4c4c4;
@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
@menu-2ndlvl-highlight-color: @text-color-inverted;
@menu-flyout-bg-color: @body-bg-color;
@menu-flyout-color: @text-color;

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

@ -26,7 +26,7 @@ input.search {
.transition(border 0.3s ease);
.transition(background-image 0.2s ease);
background-image: url(../img/icons/search.png);
background-image: url(../img/icons/search_white.png);
background-repeat: no-repeat;
background-size: 1em 1em;
background-position: .25em center;
@ -113,7 +113,7 @@ input.search {
}
&.disabled {
color: @gray-light;
color: @disabled-gray;
cursor: no-drop;
}

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

@ -82,10 +82,6 @@ form.inline {
margin-left: 0;
}
.control-info {
opacity: .5;
}
.errors {
margin: 0;
}
@ -129,8 +125,8 @@ form.icinga-form.inline .control-label-group {
margin-right: 0;
}
&:hover:before {
color: black;
&:hover {
opacity: 1;
}
}

12
public/css/icinga/layout-structure.less
View File

@ -31,6 +31,18 @@ body {
flex-direction: column;
position: relative;
z-index: 2;
&:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1em;
background: linear-gradient(to left, rgba(0,0,0,.1), rgba(0,0,0,0));
z-index: 0;
}
}
#main {

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

@ -32,7 +32,7 @@
}
#header-logo-container {
background: @icinga-blue;
background: @menu-bg-color;
height: 6em;
padding: 1.25em;
width: 16em;
@ -200,37 +200,62 @@
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 12em;
}
#notifications > li {
background: no-repeat 1em center;
border-top: 1px solid @gray-light;
color: @body-bg-color;
color: @text-color;
display: block;
line-height: 2.5em;
padding-left: 3em;
border-left: .5em solid @gray-light;
background: @body-bg-color;
margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
.icon {
padding: .5em;
width: 3em;
text-align: center;
}
&:hover {
cursor: pointer;
}
&.error {
background-color: @color-notification-error;
background-image: url(../img/icons/error_white.png);
border-color: @color-down;
background: @color-down;
color: @body-bg-color;
.icon {
color: @body-bg-color;
}
}
&.info {
background-color: @color-notification-info;
border-color: @color-pending;
.icon {
color: @color-pending;
}
}
&.success {
background-color: @color-notification-success;
background-image: url(../img/icons/success.png);
color: @text-color;
border-color: @color-ok;
.icon {
color: @color-ok;
}
}
&.warning {
background-color: @color-notification-warning;
border-color: @color-warning;
background: @color-warning;
color: @body-bg-color;
.icon {
color: @body-bg-color;
}
}
}

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

@ -3,19 +3,21 @@
// Login page styles
#login {
height: 100%;
background-color: @icinga-blue;
background-color: @menu-bg-color;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/icingaweb2-background.jpg);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
// fallback ie 9
background-size: 100% 100%;
background-size: cover;
.login-wrapper {
height: 100%;
max-width: 85em;
padding: 0 1em;
margin: 0 auto;
z-index: 2;
@ -23,24 +25,16 @@
}
.login-form {
width: 24em;
position: relative;
background: white;
min-width: 288px;
height: 100%;
width: 33%;
box-shadow: 0 0 4em 1em rgba(0, 0, 0, 0.2);
}
.logo-wrapper {
position: absolute;
top: 1em; right: 1em; left: 1em;
z-index: 10;
}
#icinga-logo {
width: 100%;
max-width: 18em;
height: auto;
margin: 0 auto;
margin: 0 auto 2em auto;
&:after {
content: "";
@ -71,13 +65,12 @@
padding: 0;
}
.control-group {
margin: 0 auto; // Center horizontally
.form-errors,
input[type="text"],
input[type="password"] {
&:not(:last-child) {
margin-bottom: 1em;
}
.control-group,
.form-errors {
width: 24em;
}
.control-label-group {
@ -89,7 +82,6 @@
input[type=password],
input[type=text] {
border: solid 1px @gray-light;
display: block;
height: 2.5em;
margin: 0;
@ -108,8 +100,7 @@
}
.form-controls {
margin-bottom: 2em;
margin-top: 2em;
margin-top: 1.5em;
}
input[type=submit] {
@ -197,27 +188,15 @@
}
#login-footer {
position: absolute;
right: 2em; bottom: .25em; left: 2em;
border-top: 1px solid @gray-light;
padding: .5em;
font-size: @font-size-small;
&:after {
content: "";
display: block;
clear: both;
}
padding: .5em 0;
p {
float: left;
margin-bottom: 0;
}
a {
float: right;
font-weight: @font-weight-bold;
color: @icinga-blue;
color: @icinga-secondary;
&:hover {
text-decoration: none;
@ -225,3 +204,151 @@
}
}
}
.orb {
position: absolute;
pointer-events: none;
animation: pulse 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: center center;
}
.orb img {
height: auto;
width: 100%;
}
#orb-analytics {
top: -19%;
width: 25%;
left: 22.5%;
z-index: 0;
animation-name: pulseIntensely;
animation-duration: 7s;
animation-delay: -1s;
animation-direction: alternate-reverse;
}
#orb-analytics img {
opacity: .2;
}
#orb-automation {
bottom: -6%;
width: 60%;
left: 7%;
z-index: 0;
margin-left: -30%;
margin-bottom: -30%;
animation-duration: 2s;
animation-delay: -.5s
}
#orb-automation img {
opacity: .75;
}
#orb-cloud {
top: -6%;
width: 25%;
right: 4%;
z-index: 0;
margin-right: -12.5%;
margin-top: -12.5%;
animation-duration: 5s;
animation-delay: -.75s;
}
#orb-cloud img {
opacity: .4;
}
#orb-notifactions {
top: 7%;
right: 46%;
width: 10%;
margin: -5%;
animation-duration: 2s;
animation-delay: -.75s;
}
#orb-notifactions img {
opacity: .5;
}
#orb-metrics {
left: 5%;
top: 20%;
width: 35%;
margin: -17.5%;
animation-name: pulseIntensely;
animation-duration: 5s;
animation-delay: -1s;
}
#orb-metrics img {
opacity: .5;
}
#orb-icinga {
left: 50%;
top: 50%;
margin-top: -37.5em;
margin-left: -37.5em;
width: 75em;
z-index: 0;
}
#orb-icinga img {
opacity: .8;
}
#orb-infrastructure {
top: -36%;
left: -15%;
width: 30%;
animation-duration: 2s;
animation-delay: -1.5s;
}
#orb-infrastructure img {
opacity: .6;
}
@keyframes pulse {
0% {
opacity: .75;
transform: scale3d(1, 1, 1);
}
100% {
opacity: 1;
transform: scale3d(1.05, 1.05, 1);
}
}
@keyframes pulseIntensely {
0% {
opacity: .25;
transform: scale3d(1, 1, 1);
}
100% {
opacity: 1;
transform: scale3d(1.25, 1.25, 1);
}
}

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

@ -324,7 +324,7 @@ a:hover > .icon-cancel {
content: "";
display: block;
height: 2em;
background: linear-gradient(rgba(255,255,255,0), white);
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
position: absolute;
bottom: 0;
left: 0;
@ -337,7 +337,7 @@ a:hover > .icon-cancel {
&:after {
opacity: 0;
background: linear-gradient(rgba(238,238,238,0), #eee);
background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
}
}

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

@ -11,7 +11,6 @@
#menu {
background-color: @menu-bg-color;
box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
width: 100%;
flex: 1;
overflow: auto;
@ -69,6 +68,8 @@
color: @menu-color;
&.active {
color: @menu-active-color;
> a > .badge {
display: none;
}
@ -91,7 +92,7 @@
&:not(.selected) > a:hover,
&:not(.selected) > a:focus {
background-color: mix(#000, @menu-bg-color, 20);
background-color: fade(@menu-bg-color, 50%)
}
// Balance icon weight for non active menu items
@ -122,7 +123,7 @@
position: absolute;
right: -.75em;
background-color: #fff;
background-color: @body-bg-color;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
content: "";
display: block;
@ -162,10 +163,11 @@
position: absolute;
top: .5em;
right: -.75em;
z-index: 3;
}
&.active > a {
color: @menu-color;
color: @menu-2ndlvl-highlight-color;
}
}
@ -322,7 +324,7 @@
}
a.badge {
color: white;
color: @text-color-inverted;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
@ -452,10 +454,11 @@ input[type=text].search-input {
background: none;
border: none;
padding: 0;
color: @gray-light;
color: @text-color-light;
position: absolute;
bottom: 0.2em;
right: 0;
z-index: 3;
i {
background-color: @body-bg-color;
@ -497,11 +500,7 @@ html.no-js #toggle-sidebar {
&.nav-item:not(.badge-nav-item) {
&:not(.selected):not(.active):hover,
&:not(.selected):not(.active):focus {
background-color: darken(@menu-bg-color, 20);
> a {
color: @menu-2ndlvl-highlight-color;
}
background-color: @menu-2ndlvl-highlight-bg-color;
}
}
}
@ -519,7 +518,7 @@ html.no-js #toggle-sidebar {
}
&.badge-nav-item a.badge {
color: white;
color: @text-color-inverted;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
@ -534,11 +533,7 @@ html.no-js #toggle-sidebar {
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) {
&:hover {
background-color: darken(@menu-bg-color, 20);
a {
color: white;
}
background-color: @menu-2ndlvl-highlight-bg-color;
}
}
}

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

@ -118,71 +118,6 @@
.dashboard > div.container {
width: 100%;
}
#login {
#icinga-logo {
max-width: 12em;
}
.login-wrapper {
padding: 0 1em;
}
.login-form {
width: 100%;
}
.login-form-content.centered-content {
max-width: 100%;
}
}
#social {
width: 100%;
text-align: center;
bottom: 3em;
}
#social > li a i {
color: gray;
text-shadow: none;
}
}
#layout.wide-layout {
.login-wrapper {
// use as centered-ghost
text-align: center;
vertical-align: middle;
letter-spacing: -.417em;
}
// use as centered-ghost
.login-wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
// use as centered-ghost
.login-wrapper > * {
letter-spacing: normal;
}
.login-form {
// use as centered-content
display: inline-block;
vertical-align: middle;
// Style as box
width: 30em;
margin: 0;
border-radius: 1em;
height: auto;
padding: 12.5em 0 4em 0;
}
}
// Dashboard

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

@ -421,8 +421,8 @@ form#setup_requirements {
height: 15em;
margin: 1em;
padding: 0.3em;
border: 1px solid #ccc;
background-color: snow;
border: 1px solid @gray-semilight;
background-color: @gray-lightest;
.header {
height: 2.5em;

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

@ -3,7 +3,7 @@
// Styles for tab navigation of containers
.tabs {
background-color: @icinga-blue;
background-color: @menu-bg-color;
letter-spacing: -0.417em;
}
@ -27,11 +27,11 @@
}
> a {
color: @body-bg-color;
color: @menu-color;
&:hover {
text-decoration: none;
background: rgba(0,0,0,.1);
background: fade(@body-bg-color, 50%);
}
}

24
public/css/themes/colorblind.less
View File

@ -1,15 +1,15 @@
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
@color-ok: #CCFFD7;
@color-ok: fade(#77E08E, 50%);
@color-critical: #FE5566;
@color-critical-handled: #FF99AA;
@color-critical-handled: fade(#FE5566, 50%);
@color-warning: #EAD010;
@color-warning-handled: #FFF399;
@color-warning-handled: fade(#EAD010, 50%);
@color-unknown: #7791E0;
@color-unknown-handled: #B8C6FF;
@color-unknown-handled: fade(#7791E0, 50%);
@color-unreachable: @color-unknown;
@color-unreachable-handled: @color-unknown-handled;
@color-pending: #000000;
@color-pending:fade(#FFFFFF, 75%);
/* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */
.badge {
@ -18,34 +18,34 @@
.state-ok,
.state-up {
color: black;
color: @text-color;
}
.state-warning,
.state-critical,
.state-down,
.state-unknown {
&.handled {
color: black;
color: @text-color;
}
}
.state-warning,
.state-critical,
.state-down,
.state-unknown {
color: white;
color: @text-color-inverted;
}
.state-warning:not(.handled) {
text-shadow: 0 0 3px mix(#000000, @color-warning, 60);
text-shadow: 0 0 3px mix(@text-color, @color-warning, 60);
}
.state-critical:not(.handled),
.state-down:not(.handled) {
text-shadow: 0 0 1px mix(#000000, @color-critical, 20);
text-shadow: 0 0 1px mix(@text-color, @color-critical, 20);
}
.state-unknown:not(.handled),
.state-unreachable:not(.handled) {
text-shadow: 0 0 1px mix(#000000, @color-unknown, 20);
text-shadow: 0 0 1px mix(@text-color, @color-unknown, 20);
}
:
.processinfo .process > div.backend-running {
color: @text-color;
}

99
public/css/themes/high-contrast.less
View File

@ -2,6 +2,15 @@
@icinga-blue: #006D8C;
// Gray colors
@gray: #7F7F7F;
@gray-semilight: #A9A9A9;
@gray-light: #C9C9C9;
@gray-lighter: #EEEEEE;
@gray-lightest: #F7F7F7;
@disabled-gray: #9a9a9a;
// State colors
@color-ok: #006400;
@color-critical: #EE0000;
@color-critical-handled: #EE0000;
@ -13,6 +22,12 @@
@color-unreachable-handled: #800080;
@color-pending: #0000EE;
// Icinga colors
@low-sat-blue: #dae3e6;
// Background color for <body>
@body-bg-color: @white;
@text-color: #191919;
@text-color-light: #555555;
@ -26,8 +41,18 @@
}
}
#menu ul.nav-level-1 > .nav-item.active > a,
#menu .nav-level-1 > .nav-item.active:not(.selected) > a:hover {
color: @text-color;
background-color: @white;
}
#menu .nav-level-2 > .nav-item.active {
background-color: black;
background-color: @white;
a {
color: @text-color;
}
> a:focus, > a:hover {
opacity: 1;
@ -48,37 +73,53 @@
text-decoration: underline;
}
.badge {
background-color: @text-color-light;
.badge:not(.handled),
.state-badge:not(.handled) {
&.state-warning {
border: 1px solid @color-warning;
}
.badge.handled {
&.state-critical,
&.state-down {
border: 1px solid @color-critical;
}
&.state-unreachable {
border: 1px solid @color-unreachable;
}
&.state-unknown {
border: 1px solid @color-unknown;
}
&.state-ok,
&.state-up {
border: 1px solid @color-ok;
}
}
.badge.handled,
.badge.state-ok,
.state-badge.handled,
.state-badge.state-ok {
background-color: @body-bg-color !important;
color: @text-color;
color: @text-color !important;
&.state-warning {
border: 1px solid @color-warning-handled;
margin-top: -1px;
}
&.state-critical {
border: 1px solid @color-critical-handled;
margin-top: -1px;
}
&.state-critical,
&.state-down {
border: 1px solid @color-critical-handled;
margin-top: -1px;
}
&.state-unreachable {
border: 1px solid @color-unreachable-handled;
margin-top: -1px;
}
&.state-unknown {
border: 1px solid @color-unknown-handled;
margin-top: -1px;
}
}
@ -147,7 +188,8 @@
}
}
.icinga-controls {
.icinga-controls,
.search-editor {
input:not([type="checkbox"]):not([type="radio"]),
.toggle-switch .toggle-slider:before,
.toggle-switch > .toggle-slider,
@ -162,3 +204,30 @@
margin: 1px;
}
}
.icinga-module.module-icingadb .list-item.overdue {
background: none;
header > *:not(time),
.caption {
opacity: 1;
}
}
.controls input.search,
input.search {
background-image: url(../img/icons/search.png);
}
.search-bar,
.button-link {
border: 1px solid @icinga-blue;
}
.view-mode-switcher > label {
border: 1px solid @icinga-blue;
&:not(:first-of-type) {
border-left: none;
}
}

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

@ -0,0 +1,50 @@
@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)
}
}

BIN
public/img/icinga-loader-light.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
public/img/icinga-loader.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 32 KiB

9
public/img/icinga-logo-compact-inverted.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 41 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<g>
<path d="M17.444,16.237L9.477,27.661M17.444,16.237L33.957,12.164M17.757,16.572L22.381,24.296M15.795,14.324L9.01,8.77M18.425,13.096L22.419,4.799" style="fill:none;fill-rule:nonzero;stroke:rgb(126,129,130);stroke-width:0.75px;"/>
<path d="M5.234,28.221C5.083,26.219 6.585,24.474 8.588,24.324C10.591,24.171 12.337,25.675 12.486,27.677C12.636,29.679 11.136,31.425 9.133,31.575C7.13,31.726 5.384,30.224 5.234,28.221" style="fill:rgb(126,129,130);fill-rule:nonzero;"/>
<path d="M21.246,24.377C21.317,23.756 21.878,23.312 22.5,23.383C23.121,23.455 23.565,24.017 23.494,24.637C23.42,25.258 22.86,25.702 22.24,25.631C21.619,25.56 21.174,24.998 21.246,24.377M7.546,9.604C7.155,8.805 7.486,7.839 8.286,7.449C9.085,7.057 10.05,7.389 10.442,8.188C10.832,8.987 10.502,9.953 9.702,10.343C8.902,10.734 7.938,10.402 7.546,9.604M31.367,12.036C31.275,10.821 32.186,9.762 33.403,9.669C34.618,9.578 35.678,10.489 35.77,11.705C35.861,12.921 34.95,13.98 33.733,14.072C32.518,14.163 31.458,13.252 31.367,12.036M21.386,0.631C22.588,-0.348 24.359,-0.168 25.34,1.034C26.32,2.236 26.139,4.008 24.937,4.988C23.734,5.967 21.963,5.786 20.984,4.584C20.002,3.381 20.184,1.611 21.386,0.631M13.79,11.561C16.099,9.679 19.499,10.025 21.384,12.334C23.264,14.644 22.918,18.043 20.61,19.928C18.298,21.808 14.899,21.463 13.018,19.152C11.132,16.843 11.481,13.442 13.79,11.561" style="fill:rgb(126,129,130);fill-rule:nonzero;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
public/img/icinga-logo-inverted.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/img/icingaweb2-background-orbs.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/img/orb-analytics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
public/img/orb-automation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

BIN
public/img/orb-cloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
public/img/orb-icinga.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB

BIN
public/img/orb-infrastructure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
public/img/orb-metrics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 282 KiB

BIN
public/img/orb-notifications.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
public/img/select-icon-2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 305 B

BIN
public/img/select-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 B

After

Width:  |  Height:  |  Size: 176 B

7
public/img/select-icon.svg
View File

@ -1,6 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="253px" height="313px" viewBox="0 0 253 313" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="select-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M130.590338,127.704317 L181.781053,180.520134 C183.70293,182.503023 183.65347,185.668461 181.670581,187.590338 C180.737787,188.494431 179.489748,189 178.190714,189 L75.8092858,189 C73.0478621,189 70.8092858,186.761424 70.8092858,184 C70.8092858,182.700967 71.3148548,181.452928 72.2189475,180.520134 L123.409662,127.704317 C125.331539,125.721428 128.496977,125.671968 130.479866,127.593845 C130.517264,127.630092 130.554092,127.66692 130.590338,127.704317 Z" id="triangle" fill="#0095BF" transform="translate(127.000000, 156.500000) scale(1, -1) translate(-127.000000, -156.500000) "></path>
</g>
</svg>
<svg height="32" viewBox="0 0 24 32" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5.20126707.78766623 4.45386238 4.20402191c.16721345.15783356.16291017.40979541-.00961164.56277256-.081158.0719638-.18974398.11220597-.3027668.11220597h-8.90772462c-.24025844 0-.43502639-.17818569-.43502639-.39798892 0-.10340014.04398717-.20274128.12264801-.27698961l4.45386234-4.20402191c.16721345-.15783357.44262326-.16177048.61514507-.00879333.00325382.00288518.00645805.00581661.00961165.00879333z" fill="#00c3ed" transform="matrix(1 0 0 -1 7 20.666667)"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 900 B

After

Width:  |  Height:  |  Size: 558 B