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

20
ui/static/home.css
View File

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

32
ui/static/results.css
View File

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

60
ui/static/style.css
View File

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