diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/plugins/spotifyControls/hoverOnly.css | 16 | ||||
| -rw-r--r-- | src/plugins/spotifyControls/index.tsx | 13 |
2 files changed, 19 insertions, 10 deletions
diff --git a/src/plugins/spotifyControls/hoverOnly.css b/src/plugins/spotifyControls/hoverOnly.css new file mode 100644 index 0000000..8051cc4 --- /dev/null +++ b/src/plugins/spotifyControls/hoverOnly.css @@ -0,0 +1,16 @@ +.vc-spotify-button-row { + height: 0; + opacity: 0; + pointer-events: none; + transition: 0.2s; + transition-property: height; +} + +#vc-spotify-player:hover .vc-spotify-button-row { + opacity: 1; + height: 32px; + pointer-events: auto; + + /* only transition opacity on show to prevent clipping */ + transition-property: height, opacity; +} diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx index d35f7e5..f321516 100644 --- a/src/plugins/spotifyControls/index.tsx +++ b/src/plugins/spotifyControls/index.tsx @@ -17,22 +17,15 @@ */ import { Settings } from "@api/settings"; +import { disableStyle, enableStyle } from "@api/Styles"; import { Devs } from "@utils/constants"; import definePlugin, { OptionType } from "@utils/types"; +import hoverOnlyStyle from "./hoverOnly.css?managed"; import { Player } from "./PlayerComponent"; function toggleHoverControls(value: boolean) { - document.getElementById("vc-spotify-hover-controls")?.remove(); - if (value) { - const style = document.createElement("style"); - style.id = "vc-spotify-hover-controls"; - style.textContent = ` -.vc-spotify-button-row { height: 0; opacity: 0; will-change: height, opacity; transition: height .2s, opacity .05s; pointer-events: none; } -#vc-spotify-player:hover .vc-spotify-button-row { opacity: 1; height: 32px; pointer-events: auto;} -`; - document.head.appendChild(style); - } + (value ? enableStyle : disableStyle)(hoverOnlyStyle); } export default definePlugin({ |