diff --git a/application/forms/Authentication/LoginForm.php b/application/forms/Authentication/LoginForm.php index 9f2fc8619..593867b7e 100644 --- a/application/forms/Authentication/LoginForm.php +++ b/application/forms/Authentication/LoginForm.php @@ -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' : '' ) ); diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml index 005309aef..87b570bfe 100644 --- a/application/layouts/scripts/body.phtml +++ b/application/layouts/scripts/body.phtml @@ -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 '
  • ' . $this->escape($m->message) . '
    • '; + 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 '
  • ' . $icon . $this->escape($m->message) . '
    • '; } } ?> diff --git a/application/views/scripts/about/index.phtml b/application/views/scripts/about/index.phtml index 080f2bee0..a45db9f76 100644 --- a/application/views/scripts/about/index.phtml +++ b/application/views/scripts/about/index.phtml @@ -2,7 +2,7 @@
    - img('img/icinga-logo-big-dark.png', null, array('width' => 320)) ?> + img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
    translate('Icinga Web 2 Version') ?>
    diff --git a/application/views/scripts/authentication/login.phtml b/application/views/scripts/authentication/login.phtml index 43a87c5db..cd63eed1c 100644 --- a/application/views/scripts/authentication/login.phtml +++ b/application/views/scripts/authentication/login.phtml @@ -1,70 +1,73 @@
    - - +
    diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index c760a9cdc..fdbe81c43 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -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; diff --git a/public/css/icinga/badges.less b/public/css/icinga/badges.less index b9c154349..eae95c219 100644 --- a/public/css/icinga/badges.less +++ b/public/css/icinga/badges.less @@ -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; diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 83df53318..5b1894cdb 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -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-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 @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; diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 0b53ccc8a..3f1ea7e18 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -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; } diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index 7f0fb82cc..64c766778 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -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; } } diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less index 97fa5b2b6..4b8c53218 100644 --- a/public/css/icinga/layout-structure.less +++ b/public/css/icinga/layout-structure.less @@ -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 { diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index b9a9bf2f0..e79566119 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -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; + } } } diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index f93779da9..f57f080d3 100644 --- a/public/css/icinga/login.less +++ b/public/css/icinga/login.less @@ -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 - } - - .control-group, - .form-errors { - width: 24em; + .form-errors, + input[type="text"], + input[type="password"] { + &:not(:last-child) { + margin-bottom: 1em; + } } .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] { @@ -172,9 +163,9 @@ display: block; text-decoration: none; -webkit-transform: scale(1, 1); - -moz-transform: scale(1, 1); - -ms-transform: scale(1, 1); - transform: scale(1, 1); + -moz-transform: scale(1, 1); + -ms-transform: scale(1, 1); + transform: scale(1, 1); } i { @@ -186,9 +177,9 @@ > li a:hover { -webkit-transform: scale(1.2, 1.2); - -moz-transform: scale(1.2, 1.2); - -ms-transform: scale(1.2, 1.2); - transform: scale(1.2, 1.2); + -moz-transform: scale(1.2, 1.2); + -ms-transform: scale(1.2, 1.2); + transform: scale(1.2, 1.2); } li:not(:last-child) { @@ -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); + } +} diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index c4a61bfae..cef87bb92 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -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); } } diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 63a2e8397..a93b39bac 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -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; } } } diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less index 60fda4617..6bb7580e5 100644 --- a/public/css/icinga/responsive.less +++ b/public/css/icinga/responsive.less @@ -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 diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less index 4b027f8c3..ae985bd0c 100644 --- a/public/css/icinga/setup.less +++ b/public/css/icinga/setup.less @@ -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; diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less index bb87e6fff..36f021241 100644 --- a/public/css/icinga/tabs.less +++ b/public/css/icinga/tabs.less @@ -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%); } } diff --git a/public/css/themes/colorblind.less b/public/css/themes/colorblind.less index 1af0c2a32..b15dc2ff4 100644 --- a/public/css/themes/colorblind.less +++ b/public/css/themes/colorblind.less @@ -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; } diff --git a/public/css/themes/high-contrast.less b/public/css/themes/high-contrast.less index c76706359..90ef7d82b 100644 --- a/public/css/themes/high-contrast.less +++ b/public/css/themes/high-contrast.less @@ -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-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; + } + + &.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.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; + } +} diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less new file mode 100644 index 000000000..fdca95f7f --- /dev/null +++ b/public/css/themes/icinga-light-theme.less @@ -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) + } +} diff --git a/public/img/icinga-loader-light.gif b/public/img/icinga-loader-light.gif new file mode 100644 index 000000000..04ac07ffc Binary files /dev/null and b/public/img/icinga-loader-light.gif differ diff --git a/public/img/icinga-loader.gif b/public/img/icinga-loader.gif index a732af0d8..727f4b464 100644 Binary files a/public/img/icinga-loader.gif and b/public/img/icinga-loader.gif differ diff --git a/public/img/icinga-logo-compact-inverted.svg b/public/img/icinga-logo-compact-inverted.svg new file mode 100644 index 000000000..e71c632a7 --- /dev/null +++ b/public/img/icinga-logo-compact-inverted.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/icinga-logo-inverted.svg b/public/img/icinga-logo-inverted.svg new file mode 100644 index 000000000..ec918e358 --- /dev/null +++ b/public/img/icinga-logo-inverted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icingaweb2-background-orbs.jpg b/public/img/icingaweb2-background-orbs.jpg new file mode 100644 index 000000000..fa4b71d21 Binary files /dev/null and b/public/img/icingaweb2-background-orbs.jpg differ diff --git a/public/img/orb-analytics.png b/public/img/orb-analytics.png new file mode 100644 index 000000000..7adae6fd3 Binary files /dev/null and b/public/img/orb-analytics.png differ diff --git a/public/img/orb-automation.png b/public/img/orb-automation.png new file mode 100644 index 000000000..eb292b54f Binary files /dev/null and b/public/img/orb-automation.png differ diff --git a/public/img/orb-cloud.png b/public/img/orb-cloud.png new file mode 100644 index 000000000..f5e4a64d4 Binary files /dev/null and b/public/img/orb-cloud.png differ diff --git a/public/img/orb-icinga.png b/public/img/orb-icinga.png new file mode 100644 index 000000000..9f7f2a6be Binary files /dev/null and b/public/img/orb-icinga.png differ diff --git a/public/img/orb-infrastructure.png b/public/img/orb-infrastructure.png new file mode 100644 index 000000000..871396527 Binary files /dev/null and b/public/img/orb-infrastructure.png differ diff --git a/public/img/orb-metrics.png b/public/img/orb-metrics.png new file mode 100644 index 000000000..199f21c07 Binary files /dev/null and b/public/img/orb-metrics.png differ diff --git a/public/img/orb-notifications.png b/public/img/orb-notifications.png new file mode 100644 index 000000000..297ba581d Binary files /dev/null and b/public/img/orb-notifications.png differ diff --git a/public/img/select-icon-2x.png b/public/img/select-icon-2x.png index 8d24b106d..57845dfc8 100644 Binary files a/public/img/select-icon-2x.png and b/public/img/select-icon-2x.png differ diff --git a/public/img/select-icon.png b/public/img/select-icon.png index 0cf513289..e0d9a5af8 100644 Binary files a/public/img/select-icon.png and b/public/img/select-icon.png differ diff --git a/public/img/select-icon.svg b/public/img/select-icon.svg index a0cfa17a0..cc8a01146 100644 --- a/public/img/select-icon.svg +++ b/public/img/select-icon.svg @@ -1,6 +1 @@ - - - - - - \ No newline at end of file + \ No newline at end of file