You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
710 lines
12 KiB
CSS
710 lines
12 KiB
CSS
/* Font */
|
|
@font-face {
|
|
font-family: Rubic;
|
|
src: url(../resources/fonts/Rubik/static/Rubik-Regular.ttf);
|
|
}
|
|
|
|
/* Proměnné */
|
|
|
|
:root {
|
|
--glow-color: hsl(186, 100%, 69%);
|
|
--termLength: 17em;
|
|
}
|
|
|
|
/* Základ*/
|
|
|
|
*{
|
|
font-family: Rubic;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
line-height: 0;
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: black;
|
|
}
|
|
|
|
section{
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h1{
|
|
font-size: 1rem;
|
|
line-height: normal;
|
|
inline-size: fit-content;
|
|
width: 60vw;
|
|
}
|
|
|
|
video{
|
|
width: 60vw;
|
|
}
|
|
|
|
/* Grid Template */
|
|
|
|
.grid {
|
|
display: grid;
|
|
padding: 3rem;
|
|
grid-gap: 2em;
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-areas: "t t"
|
|
"d2 d9"
|
|
"d11 d6"
|
|
"d1 d7"
|
|
"d10 d4"
|
|
"d12 d3"
|
|
"d8 d5";
|
|
}
|
|
|
|
/* Hidden items */
|
|
|
|
[hidden]{ /*Pro zobrazeni hidden věcí (Containery na Vido a Otázky), zakomentovat*/
|
|
display:none !important;
|
|
}
|
|
|
|
#cinemaContainer, #questionContainer {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(17, 17, 17, 0.85);
|
|
z-index: 999;
|
|
text-align: center;
|
|
overflow: scroll;
|
|
}
|
|
|
|
#questionContainer {
|
|
display: grid;
|
|
gap: 1em;
|
|
}
|
|
|
|
#cinemaContainer #cinemaBox {
|
|
max-width: 100%;
|
|
border-radius: .45rem;
|
|
}
|
|
|
|
.button{
|
|
color: var(--glow-color);
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
font-size: 25px;
|
|
border-radius: .45rem;
|
|
|
|
border: 1px solid transparent;
|
|
|
|
-moz-transition:all .4s ease;
|
|
-o-transition:all .4s ease;
|
|
-webkit-transition:all .4s ease;
|
|
transition:all .4s ease;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0.5em;
|
|
|
|
}
|
|
|
|
.button:hover {
|
|
border: 1px solid var(--glow-color);
|
|
background-color: black;
|
|
}
|
|
|
|
|
|
#close {
|
|
right: 10px;
|
|
top: 10px;
|
|
width: 50px;
|
|
height: 50px;
|
|
position: fixed;
|
|
bottom: 10px;
|
|
}
|
|
|
|
|
|
#skip {
|
|
width: 5em;
|
|
|
|
right: 10px;
|
|
bottom: 10px;
|
|
|
|
position: fixed;
|
|
}
|
|
|
|
.button img{
|
|
width: 100%;
|
|
filter: invert(100%);
|
|
}
|
|
|
|
#questionLine {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--glow-color);
|
|
border: 1px solid var(--glow-color);
|
|
background-color: black;
|
|
border-radius: 0.5em;
|
|
padding: 1em;
|
|
line-height: 1rem;
|
|
gap: 2em;
|
|
}
|
|
|
|
#questionLine img{
|
|
width: 30vw;
|
|
}
|
|
|
|
#answerBar {
|
|
display: grid;
|
|
gap: 2em;
|
|
width: 100%;
|
|
}
|
|
|
|
#answerBar .button{
|
|
border: 1px solid var(--glow-color);
|
|
background-color: black;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
#answerBar .button:hover{
|
|
background-color: orange;
|
|
color: black;
|
|
}
|
|
|
|
#answerBar .validateRed {
|
|
color: white;
|
|
background-color: red;
|
|
&:after {
|
|
font-family:'FontAwesome';
|
|
content:" \f00d";
|
|
}
|
|
}
|
|
|
|
#answerBar .validateRed:hover {
|
|
color:white;
|
|
background-color: red;
|
|
}
|
|
|
|
#answerBar .validateGreen {
|
|
color: white;
|
|
background-color: green;
|
|
&:after {
|
|
font-family:'FontAwesome';
|
|
content:" \f00c";
|
|
}
|
|
}
|
|
|
|
#answerBar .validateGreen:hover {
|
|
color:white;
|
|
background-color: green;
|
|
}
|
|
|
|
/* individual grid items */
|
|
|
|
#title {
|
|
grid-area: t;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
border-radius: 0.45em;
|
|
}
|
|
|
|
#box-0 {
|
|
grid-area: d1;
|
|
background: url("../resources/img/topicIcons/lesson1.svg") no-repeat center;
|
|
}
|
|
|
|
#box-0:hover{
|
|
background: url("../resources/img/topicIcons/lesson1black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-1 {
|
|
grid-area: d2;
|
|
background: url("../resources/img/topicIcons/lesson2.svg") no-repeat center;
|
|
}
|
|
|
|
#box-1:hover{
|
|
background: url("../resources/img/topicIcons/lesson2black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-2 {
|
|
grid-area: d3;
|
|
background: url("../resources/img/topicIcons/lesson3.svg") no-repeat center;
|
|
}
|
|
|
|
#box-2:hover{
|
|
background: url("../resources/img/topicIcons/lesson3black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-3 {
|
|
grid-area: d4;
|
|
background: url("../resources/img/topicIcons/lesson4.svg") no-repeat center;
|
|
}
|
|
|
|
#box-3:hover{
|
|
background: url("../resources/img/topicIcons/lesson4black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-4 {
|
|
grid-area: d5;
|
|
background: url("../resources/img/topicIcons/lesson5.svg") no-repeat center;
|
|
}
|
|
|
|
#box-4:hover{
|
|
background: url("../resources/img/topicIcons/lesson5black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-5 {
|
|
grid-area: d6;
|
|
background: url("../resources/img/topicIcons/lesson6.svg") no-repeat center;
|
|
}
|
|
|
|
#box-5:hover{
|
|
background: url("../resources/img/topicIcons/lesson6black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-6 {
|
|
grid-area: d7;
|
|
background: url("../resources/img/topicIcons/lesson7.svg") no-repeat center;
|
|
}
|
|
|
|
#box-6:hover{
|
|
background: url("../resources/img/topicIcons/lesson7black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-7 {
|
|
grid-area: d8;
|
|
background: url("../resources/img/topicIcons/lesson8.svg") no-repeat center;
|
|
}
|
|
|
|
#box-7:hover{
|
|
background: url("../resources/img/topicIcons/lesson8black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-8 {
|
|
grid-area: d9;
|
|
background: url("../resources/img/topicIcons/lesson9.svg") no-repeat center;
|
|
}
|
|
|
|
#box-8:hover{
|
|
background: url("../resources/img/topicIcons/lesson9black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-9 {
|
|
grid-area: d10;
|
|
background: url("../resources/img/topicIcons/lesson10.svg") no-repeat center;
|
|
}
|
|
|
|
#box-9:hover{
|
|
background: url("../resources/img/topicIcons/lesson10black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-10 {
|
|
grid-area: d11;
|
|
background: url("../resources/img/topicIcons/lesson11.svg") no-repeat center;
|
|
}
|
|
|
|
#box-10:hover{
|
|
background: url("../resources/img/topicIcons/lesson11black.svg") no-repeat center;
|
|
}
|
|
|
|
#box-11 {
|
|
grid-area: d12;
|
|
background: url("../resources/img/topicIcons/lesson12.svg") no-repeat center;
|
|
}
|
|
|
|
#box-11:hover{
|
|
background: url("../resources/img/topicIcons/lesson12black.svg") no-repeat center;
|
|
}
|
|
|
|
/* Terminal-like Screen */
|
|
|
|
.fakeScreen {
|
|
border-radius: 0.45rem;
|
|
}
|
|
|
|
#title img{
|
|
width: 28vw;
|
|
}
|
|
|
|
.fakeScreen p {
|
|
line-height: 2rem;
|
|
position: relative;
|
|
text-align: left;
|
|
font-size: 1rem;
|
|
font-family: monospace;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 0;
|
|
}
|
|
|
|
span {
|
|
color: var(--glow-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.line1 {
|
|
color: #9CD9F0;
|
|
-webkit-animation: type 1 0.25s steps(20, end) forwards;
|
|
-moz-animation: type 1s 0.25s steps(20, end) forwards;
|
|
-o-animation: type 1s 0.25s steps(20, end) forwards;
|
|
animation: type 1s 0.25s steps(20, end) forwards;
|
|
}
|
|
|
|
.cursor1 {
|
|
-webkit-animation: blink 1s 1.25s 1 forwards;
|
|
-moz-animation: blink 1s 1.25s 1 forwards;
|
|
-o-animation: blink 1s 1.25s 1 forwards;
|
|
animation: blink 1s 1.25s 1 forwards;
|
|
}
|
|
|
|
.line2 {
|
|
color: #CDEE69;
|
|
-webkit-animation: type 1s 2.25s steps(20, end) forwards;
|
|
-moz-animation: type 1s 2.25s steps(20, end) forwards;
|
|
-o-animation: type 1s 2.25s steps(20, end) forwards;
|
|
animation: type 1s 2.25s steps(20, end) forwards;
|
|
}
|
|
|
|
.cursor2 {
|
|
-webkit-animation: blink 1s 3.25s 2 forwards;
|
|
-moz-animation: blink 1s 3.25s 2 forwards;
|
|
-o-animation: blink 1s 3.25s 2 forwards;
|
|
animation: blink 1s 3.25s 2 forwards;
|
|
}
|
|
|
|
.line3 {
|
|
color: var(--glow-color);
|
|
-webkit-animation: type 1s 3.5s steps(20, end) forwards;
|
|
-moz-animation: type 1s 3.5s steps(20, end) forwards;
|
|
-o-animation: type 1s 3.5s steps(20, end) forwards;
|
|
animation: type 1s 3.5s steps(20, end) forwards;
|
|
}
|
|
|
|
.cursor3 {
|
|
-webkit-animation: blink 1s 4.5s infinite;
|
|
-moz-animation: blink 1s 4.5s infinite;
|
|
-o-animation: blink 1s 4.5s infinite;
|
|
animation: blink 1s 4.5s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes type {
|
|
to {
|
|
width: var(--termLength);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes type {
|
|
to {
|
|
width: var(--termLength);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes type {
|
|
to {
|
|
width: var(--termLength);
|
|
}
|
|
}
|
|
|
|
@keyframes type {
|
|
to {
|
|
width: var(--termLength);
|
|
}
|
|
}
|
|
|
|
#progress{
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
progress{
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: var(--glow-color);
|
|
border-radius: 0.45rem;
|
|
}
|
|
|
|
/*Glowing box*/
|
|
|
|
.box {
|
|
position: relative;
|
|
color: var(--glow-color);
|
|
cursor: pointer;
|
|
border: 0.15em solid var(--glow-color);
|
|
border-radius: 0.45em;
|
|
background: none;
|
|
min-height: 3rem;
|
|
|
|
-webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
|
|
0px 0px 0.5em 0px var(--glow-color);
|
|
-moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
|
|
0px 0px 0.5em 0px var(--glow-color);
|
|
box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
|
|
0px 0px 0.5em 0px var(--glow-color);
|
|
animation: border-flicker 2s linear infinite;
|
|
}
|
|
|
|
.box::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0.7;
|
|
filter: blur(1em);
|
|
transform: translateY(100%) rotateX(90deg) scale(1);
|
|
background: var(--glow-color);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.box::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
background-color: var(--glow-color);
|
|
box-shadow: 0 0 2em 0.2em var(--glow-color);
|
|
transition: opacity 100ms linear;
|
|
}
|
|
|
|
.box:hover {
|
|
animation: none;
|
|
}
|
|
|
|
.box:hover:before {
|
|
filter: blur(1.5em);
|
|
opacity: 1;
|
|
}
|
|
|
|
.box:hover:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes faulty-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
2% {
|
|
opacity: 0.1;
|
|
}
|
|
4% {
|
|
opacity: 0.5;
|
|
}
|
|
19% {
|
|
opacity: 0.5;
|
|
}
|
|
21% {
|
|
opacity: 0.1;
|
|
}
|
|
23% {
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
opacity: 0.5;
|
|
}
|
|
83% {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
87% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes border-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
2% {
|
|
opacity: 1;
|
|
}
|
|
4% {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
8% {
|
|
opacity: 1;
|
|
}
|
|
70% {
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
/* Footer Animation -more-like-abomination- */
|
|
footer {
|
|
position: relative;
|
|
width: 100vw;
|
|
margin-top: auto;
|
|
background: linear-gradient(0deg, #000, #272727);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
align-self: flex-end;
|
|
color: var(--glow-color);
|
|
}
|
|
|
|
footer:before, footer:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094,
|
|
#0000ff, #00ff00,#ffff00, #ff0000);
|
|
background-size: 400%;
|
|
width: calc(100%);
|
|
height: calc(100% + 2px);
|
|
z-index: -1;
|
|
animation: steam 20s linear infinite;
|
|
}
|
|
|
|
@keyframes steam {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
50% {
|
|
background-position: 400% 0;
|
|
}
|
|
100% {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
footer:after {
|
|
filter: blur(1rem);
|
|
}
|
|
|
|
footer p{
|
|
color: var(--glow-color);
|
|
line-height: 2em;
|
|
}
|
|
|
|
#cheatLine{
|
|
line-height: 0;
|
|
}
|
|
|
|
/* Responzivita */
|
|
/* media query */
|
|
@media only screen and (min-width: 500px) {
|
|
|
|
.grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
grid-template-areas: "t t d2 d7"
|
|
"t t d1 d12"
|
|
"d8 d11 d6 d9"
|
|
"d5 d10 d3 d4";
|
|
}
|
|
|
|
#answerBar {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
#title img{
|
|
width: 14vw;
|
|
}
|
|
|
|
.fakeScreen p {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h1{
|
|
font-size: 1.5rem;
|
|
}
|
|
} |