1 files changed, 32 insertions, 6 deletions
diff --git a/web/style/js-player.css b/web/style/js-player.css
index 40455ed..8f047f1 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -52,10 +52,6 @@
 .jsp-track-state:hover {
     background-color: rgba(113, 113, 113, 0.333);
 }
-.jsp-track-select-popup {
-    background-color: #303a;
-    padding: 1em;
-}
 
 .jsp-pri {
     position: relative;
@@ -149,14 +145,16 @@
     bottom: var(--csize);
     right: 0px;
     animation-name: popup-in;
+    animation-delay: 180ms;
     animation-duration: 100ms;
-    animation-fill-mode: forwards;
+    animation-fill-mode: both;
     animation-timing-function: ease-out;
 }
 .jsp-popup-out {
     animation-name: popup-out;
+    animation-delay: 0ms;
     animation-duration: 100ms;
-    animation-fill-mode: backwards;
+    animation-fill-mode: both;
     animation-timing-function: ease-in;
 }
 @keyframes popup-in {
@@ -179,3 +177,31 @@
         opacity: 0;
     }
 }
+
+.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,
+.jsp-settings-popup h3 {
+    margin-top: 0.1em;
+    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-playersync-controls {
+    padding: 1em;
+    background-color: #0005;
+}