clean up spotify controls css
This commit is contained in:
parent
7eb12f0fb7
commit
8a305d2d11
16
src/plugins/spotifyControls/hoverOnly.css
Normal file
16
src/plugins/spotifyControls/hoverOnly.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -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({
|
||||
|
|
Loading…
Reference in a new issue