From 8a305d2d1112f800c09b01ed59131945f03a8e01 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Tue, 11 Apr 2023 00:32:11 +0200
Subject: [PATCH] clean up spotify controls css

---
 src/plugins/spotifyControls/hoverOnly.css | 16 ++++++++++++++++
 src/plugins/spotifyControls/index.tsx     | 13 +++----------
 2 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 src/plugins/spotifyControls/hoverOnly.css

diff --git a/src/plugins/spotifyControls/hoverOnly.css b/src/plugins/spotifyControls/hoverOnly.css
new file mode 100644
index 000000000..8051cc42c
--- /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 d35f7e594..f32151661 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({