From aedccba8a30f9a558c3ecd7804b86434922c11f4 Mon Sep 17 00:00:00 2001
From: Fibinger Ádám <adam.fibinger@wup.hu>
Date: Wed, 09 Oct 2019 16:55:05 +0200
Subject: [PATCH] CSS kiszervezése, tiltott opoerátor ikonok pozícionálása
---
overlay-test.html | 102 +++----------------------
assets/overlay.css | 99 ++++++++++++++++++++++++
2 files changed, 112 insertions(+), 89 deletions(-)
diff --git a/assets/overlay.css b/assets/overlay.css
new file mode 100644
index 0000000..65bf04a
--- /dev/null
+++ b/assets/overlay.css
@@ -0,0 +1,99 @@
+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: 435px;
+ overflow: hidden;
+}
+
+#stripe .team .name {
+ color: white;
+ font-size: 34px;
+ font-family: 'Oswald', sans-serif;
+}
+
+#stripe .team.orange {
+ left: 270px;
+ text-align: right;
+}
+#stripe .ban {
+ position: inherit;
+ top: -2px;
+}
+
+#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: 0;
+ width: 220px;
+ height: 58px;
+}
+#stripe .info.left {
+ left: 0;
+ text-align: left;
+}
+#stripe .info.right {
+ left: 1700px;
+ text-align: right;
+}
+
+#stripe .operator {
+ filter: grayscale(80%);
+ text-align: center;
+}
+#stripe .operator .prohibit {
+ text-align: center;
+ color: gray;
+ margin-top: 31px;
+ font-size: 20px;
+ font-family: 'Oswald', sans-serif;
+ text-shadow: 2px 2px #ff0000;
+
+}
\ No newline at end of file
diff --git a/overlay-test.html b/overlay-test.html
index 1b62ab7..7801b4f 100644
--- a/overlay-test.html
+++ b/overlay-test.html
@@ -3,106 +3,30 @@
<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="name">Lucky Strike Esport</span>
</span>
- <span class="ban orange">
- <span class="operator jackal"></span>
- <span class="operator mira"></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>
</div>
--
Gitblit v1.8.0