multi player / per user playing and translation

public/styles.css

@@ -43,6 +43,12 @@ select {
   color: var(--text);
 }
 
+.language-select {
+  width: 58px;
+  min-width: 58px;
+  padding-right: 18px;
+}
+
 button {
   cursor: pointer;
 }
@@ -276,19 +282,31 @@ input[type="range"] {
 .volume-control {
   align-self: stretch;
   width: 210px;
-  gap: 9px;
-  padding: 0 12px;
+  position: relative;
   border-left: 1px solid var(--line);
 }
 
-.volume-control span,
-.volume-control output {
+.volume-slider {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 9px;
+  align-items: center;
+  padding: 0 12px;
+}
+
+.volume-toggle {
+  display: none;
+}
+
+.volume-slider span,
+.volume-slider output {
   color: var(--muted);
   font-size: 10px;
   font-weight: 800;
 }
 
-.volume-control output {
+.volume-slider output {
   width: 32px;
   font-variant-numeric: tabular-nums;
 }
@@ -861,7 +879,26 @@ input:focus-visible,
   }
 
   .output-control select {
-    max-width: 180px;
+    max-width: 140px;
+  }
+
+  .output-control .language-select {
+    width: 52px;
+    min-width: 52px;
+  }
+
+  #logout {
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0;
+  }
+
+  #logout::after {
+    content: "↪";
+    font-size: 17px;
   }
 
   .transport-buttons .command-button {
@@ -873,7 +910,58 @@ input:focus-visible,
   }
 
   .volume-control {
-    flex: 1;
+    flex: 0 0 48px;
+    width: 48px;
+    padding: 0;
+  }
+
+  .volume-toggle {
+    display: grid;
+    width: 47px;
+    height: 52px;
+    padding: 0;
+    place-items: center;
+    border: 0;
+    background: transparent;
+    color: var(--muted);
+    font-size: 10px;
+    font-weight: 800;
+  }
+
+  .volume-toggle:hover,
+  .volume-toggle[aria-expanded="true"] {
+    background: var(--accent-soft);
+    color: var(--accent);
+  }
+
+  .volume-slider {
+    position: absolute;
+    z-index: 20;
+    top: calc(100% + 6px);
+    right: 0;
+    display: none;
+    width: 58px;
+    height: 190px;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 8px;
+    border: 1px solid var(--line);
+    background: var(--panel-raised);
+    box-shadow: 0 14px 35px rgb(0 0 0 / 55%);
+  }
+
+  .volume-control.open .volume-slider {
+    display: flex;
+  }
+
+  .volume-slider input[type="range"] {
+    width: 30px;
+    height: 125px;
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+
+  .volume-slider output {
     width: auto;
   }