From 3629e883a59c3ddb1c59c87d9def2699fe19da05 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Mon, 29 Nov 2021 07:00:44 +0100
Subject: [PATCH] add option to insert custom CSS

---
 CHANGELOG.md   |  1 +
 package.json   |  2 +-
 src/js/main.js | 21 +++++++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fee89e..ac3e323 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@ Added:
 - A spinning loader at startup while spotify is not ready (Can be disabled in settings)
 - The old search box in the top bar (Can be disabled in settings)
 - Ability to disable the progress transition to improve performance `Playbar > Progress Transition` (#118)
+- Option to insert custom CSS
 
 Fixed:
 - Checking for update every 10 Minutes not working
diff --git a/package.json b/package.json
index 9cedec8..927bd11 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "devDependencies": {
         "@material-icons/svg": "^1.0.22",
         "clean-webpack-plugin": "^4.0.0",
-        "sass": "^1.43.4",
+        "sass": "^1.43.5",
         "sass-loader": "^12.2.0",
         "webpack": "^5.58.2",
         "webpack-cli": "^4.9.0"
diff --git a/src/js/main.js b/src/js/main.js
index a5a014d..ca2d97d 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -329,6 +329,27 @@ Dribbblish.on("ready", () => {
         onChange: (val) => $("html").css("--song-transition-speed", `${val}s`)
     });
 
+    Dribbblish.config.registerArea({ name: "Advanced", order: 998 });
+
+    Dribbblish.config.register({
+        area: "Advanced",
+        type: "textarea",
+        key: "customCss",
+        name: "Custom CSS",
+        description: `
+            Put custom CSS here. It is recommended that you use some kind of online editor like [CodePen](https://codepen.io/pen/), or even an IDE like [VS Code](https://code.visualstudio.com/) and paste the CSS here.
+        `,
+        onChange: (val) => {
+            let styleElem = document.querySelector("#dribbblish-custom-styles");
+            if (!styleElem) {
+                styleElem = document.createElement("style");
+                styleElem.id = "dribbblish-custom-styles";
+                document.body.appendChild(styleElem);
+            }
+            styleElem.innerHTML = val;
+        }
+    });
+
     Dribbblish.config.registerArea({ name: "About", order: 999 });
 
     Dribbblish.config.register({