Redesign draft and implementation
This commit is contained in:
Bernd Erk
parent
7f6d5655f9
commit
2242f6192c
|
|
@ -41,7 +41,7 @@ class LoginForm extends Form
|
|||
array(
|
||||
'required' => true,
|
||||
'label' => $this->translate('Username'),
|
||||
'placeholder' => $this->translate('Please enter your username...'),
|
||||
'placeholder' => $this->translate(''),
|
||||
'class' => false === isset($formData['username']) ? 'autofocus' : ''
|
||||
)
|
||||
);
|
||||
|
|
@ -51,7 +51,7 @@ class LoginForm extends Form
|
|||
array(
|
||||
'required' => true,
|
||||
'label' => $this->translate('Password'),
|
||||
'placeholder' => $this->translate('...and your password'),
|
||||
'placeholder' => $this->translate(''),
|
||||
'class' => isset($formData['username']) ? 'autofocus' : ''
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form" data-base-target="layout">
|
||||
<h1><?= $this->translate('Welcome to Icinga Web 2'); ?></h1>
|
||||
<?php if ($requiresSetup): ?>
|
||||
<p class="config-note"><?= sprintf(
|
||||
$this->translate(
|
||||
|
|
@ -19,6 +18,13 @@
|
|||
); ?></p>
|
||||
<?php endif ?>
|
||||
<?= $this->form ?>
|
||||
<div class="footer">Icinga Web 2 © 2013-2015<br><a href="https://www.icinga.org"><?= $this->translate('The Icinga Project'); ?></a></div>
|
||||
<div class="footer">
|
||||
Icinga Web 2 © 2013-2015<br><br>
|
||||
<a href="https://www.icinga.org"><?= $this->translate('The Icinga Project'); ?></a>
|
||||
|
|
||||
<a href="http://www.twitter.com/icinga"><?= $this->translate('Icinga on Twitter'); ?></a>
|
||||
|
|
||||
<a href="http://www.facebook.com/icinga"><?= $this->translate('Icinga on Facebook'); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ foreach ($servicegroups as $s): ?>
|
|||
<td class="total">
|
||||
<?= $s->services_total; ?>
|
||||
</td>
|
||||
<td class="state">
|
||||
<td>
|
||||
<?php if ($s->services_ok): ?>
|
||||
<span class="state ok">
|
||||
<?= $this->qlink(
|
||||
|
|
|
|||
|
|
@ -80,16 +80,18 @@ span.state {
|
|||
font-weight: bold;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 1px 2px;
|
||||
padding: 2px 3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
span.state.active {
|
||||
border: 2px solid #555;
|
||||
padding: 2px 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span.state span.state {
|
||||
margin: 0 -3px 0 5px;
|
||||
margin: 0 -6px 0 5px;
|
||||
}
|
||||
|
||||
span.state.ok {
|
||||
|
|
@ -338,13 +340,11 @@ tr.state img.icon {
|
|||
margin-right: 2px;
|
||||
}
|
||||
|
||||
tr.state a {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Hostgroup badge quickfix */
|
||||
tr.state span a {
|
||||
color: inherit;
|
||||
color: white;
|
||||
font-size: 0.857em;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
tr.state:hover a {
|
||||
|
|
@ -965,9 +965,11 @@ table.groupview {
|
|||
border-spacing: 0.1em;
|
||||
|
||||
th {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
font-size: 1.0em;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid @gray-light;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
||||
|
||||
#logo {
|
||||
height: 3.6em;
|
||||
height: 4.0em;
|
||||
width: 13em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,13 @@
|
|||
/* Layout colors */
|
||||
|
||||
#sidebar {
|
||||
background-color: #f9f9f9;
|
||||
-moz-box-shadow: inset -0.3em 0 0.3em -0.3em #555;
|
||||
-webkit-box-shadow: inset -0.3em 0 0.3em -0.3em #555;
|
||||
box-shadow: inset -0.3em 0 0.3em -0.3em #555;
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: @icinga-blue;
|
||||
color: #ddd;
|
||||
color: #d0d0d0;
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
#header input {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ html {
|
|||
width: 12em;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 3.6em;
|
||||
top: 4.6em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
||||
|
||||
#login {
|
||||
background-color: @icinga-blue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.logo {
|
||||
background-color: @colorPetrol;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60%;
|
||||
border-bottom: 1px solid #d9d9d9d;
|
||||
bottom: 75%;
|
||||
text-align: center;
|
||||
-webkit-box-shadow: 0 3px 7px -3px #000;
|
||||
-moz-box-shadow: 0 3px 7px -3px #000;
|
||||
box-shadow: 0 3px 7px -3px #000;
|
||||
}
|
||||
|
||||
.image {
|
||||
|
|
@ -38,7 +34,7 @@
|
|||
.form {
|
||||
position: absolute;
|
||||
font-size: 0.9em;
|
||||
top: 45%;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -49,7 +45,7 @@
|
|||
font-size: 1.5em;
|
||||
margin-left: 2.3em;
|
||||
border: none;
|
||||
color: @colorTextDefault;
|
||||
color: @text-color-inverted;
|
||||
font-variant: unset;
|
||||
}
|
||||
|
||||
|
|
@ -57,61 +53,78 @@
|
|||
margin: 0;
|
||||
|
||||
ul.errors {
|
||||
margin-left: 10.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.form label {
|
||||
color: @text-color-inverted;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
line-height: 2.5em;
|
||||
width: 10em;
|
||||
margin-right: 2.5em;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
form {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 35em;
|
||||
width: 19.5em;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
form input {
|
||||
color: @text-color-inverted;
|
||||
width: 18em;
|
||||
padding: 0.5em;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
background: rgba(255,255,255,0.2);
|
||||
margin-left: 0;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-bottom: solid 3px @body-bg-color;
|
||||
-webkit-transition: border 0.3s;
|
||||
-moz-transition: border 0.3s;
|
||||
-o-transition: border 0.3s;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
form input:focus {
|
||||
background: white;
|
||||
border-bottom: solid 3px @body-bg-color;
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
ul.errors {
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
color: #fff;
|
||||
border: 2px solid #ddd;
|
||||
border-color: @colorPetrol;
|
||||
background: @colorPetrol;
|
||||
margin-top: 1.5em;
|
||||
margin-left: 12.5em;
|
||||
color: @text-color-inverted;
|
||||
background: none;
|
||||
border: none;
|
||||
margin-top: 3em;
|
||||
margin-right: 5px;
|
||||
border: solid 3px @body-bg-color;
|
||||
-webkit-transition: border 0.3s;
|
||||
-moz-transition: border 0.3s;
|
||||
-o-transition: border 0.3s;
|
||||
}
|
||||
|
||||
input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
|
||||
background-color: #333;
|
||||
border-color: #333;
|
||||
background: @body-bg-color;
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 7em;
|
||||
color: @text-color-inverted;
|
||||
margin-top: 5em;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
margin-left: 5em;
|
||||
margin-left: 2em;
|
||||
|
||||
a {
|
||||
color: @text-color-inverted;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
p.config-note {
|
||||
|
|
@ -123,7 +136,7 @@
|
|||
background-color: @colorCritical;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
color: @text-color-inverted;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
#menu a {
|
||||
color: black;
|
||||
color: @text-color-default;
|
||||
}
|
||||
|
||||
#menu .separator {
|
||||
|
|
@ -47,12 +47,13 @@
|
|||
}
|
||||
|
||||
#menu > nav > ul > li > a {
|
||||
color: @icinga-blue;
|
||||
font-size: 0.9em;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li.active > a {
|
||||
color: @colorTextDefault;
|
||||
color: @icinga-blue;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +66,6 @@
|
|||
}
|
||||
|
||||
#menu > nav > ul > li {
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li li {
|
||||
|
|
@ -75,7 +75,8 @@
|
|||
|
||||
/* Collapsed menu item color */
|
||||
#menu > nav > ul > li > a {
|
||||
color: @colorTextDefault;
|
||||
color: @text-color-light;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Sub item color */
|
||||
|
|
@ -90,7 +91,7 @@
|
|||
|
||||
#menu ul li a {
|
||||
display: block;
|
||||
line-height: 2.2em;
|
||||
line-height: 2.8em;
|
||||
padding-left: 0.7em;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -105,12 +106,16 @@
|
|||
}
|
||||
|
||||
#menu ul ul li a {
|
||||
line-height: 1.2em;
|
||||
line-height: 1.5em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li {
|
||||
margin-left: 5px;
|
||||
border-left: solid 5px @gray-lighter;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li > a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li.active {
|
||||
|
|
@ -118,14 +123,18 @@
|
|||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-left: solid 5px @icinga-blue;
|
||||
-webkit-transition: border 0.5s;
|
||||
-moz-transition: border 0.5s;
|
||||
-o-transition: border 0.5s;
|
||||
transition: border 0.5s;
|
||||
}
|
||||
|
||||
/* BEGIN OF Hoverable menu */
|
||||
|
||||
#menu li.hover {
|
||||
width: 26em;
|
||||
width: 28em;
|
||||
padding-left: 0.0em;
|
||||
margin-left: 5px;
|
||||
margin-left: 0px;
|
||||
margin-right: 5;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -133,25 +142,27 @@
|
|||
#menu li.hover > ul {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 11.5em;
|
||||
left: 10.9em;
|
||||
right: 0;
|
||||
top: -0.5em;
|
||||
padding-top: 1em;
|
||||
padding-left: 1em;
|
||||
padding-bottom: 0.5em;
|
||||
height: auto;
|
||||
background-color: #222222;
|
||||
background-color: @text-color;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
#menu li.hover > a {
|
||||
color: black;
|
||||
color: @icinga-blue;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#menu li.hover > ul a {
|
||||
width: 95%;
|
||||
display: block;
|
||||
color: white;
|
||||
color: @text-color-light;
|
||||
color: @text-color-inverted;
|
||||
}
|
||||
|
||||
#menu li.hover > ul a:hover {
|
||||
|
|
@ -164,7 +175,7 @@
|
|||
|
||||
#menu li.hover > ul > li.active > a {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
color: @text-color-light;
|
||||
}
|
||||
|
||||
#menu li.hover li {
|
||||
|
|
@ -205,7 +216,7 @@
|
|||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
height: 2.2em;
|
||||
height: 2.7em;
|
||||
display: block;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
|
|
@ -213,30 +224,33 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: 1.2em center;
|
||||
color: @colorTextDefault;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
html.ie8 #menu input.search {
|
||||
line-height: 2.5em;
|
||||
line-height: 2.8em;
|
||||
}
|
||||
|
||||
#menu input.search:-ms-input-placeholder {
|
||||
color: @colorTextDefault;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
#menu input.search::-webkit-input-placeholder {
|
||||
color: @colorTextDefault;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
#menu input.search::-moz-placeholder {
|
||||
color: @colorTextDefault;
|
||||
opacity: 1;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
#menu input.search.active {
|
||||
background-color: white;
|
||||
color: #121212;
|
||||
text-shadow: none;
|
||||
border-left: solid 5px @icinga-blue;
|
||||
-webkit-transition: border 0.5s;
|
||||
-moz-transition: border 0.5s;
|
||||
-o-transition: border 0.5s;
|
||||
transition: border 0.5s;
|
||||
}
|
||||
|
||||
#menu input.search.active::-moz-placeholder {
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ li li .badge-container {
|
|||
|
||||
#menu nav ul .badge {
|
||||
margin-right: 0em;
|
||||
top: 0.3em;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
#menu nav > ul > li.active > .badge-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue