Skip to content
GitLab
Commit bdef04f8 authored by christian's avatar christian
Browse files

update timer

parent 30f55301
Hide whitespace changes
Inline Side-by-side
css/main.css
View file @ bdef04f8
......@@ -140,8 +140,6 @@
}
}
@keyframes ready {
0% {
color: #2ac56c;
......@@ -263,8 +261,6 @@ html {
float: left;
}
#status-bar {
position: absolute;
top: 0;
......@@ -286,7 +282,6 @@ html {
text-transform: uppercase;
outline: 0 none;
width: 12%;
}
/*#timer span{
......@@ -298,232 +293,230 @@ html {
font-size: 1.15em;
text-align: center;
text-shadow: 1px 1px 0px #01CC9A;
}*/
.hint span {
text-shadow: 1px 1px 0px #01CC9A;
color: #fff;
line-height: 45px;
margin: 0;
padding: 0;
}*/
.hint span {
text-shadow: 1px 1px 0px #01CC9A;
color: #fff;
line-height: 45px;
margin: 0;
padding: 0;
font-size: 1.15em;
}
#hint-text p {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 3em;
}
#hint-text {
top: 50%;
left: 50%;
z-index: 5000;
display: none;
position: absolute;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(50%, 50%);
width: 1024px;
padding: 1.2em 0;
background: #01ffc0;
}
.player-state {
position: absolute;
z-index: 2000;
display: inline;
font-weight: 700;
font-size: 1em;
font-family: Arial;
color: rgba(255, 255, 255, 0.8);
bottom: 0;
left: 0;
height: 30px;
}
.player-state p {
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
.player-state::before {
content: 'player state: ';
color: rgba(255, 255, 255, 0.5);
line-height: 30px;
}
#score {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin-right: 5%;
}
#score::before {
content: 'SCORE: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#best {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin: 0 5% 0 0;
}
#best::before {
content: 'BEST: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer {
width: 12%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin-right: 5%;
}
#timer span {
color: #fff;
width: 30%;
line-height: 50px;
height: 50px;
display: inline-block;
font-size: 1.15em;
text-align: center;
text-shadow: 1px 1px 0px #01CC9A;
}
#timer::before {
content: 'TIME: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer::after {
content: 'SEC.';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
.ready-state {
display: inline;
}
.ready-state#render {
color: #01ffc0;
}
/* Progress bar */
.progress {
width: 0%;
height: 5em;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
background: rgba(0, 0, 0, 0.1);
z-index: 2030;
}
.progress::before {
position: absolute;
top: auto;
width: 100%;
height: inherit;
content: '';
}
.tiles {
-webkit-transition: -webkit-transform .6s ease, opacity .2s .55s linear;
transition: transform .6s ease, opacity .2s .5s linear;
}
.flip {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.player img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.player {
z-index: 5000;
}
.ready-state#wait {
animation: loading ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: loading ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: loading ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: loading ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: loading ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.ready-state#done {
animation: ready ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation: ready ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: ready ease 1s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-o-animation: ready ease 1s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-ms-animation: ready ease 1s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode: forwards;
}
}
.ready-state#done {
}
#hint-text p {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 3em;
}
#hint-text {
top: 50%;
left: 50%;
z-index: 5000;
display: none;
position: absolute;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(50%, 50%);
width: 1024px;
padding: 1.2em 0;
background: #01ffc0;
}
.player-state {
position: absolute;
z-index: 2000;
display: inline;
font-weight: 700;
font-size: 1em;
font-family: Arial;
color: rgba(255, 255, 255, 0.8);
bottom: 0;
left: 0;
height: 30px;
}
.player-state p {
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
.player-state::before {
content: 'player state: ';
color: rgba(255, 255, 255, 0.5);
line-height: 30px;
}
#score {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin-right: 5%;
}
#score::before {
content: 'SCORE: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#best {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin: 0 5% 0 0;
}
#best::before {
content: 'BEST: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer {
width: 12%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: right;
margin-right: 20%;
}
#timer span {
color: #fff;
width: 30%;
line-height: 50px;
height: 50px;
display: inline-block;
font-size: 1.15em;
text-align: center;
text-shadow: 1px 1px 0px #01CC9A;
}
#timer::before {
content: 'TIME: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer::after {
content: 'SEC.';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
.ready-state {
display: inline;
}
.ready-state#render {
color: #01ffc0;
}
/* Progress bar */
.progress {
width: 0%;
height: 5em;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
background: rgba(0, 0, 0, 0.1);
z-index: 2030;
}
.progress::before {
position: absolute;
top: auto;
width: 100%;
height: inherit;
content: '';
}
.tiles {
-webkit-transition: -webkit-transform .6s ease, opacity .2s .55s linear;
transition: transform .6s ease, opacity .2s .5s linear;
}
.flip {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.player img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.player {
z-index: 5000;
}
.ready-state#wait {
animation: loading ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: loading ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: loading ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: loading ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: loading ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.ready-state#done {
animation: ready ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation: ready ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: ready ease 1s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-o-animation: ready ease 1s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-ms-animation: ready ease 1s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode: forwards;
}
.ready-state#done {
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment