Merge pull request #4337 from Icinga/feature/icinga-dark-theme-login
Feature/icinga dark theme login
This commit is contained in:
Johannes Meyer
GitHub
commit
fd8795a10c
|
|
@ -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' : ''
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,73 @@
|
|||
<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 role="status" class="sr-only">
|
||||
<?= $this->translate(
|
||||
'Welcome to Icinga Web 2. For users of the screen reader Jaws full and expectant compliant'
|
||||
. ' accessibility is possible only with use of the Firefox browser. VoiceOver on Mac OS X is tested on'
|
||||
. ' Chrome, Safari and Firefox.'
|
||||
) ?>
|
||||
</div>
|
||||
<div class="logo-wrapper"><div id="icinga-logo" class="invert" aria-hidden="true"></div></div>
|
||||
<?php if ($requiresSetup): ?>
|
||||
<p class="config-note"><?= sprintf(
|
||||
$this->translate(
|
||||
'It appears that you did not configure Icinga Web 2 yet so it\'s not possible to log in without any defined '
|
||||
. 'authentication method. Please define a authentication method by following the instructions in the'
|
||||
. ' %1$sdocumentation%3$s or by using our %2$sweb-based setup-wizard%3$s.'
|
||||
),
|
||||
'<a href="https://icinga.com/docs/" title="' . $this->translate('Icinga Web 2 Documentation') . '">', // TODO: More exact documentation link
|
||||
'<a href="' . $this->href('setup') . '" title="' . $this->translate('Icinga Web 2 Setup-Wizard') . '">',
|
||||
'</a>'
|
||||
) ?></p>
|
||||
<?php endif ?>
|
||||
<?= $this->form ?>
|
||||
<div id="login-footer">
|
||||
<p>Icinga Web 2 © 2013-<?= date('Y') ?></p>
|
||||
<?= $this->qlink($this->translate('icinga.com'), 'https://icinga.com') ?>
|
||||
</div>
|
||||
</div>
|
||||
<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'
|
||||
. ' accessibility is possible only with use of the Firefox browser. VoiceOver on Mac OS X is tested on'
|
||||
. ' Chrome, Safari and Firefox.'
|
||||
) ?>
|
||||
</div>
|
||||
<div class="logo-wrapper"><div id="icinga-logo" aria-hidden="true"></div></div>
|
||||
<?php if ($requiresSetup): ?>
|
||||
<p class="config-note"><?= sprintf(
|
||||
$this->translate(
|
||||
'It appears that you did not configure Icinga Web 2 yet so it\'s not possible to log in without any defined '
|
||||
. 'authentication method. Please define a authentication method by following the instructions in the'
|
||||
. ' %1$sdocumentation%3$s or by using our %2$sweb-based setup-wizard%3$s.'
|
||||
),
|
||||
'<a href="https://icinga.com/docs/" title="' . $this->translate('Icinga Web 2 Documentation') . '">', // TODO: More exact documentation link
|
||||
'<a href="' . $this->href('setup') . '" title="' . $this->translate('Icinga Web 2 Setup-Wizard') . '">',
|
||||
'</a>'
|
||||
) ?></p>
|
||||
<?php endif ?>
|
||||
<?= $this->form ?>
|
||||
<div id="login-footer">
|
||||
<p>Icinga Web 2 © 2013-<?= date('Y') ?></p>
|
||||
<?= $this->qlink($this->translate('icinga.com'), 'https://icinga.com') ?>
|
||||
</div>
|
||||
<ul id="social">
|
||||
<li>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'https://twitter.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'twitter',
|
||||
'title' => $this->translate('Icinga on Twitter')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
<li>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'https://www.facebook.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'facebook-squared',
|
||||
'title' => $this->translate('Icinga on Facebook')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
<li><?= $this->qlink(
|
||||
null,
|
||||
'https://github.com/Icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'github-circled',
|
||||
'title' => $this->translate('Icinga on GitHub')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="social">
|
||||
<li>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'https://twitter.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'twitter',
|
||||
'title' => $this->translate('Icinga on Twitter')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
<li>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'https://www.facebook.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'facebook-squared',
|
||||
'title' => $this->translate('Icinga on Facebook')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
<li><?= $this->qlink(
|
||||
null,
|
||||
'https://github.com/Icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'github-circled',
|
||||
'title' => $this->translate('Icinga on GitHub')
|
||||
)
|
||||
) ?>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 32 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 B After Width: | Height: | Size: 305 B |
Binary file not shown.
|
Before Width: | Height: | Size: 155 B After Width: | Height: | Size: 176 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 900 B After Width: | Height: | Size: 558 B |
Loading…
Reference in New Issue