Redesign player UI

1 files changed, 14 insertions, 22 deletions

diff --git a/web/style/js-player.css b/web/style/js-player.css
index 931547c..98e0f7c 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -8,15 +8,18 @@
     --csize: 50px;
 }
 
+.jsp .jsp-controls,
+.jsp-popup {
+    background-color: #1d1d1d99;
+}
+
 .jsp .jsp-controls {
     position: absolute;
     bottom: 0px;
     left: 0px;
     width: 100%;
     height: var(--csize);
-    background-color: #1d1d1d99;
     transition: opacity 0.2s;
-
     display: flex;
     flex-direction: row;
 }
@@ -26,10 +29,9 @@
     width: var(--csize);
     height: 100%;
     border: none;
+    margin: 0;
     background-color: #ffffff10;
-}
-.jsp .jsp-controls .jsp-track-select button {
-    background-color: #ffaaff10;
+    border-radius: 0px;
 }
 
 .jsp-controls p.jsp-status {
@@ -41,16 +43,13 @@
     padding: 0.4em;
 }
 .jsp-track-select {
-    margin-right: 1em;
     display: inherit;
 }
 .jsp-track-state {
-    background-color: #0005;
     border: 0px solid transparent;
     font-size: x-large;
-}
-.jsp-track-state:hover {
-    background-color: rgba(113, 113, 113, 0.333);
+    background-color: transparent;
+    cursor: pointer;
 }
 
 .jsp-pri {
@@ -101,6 +100,9 @@
 .jsp-stats pre {
     margin: 0.1em;
 }
+.jsp .icon {
+    font-size: 1.5em;
+}
 
 .jsp .jsh-log {
     position: absolute;
@@ -181,11 +183,9 @@
 .jsp-settings-popup {
     padding: 1em;
     min-width: 14em;
-    background-color: rgba(45, 24, 104, 0.548);
 }
 .jsp-track-select-popup {
     min-width: 14em;
-    background-color: #303a;
     padding: 1em;
 }
 .jsp-settings-popup h2,
@@ -194,15 +194,7 @@
     margin-bottom: 0.1em;
 }
 
-.jsp-playersync-controls button {
-    background-color: black;
-    border: 2px solid var(--accent-light);
-    font-size: medium;
-    padding: 0.3em;
-    border-radius: 7px;
-}
 .jsp-controlgroup {
-    padding: 1em;
-    margin: 0.5em;
-    background-color: #0005;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }