Fix login markup
This commit is contained in:
Eric Lippmann
parent
2d5bd3085f
commit
16e5ce9e73
|
|
@ -1,51 +1,51 @@
|
||||||
<div id="login">
|
<div id="login" class="centered-ghost">
|
||||||
<div id="login-logo" aria-hidden="true"></div>
|
<div class="centered-content" data-base-target="layout">
|
||||||
<div class="form" data-base-target="layout">
|
<div id="icinga-logo" aria-hidden="true"></div>
|
||||||
<?php if ($requiresSetup): ?>
|
<?php if ($requiresSetup): ?>
|
||||||
<p class="config-note"><?= sprintf(
|
<p class="config-note"><?= sprintf(
|
||||||
$this->translate(
|
$this->translate(
|
||||||
'It appears that you did not configure Icinga Web 2 yet so it\'s not possible to log in without any defined '
|
'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'
|
. '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.'
|
. ' %1$sdocumentation%3$s or by using our %2$sweb-based setup-wizard%3$s.'
|
||||||
),
|
),
|
||||||
'<a href="http://docs.icinga.org/" title="' . $this->translate('Icinga Web 2 Documentation') . '">', // TODO: More exact documentation link..
|
'<a href="http://docs.icinga.org/" 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 href="' . $this->href('setup') . '" title="' . $this->translate('Icinga Web 2 Setup-Wizard') . '">',
|
||||||
'</a>'
|
'</a>'
|
||||||
); ?></p>
|
) ?></p>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
<?= $this->form ?>
|
<?= $this->form ?>
|
||||||
<div class="footer">
|
<div id="login-footer">
|
||||||
Icinga Web 2 © 2013-<?= date('Y'); ?><br><br>
|
<p>Icinga Web 2 © 2013-<?= date('Y') ?></p>
|
||||||
<?= $this->qlink($this->translate('The Icinga Project'), 'https://www.icinga.org'); ?>
|
<?= $this->qlink($this->translate('The Icinga Project'), 'https://www.icinga.org') ?>
|
||||||
<?= $this->qlink(
|
<?= $this->qlink(
|
||||||
null,
|
null,
|
||||||
'http://www.twitter.com/icinga',
|
'http://www.twitter.com/icinga',
|
||||||
null,
|
null,
|
||||||
array(
|
array(
|
||||||
'target' => '_blank',
|
'target' => '_blank',
|
||||||
'icon' => 'twitter',
|
'icon' => 'twitter',
|
||||||
'title' => $this->translate('Icinga on Twitter')
|
'title' => $this->translate('Icinga on Twitter')
|
||||||
)
|
)
|
||||||
); ?>
|
) ?>
|
||||||
<?= $this->qlink(
|
<?= $this->qlink(
|
||||||
null,
|
null,
|
||||||
'http://www.facebook.com/icinga',
|
'http://www.facebook.com/icinga',
|
||||||
null,
|
null,
|
||||||
array(
|
array(
|
||||||
'target' => '_blank',
|
'target' => '_blank',
|
||||||
'icon' => 'facebook-squared',
|
'icon' => 'facebook-squared',
|
||||||
'title' => $this->translate('Icinga on Facebook')
|
'title' => $this->translate('Icinga on Facebook')
|
||||||
)
|
)
|
||||||
) ?> <?= $this->qlink(
|
) ?> <?= $this->qlink(
|
||||||
null,
|
null,
|
||||||
'https://plus.google.com/+icinga',
|
'https://plus.google.com/+icinga',
|
||||||
null,
|
null,
|
||||||
array(
|
array(
|
||||||
'target' => '_blank',
|
'target' => '_blank',
|
||||||
'icon' => 'gplus-squared',
|
'icon' => 'gplus-squared',
|
||||||
'title' => $this->translate('Icinga on Google+')
|
'title' => $this->translate('Icinga on Google+')
|
||||||
)
|
)
|
||||||
); ?>
|
) ?>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -265,42 +265,9 @@ html {
|
||||||
margin-right: 1%;
|
margin-right: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo img {
|
|
||||||
/* TODO: Quickfix, this needs improvement */
|
|
||||||
width: 0 !important;
|
|
||||||
top: -100px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
#main {
|
#main {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#login {
|
|
||||||
.below-logo label {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin-left: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
form {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
form input {
|
|
||||||
margin: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
form input[type=submit] {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,183 +1,91 @@
|
||||||
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
||||||
|
|
||||||
#login {
|
// Login page styles
|
||||||
background-color: @icinga-blue;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.form-controls {
|
#login {
|
||||||
margin: 0;
|
#icinga-logo {
|
||||||
|
.fadein();
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-group {
|
background-color: @icinga-blue;
|
||||||
padding: 0;
|
|
||||||
|
.control-label {
|
||||||
|
color: @body-bg-color;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: @line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.errors {
|
.errors {
|
||||||
font-size: 0.9em;
|
background-color: @color-critical;
|
||||||
margin-bottom: 0.5em;
|
color: @body-bg-color;
|
||||||
margin-left:auto;
|
font-size: @font-size-small;
|
||||||
margin-right:auto;
|
margin: 2em 0 0 0;
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
> li {
|
||||||
position: absolute;
|
padding: 1em;
|
||||||
font-size: 0.9em;
|
|
||||||
top: 35%;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form h1 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-left: 2.3em;
|
|
||||||
border: none;
|
|
||||||
color: @text-color-inverted;
|
|
||||||
font-variant: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form div.element {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
ul.errors {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form label {
|
.control-group {
|
||||||
color: @text-color-inverted;
|
margin: 0 auto; // Center horizontally
|
||||||
font-weight: normal;
|
width: 24em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-label-group {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 2.5em;
|
padding: 0;
|
||||||
width: 15em;
|
|
||||||
margin-right: 2.5em;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
input[type=password],
|
||||||
margin-left: auto;
|
input[type=text] {
|
||||||
margin-right: auto;
|
background-color: @gray-light; // IE8 fallback
|
||||||
width: 18em;
|
background-color: rgba(255,255,255,0.2);
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input {
|
|
||||||
color: @text-color-inverted;
|
|
||||||
width: 18em;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
margin-left: 0;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: solid 3px @body-bg-color;
|
border-bottom: solid 3px @body-bg-color;
|
||||||
-webkit-transition: border 0.3s;
|
color: @body-bg-color;
|
||||||
-moz-transition: border 0.3s;
|
display: block;
|
||||||
-o-transition: border 0.3s;
|
margin: 0;
|
||||||
transition: border 0.3s;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form input:focus {
|
.form-controls {
|
||||||
border-bottom: solid 3px @body-bg-color;
|
margin-bottom: 2em;
|
||||||
background: rgba(255,255,255,0.4);
|
margin-top: 2em;
|
||||||
}
|
|
||||||
|
|
||||||
ul.errors {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=submit] {
|
input[type=submit] {
|
||||||
color: @text-color-inverted;
|
.button(@icinga-blue, @body-bg-color);
|
||||||
background: none;
|
margin: 0;
|
||||||
border: none;
|
width: 100%;
|
||||||
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 {
|
.config-note {
|
||||||
background: @body-bg-color;
|
|
||||||
color: @icinga-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
color: @text-color-inverted;
|
|
||||||
margin-top: 5em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: @text-color-inverted;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p.config-note {
|
|
||||||
width: 50%;
|
|
||||||
padding: 1em;
|
|
||||||
margin: 0 auto 2.5em;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
color: white;
|
||||||
background-color: @color-critical;
|
background-color: @color-critical;
|
||||||
|
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
|
||||||
|
max-width: 50%;
|
||||||
|
min-width: 24em;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @text-color-inverted;
|
color: @text-color-inverted;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p.info-box {
|
#login-footer {
|
||||||
width: 50%;
|
color: @body-bg-color;
|
||||||
height: 2.2em;
|
font-size: @font-size-small;
|
||||||
margin: 2em auto 2.5em;
|
|
||||||
|
|
||||||
i.icon-info {
|
a {
|
||||||
float: left;
|
font-weight: @font-weight-bold;
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
// Social links
|
||||||
text-decoration: underline;
|
&:hover > i {
|
||||||
|
color: @text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#login-logo {
|
|
||||||
background-image: url('../img/logo_icinga_big.png');
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
height: 177px;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 355px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* make keyframes that tell the start state and the end state of our object */
|
|
||||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
|
||||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
|
||||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
opacity:0; /* make things invisible upon start */
|
|
||||||
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
|
|
||||||
-moz-animation:fadeIn ease-in 1;
|
|
||||||
animation:fadeIn ease-in 1;
|
|
||||||
|
|
||||||
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
|
|
||||||
-moz-animation-fill-mode:forwards;
|
|
||||||
animation-fill-mode:forwards;
|
|
||||||
|
|
||||||
-webkit-animation-duration:1s;
|
|
||||||
-moz-animation-duration:1s;
|
|
||||||
animation-duration:1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in.one {
|
|
||||||
-webkit-animation-delay: 0.7s;
|
|
||||||
-moz-animation-delay: 0.7s;
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue