improve UI

dist/index.css

@@ -121,6 +121,7 @@ main {
 [color]:not([color=standard])[selected].fill-color {
   color: var(--primary);
 }
+@media (min-width: 1024px) {
   [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 80%;
@@ -135,6 +136,7 @@ main {
   [color=standard].background {
     background: var(--surface);
   }
+}
 [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 30%, var(--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);
 }

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);
 }

src/colors.css

@@ -59,6 +59,7 @@
 }
 
 /* background */
+@media (min-width: 1024px) {
   [color]:not([color="standard"]).background {
     --luma: var(--background-luma);
     --sat: 80%;
@@ -75,6 +76,7 @@
   [color="standard"].background {
     background: var(--surface);
   }
+}
 
 /* subtle */
 [color]:not([color="standard"]).subtle-background {