From f97bd43f68890e2096416a8dbf80e55e32238285 Mon Sep 17 00:00:00 2001
From: xiaoxuan010 <2592053474@qq.com>
Date: Fri, 15 Nov 2024 14:24:50 +0800
Subject: [PATCH] Improve play bar icons hover effects

---
 public/content.css          | 23 ++++++++++++++++-------
 src/render/PlayerButton.tsx |  4 ++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/public/content.css b/public/content.css
index f58ca305..6607605d 100644
--- a/public/content.css
+++ b/public/content.css
@@ -59,6 +59,11 @@
 .playerButtonImage {
 	height: 22px;
 	vertical-align: top;
+	opacity: 0.9;
+}
+
+.playerButtonImage:hover {
+	opacity: 1;
 }
 
 .playerButton {
@@ -89,17 +94,21 @@
 }
 
 .autoHiding:not(.sbhidden) {
-	transform: translateX(0%) scale(1);
-	/* opacity is from YouTube page */
-	transition: transform 0.2s, width 0.2s, opacity 0.1s cubic-bezier(0.4, 0, 1, 1) !important;
+	transform: translateX(0%);
+	transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1) !important;
 }
 
 .autoHiding.sbhidden {
-	transform: translateX(100%) scale(0);
-	/* opacity is from YouTube page */
-	transition: transform 0.2s, width 0.2s, opacity 0.1s cubic-bezier(0.4, 0, 1, 1) !important;
+	transform: translateX(100%);
+	transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1) !important;
+	/* width: 0px !important; */
+	opacity: 0;
+}
 
-	width: 0px !important;
+@media (max-width: 1260px){
+	.autoHiding.sbhidden{
+		width: 0px !important;
+	}
 }
 
 .autoHiding.sbhidden.autoHideLeft {
diff --git a/src/render/PlayerButton.tsx b/src/render/PlayerButton.tsx
index dc28b42e..df679246 100644
--- a/src/render/PlayerButton.tsx
+++ b/src/render/PlayerButton.tsx
@@ -66,7 +66,7 @@ export class PlayerButton {
             this.creatingButtons = true;
             this.container = document.createElement("div");
             this.container.id = containerId;
-            this.container.style.display = "contents";
+            this.container.style.display = "flex";
             this.root = createRoot(this.container);
             this.root.render(
                 <PlayerButtonGroupComponent
@@ -93,7 +93,7 @@ export class PlayerButton {
                 },
             };
             if (Config.config.autoHideInfoButton) {
-                AnimationUtils.setupAutoHideAnimation(this.playerButtons.info.button, controlsContainer);
+                AnimationUtils.setupAutoHideAnimation(this.playerButtons.info.button, this.container);
             }
             this.creatingButtons = false;
         }