update frontend

static/site.css

@@ -2,10 +2,9 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-}
-
-body {
-    padding: 0.5em;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 @media only screen and (min-resolution: 200dpi) {
@@ -24,7 +23,8 @@ body {
     border-radius: 0.5em;
     width: 30em;
     font-family: sans-serif;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
+    margin-left: 0.5em;
 }
 
 
@@ -34,12 +34,21 @@ body {
     height: 6em;
     float: left;
     margin-right: 1em;
+    text-align: center;
+    background-color: white;
 }
 
 .cover {
     display: block;
-    width: 100%;
-    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    transition: .3s ease;
 }
 
 
@@ -64,6 +73,10 @@ body {
     filter: drop-shadow(0px 0px 1em black);
 }
 
+.cover-container:hover .cover {
+    filter: brightness(0.6);
+}
+
 .overlay img {
     height: 50%;
     position: absolute;
@@ -86,7 +99,7 @@ body {
 }
 
 .button {
-    height: 2em;
+    height: 1.5em;
     width: 3em;
     display: inline-block;
     text-align: center;
@@ -160,7 +173,7 @@ body {
     white-space: nowrap;
     font-size: 0.7em;
     line-height: 1.2em;
-    margin-top: 0.2em;
+    margin-top: 0.3em;
 }
 
 .categories span {
@@ -171,14 +184,66 @@ body {
     color: white;
     max-width: 10em;
     overflow: clip;
+    background-color: var(--main-color);
 }
 
 .vote-buttons {
     margin-top: 0.5em;
 }
 
-.song-data {
+.song-title,
+.song-artist {
     width: 100%;
     overflow: clip;
     white-space: nowrap;
+}
+
+.song-artist {
+    font-size: 0.7em;
+}
+
+h1 {
+    font-family: sans-serif;
+    padding: 0.1em;
+    padding-left: 0.2em;
+    margin-bottom: 1rem;
+    font-size: 1.5em;
+    background-color: color-mix(in srgb, var(--main-color) 60%, transparent);
+    border-bottom: 0.3rem solid var(--main-color);
+}
+
+#yt-player,
+#spotify-player {
+    position: fixed;
+    bottom: 0.5em;
+    right: 0.5em;
+    padding: 0;
+    display: none;
+    justify-content: center;
+    border-radius: 20px;
+}
+
+#spotify-player {
+    bottom: 0.2em;
+    background-color: blue;
+}
+
+#close-player {
+    position: absolute;
+    bottom: 320px;
+    right: 0.5em;
+    background-color: rgba(255,255,255,0.9);
+    width: 3em;
+    height: 3em;
+    border-radius: 1.5em;
+    display: none;
+}
+#close-player img {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    width: 1.5em;
 }