Fix login markup
This commit is contained in:
Eric Lippmann
parent
2d5bd3085f
commit
16e5ce9e73
|
|
@ -1,51 +1,51 @@
|
|||
<div id="login">
|
||||
<div id="login-logo" aria-hidden="true"></div>
|
||||
<div class="form" data-base-target="layout">
|
||||
<?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="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>'
|
||||
); ?></p>
|
||||
<?php endif ?>
|
||||
<?= $this->form ?>
|
||||
<div class="footer">
|
||||
Icinga Web 2 © 2013-<?= date('Y'); ?><br><br>
|
||||
<?= $this->qlink($this->translate('The Icinga Project'), 'https://www.icinga.org'); ?>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'http://www.twitter.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'twitter',
|
||||
'title' => $this->translate('Icinga on Twitter')
|
||||
)
|
||||
); ?>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'http://www.facebook.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'facebook-squared',
|
||||
'title' => $this->translate('Icinga on Facebook')
|
||||
)
|
||||
) ?> <?= $this->qlink(
|
||||
null,
|
||||
'https://plus.google.com/+icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'gplus-squared',
|
||||
'title' => $this->translate('Icinga on Google+')
|
||||
)
|
||||
); ?>
|
||||
<div id="login" class="centered-ghost">
|
||||
<div class="centered-content" data-base-target="layout">
|
||||
<div id="icinga-logo" aria-hidden="true"></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="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>'
|
||||
) ?></p>
|
||||
<?php endif ?>
|
||||
<?= $this->form ?>
|
||||
<div id="login-footer">
|
||||
<p>Icinga Web 2 © 2013-<?= date('Y') ?></p>
|
||||
<?= $this->qlink($this->translate('The Icinga Project'), 'https://www.icinga.org') ?>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'http://www.twitter.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'twitter',
|
||||
'title' => $this->translate('Icinga on Twitter')
|
||||
)
|
||||
) ?>
|
||||
<?= $this->qlink(
|
||||
null,
|
||||
'http://www.facebook.com/icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'facebook-squared',
|
||||
'title' => $this->translate('Icinga on Facebook')
|
||||
)
|
||||
) ?> <?= $this->qlink(
|
||||
null,
|
||||
'https://plus.google.com/+icinga',
|
||||
null,
|
||||
array(
|
||||
'target' => '_blank',
|
||||
'icon' => 'gplus-squared',
|
||||
'title' => $this->translate('Icinga on Google+')
|
||||
)
|
||||
) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -265,42 +265,9 @@ html {
|
|||
margin-right: 1%;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
/* TODO: Quickfix, this needs improvement */
|
||||
width: 0 !important;
|
||||
top: -100px;
|
||||
position: absolute;
|
||||
}
|
||||
#main {
|
||||
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+ */
|
||||
|
||||
#login {
|
||||
background-color: @icinga-blue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// Login page styles
|
||||
|
||||
.form-controls {
|
||||
margin: 0;
|
||||
#login {
|
||||
#icinga-logo {
|
||||
.fadein();
|
||||
}
|
||||
|
||||
.control-group {
|
||||
padding: 0;
|
||||
background-color: @icinga-blue;
|
||||
|
||||
.control-label {
|
||||
color: @body-bg-color;
|
||||
font-size: 1em;
|
||||
line-height: @line-height;
|
||||
}
|
||||
|
||||
.errors {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
background-color: @color-critical;
|
||||
color: @body-bg-color;
|
||||
font-size: @font-size-small;
|
||||
margin: 2em 0 0 0;
|
||||
|
||||
.form {
|
||||
position: absolute;
|
||||
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 {
|
||||
> li {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.form label {
|
||||
color: @text-color-inverted;
|
||||
font-weight: normal;
|
||||
.control-group {
|
||||
margin: 0 auto; // Center horizontally
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.control-label-group {
|
||||
display: block;
|
||||
line-height: 2.5em;
|
||||
width: 15em;
|
||||
margin-right: 2.5em;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 18em;
|
||||
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;
|
||||
input[type=password],
|
||||
input[type=text] {
|
||||
background-color: @gray-light; // IE8 fallback
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
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;
|
||||
color: @body-bg-color;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form input:focus {
|
||||
border-bottom: solid 3px @body-bg-color;
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
ul.errors {
|
||||
.form-controls {
|
||||
margin-bottom: 2em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
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;
|
||||
.button(@icinga-blue, @body-bg-color);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
|
||||
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;
|
||||
.config-note {
|
||||
color: white;
|
||||
background-color: @color-critical;
|
||||
margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
|
||||
max-width: 50%;
|
||||
min-width: 24em;
|
||||
padding: 1em;
|
||||
|
||||
a {
|
||||
color: @text-color-inverted;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.info-box {
|
||||
width: 50%;
|
||||
height: 2.2em;
|
||||
margin: 2em auto 2.5em;
|
||||
#login-footer {
|
||||
color: @body-bg-color;
|
||||
font-size: @font-size-small;
|
||||
|
||||
i.icon-info {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
a {
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
em {
|
||||
text-decoration: underline;
|
||||
// Social links
|
||||
&: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