From 15c05baa5ad41c40983fecb2c279282bda3da328 Mon Sep 17 00:00:00 2001
From: uwaa <uwaa@noreply.git.rape.pet>
Date: Mon, 27 Jan 2025 14:51:10 +0000
Subject: [PATCH] improve css stability of rot.js music control

---
 static/rot/rot.css | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/static/rot/rot.css b/static/rot/rot.css
index 8ef6f376..5b9188e8 100644
--- a/static/rot/rot.css
+++ b/static/rot/rot.css
@@ -2,9 +2,10 @@
   position: relative;
   display: inline-block;
   cursor: pointer;
-  padding: 5px 10px;
   border-radius: var(--panelRadius);
   transition: background-color 0.2s;
+  flex: 0 0 27px;
+  margin-left: 2px;
 }
 
 .mutebutton input {
@@ -16,15 +17,18 @@
 }
 
 .mutecheck {
-  display: inline-block;
+  display: flex;
   font-family: "Arimo";
   font-size: 20px;
   text-align: center;
   color: var(--lightText);
   width: 24px;
   height: 24px;
-  border-radius: 24px;
-  padding: 2px;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  margin: -12px;
 }
 
 /* unmuted state */
@@ -52,6 +56,8 @@ input:checked ~ .mutecheck:hover::before {
   height: 20px;
   vertical-align: middle;
   cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .volume-track {
@@ -62,6 +68,7 @@ input:checked ~ .mutecheck:hover::before {
   height: 4px;
   background-color: var(--btn);
   border-radius: 2px;
+  user-select: none;
 }
 
 .volume-fill {
@@ -81,14 +88,17 @@ input:checked ~ .mutecheck:hover::before {
   height: 12px;
   background-color: var(--link);
   border-radius: 50%;
+  user-select: none;
 }
 
 .audioControl {
   border-radius: var(--panelRadius);
-  padding: 6px;
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 8px;
+  padding: 12px 16px 12px 16px;
+  min-height: 32px;
+  max-height: 32px;
 }
 
 .volume-button-dwn, .volume-button-up {
@@ -97,15 +107,9 @@ input:checked ~ .mutecheck:hover::before {
   font-size: 24px;
   text-align: center;
   color: var(--icon);
-  width: 32px;
-  padding: 4px;
-}
-
-.volume-button-dwn {
-  margin: 0 3px 0 6px;
-}
-.volume-button-up {
-  margin: 0 6px 0 3px;
+  width: 24px;
+  height: 25px;
+  flex: 0 0 24px;
 }
 
 .volume-button-up:hover, .volume-button-dwn:hover {
@@ -113,5 +117,7 @@ input:checked ~ .mutecheck:hover::before {
 }
 
 .volume-percentage {
-  margin-right: 10px;
+  width: 32px;
+  flex: 0 0 32px;
+  user-select: none;
 }