fic/server
2
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

Animate lighter the clock before start

Browse Source
This commit is contained in:
nemunaire 2020-05-16 03:50:12 +02:00
parent 16abc95b4f
commit 5d3ef96f3f
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/static/css/fic.css
View File

@ -90,13 +90,20 @@ body {
.navbar .clock {
font-size: 70px;
}
.clock:not(.expired) .point, .clock.expired {
.clock:not(.expired):not(.wait) .point, .clock.expired {
transition: color text-shadow 1s;
position: relative;
animation: clockanim 1s ease infinite;
-moz-animation: clockanim 1s ease infinite;
-webkit-animation: clockanim 1s ease infinite;
}
.clock.wait .point {
transition: color text-shadow 1s;
position: relative;
animation: clockwait 1s ease infinite;
-moz-animation: clockwait 1s ease infinite;
-webkit-animation: clockwait 1s ease infinite;
}
.end {
color: #e64143;
}
@ -121,6 +128,21 @@ keyframes clockanim {
50% { opacity: 0; }
100% { opacity: 1.0; };
}
@-webkit-keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
@-moz-keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
samp.cksum {
overflow-x: hidden;

2
frontend/static/index.html
View File

@ -24,7 +24,7 @@
</a>
</div>
<div class="clock col-auto text-center" ng-hide="1">Chargement...</div>
<div class="clock col text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.remaining !== undefined && settings.end - settings.start > 0" ng-cloak>
<div class="clock col text-center" ng-class="{expired: time.expired, end: time.end, wait: startIn}" ng-if="time.remaining !== undefined && settings.end - settings.start > 0" ng-cloak>
<span ng-class="{'d-none': !time.hours, 'd-sm-inline': !time.hours}">
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>