From 2585d732dffb7df87babd32a4922835d8d142c8a Mon Sep 17 00:00:00 2001 From: Fibinger Ádám <adam.fibinger@wup.hu> Date: Fri, 19 Jun 2020 19:18:45 +0200 Subject: [PATCH] Ace + Melusi --- assets/overlay.scss | 206 +++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 172 insertions(+), 34 deletions(-) diff --git a/assets/overlay.scss b/assets/overlay.scss index 2876f91..8dc90e6 100644 --- a/assets/overlay.scss +++ b/assets/overlay.scss @@ -8,11 +8,12 @@ width: 1920px; height: 1080px; font-family: 'Oswald', sans-serif; + /*background-image: url("/assets/test.png");*/ } #stripe { position: fixed; - top: 2px; + top: 0; left: 0; width: 100%; height: 58px; @@ -32,13 +33,13 @@ .team { position: fixed; - margin-top: 2px; - width: 435px; + margin-top: 4px; + width: 500px; overflow: hidden; .name { color: white; - font-size: 34px; + font-size: 28px; } &.blue { @@ -47,28 +48,27 @@ } &.orange { - left: 1215px; + left: 1150px; text-align: left; } } .ban { position: inherit; - top: -1px; + top: 2px; &.orange { - left: 1080px; + left: 1000px; } &.blue { - left: 715px; + left: 812px; } } .info { position: inherit; - top: 4px; - width: 220px; + width: 300px; height: 50px; } @@ -78,24 +78,91 @@ } .info.right { - left: 1700px; + 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: 60px; - height: 60px; + width: 50px; + height: 50px; + margin-top: -2px; - filter: grayscale(65%); + filter: grayscale(50%); text-align: center; .prohibit { + z-index: 20; text-align: center; color: gray; - margin-top: 31px; - font-size: 20px; + margin-top: 15px; + font-size: 24px; text-shadow: 1px 1px 1px gray, 1px 0 1px gray, 0 -1px 1px gray, @@ -105,9 +172,34 @@ } } + .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; } @@ -122,18 +214,40 @@ display: table-cell; vertical-align: middle; height: 50px; - font-size: 20px; + 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: bold; - font-size: 22px; + 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 { @@ -143,21 +257,45 @@ &.soon { background: transparent url("/assets/backgrounds/start-soon.png") no-repeat; - - .text, .placeholder { - position: absolute; - width: 50%; - left: 25%; - text-align: center; - top: 97%; - font-size: 5em; - color: white; - } - .placeholder { - opacity: 0.5; - background-color: black; - border-radius: 0.2em; - } } + &.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; + } } -- Gitblit v1.8.0