html *, body * {
|
margin: 0;
|
padding: 0;
|
color: white;
|
}
|
|
body {
|
width: 1920px;
|
height: 1080px;
|
font-family: 'Oswald', sans-serif;
|
/*background-image: url("/assets/test.png");*/
|
}
|
|
#stripe {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 58px;
|
text-align: center;
|
|
& * {
|
display: inline-block;
|
}
|
|
&.team, &.team-ban {
|
background: transparent url("/assets/stripe.png") no-repeat;
|
}
|
|
&.simple {
|
background: transparent url("/assets/stripe-simple.png") no-repeat;
|
}
|
|
.team {
|
position: fixed;
|
margin-top: 4px;
|
width: 500px;
|
overflow: hidden;
|
|
.name {
|
color: white;
|
font-size: 28px;
|
}
|
|
&.blue {
|
left: 270px;
|
text-align: right;
|
}
|
|
&.orange {
|
left: 1150px;
|
text-align: left;
|
}
|
}
|
|
.ban {
|
position: inherit;
|
top: 2px;
|
|
&.orange {
|
left: 1000px;
|
}
|
|
&.blue {
|
left: 812px;
|
}
|
}
|
|
.info {
|
position: inherit;
|
width: 300px;
|
height: 50px;
|
}
|
|
.info.left {
|
left: 0;
|
text-align: left;
|
}
|
|
.info.right {
|
left: 1620px;
|
text-align: right;
|
}
|
|
$base-left: 750px;
|
$base-right: 1105px;
|
.mapwin {
|
position: fixed;
|
border-radius: 10px;
|
|
top: 6px;
|
left: 861px;
|
width: 10px;
|
height: 10px;
|
|
&.one {
|
top: 2px;
|
}
|
|
&.two {
|
top: 2px;
|
}
|
|
&.three {
|
top: 15px;
|
}
|
|
&.left {
|
border: 1px solid rgba(20, 134, 229, 0.5);
|
|
&.checked {
|
background-color: #1486e5;
|
}
|
|
&.one {
|
left: $base-left + 37px;
|
}
|
|
&.two {
|
left: $base-left + 52px;
|
}
|
|
&.three {
|
left: $base-left + 45px ;
|
}
|
}
|
|
&.right {
|
border: 1px solid rgba(234, 112, 25, 0.5);
|
&.checked {
|
background-color: #EA7019;
|
}
|
|
&.one {
|
left: $base-right + 13px;
|
}
|
|
&.two {
|
left: $base-right - 2px;
|
}
|
|
&.three {
|
left: $base-right + 5px;
|
}
|
}
|
}
|
|
|
.operator {
|
z-index: 10;
|
background-repeat: no-repeat;
|
background-size: cover;
|
width: 50px;
|
height: 50px;
|
margin-top: -2px;
|
|
filter: grayscale(50%);
|
text-align: center;
|
|
.prohibit {
|
z-index: 20;
|
text-align: center;
|
color: gray;
|
margin-top: 15px;
|
font-size: 24px;
|
text-shadow: 1px 1px 1px gray,
|
1px 0 1px gray,
|
0 -1px 1px gray,
|
-1px -1px 1px gray;
|
filter: none;
|
color: red;
|
}
|
}
|
|
.operator :after {
|
z-index: -1px;
|
position: relative;
|
top: -42px;
|
left: 0;
|
content: '';
|
width: 33px;
|
height: 33px;
|
display: block;
|
}
|
|
.blue .operator :after {
|
box-shadow: 0 0 10px 0 #1486e5;
|
}
|
|
.orange .operator :after {
|
box-shadow: 0 0 10px 0 #EA7019;
|
}
|
|
.esl-logo {
|
height: 40px;
|
margin-top: 5px;
|
margin-right: 8px;
|
}
|
|
.wargasz-logo {
|
// height: 40px;
|
//margin-top: 5px;
|
margin-right: 8px;
|
}
|
|
.flag.hun {
|
height: 34px;
|
margin: 8px 0 0 8px;
|
float: left;
|
margin-right: 10px;
|
}
|
|
.info.left .text {
|
display: table-cell;
|
vertical-align: middle;
|
height: 50px;
|
font-size: 15px;
|
text-shadow: 1px 1px 1px black,
|
1px 0 1px black,
|
0 -1px 1px black,
|
-1px -1px 1px black;
|
width: 350px;
|
}
|
|
.text em {
|
display: block;
|
position: absolute;
|
top: 11px;
|
font-style: normal;
|
font-weight: normal;
|
font-size: 20px;
|
}
|
|
.text.rotate {
|
em {
|
animation-name: fade;
|
animation-fill-mode: both;
|
animation-iteration-count: infinite;
|
animation-duration: 15s;
|
|
&:nth-child(1) {
|
animation-direction: alternate-reverse;
|
}
|
|
&:nth-child(2) {
|
animation-direction: alternate;
|
}
|
}
|
}
|
|
}
|
|
#main {
|
display: block;
|
width: 1920px;
|
height: 1080px;
|
|
&.soon {
|
background: transparent url("/assets/backgrounds/start-soon.png") no-repeat;
|
}
|
|
&.interview {
|
background: transparent url("/assets/backgrounds/interrogation.png") no-repeat;
|
}
|
|
&.interview.fauw {
|
background: transparent url("/assets/backgrounds/interrogation-fauw.png") no-repeat;
|
}
|
|
.text, .placeholder {
|
position: absolute;
|
width: 50%;
|
left: 25%;
|
text-align: center;
|
top: 10em;
|
font-size: 5em;
|
color: white;
|
}
|
|
.placeholder {
|
opacity: 0.5;
|
background-color: black;
|
border-radius: 0.2em;
|
}
|
|
&.interview {
|
.text.team {
|
top: 2em;
|
}
|
}
|
}
|
|
|
@keyframes fade {
|
0%, 49% {
|
opacity: 0;
|
}
|
51%, 100% {
|
opacity: 1;
|
}
|
}
|