From 2e6a7f44c2e9a2519cc991b13ef823d433582901 Mon Sep 17 00:00:00 2001
From: Bitslayn <96226175+Bitslayn@users.noreply.github.com>
Date: Sat, 6 Jul 2024 01:00:27 -0400
Subject: [PATCH] QuickCSS changes (#632)

---
 cspell.json                                   |   3 +
 .../coremods/settings/pages/QuickCSS.css      | 179 ++++++++++++++++--
 2 files changed, 171 insertions(+), 11 deletions(-)

diff --git a/cspell.json b/cspell.json
index 38d15fe17..8b60e9072 100644
--- a/cspell.json
+++ b/cspell.json
@@ -9,6 +9,7 @@
     "automod",
     "autosize",
     "blurple",
+    "channeltextarea",
     "Chunkdiscord",
     "codemirror",
     "cooldown",
@@ -38,8 +39,10 @@
     "marshift",
     "metafile",
     "Millis",
+    "nonmatching",
     "notif",
     "notrack",
+    "olavwolfiken",
     "outfile",
     "popout",
     "Promisable",
diff --git a/src/renderer/coremods/settings/pages/QuickCSS.css b/src/renderer/coremods/settings/pages/QuickCSS.css
index 3c10b8df6..24d5baf1a 100644
--- a/src/renderer/coremods/settings/pages/QuickCSS.css
+++ b/src/renderer/coremods/settings/pages/QuickCSS.css
@@ -1,28 +1,185 @@
+/* Wrapper */
+#rp-quickcss-tab,
+#replugged-quickcss-wrapper {
+  height: 100%;
+}
 #replugged-quickcss-wrapper .cm-editor {
-  border: 1px solid transparent;
+  max-height: calc(100% - 20px);
+  background: var(--bg-overlay-2, var(--background-secondary));
+  border: 1px solid var(--background-secondary-alt);
   border-radius: 4px;
-  border: 1px solid var(--background-tertiary);
   outline: none !important;
 }
+#replugged-quickcss-wrapper .cm-content {
+  padding: 0px;
+}
+#replugged-quickcss-wrapper .cm-content,
+#replugged-quickcss-wrapper .cm-gutter {
+  min-height: 300px;
+}
 
+/* Scrollbar */
+#replugged-quickcss-wrapper .cm-scroller {
+  overflow: auto;
+}
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-thumb,
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-track {
+  border-radius: 8px;
+}
+#replugged-quickcss-wrapper:not([data-theme="light"]) .cm-scroller::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(
+      rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4)),
+      rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4))
+    ),
+    var(--custom-theme-background);
+}
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-thumb {
+  background-image: rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6)),
+    rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3));
+  background-color: var(--scrollbar-auto-thumb);
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  background-size: 100vh;
+}
+#replugged-quickcss-wrapper:not([data-theme="light"]) .cm-scroller::-webkit-scrollbar-track {
+  background-image: linear-gradient(
+      rgb(var(--bg-overlay-color) / 0.6),
+      rgb(var(--bg-overlay-color) / 0.6)
+    ),
+    var(--custom-theme-background);
+}
+#replugged-quickcss-wrapper:is([data-theme="dark"]) .cm-scroller::-webkit-scrollbar-track {
+  background: var(--background-modifier-hover);
+  background-clip: padding-box;
+}
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-track {
+  background-image: linear-gradient(
+      rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-1)),
+      rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-1))
+    ),
+    var(--custom-theme-background);
+  background: var(--scrollbar-auto-track);
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  background-size: 200vh;
+}
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* Fold "..." */
+#replugged-quickcss-wrapper .cm-foldPlaceholder {
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+
+/* Active line */
+#replugged-quickcss-wrapper .cm-activeLine,
+#replugged-quickcss-wrapper .cm-activeLineGutter {
+  background-color: var(--background-modifier-hover);
+}
+
+/* Auto-complete */
+#replugged-quickcss-wrapper .cm-tooltip [role="listbox"]::-webkit-scrollbar {
+  width: 8px;
+}
+#replugged-quickcss-wrapper .cm-tooltip [role="listbox"]::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thin-thumb);
+  border-radius: 8px;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+#replugged-quickcss-wrapper .cm-tooltip [role="listbox"] {
+  background-color: var(--background-floating);
+}
+
+/* Line gutter */
 #replugged-quickcss-wrapper .cm-gutters {
+  background: var(--bg-overlay-3, var(--channeltextarea-background));
+  border-right: 1px solid var(--background-secondary-alt);
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
-
+#replugged-quickcss-wrapper .cm-foldGutter:after {
+  content: "|";
+  width: 10px;
+  font-size: 0rem;
+}
 #replugged-quickcss-wrapper .cm-gutterElement {
   margin: 0px;
 }
-
-#replugged-quickcss-wrapper .cm-content {
-  padding: 0px;
+#replugged-quickcss-wrapper .cm-gutterElement span[title="Fold line"],
+#replugged-quickcss-wrapper .cm-gutterElement span[title="Unfold line"] {
+  font-size: 0;
+  position: absolute;
+  width: 100%;
+  height: 18.1875px;
+  transform: translateX(calc(-100% + 10px));
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+#replugged-quickcss-wrapper .cm-gutterElement span[title="Fold line"]:before {
+  content: "▼";
+  font-size: 0.5rem;
+  margin-right: 2px;
+}
+#replugged-quickcss-wrapper .cm-gutterElement span[title="Unfold line"]:before {
+  content: "▶";
+  font-size: 0.5rem;
+  margin-right: 0.5px;
 }
 
-#replugged-quickcss-wrapper .cm-content,
-#replugged-quickcss-wrapper .cm-gutter {
-  min-height: 300px;
+/* Find "ctrl+f" */
+#replugged-quickcss-wrapper .cm-panels [name="close"] {
+  color: var(--interactive-normal);
+}
+#replugged-quickcss-wrapper .cm-panels {
+  background: var(--bg-overlay-2, var(--background-secondary));
+  border-top: 1px solid var(--background-secondary-alt);
+}
+#replugged-quickcss-wrapper .cm-textfield,
+#replugged-quickcss-wrapper .cm-button {
+  background-color: var(--background-tertiary);
+  background-image: unset;
+  border-radius: 4px;
+}
+#replugged-quickcss-wrapper label {
+  vertical-align: middle;
+}
+#replugged-quickcss-wrapper label input {
+  margin: 1px 0.2em 1px;
+  vertical-align: text-bottom;
 }
 
-#replugged-quickcss-wrapper .cm-scroller {
-  overflow: auto;
+/* Text highlight @olavwolfiken */
+#replugged-quickcss-wrapper .cm-content ::selection,
+#replugged-quickcss-wrapper .cm-focused .cm-foldPlaceholder,
+#replugged-quickcss-wrapper .cm-selectionLayer .cm-selectionBackground,
+#replugged-quickcss-wrapper .cm-selectionBackground {
+  background-color: hsl(var(--blue-400-hsl) / 0.3);
+}
+#replugged-quickcss-wrapper .cm-selectionMatch,
+#replugged-quickcss-wrapper .cm-focused .cm-matchingBracket {
+  background-color: hsl(var(--green-400-hsl) / 0.3);
+}
+#replugged-quickcss-wrapper .cm-focused .cm-nonmatchingBracket {
+  background-color: hsl(var(--red-400-hsl) / 0.3);
+}
+#replugged-quickcss-wrapper .cm-searchMatch {
+  background-color: hsl(var(--yellow-400-hsl) / 0.15);
+}
+#replugged-quickcss-wrapper .cm-searchMatch .cm-selectionMatch {
+  background-color: hsl(var(--yellow-400-hsl) / 0.3);
+}
+#replugged-quickcss-wrapper .cm-searchMatch.cm-searchMatch-selected {
+  background-color: hsl(var(--yellow-400-hsl) / 0.6);
+}
+#replugged-quickcss-wrapper .cm-trailingSpace,
+#replugged-quickcss-wrapper .cm-specialChar {
+  color: var(--red-400);
 }