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(