tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-28 08:14:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Support theming for login logo

Browse Source 
refs #10705
This commit is contained in:
Eric Lippmann 2015-12-07 14:22:45 +01:00
parent a1bb4bb695
commit f51c2ce6ad
2 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
application/views/scripts/authentication/login.phtml
View File

@ -1,9 +1,5 @@
<div id="login"> <div id="login">
<div class="logo"> <div id="login-logo" aria-hidden="true"></div>
<div class="image">
<img aria-hidden="true" class="fade-in one" src="<?= $this->baseUrl('img/logo_icinga_big.png'); ?>" alt="<?= $this->translate('The Icinga logo'); ?>" >
</div>
</div>
<div class="form" data-base-target="layout"> <div class="form" data-base-target="layout">
<?php if ($requiresSetup): ?> <?php if ($requiresSetup): ?>
<p class="config-note"><?= sprintf( <p class="config-note"><?= sprintf(

68
public/css/icinga/login.less
View File

@ -13,18 +13,6 @@
padding: 0; padding: 0;
} }
.logo {
text-align: center;
}
.image {
padding-top: 5%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 0.9em;
}
.errors { .errors {
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -33,10 +21,6 @@
padding: 0.5em; padding: 0.5em;
} }
.image img {
width: 355px;
}
.form { .form {
position: absolute; position: absolute;
font-size: 0.9em; font-size: 0.9em;
@ -162,28 +146,38 @@
} }
} }
/* make keyframes that tell the start state and the end state of our object */ #login-logo {
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } background-image: url('../img/logo_icinga_big.png');
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } background-position: center;
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } background-repeat: no-repeat;
background-size: contain;
height: 177px;
margin: 0 auto;
width: 355px;
}
.fade-in { /* make keyframes that tell the start state and the end state of our object */
opacity:0; /* make things invisible upon start */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-moz-animation:fadeIn ease-in 1; @keyframes fadeIn { from { opacity:0; } to { opacity: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)*/ .fade-in {
-moz-animation-fill-mode:forwards; opacity:0; /* make things invisible upon start */
animation-fill-mode:forwards; -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-duration:1s; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-duration:1s; -moz-animation-fill-mode:forwards;
animation-duration:1s; animation-fill-mode:forwards;
}
.fade-in.one { -webkit-animation-duration:1s;
-webkit-animation-delay: 0.7s; -moz-animation-duration:1s;
-moz-animation-delay: 0.7s; animation-duration:1s;
animation-delay: 0.7s; }
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}