115 lines
1.9 KiB
CSS
115 lines
1.9 KiB
CSS
@font-face {
|
|
font-family: 'Square';
|
|
src: url('square.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #000;
|
|
color: rgb(248,248,242);
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
button {
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
#main {
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgb(62,61,61);
|
|
}
|
|
|
|
#ui {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 768px;
|
|
height: 384px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
background: rgba(0,0,0,0.1);
|
|
border-radius: 4px;
|
|
cursor: default;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
#time {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: Square, Menlo, monospace;
|
|
font-size: 48px;
|
|
}
|
|
|
|
#buttons {
|
|
display: flex;
|
|
flex: 2;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
|
|
#buttons > button {
|
|
height: 128px;
|
|
width: 128px;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
border: solid 16px transparent;
|
|
}
|
|
|
|
#fullscreen {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
opacity: 0.5;
|
|
background-image: url('img/expand.svg');
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 1s infinite ease-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* optimizations for small screens */
|
|
@media screen and (max-width: 640px) {
|
|
#ui {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#time {
|
|
font-size: 7vw;
|
|
}
|
|
}
|