60 lines
867 B
CSS
60 lines
867 B
CSS
@keyframes countdown-tick {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
49% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.countdown {
|
|
--height: 60px;
|
|
font-size: 32px;
|
|
|
|
.countdown__wrapper {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.countdown-number {
|
|
background-color: var(--color-brand-text-bg);
|
|
color: var(--color-brand-text-fg);
|
|
|
|
display: inline-flex;
|
|
flex-flow: column;
|
|
height: var(--height);
|
|
padding: 8px 16px;
|
|
margin: 4px;
|
|
text-align: center;
|
|
|
|
.countdown-number__unit {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
display: flex;
|
|
height: var(--height);
|
|
align-items: center;
|
|
color: var(--color-brand-text-fg);
|
|
}
|
|
|
|
.separator--seconds {
|
|
animation: countdown-tick linear infinite 2s;
|
|
}
|
|
|
|
@container (max-width: 400px) {
|
|
.separator--seconds,
|
|
[data-unit="second"] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|