105 lines
1.5 KiB
CSS
105 lines
1.5 KiB
CSS
#names {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding: 0 10vw;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.my-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.name.organiser::before {
|
|
content: "👑";
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.name.organiser {
|
|
color: gold;
|
|
}
|
|
|
|
.name {
|
|
animation-name: appear;
|
|
animation-duration: .5s;
|
|
display: inline-block;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
#question {
|
|
flex-basis: 50%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-top: 10vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#question * {
|
|
animation-name: appear;
|
|
animation-duration: .5s;
|
|
}
|
|
|
|
#question > h1 {
|
|
font-size: 3rem;
|
|
text-align: center;
|
|
margin-bottom: .2rem;
|
|
}
|
|
|
|
#question .answers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
#question .answer {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#timer {
|
|
height: 2px;
|
|
background-color: blue;
|
|
margin-bottom: 5rem;
|
|
transition: width .2s;
|
|
width: 0;
|
|
}
|
|
|
|
.answer.selected {
|
|
font-weight: bold;
|
|
text-shadow: 2px 1px 5px #0003;
|
|
}
|
|
|
|
/*body.organiser #question > .answers {
|
|
display: none;
|
|
}*/
|
|
|
|
#controls {
|
|
display: none;
|
|
}
|
|
|
|
body.organiser #controls {
|
|
display: flex;
|
|
padding-right: 20vw;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#session-code {
|
|
display: none;
|
|
}
|
|
|
|
body.organiser #session-code {
|
|
display: inline;
|
|
}
|
|
|
|
@keyframes appear {
|
|
from {
|
|
transform: scale(2, 2);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: scale(1, 1);
|
|
opacity: 1;
|
|
}
|
|
}
|