| commit | author | age | ||
| fb1240 | 1 | html *, body * { |
| FÁ | 2 | margin: 0; |
| 3 | padding: 0; | |
| 4 | color: white; | |
| 5 | } | |
| 6 | ||
| 7 | body { | |
| 8 | width: 1920px; | |
| 9 | height: 1080px; | |
| 10 | font-family: 'Oswald', sans-serif; | |
| 11cf46 | 11 | /*background-image: url("/assets/test.png");*/ |
| fb1240 | 12 | } |
| FÁ | 13 | |
| 14 | #stripe { | |
| 15 | position: fixed; | |
| ae0592 | 16 | top: 0; |
| fb1240 | 17 | left: 0; |
| FÁ | 18 | width: 100%; |
| 19 | height: 58px; | |
| 20 | text-align: center; | |
| 21 | ||
| 22 | & * { | |
| 23 | display: inline-block; | |
| 24 | } | |
| 25 | ||
| 26 | &.team, &.team-ban { | |
| 27 | background: transparent url("/assets/stripe.png") no-repeat; | |
| 28 | } | |
| 29 | ||
| 30 | &.simple { | |
| 31 | background: transparent url("/assets/stripe-simple.png") no-repeat; | |
| 32 | } | |
| 33 | ||
| 34 | .team { | |
| 35 | position: fixed; | |
| ae0592 | 36 | margin-top: 4px; |
| FÁ | 37 | width: 500px; |
| fb1240 | 38 | overflow: hidden; |
| FÁ | 39 | |
| 40 | .name { | |
| 41 | color: white; | |
| ae0592 | 42 | font-size: 28px; |
| fb1240 | 43 | } |
| FÁ | 44 | |
| 45 | &.blue { | |
| ae0592 | 46 | left: 270px; |
| fb1240 | 47 | text-align: right; |
| FÁ | 48 | } |
| 49 | ||
| 50 | &.orange { | |
| ae0592 | 51 | left: 1150px; |
| fb1240 | 52 | text-align: left; |
| FÁ | 53 | } |
| 54 | } | |
| 55 | ||
| 56 | .ban { | |
| 57 | position: inherit; | |
| 11cf46 | 58 | top: 2px; |
| fb1240 | 59 | |
| FÁ | 60 | &.orange { |
| 11cf46 | 61 | left: 1000px; |
| fb1240 | 62 | } |
| FÁ | 63 | |
| 64 | &.blue { | |
| aee2d5 | 65 | left: 812px; |
| fb1240 | 66 | } |
| FÁ | 67 | } |
| 68 | ||
| 69 | .info { | |
| 70 | position: inherit; | |
| f6ebbf | 71 | width: 300px; |
| fb1240 | 72 | height: 50px; |
| FÁ | 73 | } |
| 74 | ||
| 75 | .info.left { | |
| 76 | left: 0; | |
| 77 | text-align: left; | |
| 78 | } | |
| 79 | ||
| 80 | .info.right { | |
| f6ebbf | 81 | left: 1620px; |
| fb1240 | 82 | text-align: right; |
| FÁ | 83 | } |
| f6ebbf | 84 | |
| 9c05d2 | 85 | $base-left: 750px; |
| FÁ | 86 | $base-right: 1105px; |
| f6ebbf | 87 | .mapwin { |
| FÁ | 88 | position: fixed; |
| 9c05d2 | 89 | border-radius: 10px; |
| FÁ | 90 | |
| f6ebbf | 91 | top: 6px; |
| FÁ | 92 | left: 861px; |
| 9c05d2 | 93 | width: 10px; |
| FÁ | 94 | height: 10px; |
| 95 | ||
| 96 | &.one { | |
| 97 | top: 2px; | |
| 98 | } | |
| 99 | ||
| 100 | &.two { | |
| 101 | top: 2px; | |
| 102 | } | |
| 103 | ||
| 104 | &.three { | |
| 105 | top: 15px; | |
| 106 | } | |
| ae0592 | 107 | |
| f6ebbf | 108 | &.left { |
| 9c05d2 | 109 | border: 1px solid rgba(20, 134, 229, 0.5); |
| FÁ | 110 | |
| 111 | &.checked { | |
| 112 | background-color: #1486e5; | |
| 113 | } | |
| ae0592 | 114 | |
| f6ebbf | 115 | &.one { |
| 9c05d2 | 116 | left: $base-left + 37px; |
| f6ebbf | 117 | } |
| ae0592 | 118 | |
| f6ebbf | 119 | &.two { |
| 9c05d2 | 120 | left: $base-left + 52px; |
| FÁ | 121 | } |
| 122 | ||
| 123 | &.three { | |
| 124 | left: $base-left + 45px ; | |
| f6ebbf | 125 | } |
| FÁ | 126 | } |
| 127 | ||
| 128 | &.right { | |
| 9c05d2 | 129 | border: 1px solid rgba(234, 112, 25, 0.5); |
| FÁ | 130 | &.checked { |
| 131 | background-color: #EA7019; | |
| 132 | } | |
| ae0592 | 133 | |
| f6ebbf | 134 | &.one { |
| 9c05d2 | 135 | left: $base-right + 13px; |
| f6ebbf | 136 | } |
| ae0592 | 137 | |
| f6ebbf | 138 | &.two { |
| 9c05d2 | 139 | left: $base-right - 2px; |
| FÁ | 140 | } |
| 141 | ||
| 142 | &.three { | |
| 143 | left: $base-right + 5px; | |
| f6ebbf | 144 | } |
| FÁ | 145 | } |
| ae0592 | 146 | } |
| f6ebbf | 147 | |
| fb1240 | 148 | |
| FÁ | 149 | .operator { |
| 083ff4 | 150 | z-index: 10; |
| fb1240 | 151 | background-repeat: no-repeat; |
| FÁ | 152 | background-size: cover; |
| f6ebbf | 153 | width: 50px; |
| FÁ | 154 | height: 50px; |
| 155 | margin-top: -2px; | |
| fb1240 | 156 | |
| f6ebbf | 157 | filter: grayscale(50%); |
| fb1240 | 158 | text-align: center; |
| FÁ | 159 | |
| 160 | .prohibit { | |
| 083ff4 | 161 | z-index: 20; |
| fb1240 | 162 | text-align: center; |
| FÁ | 163 | color: gray; |
| f6ebbf | 164 | margin-top: 15px; |
| FÁ | 165 | font-size: 24px; |
| fb1240 | 166 | text-shadow: 1px 1px 1px gray, |
| FÁ | 167 | 1px 0 1px gray, |
| 168 | 0 -1px 1px gray, | |
| 169 | -1px -1px 1px gray; | |
| 170 | filter: none; | |
| 171 | color: red; | |
| 172 | } | |
| 173 | } | |
| ae0592 | 174 | |
| 083ff4 | 175 | .operator :after { |
| FÁ | 176 | z-index: -1px; |
| 177 | position: relative; | |
| 178 | top: -42px; | |
| 179 | left: 0; | |
| 180 | content: ''; | |
| 181 | width: 33px; | |
| 182 | height: 33px; | |
| 183 | display: block; | |
| 184 | } | |
| ae0592 | 185 | |
| 083ff4 | 186 | .blue .operator :after { |
| FÁ | 187 | box-shadow: 0 0 10px 0 #1486e5; |
| 188 | } | |
| ae0592 | 189 | |
| 083ff4 | 190 | .orange .operator :after { |
| FÁ | 191 | box-shadow: 0 0 10px 0 #EA7019; |
| 192 | } | |
| fb1240 | 193 | |
| FÁ | 194 | .esl-logo { |
| 195 | height: 40px; | |
| 196 | margin-top: 5px; | |
| 197 | margin-right: 8px; | |
| 198 | } | |
| ae0592 | 199 | |
| aee2d5 | 200 | .wargasz-logo { |
| ae0592 | 201 | // height: 40px; |
| FÁ | 202 | //margin-top: 5px; |
| aee2d5 | 203 | margin-right: 8px; |
| FÁ | 204 | } |
| fb1240 | 205 | |
| FÁ | 206 | .flag.hun { |
| 207 | height: 34px; | |
| 208 | margin: 8px 0 0 8px; | |
| 209 | float: left; | |
| 210 | margin-right: 10px; | |
| 211 | } | |
| 212 | ||
| 213 | .info.left .text { | |
| 214 | display: table-cell; | |
| 215 | vertical-align: middle; | |
| 216 | height: 50px; | |
| ae0592 | 217 | font-size: 15px; |
| fb1240 | 218 | text-shadow: 1px 1px 1px black, |
| FÁ | 219 | 1px 0 1px black, |
| 220 | 0 -1px 1px black, | |
| 221 | -1px -1px 1px black; | |
| f6ebbf | 222 | width: 350px; |
| fb1240 | 223 | } |
| FÁ | 224 | |
| 225 | .text em { | |
| ae0592 | 226 | display: block; |
| FÁ | 227 | position: absolute; |
| 228 | top: 11px; | |
| fb1240 | 229 | font-style: normal; |
| ae0592 | 230 | font-weight: normal; |
| FÁ | 231 | font-size: 20px; |
| fb1240 | 232 | } |
| 9c05d2 | 233 | |
| ae0592 | 234 | .text.rotate { |
| FÁ | 235 | em { |
| 236 | animation-name: fade; | |
| 237 | animation-fill-mode: both; | |
| 238 | animation-iteration-count: infinite; | |
| 239 | animation-duration: 15s; | |
| 240 | ||
| 241 | &:nth-child(1) { | |
| 242 | animation-direction: alternate-reverse; | |
| 243 | } | |
| 9c05d2 | 244 | |
| ae0592 | 245 | &:nth-child(2) { |
| FÁ | 246 | animation-direction: alternate; |
| 247 | } | |
| 248 | } | |
| 249 | } | |
| 250 | ||
| fb1240 | 251 | } |
| FÁ | 252 | |
| 253 | #main { | |
| 254 | display: block; | |
| 255 | width: 1920px; | |
| 256 | height: 1080px; | |
| 257 | ||
| 258 | &.soon { | |
| 259 | background: transparent url("/assets/backgrounds/start-soon.png") no-repeat; | |
| 8b1f17 | 260 | } |
| fb69d5 | 261 | |
| 8b1f17 | 262 | &.interview { |
| FÁ | 263 | background: transparent url("/assets/backgrounds/interrogation.png") no-repeat; |
| fb69d5 | 264 | } |
| FÁ | 265 | |
| 266 | &.interview.fauw { | |
| 267 | background: transparent url("/assets/backgrounds/interrogation-fauw.png") no-repeat; | |
| 8b1f17 | 268 | } |
| fb1240 | 269 | |
| 8b1f17 | 270 | .text, .placeholder { |
| FÁ | 271 | position: absolute; |
| 272 | width: 50%; | |
| 273 | left: 25%; | |
| 274 | text-align: center; | |
| 275 | top: 10em; | |
| 276 | font-size: 5em; | |
| 277 | color: white; | |
| 278 | } | |
| fb69d5 | 279 | |
| 8b1f17 | 280 | .placeholder { |
| FÁ | 281 | opacity: 0.5; |
| 282 | background-color: black; | |
| 283 | border-radius: 0.2em; | |
| 284 | } | |
| 285 | ||
| fb69d5 | 286 | &.interview { |
| 8b1f17 | 287 | .text.team { |
| FÁ | 288 | top: 2em; |
| fb1240 | 289 | } |
| FÁ | 290 | } |
| ae0592 | 291 | } |
| fb1240 | 292 | |
| ae0592 | 293 | |
| FÁ | 294 | @keyframes fade { |
| 295 | 0%, 49% { | |
| 296 | opacity: 0; | |
| 297 | } | |
| 298 | 51%, 100% { | |
| 299 | opacity: 1; | |
| 300 | } | |
| fb1240 | 301 | } |
