fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 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
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 { .navbar .clock {
font-size: 70px; font-size: 70px;
} }
.clock:not(.expired) .point, .clock.expired { .clock:not(.expired):not(.wait) .point, .clock.expired {
transition: color text-shadow 1s; transition: color text-shadow 1s;
position: relative; position: relative;
animation: clockanim 1s ease infinite; animation: clockanim 1s ease infinite;
-moz-animation: clockanim 1s ease infinite; -moz-animation: clockanim 1s ease infinite;
-webkit-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 { .end {
color: #e64143; color: #e64143;
} }
@ -121,6 +128,21 @@ keyframes clockanim {
50% { opacity: 0; } 50% { opacity: 0; }
100% { opacity: 1.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 { samp.cksum {
overflow-x: hidden; overflow-x: hidden;

2
frontend/static/index.html
View file

@ -24,7 +24,7 @@
</a> </a>
</div> </div>
<div class="clock col-auto text-center" ng-hide="1">Chargement...</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 ng-class="{'d-none': !time.hours, 'd-sm-inline': !time.hours}">
<span id="hours">{{ time.hours | time }}</span> <span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span> <span class="point">:</span>