Improve play bar icons hover effects

hanydd · Nov 15, 2024 · f97bd43 · f97bd43
1 parent c4534ff
commit f97bd43
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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;
         }