buzzers/public/style.css

200 lines
2.9 KiB
CSS
Raw Normal View History

2018-03-13 20:25:39 +00:00
* {
box-sizing: border-box;
}
body {
2020-02-19 22:18:49 +00:00
font-family: sans-serif;
margin: 2em 1em;
line-height: 1.5em;
text-align: center;
2018-03-13 20:25:39 +00:00
}
h1 {
color: #373fff;
2020-02-19 22:18:49 +00:00
line-height: 1.1;
2018-03-13 20:25:39 +00:00
}
form {
2020-02-19 22:18:49 +00:00
background-color: #eee;
display: grid;
grid-gap: 1em;
padding: 1em;
max-width: 40ch;
margin: 0 auto;
2020-11-27 18:38:56 +00:00
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
2018-03-13 20:25:39 +00:00
}
label {
font-weight: bold;
}
input[type=text] {
text-transform: lowercase;
2020-11-27 18:38:56 +00:00
border-radius: .25em;
}
2018-03-13 20:25:39 +00:00
input {
2020-02-19 22:18:49 +00:00
border: 1px solid silver;
2018-03-13 20:25:39 +00:00
display: block;
text-align: center;
2020-02-19 22:18:49 +00:00
font-size: 16px;
2018-03-13 20:25:39 +00:00
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
2020-11-27 18:38:56 +00:00
button {
2020-02-19 22:18:49 +00:00
background-color: #bbbbf2;
border: 2px solid currentColor;
border-radius: .25em;
2018-03-13 20:25:39 +00:00
cursor: pointer;
2020-02-19 22:18:49 +00:00
font-size: inherit;
line-height: 1.4em;
padding: 0.25em 1em;
2018-03-13 20:25:39 +00:00
}
2020-02-19 22:18:49 +00:00
form button:hover {
background-color: lavender;
2018-03-13 20:25:39 +00:00
}
footer {
2020-02-19 22:18:49 +00:00
margin-top: 3em;
padding-top: 1.5em;
2018-03-13 20:25:39 +00:00
border-top: 1px solid lightgrey;
}
2020-11-27 18:38:56 +00:00
blockquote {
background-color: #eee;
display: block;
margin: 1em auto;
padding: 1em;
max-width: 40ch;
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
}
blockquote a {
color: #373fff;
}
#buzzer {
width: 95vw;
height: 95vw;
max-height: 500px;
max-width: 500px;
margin: 0 auto;
margin-left: -8px;
border-radius: 500px;
background: red;
border: 4px solid black;
box-shadow: 4px 4px 4px rgba(0,0,0,.5);
font-size: 4em;
color: white;
text-shadow: 2px 2px 2px black;
}
#buzzer.active {
background: greenyellow;
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
#buzzer:active {
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
#buzzer:disabled {
filter: grayscale(50%);
opacity: .5;
}
h2 img {
max-height: 40px;
}
figure.participant {
display: inline-block;
transition: ease-in all .2s;
margin: 0;
}
figure.participant img {
max-width: 40vw;
width: 150px;
}
figure.participant figcaption {
font-weight: bold;
font-size: 1.3em;
}
.buzzed {
background: yellow;
animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
transform: scale(1) rotate(0);
backface-visibility: hidden;
}
@keyframes shake {
10%, 90% {
transform: rscale(1.3) otate(-10deg);
}
20%, 80% {
transform: rscale(1.3) otate(20deg);
}
30%, 50%, 70% {
transform: scale(1.3) rotate(-30deg);
}
40%, 60% {
transform: scale(1.3) rotate(30deg);
}
}
#messageBox {
position: fixed;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height:100px;
background: #bbbbf2;
border: 3px solid black;
font-size: 1.3em;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#messageBox img {
max-height: 50%;
}
#messageBox.hide {
display: none;
}
2020-11-27 18:38:56 +00:00
#participants {
margin-top: 1em;
}
2020-11-27 19:13:27 +00:00
.score {
display: inline-block;
background: green;
border-radius: 100px;
color: white;
padding: 4px 9px;
vertical-align: top;
}
.participant button {
display: none;
}
.participant.buzzed button {
display: inline;
}