chore: minimal changes, css color vars

nobkd · Aug 7, 2024 · d54b82d · d54b82d
1 parent d201653
commit d54b82d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,10 +5,6 @@ @@
       outline: none;
     }
-    :root {
-      color-scheme: dark light;
-    }
     html,
     body,
     main {
@@ Expand Down @@