Jan Tuomi
122 lines
2.3 KiB
CSS
122 lines
2.3 KiB
CSS
body {
|
|
background-color: white;
|
|
font-family: monospace;
|
|
color: black;
|
|
}
|
|
#container{
|
|
position:relative;
|
|
width:95%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
height:100%;
|
|
overflow:hidden;
|
|
|
|
}
|
|
#upper{
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
background-image: url("/static/img/smokes.png");
|
|
transform-origin: bottom;
|
|
animation: smokes 8s ease-in-out 0s infinite;
|
|
opacity:0;
|
|
height:40%;
|
|
}
|
|
#lower{
|
|
position:relative;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
background-image: url("/static/img/coffeecup3.png");
|
|
height:60%;
|
|
}
|
|
#scale{
|
|
position:absolute;
|
|
top:80%;
|
|
width:90%;
|
|
height:10%;
|
|
margin: 0% 5% 0% 5%;
|
|
background: lightgrey;
|
|
border-radius: 10px;
|
|
overflow:hidden;
|
|
}
|
|
#scale2{
|
|
width: 0%;
|
|
transition: width 2s;
|
|
height:100%;
|
|
background: green;
|
|
border-radius: 10px;
|
|
}
|
|
#brewtime{
|
|
text-align:right;
|
|
position:absolute;
|
|
right:0px;
|
|
z-index:5;
|
|
font-size:10vw;
|
|
}
|
|
#address{
|
|
text-align:left;
|
|
position:absolute;
|
|
left:0px;
|
|
z-index:5;
|
|
font-size:4vw;
|
|
color: #333;
|
|
}
|
|
noscript{
|
|
color:red;
|
|
}
|
|
#text{
|
|
color:green;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
}
|
|
.brewing{
|
|
animation: brewing 5s ease-in-out 0s infinite;
|
|
}
|
|
.hurry{
|
|
color:red !important;
|
|
}
|
|
.unknown{
|
|
color:orange !important;
|
|
animation: unknown 5s ease-in-out 0s infinite;
|
|
}
|
|
.friday{
|
|
animation: friday 20s ease-in-out 0s infinite;
|
|
}
|
|
.normal{
|
|
animation: normal 1000s ease-in-out 0s infinite;
|
|
}
|
|
.coffeeready{
|
|
animation: coffeeready 10s ease-in-out 0s;
|
|
}
|
|
@keyframes smokes {
|
|
0% {transform: skewX(-10deg);}
|
|
50% {transform: skewX(10deg);}
|
|
100% {transform: skewX(-10deg);}
|
|
}
|
|
@keyframes brewing {
|
|
0% {color:green;}
|
|
50% {color: transparent;}
|
|
100% {color:green;}
|
|
}
|
|
@keyframes coffeeready {
|
|
0% {background-color:white;}
|
|
25% {background-color:green;}
|
|
50% {background-color:white;}
|
|
75% {background-color:green;}
|
|
100% {background-color:white;}
|
|
}
|
|
@keyframes unknown {
|
|
0%,40% {transform: rotate(0deg);}
|
|
60%,100% {transform: rotate(360deg);}
|
|
}
|
|
@keyframes friday {
|
|
0% {transform: rotate(0deg);}
|
|
100% {transform: rotate(360deg);}
|
|
}
|
|
@keyframes normal {
|
|
0%,49% {transform: rotate(0deg);}
|
|
50%,100% {transform: rotate(360deg);}
|
|
}
|