removed circle/swirly, redesign to match current site

diff --git a/style.css b/style.css
index f64eab577702e94adb5037dc582db2f1aeaea01b..fd265a26d62eae90c74384bf0a51a22e889605f1 100644 (file)
--- 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;
-}
-
-
 /* ---------------------------------------------------------- */