From 68a3e4b1cdcd3a8973a5e3399c93002428299443 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 23 Jul 2024 19:00:28 +0200
Subject: [PATCH] improve UI

---
 dist/index.css        | 29 ++++++++++++++++++-----------
 src/View/chatPage.css |  6 ++++++
 src/colors.css        | 26 ++++++++++++++------------
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index b7563216..3992c8a8 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -121,19 +121,21 @@ main {
 [color]:not([color=standard])[selected].fill-color {
   color: var(--primary);
 }
-[color]:not([color=standard]).background {
-  --luma: var(--background-luma);
-  --sat: 80%;
-  background: hsl(var(--hue), var(--sat), var(--luma));
-}
-@media (prefers-color-scheme: dark) {
+@media (min-width: 1024px) {
   [color]:not([color=standard]).background {
-    --luma: var(--background-luma-dark);
-    --sat: 40%;
+    --luma: var(--background-luma);
+    --sat: 80%;
+    background: hsl(var(--hue), var(--sat), var(--luma));
+  }
+  @media (prefers-color-scheme: dark) {
+    [color]:not([color=standard]).background {
+      --luma: var(--background-luma-dark);
+      --sat: 40%;
+    }
+  }
+  [color=standard].background {
+    background: var(--surface);
   }
-}
-[color=standard].background {
-  background: var(--surface);
 }
 [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
@@ -361,6 +363,11 @@ body[showing-chat] #chat-page-wrapper {
   overflow-x: auto;
   padding: 0px;
 }
+@media (max-width: 1024px) {
+  #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input {
+    border-left: 1px solid var(--surface-border);
+  }
+}
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index 579a3b16..be5cdc43 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -189,6 +189,12 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
 }
 
+@media (max-width: 1024px) {
+  #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input {
+    border-left: 1px solid var(--surface-border);
+  }
+}
+
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
diff --git a/src/colors.css b/src/colors.css
index c0ca2f0e..21c6d12c 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -59,21 +59,23 @@
 }
 
 /* background */
-[color]:not([color="standard"]).background {
-  --luma: var(--background-luma);
-  --sat: 80%;
-  background: hsl(var(--hue), var(--sat), var(--luma));
-}
-
-@media (prefers-color-scheme: dark) {
+@media (min-width: 1024px) {
   [color]:not([color="standard"]).background {
-    --luma: var(--background-luma-dark);
-    --sat: 40%;
+    --luma: var(--background-luma);
+    --sat: 80%;
+    background: hsl(var(--hue), var(--sat), var(--luma));
   }
-}
 
-[color="standard"].background {
-  background: var(--surface);
+  @media (prefers-color-scheme: dark) {
+    [color]:not([color="standard"]).background {
+      --luma: var(--background-luma-dark);
+      --sat: 40%;
+    }
+  }
+
+  [color="standard"].background {
+    background: var(--surface);
+  }
 }
 
 /* subtle */