diff options
-rw-r--r-- | public/content.css | 14 | ||||
-rw-r--r-- | public/options/options.css | 2 | ||||
-rw-r--r-- | public/permissions/styles.css | 2 | ||||
-rw-r--r-- | public/popup.css | 2 | ||||
-rw-r--r-- | public/shared.css | 2 | ||||
-rw-r--r-- | src/components/ChapterVoteComponent.tsx | 4 | ||||
-rw-r--r-- | src/components/NoticeComponent.tsx | 6 | ||||
-rw-r--r-- | src/js-components/skipButtonControlBar.ts | 20 | ||||
-rw-r--r-- | src/utils/animationUtils.ts | 10 |
9 files changed, 31 insertions, 31 deletions
diff --git a/public/content.css b/public/content.css index 2681afa9..39051417 100644 --- a/public/content.css +++ b/public/content.css @@ -7,7 +7,7 @@ --sb-dark-red-outline: rgb(130,0,0,0.9); } -.hidden { +.sbhidden { display: none; } @@ -151,7 +151,7 @@ div:hover > .sponsorBlockChapterBar { vertical-align: top; } -.playerButton.hidden:not(.autoHiding) { +.playerButton.sbhidden:not(.autoHiding) { display: none !important; } @@ -169,13 +169,13 @@ div:hover > .sponsorBlockChapterBar { overflow: visible !important; } -.autoHiding:not(.hidden) { +.autoHiding:not(.sbhidden) { transform: translateX(0%) scale(1); /* opacity is from YouTube page */ transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; } -.autoHiding.hidden { +.autoHiding.sbhidden { transform: translateX(100%) scale(0); /* opacity is from YouTube page */ transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; @@ -183,7 +183,7 @@ div:hover > .sponsorBlockChapterBar { width: 0px !important; } -.autoHiding.hidden.autoHideLeft { +.autoHiding.sbhidden.autoHideLeft { transform: translateX(-100%) scale(0); } @@ -272,7 +272,7 @@ div:hover > .sponsorBlockChapterBar { max-width: calc(100% - 50px); } -.sponsorSkipNotice .hidden { +.sponsorSkipNotice .sbhidden { display: none; } @@ -691,7 +691,7 @@ input::-webkit-inner-spin-button { color: white; } -.skipButtonControlBarContainer.hidden { +.skipButtonControlBarContainer.sbhidden { display: none !important; } diff --git a/public/options/options.css b/public/options/options.css index d9acda83..4ff811de 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -257,7 +257,7 @@ input[type='number'] { opacity: 0; } -.hidden { +.hidden, .sbhidden { display: none !important; } diff --git a/public/permissions/styles.css b/public/permissions/styles.css index 2cf49791..9c82618b 100644 --- a/public/permissions/styles.css +++ b/public/permissions/styles.css @@ -19,7 +19,7 @@ body { font-weight: bold; } -.hidden { +.hidden, .sbhidden { display: none !important; } diff --git a/public/popup.css b/public/popup.css index 76733fab..a30c3a3d 100644 --- a/public/popup.css +++ b/public/popup.css @@ -27,7 +27,7 @@ position: relative; } -#sponsorBlockPopupBody .hidden { +#sponsorBlockPopupBody .hidden, #sponsorBlockPopupBody .sbhidden { display: none !important; } diff --git a/public/shared.css b/public/shared.css index 7435653f..4dd8a035 100644 --- a/public/shared.css +++ b/public/shared.css @@ -36,7 +36,7 @@ max-width: calc(100% - 50px); } -.sponsorSkipNotice .hidden { +.sponsorSkipNotice .sbhidden { display: none; } diff --git a/src/components/ChapterVoteComponent.tsx b/src/components/ChapterVoteComponent.tsx index 9ee75727..d50878a6 100644 --- a/src/components/ChapterVoteComponent.tsx +++ b/src/components/ChapterVoteComponent.tsx @@ -44,7 +44,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote <> {/* Upvote Button */} <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"} - className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "hidden" : "")} + className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")} draggable="false" title={chrome.i18n.getMessage("upvoteButtonInfo")} onClick={(e) => this.vote(e, 1)}> @@ -55,7 +55,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote {/* Downvote Button */} <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"} - className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "hidden" : "")} + className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")} draggable="false" title={chrome.i18n.getMessage("reportButtonInfo")} onClick={(e) => { diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index 2f404ba1..0e3526d1 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -196,21 +196,21 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> { <span id={"skipNoticeTimerText" + this.idSuffix} key="skipNoticeTimerText" - className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} > + className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} > {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())} </span> ),( <img id={"skipNoticeTimerPaused" + this.idSuffix} key="skipNoticeTimerPaused" - className={this.state.countdownMode !== CountdownMode.Paused ? "hidden" : ""} + className={this.state.countdownMode !== CountdownMode.Paused ? "sbhidden" : ""} src={chrome.runtime.getURL("icons/pause.svg")} alt={chrome.i18n.getMessage("paused")} /> ),( <img id={"skipNoticeTimerStopped" + this.idSuffix} key="skipNoticeTimerStopped" - className={this.state.countdownMode !== CountdownMode.Stopped ? "hidden" : ""} + className={this.state.countdownMode !== CountdownMode.Stopped ? "sbhidden" : ""} src={chrome.runtime.getURL("icons/stop.svg")} alt={chrome.i18n.getMessage("manualPaused")} /> )]; diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts index 2a93c49c..a4cf31a5 100644 --- a/src/js-components/skipButtonControlBar.ts +++ b/src/js-components/skipButtonControlBar.ts @@ -41,7 +41,7 @@ export class SkipButtonControlBar { this.container = document.createElement("div"); this.container.classList.add("skipButtonControlBarContainer"); - this.container.classList.add("hidden"); + this.container.classList.add("sbhidden"); if (this.onMobileYouTube) this.container.classList.add("mobile"); this.skipIcon = document.createElement("img"); @@ -103,7 +103,7 @@ export class SkipButtonControlBar { this.refreshText(); this.container?.classList?.remove("textDisabled"); - this.textContainer?.classList?.remove("hidden"); + this.textContainer?.classList?.remove("sbhidden"); AnimationUtils.disableAutoHideAnimation(this.skipIcon); this.startTimer(); @@ -111,8 +111,8 @@ export class SkipButtonControlBar { refreshText(): void { if (this.segment) { - this.chapterText?.classList?.add("hidden"); - this.container.classList.remove("hidden"); + this.chapterText?.classList?.add("sbhidden"); + this.container.classList.remove("sbhidden"); this.textContainer.innerText = this.getTitle(); this.skipIcon.setAttribute("title", this.getTitle()); } @@ -134,10 +134,10 @@ export class SkipButtonControlBar { } disable(): void { - this.container.classList.add("hidden"); + this.container.classList.add("sbhidden"); - this.chapterText?.classList?.remove("hidden"); - this.getChapterPrefix()?.classList?.remove("hidden"); + this.chapterText?.classList?.remove("sbhidden"); + this.getChapterPrefix()?.classList?.remove("sbhidden"); this.enabled = false; } @@ -160,10 +160,10 @@ export class SkipButtonControlBar { } this.container.classList.add("textDisabled"); - this.textContainer?.classList?.add("hidden"); - this.chapterText?.classList?.remove("hidden"); + this.textContainer?.classList?.add("sbhidden"); + this.chapterText?.classList?.remove("sbhidden"); - this.getChapterPrefix()?.classList?.add("hidden"); + this.getChapterPrefix()?.classList?.add("sbhidden"); AnimationUtils.enableAutoHideAnimation(this.skipIcon); if (this.onMobileYouTube) { diff --git a/src/utils/animationUtils.ts b/src/utils/animationUtils.ts index d7302c48..08a59ce0 100644 --- a/src/utils/animationUtils.ts +++ b/src/utils/animationUtils.ts @@ -27,7 +27,7 @@ function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } { if (enabled) element.classList.add("autoHiding"); - element.classList.add("hidden"); + element.classList.add("sbhidden"); element.classList.add("animationDone"); if (!rightSlide) element.classList.add("autoHideLeft"); @@ -37,7 +37,7 @@ function setupCustomHideAnimation(element: Element, container: Element, enabled hide: () => { mouseEntered = false; if (element.classList.contains("autoHiding")) { - element.classList.add("hidden"); + element.classList.add("sbhidden"); } }, show: () => { @@ -46,7 +46,7 @@ function setupCustomHideAnimation(element: Element, container: Element, enabled // Wait for next event loop setTimeout(() => { - if (mouseEntered) element.classList.remove("hidden") + if (mouseEntered) element.classList.remove("sbhidden") }, 10); } }; @@ -61,12 +61,12 @@ function setupAutoHideAnimation(element: Element, container: Element, enabled = function enableAutoHideAnimation(element: Element): void { element.classList.add("autoHiding"); - element.classList.add("hidden"); + element.classList.add("sbhidden"); } function disableAutoHideAnimation(element: Element): void { element.classList.remove("autoHiding"); - element.classList.remove("hidden"); + element.classList.remove("sbhidden"); } export const AnimationUtils = { |