whose-turn-is-it/index.css

63 lines
1.1 KiB
CSS

.timer {
font-size: 10em;
font-weight: bold;
text-align: center;
line-height: 1.2;
}
@keyframes blinker {
50% {
opacity: 0.3;
}
}
.timer.my-turn {
color: #0f0;
animation: blinker 2s ease infinite;
}
.timer.over {
color: #f00;
animation: blinker 0.5s ease infinite;
}
.timer.loading {
font-size: 2em;
margin: auto;
margin-bottom: 2.5em;
margin-top: 2.5em;
}
.mb {
margin-bottom: var(--spacing) !important;
}
.first-details {
padding-top: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
border-top: var(--border-width) solid var(--accordion-border-color);
}
:is(
button,
input[type="submit"],
input[type="button"],
[role="button"]
).outline.invalid,
input[type="reset"].outline {
--color: var(--form-element-invalid-border-color);
--background-color: transparent;
}
:is(
button,
input[type="submit"],
input[type="button"],
[role="button"]
).invalid,
input[type="reset"] {
--background-color: var(--form-element-invalid-border-color);
--border-color: var(--form-element-invalid-border-color);
cursor: pointer;
}