buzzers/public/style.css

85 lines
1.3 KiB
CSS
Raw Normal View History

2020-02-19 22:18:49 +00:00
/* this file is loaded by index.html and styles the page */
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 {
font-style: italic;
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;
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;
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-02-19 22:18:49 +00:00
form button {
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;
}
#buzzer {
width: 500px;
height: 500px;
margin: 0 auto;
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;
}
h2 img {
max-height: 40px;
}
figure.participant {
display: inline-block;
}
figure.participant img {
max-height: 150px;
}
figure.participant figcaption {
font-weight: bold;
font-size: 1.3em;
}