159 lines
2 KiB
CSS
159 lines
2 KiB
CSS
/* Globals*/
|
|
.BlinkAnimation {
|
|
animation-name: Blink;
|
|
animation-play-state: running;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-duration: 2s;
|
|
}
|
|
@keyframes Blink {
|
|
0% {
|
|
color: #000000
|
|
}
|
|
|
|
100% {
|
|
color: #FFFFFF
|
|
}
|
|
}
|
|
|
|
/* Classes for the warning section*/
|
|
.WarningMessage {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
text-align: center;
|
|
|
|
visibility: visible;
|
|
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
|
|
font-size: 18px;
|
|
}
|
|
|
|
.WarningFadeOutAnimation {
|
|
animation-name: WarningFadeOut;
|
|
animation-play-state: running;
|
|
animation-fill-mode: forwards;
|
|
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
@keyframes WarningFadeOut {
|
|
0% {
|
|
visibility: visible;
|
|
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
|
|
font-size: 18px;
|
|
}
|
|
|
|
20% {
|
|
background-color: #000000;
|
|
color: #000000;
|
|
}
|
|
|
|
99.99% {
|
|
visibility: visible;
|
|
font-size: 18px;
|
|
}
|
|
100% {
|
|
visibility: collapse;
|
|
|
|
background-color: #000000;
|
|
color: #000000;
|
|
|
|
font-size: 0px;
|
|
}
|
|
}
|
|
|
|
/* Classes for the main page */
|
|
.Main {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
visibility: collapse;
|
|
}
|
|
|
|
.MainFadeInAnimation {
|
|
animation-name: MainFadeIn;
|
|
animation-play-state: running;
|
|
animation-fill-mode: forwards;
|
|
|
|
animation-duration: 5s;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
@keyframes MainFadeIn {
|
|
0% {
|
|
visibility: collapse;
|
|
}
|
|
|
|
79.99% {
|
|
visibility: collapse;
|
|
}
|
|
80% {
|
|
visibility: visible;
|
|
background-color: #000000;
|
|
}
|
|
|
|
100% {
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.MainHeader {
|
|
text-align: center;
|
|
|
|
height: 5%;
|
|
}
|
|
|
|
.Arrow {
|
|
position: absolute;
|
|
top: 35vh;
|
|
}
|
|
|
|
.PostContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
margin-left: 10%;
|
|
margin-right: 10%;
|
|
|
|
width: 80%;
|
|
height: 70%;
|
|
}
|
|
|
|
.Post {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
|
|
width: 24%;
|
|
height: 25%;
|
|
}
|
|
|
|
.Username {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.PostContent {
|
|
|
|
}
|
|
|
|
.MainFooter {
|
|
display: flex;
|
|
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
height: 20%;
|
|
}
|