ducklet
b00f8a357c
Control messages are messages that are broadcast to all clients and have no clearly defined content. The idea is that this can be used to control a monitor without having to keep adding support for specific commands on the protocol layer. This also changes some of the existing messages and adds another ridiculous convenience layer to our HTML/JS templating: data-eval. We should probably just bite the bullet and use some reactive framework.
80 lines
1.2 KiB
CSS
80 lines
1.2 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%;
|
|
}
|
|
#active {
|
|
color: red;
|
|
display: none;
|
|
}
|