vojta001/tinyquiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Indent CSS with tabs

Browse Source
This commit is contained in:
Vojtěch Káně
2021-04-27 10:21:53 +02:00
parent 9d2ff6a2ba
commit ee91f3d7f8
4 changed files with 106 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
ui/static/game.css
View File

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

20
ui/static/home.css
View File

@@ -1,18 +1,18 @@
main { main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
} }
section { section {
border: 2px solid black; border: 2px solid black;
margin: 2rem; margin: 2rem;
padding: 1rem; padding: 1rem;
} }
#join, #play, #new { #join, #play, #new {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

32
ui/static/results.css
View File

@@ -1,30 +1,30 @@
td { td {
padding-left: 1rem; padding-left: 1rem;
} }
.place { .place {
border-radius: 50%; border-radius: 50%;
border: 1px solid black; border: 1px solid black;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
text-align: center; text-align: center;
padding: 0; padding: 0;
} }
.place.first { .place.first {
background-color: gold; background-color: gold;
box-shadow: 0 0 10px 5px gold; box-shadow: 0 0 10px 5px gold;
border: none; border: none;
} }
.place.second { .place.second {
background-color: silver; background-color: silver;
box-shadow: 0 0 6px 3px silver; box-shadow: 0 0 6px 3px silver;
border: none; border: none;
} }
.place.third { .place.third {
background-color: chocolate; background-color: chocolate;
box-shadow: 0 0 3px 1px chocolate; box-shadow: 0 0 3px 1px chocolate;
border: none; border: none;
} }

60
ui/static/style.css
View File

@@ -1,53 +1,53 @@
html { html {
height: 100%; height: 100%;
} }
body { body {
min-height: 100%; min-height: 100%;
margin: 0; margin: 0;
} }
body { body {
display: grid; display: grid;
grid-template-rows: 10vh auto; grid-template-rows: 10vh auto;
grid-template-columns: 25vw 50vw 25vw; grid-template-columns: 25vw 50vw 25vw;
grid-template-areas: grid-template-areas:
"empty1 header empty2" "empty1 header empty2"
"main main main"; "main main main";
} }
@media (orientation: portrait) { @media (orientation: portrait) {
body { body {
grid-template-rows: 10vh 10vh auto; grid-template-rows: 10vh 10vh auto;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-areas: grid-template-areas:
"logo" "logo"
"header" "header"
"main"; "main";
} }
} }
#logo { #logo {
grid-area: 1 / 1 / 1 / 1; grid-area: 1 / 1 / 1 / 1;
padding: 0.5rem; padding: 0.5rem;
} }
#logo img { #logo img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
#title { #title {
grid-area: header; grid-area: header;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
main { main {
grid-area: main; grid-area: main;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }