quiz/public/buzzer.css

92 lines
1.4 KiB
CSS

body {
font-family: sans-serif;
overflow: hidden;
}
body.admin #info {
position: unset;
}
body.player .admin-only,
body.admin .player-only {
display: none !important;
}
#error {
background-color: #fee;
border: 3px solid red;
padding: 1em;
font-family: monospace;
display: none;
}
body.error #error {
display: block;
}
#error code {
white-space: pre;
}
input {
width: 20em;
}
h2 {
font-size: 1em;
}
ul {
/*list-style-type: none;
margin: 0;
padding: 0;*/
}
.player.inactive {
color: grey;
}
.player.inactive::after {
content: " (gone)";
font-style: italic;
}
.player.me::after {
content: " — that's you!";
font-style: italic;
}
.player.buzzing {
color: red;
font-weight: bold;
font-size: 2em;
list-style-type: none;
}
.player.buzzing.first::before {
content: "🥇 ";
}
.player.buzzing.too-late {
color: black;
font-weight: bold;
font-size: 1.2em;
}
.player.buzzing.too-late::before {
content: "🥈 ";
}
.player div.admin-only {
display: inline-block;
}
#info {
position: absolute;
}
#buzzbox {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90%;
flex-direction: column;
text-align: center;
}
#buzzbutton {
width: 200px;
height: 200px;
background-color: red;
border-radius: 100%;
font-size: 1em;
}
#buzzbutton .active {
display: none;
}
.inactive {
color: #c00;
font-size: 2em;
}