Redesign player UI

3 files changed, 20 insertions, 27 deletions

diff --git a/web/style/forms.css b/web/style/forms.css
index 48a7dba..5927b4c 100644
--- a/web/style/forms.css
+++ b/web/style/forms.css
@@ -5,7 +5,6 @@
     Copyright (C) 2023 tpart
 */
 input {
-    color: var(--font-highlight);
     background-color: var(--background-dark);
     outline: none;
     box-sizing: border-box;
@@ -36,7 +35,8 @@ fieldset {
 }
 
 input[type="submit"],
-form button {
+button {
+    color: var(--font-highlight);
     padding: 0.5em;
     margin: 0.5em;
     justify-self: center;
@@ -45,10 +45,12 @@ form button {
     border-radius: 8px;
     cursor: pointer;
 }
-input[type="submit"]:disabled {
+input[type="submit"]:disabled,
+button:disabled {
     background-color: var(--background-disable);
 }
-input[type="submit"]:hover {
+input[type="submit"]:hover,
+button:hover {
     filter: brightness(150%);
 }
 
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;
 }
diff --git a/web/style/layout.css b/web/style/layout.css
index 0dc5aed..0c2f25b 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -100,7 +100,6 @@ summary h3 {
 .icon {
     font-family: "Material Icons";
     line-height: 1;
-    font-size: 1.1em;
     vertical-align: text-bottom;
     display: inline-block;
     text-rendering: optimizeLegibility;