From c4534ff6e0584e69fd628d200f011948cb7f3b20 Mon Sep 17 00:00:00 2001 From: xiaoxuan010 <2592053474@qq.com> Date: Thu, 14 Nov 2024 21:07:40 +0800 Subject: [PATCH 1/2] Redraw playback bar control icons --- .../PlayerCancelSegmentIconSponsorBlocker.svg | 69 +------------- .../icons/PlayerDeleteIconSponsorBlocker.svg | 89 +------------------ public/icons/PlayerInfoIconSponsorBlocker.svg | 7 +- .../icons/PlayerStartIconSponsorBlocker.svg | 72 +-------------- public/icons/PlayerStopIconSponsorBlocker.svg | 68 +------------- .../PlayerUploadFailedIconSponsorBlocker.svg | 72 +-------------- .../icons/PlayerUploadIconSponsorBlocker.svg | 68 +------------- public/icons/skipIcon.svg | 72 +-------------- 8 files changed, 8 insertions(+), 509 deletions(-) diff --git a/public/icons/PlayerCancelSegmentIconSponsorBlocker.svg b/public/icons/PlayerCancelSegmentIconSponsorBlocker.svg index 619b4b04..6e6792cb 100644 --- a/public/icons/PlayerCancelSegmentIconSponsorBlocker.svg +++ b/public/icons/PlayerCancelSegmentIconSponsorBlocker.svg @@ -1,68 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - + \ No newline at end of file diff --git a/public/icons/PlayerDeleteIconSponsorBlocker.svg b/public/icons/PlayerDeleteIconSponsorBlocker.svg index d5298853..22079329 100644 --- a/public/icons/PlayerDeleteIconSponsorBlocker.svg +++ b/public/icons/PlayerDeleteIconSponsorBlocker.svg @@ -1,88 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - - - - - - - - + \ No newline at end of file diff --git a/public/icons/PlayerInfoIconSponsorBlocker.svg b/public/icons/PlayerInfoIconSponsorBlocker.svg index 1001c2b7..224732ef 100644 --- a/public/icons/PlayerInfoIconSponsorBlocker.svg +++ b/public/icons/PlayerInfoIconSponsorBlocker.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/public/icons/PlayerStartIconSponsorBlocker.svg b/public/icons/PlayerStartIconSponsorBlocker.svg index d31c673a..b59778dc 100644 --- a/public/icons/PlayerStartIconSponsorBlocker.svg +++ b/public/icons/PlayerStartIconSponsorBlocker.svg @@ -1,71 +1 @@ - - - - - - image/svg+xml - - - - - - - - - LogoSponsorBlocker2 - - - - - - - + \ No newline at end of file diff --git a/public/icons/PlayerStopIconSponsorBlocker.svg b/public/icons/PlayerStopIconSponsorBlocker.svg index a56e263e..4d893149 100644 --- a/public/icons/PlayerStopIconSponsorBlocker.svg +++ b/public/icons/PlayerStopIconSponsorBlocker.svg @@ -1,67 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - + \ No newline at end of file diff --git a/public/icons/PlayerUploadFailedIconSponsorBlocker.svg b/public/icons/PlayerUploadFailedIconSponsorBlocker.svg index b40cca8d..ca8b3028 100644 --- a/public/icons/PlayerUploadFailedIconSponsorBlocker.svg +++ b/public/icons/PlayerUploadFailedIconSponsorBlocker.svg @@ -1,71 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - - + \ No newline at end of file diff --git a/public/icons/PlayerUploadIconSponsorBlocker.svg b/public/icons/PlayerUploadIconSponsorBlocker.svg index 07c5fc58..fe5c42b5 100644 --- a/public/icons/PlayerUploadIconSponsorBlocker.svg +++ b/public/icons/PlayerUploadIconSponsorBlocker.svg @@ -1,67 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - + \ No newline at end of file diff --git a/public/icons/skipIcon.svg b/public/icons/skipIcon.svg index 84bf7f5b..8f593089 100644 --- a/public/icons/skipIcon.svg +++ b/public/icons/skipIcon.svg @@ -1,71 +1 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - - + \ No newline at end of file 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 2/2] 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(