From ffc0260473f3cc825edbe3c7c0cd73029b94b288 Mon Sep 17 00:00:00 2001
From: equilet <2237372+equilet@users.noreply.github.com>
Date: Fri, 7 Apr 2023 14:37:04 -0700
Subject: [PATCH] removed circle/swirly, redesign to match current site

---
 style.css | 165 +++++++++++++-----------------------------------------
 1 file changed, 38 insertions(+), 127 deletions(-)

diff --git a/style.css b/style.css
index f64eab5..fd265a2 100644
--- a/style.css
+++ b/style.css
@@ -1,13 +1,4 @@
 
-h1, p { 
-    	font-family: 'Share Tech Mono', monospace;
-}
-
-p {
-	/* color: lightcyan; */
-	color: #1a3a4e;
-	font-size: 14px;
-}
 
 /* ---------------------------------------------------------- */
 
@@ -17,6 +8,7 @@ p {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	gap: 0.5em;
 }
 
 #c-top {
@@ -24,6 +16,7 @@ p {
 	flex-direction: row;
 	justify-content: flex-end;
 	gap: 1em;
+	border: 1px solid black;
 }
 
 #c-bottom {
@@ -31,10 +24,12 @@ p {
 	flex-direction: row;
 	justify-content: space-between;
 	gap: 1em;
+	width: auto;
 }
 
 #c-bottom-right {
 	display: flex;
+	/* flex: 6; */
 	flex-direction: column;
 	justify-content: space-between;
 	gap: 1em;
@@ -51,78 +46,26 @@ p {
 
 #player-heading { 
 	display: flex;
-	margin-right: 20px;
+	/* flex-basis: 55%; */
+	/* margin-right: 20px; */
 }	
 
-#swirly {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	width: 50px;
-}
 
 /* ---------------------------------------------------------- */
-#loader {
-	display: flex;
-	max-width: 15rem;
-	width: 100%;
-	height: auto;
-	stroke-linecap: round;
-}
-#loader2 {
-	height: 200px;
-	width: 200px;
-	display: flex;
-}
-
-circle {
-	fill: none;
-	stroke-width: 3.5;
-	transform-origin: 170px 170px;
-	will-change: transform;
-	animation-name: preloader;
-	animation-duration: 3s;
-	animation-iteration-count: infinite;
-	animation-timing-function: ease-in-out;
-}
-circle .animate {
-}
-circle:nth-of-type(1) {
-	stroke-dasharray: 550px;
-	animation-delay: -0.15s;
-}
-circle:nth-of-type(2) {
-	stroke-dasharray: 500px;
-	animation-delay: -0.3s;
-}
-circle:nth-of-type(3) {
-	stroke-dasharray: 450px;
-	animation-delay: -0.45s;
-}
-circle:nth-of-type(4) {
-	stroke-dasharray: 300px;
-	animation-delay: -0.6s;
-}
-
-@keyframes preloader {
-	50% { transform: rotate(360deg); }
-}
 
 
 /* ---------------------------------------------------------- */
 .player-container {
 	margin: 10px;
 	padding: 30px;
-	/* border: 1px solid black; */
-	background-color: #cecece;
-	border-radius: 15px 50px 30px; /* divergent radii */
+	/* border-radius: 15px 50px 30px; */ /* divergent radii */ 
 }
 
 .player-frame-bottom {
 	margin: 0px;
 	padding: 20px;
-	/* border: 2px solid green; */
-	border-radius: 15px;
+	 border: 1px solid black;
+	/* border-radius: 15px; */
 	background-color: #FFFFFF; 
 }
 
@@ -147,7 +90,7 @@ circle:nth-of-type(4) {
 	height: 150px;
 	padding: 20px;
 
-	border: 10px solid grey;
+	border: 10px solid rgba(0, 0, 0, 0.3);
 	background: transparent;
 	position: relative;
 
@@ -188,8 +131,7 @@ circle:nth-of-type(4) {
 #player-img {
 	display: flex;
 	align-items: center;
-	flex: 2;
-	border-radius: 15px 80px 30px 160px; /* divergent radii */
+	/* border-radius: 15px 80px 30px 160px; */ /* divergent radii */
 }
 
 #player-img img { 
@@ -199,26 +141,40 @@ circle:nth-of-type(4) {
 }
 
 #player-info {
-	flex: 2;
+	width: 500px;
 	text-align: right;
+	background: rgba(0, 0, 0, 0.03);
+	padding: 10px;
 }
+
 #player-heading div {
-	flex: 1;
-	text-align: center;
-	color: #2f6086;
-}
-#player-heading div {
-	font-size: 25px;
+	color: rgb(255, 255, 255);
+	background: rgba(128, 128, 128, 0.2); 
+	text-align: left;
+
+	letter-spacing: 0.3rem;
+	font-size: 22px;
 
+	padding: 20px;
 }
+
 #infotext p {
 	text-align: center;
 }
 
+.player-text, h1, p {
+	/* font-family: 'Share Tech Mono', monospace; */
+	font-family: "Arial";
+}
+
+h1, p { 
+	color: #1a3a4e;
+	font-size: 14px;
+}
 .player-text {
-	font-family: 'Share Tech Mono', monospace;
-	font-size: 20px;
+	font-size: 16px;
 }
+
 /* ---------------------------------------------------------- */
 /* top bar; fake toolbar */
 
@@ -234,22 +190,20 @@ circle:nth-of-type(4) {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;	
-	padding-bottom: 20px;
-	padding-top: 10px;
+	padding: 5px;
 }
 #player-tbar {
 	width: 100%;
 	/* border-radius: 5px; */
 	transition: all 0.5s;
 	-webkit-transition: all 0.5s;
-	padding-bottom: 10px;
+	background: #000000;
 }
 
 #player-tbar div { 
 	height: 5px !important;
 	background: #fff;
 	margin: 7px 0px 7px 0px;
-	border-radius: 25px;
 	transition: all 0.5s;
 	-webkit-transition: all 0.5s;
 }
@@ -257,6 +211,8 @@ circle:nth-of-type(4) {
 #player-tbar:hover div {
 	width: 100%;
 }
+#w1, #w2, #w3 {
+}
 #w1 {
 	width: 30%;
 }
@@ -273,51 +229,6 @@ circle:nth-of-type(4) {
 	background-color: #000000;
 }
 
-#close, #mm, #fs {
-	position: relative;
-
-}
-#close:after {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	
-	content: "\d7";
-	font-size: 40px;
-	color: #000;
-	line-height: 35px;
-	text-align: center;
-}
-#mm:after {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	
-	content: "\29a5";
-	font-size: 25px;
-	color: #000;
-	line-height: 33px;
-	text-align: center;
-}
-#fs:after {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-
-	content: "\29b5";
-	font-size: 25px;
-	color: #000;
-	line-height: 35px;
-	text-align: center;
-}
-
-
 /* ---------------------------------------------------------- */
 
 
-- 
2.34.1