2019-10-09 | Fibinger Ádám | |
2019-10-09 | Fibinger Ádám |
.gitignore | ●●●●● patch | view | raw | blame | history | |
assets/ESL_Logo.png | patch | view | raw | blame | history | |
assets/hun.png | patch | view | raw | blame | history | |
assets/overlay.css | ●●●●● patch | view | raw | blame | history | |
overlay-test.html | ●●●●● patch | view | raw | blame | history |
.gitignore
New file @@ -0,0 +1,2 @@ .idea/ assets/ESL_Logo.png
assets/hun.png
assets/overlay.css
New file @@ -0,0 +1,131 @@ html *, body * { margin: 0; padding: 0; color: white; } body { width: 1920px; height: 1080px; /*background-image: url("/assets/test.png"); background-repeat: no-repeat;*/ font-family: 'Oswald', sans-serif; } #stripe { position: fixed; top: 2px; left: 0; width: 100%; background: transparent url("/assets/stripe.png") no-repeat; height: 58px; text-align: center; } #stripe * { display: inline-block; } #stripe .team { margin-top: 2px; position: inherit; width: 435px; overflow: hidden; } #stripe .team .name { color: white; font-size: 34px; } #stripe .team.orange { left: 270px; text-align: right; } #stripe .ban { position: inherit; top: -1px; } #stripe .ban.blue { left: 715px; } #stripe .ban.orange { left: 1080px; } .operator { background-repeat: no-repeat; background-size: cover; width: 60px; height: 60px; } #stripe .team.blue { left: 1215px; text-align: left; } #stripe .logo { display: inline-block; } #stripe .info { position: inherit; top: 4px; width: 220px; height: 50px; } #stripe .info.left { left: 0; text-align: left; } #stripe .info.right { left: 1700px; text-align: right; } #stripe .operator { filter: grayscale(65%); text-align: center; } #stripe .operator .prohibit { text-align: center; color: gray; margin-top: 31px; font-size: 20px; text-shadow: 1px 1px 1px gray, 1px 0px 1px gray, 0px -1px 1px gray, -1px -1px 1px gray; filter: none; color: red; } #stripe .esl-logo { height: 40px; margin-top: 5px; margin-right: 8px; } #stripe .flag.hun { height: 34px; margin: 8px 0 0 8px; float: left; margin-right: 10px; } #stripe .info.left .text { display: table-cell; vertical-align: middle; height: 50px; font-size: 20px; text-shadow: 1px 1px 1px black, 1px 0px 1px black, 0px -1px 1px black, -1px -1px 1px black; } .text em { font-style: normal; font-weight: bold; font-size: 22px; } overlay-test.html
@@ -3,108 +3,39 @@ <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/assets/overlay.css"> <link rel="stylesheet" href="/assets/operators-color.css"> <style type="text/css"> html *, body * { margin: 0; padding: 0; color: white; } body { width: 1920px; height: 1080px; /* background-image: url("assets/test.png"); background-repeat: no-repeat;*/ } #stripe { position: fixed; top: 2px; left: 0; width: 100%; background: transparent url("assets/stripe.png") no-repeat; height: 58px; text-align: center; } #stripe * { display: inline-block; } #stripe .team { margin-top: 2px; position: inherit; width: 420px; overflow: hidden; } #stripe .team .name { color: white; font-size: 34px; font-family: 'Oswald', sans-serif; } #stripe .team.orange { left: 270px; } #stripe .ban { } .operator { background-repeat: no-repeat; background-size: cover; width: 60px; height: 60px; } #stripe .team.blue { left: 1070px; } #stripe .logo { display: inline-block; } #stripe .info { position: inherit; top: 0; width: 220px; height: 58px; } #stripe .info.left { left: 0; text-align: left; } #stripe .info.right { left: 1700px; text-align: right; } #stripe .operator { width: 60px; height: 60px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div id="stripe"> <span class="info left">Info left</span> <span class="team orange"> <span class="name">ÁRVÍZTŰRŐ ASDF asd csapat</span> <span class="info left"> <img src="/assets/hun.png" class="flag hun"> <span class="text"> <em>#76</em> 5on5 Open Cup </span> </span> <span class="ban orange"> <span class="operator jackal"></span> <span class="operator mira"></span> <span class="team orange"> <span class="name">Lucky Strike Esport</span> </span> <span class="team blue"> <span class="name">The Grizz Esports</span> </span> <span class="logo"></span> <span class="ban blue"> <span class="operator montagne"></span> <span class="operator goyo"></span> <span class="operator montagne"> <span class="prohibit">x</span> </span> <span class="operator goyo"> <span class="prohibit">x</span> </span> </span> <span class="team blue"> <span class="name">ÁRVÍZTŰRŐ ASDF asd csapat</span> <span class="ban orange"> <span class="operator jackal"><span class="prohibit">x</span></span> <span class="operator mira"><span class="prohibit">x</span></span> </span> <span class="info right">Info right</span> <span class="info right"> <img class="esl-logo" src="/assets/ESL_Logo.png"/> </span> </div> </body> </html>