undefinedTV/dist/css/main copy.css
2020-12-31 15:24:02 +01:00

136 lines
2.0 KiB
CSS

@font-face {
font-family: 'Lato';
src: url('fonts/Lato-Regular.ttf');
src: url('fonts/Lato-Regular.ttf') format('truetype');
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100vw;
height: 100vh;
}
main {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto 1fr;
background: #0002;
}
main > header {
display: grid;
grid-row: 1;
grid-column: 1/3;
grid-template-columns: 1fr auto;
gap: 2rem;
padding: 8vh 4vh;
font-size: 2vw;
}
main > header > aside {
display: grid;
grid-column: 2;
grid-auto-flow: column;
grid-template-columns: auto 5em;
gap: 2rem;
place-items: center start;
}
#clock {
display: grid;
grid-auto-flow: column;
font-family: Lato;
justify-self: stretch;
}
#clock[suffix]::after {
content: attr(suffix);
justify-self: end;
}
@keyframes btn_grow {
0% {
padding: 0;
}
50% {
padding: 2.2rem;
}
80% {
padding: 2.2rem;
}
0% {
padding: 0;
}
}
.btn {
display: grid;
place-content: center;
place-items: center;
position: relative;
padding: 1.8rem;
border-radius: 100vw;
width: 0;
height: 0;
border: none;
background: none;
color: #000;
font: unset;
}
.btn::after {
content: "";
position: absolute;
padding: 0rem;
border-radius: 100vw;
width: 0;
height: 0;
backdrop-filter: invert(1);
transition: padding .2s;
}
.btn::before {
content: "";
position: absolute;
padding: 0rem;
border-radius: 100vw;
width: 0;
height: 0;
/*background: #CCC;*/
/*backdrop-filter: invert(.3);*/
box-shadow: inset 0 0 32px #000;
animation-name: btn_grow;
animation-duration: .3s;
/*animation-play-state: paused;*/
}
.btn:focus {
outline: none;
}
.btn:focus::after {
padding: 2.2rem;
}
.btn:active::before {
animation-name: none;
}