From ea0bafa754757ddb9ca06ae1cd3c40bc4649b83a Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Fri, 20 May 2022 02:04:44 -0700
Subject: web: use generic player slots in HTML/CSS

---
 web/static/index.html | 24 ++++++++++++------------
 web/static/style.css  | 22 ++++++++++------------
 2 files changed, 22 insertions(+), 24 deletions(-)

(limited to 'web/static')

diff --git a/web/static/index.html b/web/static/index.html
index 196db91..85e3cd7 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -26,20 +26,20 @@
 				<div id="oi">oi!</div>
 				<div id="info-slot-prev" class="icon">&#xf27f;</div>
 				<div id="info-slot-next" class="icon">&#xf280;</div>
-				<div id="p1-info">
-					<div id="p1-info-inner">
-						<div id="p1-name"></div>
-						<div id="p1-rem"></div>
-						<div id="p1-sugg"></div>
-						<div id="p1-avg"></div>
+				<div id="info-slot-1" class="info-slot">
+					<div class="inner">
+						<div class="name"></div>
+						<div class="rem"></div>
+						<div class="sugg"></div>
+						<div class="avg"></div>
 					</div>
 				</div>
-				<div id="p2-info">
-					<div id="p2-info-inner">
-						<div id="p2-name"></div>
-						<div id="p2-rem"></div>
-						<div id="p2-sugg"></div>
-						<div id="p2-avg"></div>
+				<div id="info-slot-2" class="info-slot">
+					<div class="inner">
+						<div class="name"></div>
+						<div class="rem"></div>
+						<div class="sugg"></div>
+						<div class="avg"></div>
 					</div>
 				</div>
 			</div>
diff --git a/web/static/style.css b/web/static/style.css
index f8b6ea0..49daa96 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -523,7 +523,7 @@ body {
 	background-color: #7b51ca;
 }
 
-#info #p1-info, #info #p2-info {
+#info .info-slot {
 	background-color: #222;
 	font-size: 1.5em;
 
@@ -534,45 +534,43 @@ body {
 	align-items: center;
 }
 
-#info #p1-info.active, #info #p2-info.active {
+#info .info-slot.active {
 	background-color: #35481d;
 }
 
-#info #p1-info-inner, #info #p2-info-inner {
+#info .inner {
 	display: contents;
 	visibility: hidden;
 }
 
-#info #p1-info-inner.visible, #info #p2-info-inner.visible {
+#info .inner.visible {
 	visibility: visible;
 }
 
-#info #p1-rem, #info #p2-rem {
+#info .rem {
 	font-size: 3em;
 	font-weight: bold;
 }
 
-#info #p1-name, #info #p2-name {
+#info .name {
 	color: #ccc;
 }
 
-#info #p1-sugg, #info #p2-sugg {
+#info .sugg {
 	color: #aaa;
 	font-size: 0.8em;
 }
 
-#info #p1-name:after, #info #p2-name:after,
-#info #p1-rem:after, #info #p2-rem:after,
-#info #p1-sugg:after, #info #p2-sugg:after {
+#info .name:after, #info .rem:after, #info .sugg:after {
 	content: '\200b';
 }
 
-#info #p1-avg, #info #p2-avg {
+#info .avg {
 	font-size: 0.8em;
 	width: 100%;
 }
 
-#info #p1-avg:before, #info #p2-avg:before {
+#info .avg:before {
 	content: 'avg: ';
 }
 
-- 
cgit v1.2.3-70-g09d2