majomi/intro-skipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Additional Visual Indicator When Hovering Over Button

Browse Source
This commit is contained in:
rlauuzo 2024-07-25 17:09:05 +02:00 committed by GitHub
parent e1cb17a126
commit d7ce2bdb6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js
View File

@ -77,7 +77,7 @@ const introSkipper = {
#skipIntro .emby-button { #skipIntro .emby-button {
color: #ffffff; color: #ffffff;
font-size: 110%; font-size: 110%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.7);
border-radius: var(--rounding); border-radius: var(--rounding);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1),
@ -91,9 +91,13 @@ const introSkipper = {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
#skipIntro .emby-button:hover, #skipIntro .emby-button:hover {
#skipIntro .emby-button:focus { background: rgb(var(--accent));
background: rgba(var(--accent), 1); box-shadow: 0 0 8px rgba(var(--accent), 0.6);
filter: brightness(1.2);
}
#skipIntro .emby-button:focus:not(:focus-visible) {
background: rgb(var(--accent));
box-shadow: 0 0 8px rgba(var(--accent), 0.6); box-shadow: 0 0 8px rgba(var(--accent), 0.6);
} }
#btnSkipSegmentText { #btnSkipSegmentText {
@ -189,7 +193,7 @@ const introSkipper = {
} }
this.skipButton.querySelector("#btnSkipSegmentText").textContent = this.skipButton.dataset[segmentType]; this.skipButton.querySelector("#btnSkipSegmentText").textContent = this.skipButton.dataset[segmentType];
if (!this.skipButton.classList.contains("hide")) { if (!this.skipButton.classList.contains("hide")) {
if (!this.osdVisible() && !embyButton.contains(document.activeElement)) embyButton.focus({ focusVisible: true }); if (!this.osdVisible() && !embyButton.contains(document.activeElement)) embyButton.focus();
return; return;
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -197,7 +201,7 @@ const introSkipper = {
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.skipButton.classList.add('show'); this.skipButton.classList.add('show');
this.overrideBlur(embyButton); this.overrideBlur(embyButton);
embyButton.focus({ focusVisible: true }); embyButton.focus();
}); });
}); });
}, },