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.css | 126 ++++++++++++++++++++++++++++++++++------- 1 files changed, 104 insertions(+), 22 deletions(-) diff --git a/assets/overlay.css b/assets/overlay.css index 2bd10d5..07912ac 100644 --- a/assets/overlay.css +++ b/assets/overlay.css @@ -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; @@ -29,36 +30,35 @@ } #stripe .team { position: fixed; - margin-top: 2px; - width: 435px; + margin-top: 4px; + width: 500px; overflow: hidden; } #stripe .team .name { color: white; - font-size: 34px; + font-size: 28px; } #stripe .team.blue { left: 270px; text-align: right; } #stripe .team.orange { - left: 1215px; + left: 1150px; text-align: left; } #stripe .ban { position: inherit; - top: -1px; + top: 2px; } #stripe .ban.orange { - left: 1080px; + left: 1000px; } #stripe .ban.blue { - left: 715px; + left: 812px; } #stripe .info { position: inherit; - top: 4px; - width: 220px; + width: 300px; height: 50px; } #stripe .info.left { @@ -66,29 +66,77 @@ text-align: left; } #stripe .info.right { - left: 1700px; + left: 1620px; text-align: right; } +#stripe .mapwin { + background-color: #fff800; + position: fixed; + top: 6px; + left: 861px; + width: 32px; + height: 14px; +} +#stripe .mapwin.left { + left: 861px; +} +#stripe .mapwin.left.one { + top: 6px; +} +#stripe .mapwin.left.two { + top: 23px; +} +#stripe .mapwin.right { + left: 1028px; +} +#stripe .mapwin.right.one { + top: 6px; +} +#stripe .mapwin.right.two { + top: 23px; +} #stripe .operator { + z-index: 10; background-repeat: no-repeat; background-size: cover; - width: 60px; - height: 60px; - filter: grayscale(65%); + width: 50px; + height: 50px; + margin-top: -2px; + filter: grayscale(50%); text-align: center; } #stripe .operator .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, -1px -1px 1px gray; filter: none; color: red; } +#stripe .operator :after { + z-index: -1px; + position: relative; + top: -42px; + left: 0; + content: ""; + width: 33px; + height: 33px; + display: block; +} +#stripe .blue .operator :after { + box-shadow: 0 0 10px 0 #1486e5; +} +#stripe .orange .operator :after { + box-shadow: 0 0 10px 0 #EA7019; +} #stripe .esl-logo { height: 40px; margin-top: 5px; + margin-right: 8px; +} +#stripe .wargasz-logo { margin-right: 8px; } #stripe .flag.hun { @@ -101,13 +149,29 @@ 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; } #stripe .text em { + display: block; + position: absolute; + top: 11px; font-style: normal; - font-weight: bold; - font-size: 22px; + font-weight: normal; + font-size: 20px; +} +#stripe .text.rotate em { + animation-name: fade; + animation-fill-mode: both; + animation-iteration-count: infinite; + animation-duration: 15s; +} +#stripe .text.rotate em:nth-child(1) { + animation-direction: alternate-reverse; +} +#stripe .text.rotate em:nth-child(2) { + animation-direction: alternate; } #main { @@ -118,19 +182,37 @@ #main.soon { background: transparent url("/assets/backgrounds/start-soon.png") no-repeat; } -#main.soon .text, #main.soon .placeholder { +#main.interview { + background: transparent url("/assets/backgrounds/interrogation.png") no-repeat; +} +#main.interview.fauw { + background: transparent url("/assets/backgrounds/interrogation-fauw.png") no-repeat; +} +#main .text, #main .placeholder { position: absolute; width: 50%; left: 25%; text-align: center; - top: 97%; + top: 10em; font-size: 5em; color: white; } -#main.soon .placeholder { +#main .placeholder { opacity: 0.5; background-color: black; border-radius: 0.2em; } +#main.interview .text.team { + top: 2em; +} + +@keyframes fade { + 0%, 49% { + opacity: 0; + } + 51%, 100% { + opacity: 1; + } +} /*# sourceMappingURL=overlay.css.map */ -- Gitblit v1.8.0