horrible midnight fixes and some fancy popups in the player

1 files changed, 36 insertions, 3 deletions

diff --git a/web/style/js-player.css b/web/style/js-player.css
index ba8f4c4..e52819f 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -45,10 +45,7 @@
     display: inherit;
 }
 .jsp-track-select-popup {
-    position: absolute;
     background-color: #303a;
-    bottom: var(--csize);
-    right: 0px;
     padding: 1em;
 }
 
@@ -138,3 +135,39 @@
         opacity: 0;
     }
 }
+
+.jsp-popup {
+    position: absolute;
+    bottom: var(--csize);
+    right: 0px;
+    animation-name: popup-in;
+    animation-duration: 100ms;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+}
+.jsp-popup-out {
+    animation-name: popup-out;
+    animation-duration: 100ms;
+    animation-fill-mode: backwards;
+    animation-timing-function: ease-in;
+}
+@keyframes popup-in {
+    from {
+        bottom: calc(var(--csize) - 20px);
+        opacity: 0;
+    }
+    to {
+        bottom: var(--csize);
+        opacity: 1;
+    }
+}
+@keyframes popup-out {
+    from {
+        bottom: var(--csize);
+        opacity: 1;
+    }
+    to {
+        bottom: calc(var(--csize) - 20px);
+        opacity: 0;
+    }
+}
\ No newline at end of file