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 { Settings } from "@api/settings";
|
||||||
|
import { disableStyle, enableStyle } from "@api/Styles";
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
import definePlugin, { OptionType } from "@utils/types";
|
import definePlugin, { OptionType } from "@utils/types";
|
||||||
|
|
||||||
|
import hoverOnlyStyle from "./hoverOnly.css?managed";
|
||||||
import { Player } from "./PlayerComponent";
|
import { Player } from "./PlayerComponent";
|
||||||
|
|
||||||
function toggleHoverControls(value: boolean) {
|
function toggleHoverControls(value: boolean) {
|
||||||
document.getElementById("vc-spotify-hover-controls")?.remove();
|
(value ? enableStyle : disableStyle)(hoverOnlyStyle);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
|
|
Loading…
Reference in a new issue