From d54b82d3cf359967cf52185d7bb6613c3a37c10e Mon Sep 17 00:00:00 2001
From: nobkd <44443899+nobkd@users.noreply.github.com>
Date: Thu, 8 Aug 2024 00:53:29 +0200
Subject: [PATCH] chore: minimal changes, css color vars

---
 src/filelist.nue         |  2 +-
 src/scripts/splitpane.js |  2 +-
 src/style/editor.css     |  4 ++--
 src/style/filelist.css   | 23 +++++++++++++----------
 src/style/global.css     |  4 ----
 src/style/splitpane.css  |  6 +++---
 src/style/vars.css       | 12 ++++++++++++
 7 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 src/style/vars.css

diff --git a/src/filelist.nue b/src/filelist.nue
index 32f7c20..ebc8615 100644
--- a/src/filelist.nue
+++ b/src/filelist.nue
@@ -4,7 +4,7 @@
   </div>
   <nav>
     <listing :tree :if="Object.keys(tree).length" />
-    <div class="center" :else>Currently WIP</div>
+    <div class="wip" :else>Currently WIP</div>
   </nav>
 
   <script>
diff --git a/src/scripts/splitpane.js b/src/scripts/splitpane.js
index 19c00da..f29e4fd 100644
--- a/src/scripts/splitpane.js
+++ b/src/scripts/splitpane.js
@@ -13,7 +13,7 @@ export function createHandlers(resizer) {
     let width = 0
 
     function mouseDownHandler($event) {
-        parent.insertAdjacentElement('afterbegin', el)
+        parent.appendChild(el)
 
         x = $event.clientX
         width = elToResize.getBoundingClientRect().width
diff --git a/src/style/editor.css b/src/style/editor.css
index c1a2a45..bf06a50 100644
--- a/src/style/editor.css
+++ b/src/style/editor.css
@@ -1,6 +1,6 @@
 .editor {
   font-family: monospace;
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: color-mix(in srgb, var(--bg), transparent);
   padding: 0.5rem 0.35rem;
 
   div {
@@ -28,7 +28,7 @@
     z-index: 1;
     color: transparent;
     background-color: transparent;
-    caret-color: gray;
+    caret-color: var(--caret);
   }
 
   [glow] {
diff --git a/src/style/filelist.css b/src/style/filelist.css
index c22332d..ffa8a5d 100644
--- a/src/style/filelist.css
+++ b/src/style/filelist.css
@@ -3,22 +3,25 @@ nav {
   height: 100%;
 }
 
+.buttons button,
+.wip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: color-mix(in srgb, currentColor, transparent var(--transparency));
+}
+
 .buttons button {
+  --transparency: 25%;
   width: 1em;
   height: 1em;
   font-size: 175%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.wip {
+  --transparency: 75%;
   width: 100%;
   height: 100%;
-  text-align: center;
-  color: color-mix(in srgb, currentColor, transparent);
+  user-select: none;
 }
-
diff --git a/src/style/global.css b/src/style/global.css
index 3038718..433d80b 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -5,10 +5,6 @@
   outline: none;
 }
 
-:root {
-  color-scheme: dark light;
-}
-
 html,
 body,
 main {
diff --git a/src/style/splitpane.css b/src/style/splitpane.css
index 10849a2..07eea79 100644
--- a/src/style/splitpane.css
+++ b/src/style/splitpane.css
@@ -3,8 +3,8 @@
   margin-inline: 2px;
   font-weight: bolder;
   font-size: larger;
-  background-color: color-mix(in srgb, dimgray, transparent);
-  color: gray;
+  background-color: color-mix(in srgb, var(--caret), transparent 75%);
+  color: var(--caret);
 
   display: flex;
   align-items: center;
@@ -23,5 +23,5 @@
   z-index: 10;
 
   cursor: ew-resize;
-  background-color: rgba(0, 0, 0, 0.125);
+  background-color: #0002;
 }
diff --git a/src/style/vars.css b/src/style/vars.css
new file mode 100644
index 0000000..8958e36
--- /dev/null
+++ b/src/style/vars.css
@@ -0,0 +1,12 @@
+:root {
+  color-scheme: dark light;
+  font-family: sans-serif;
+
+  --bg: #eee;
+  --caret: #000;
+
+  @media (prefers-color-scheme: dark) {
+    --bg: #000;
+    --caret: grey;
+  }
+}