From 60f80a7362d1b35abaff53c67a9a49a6ae8a8272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Harb=C3=B6ck?= <patrick.harboeck@tngtech.com>
Date: Sun, 17 Nov 2024 19:54:40 +0100
Subject: [PATCH] Improve dark mode and options styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick Harböck <patrick.harboeck@tngtech.com>
---
 web-extension/options.css | 41 +++++++++++++++++++++++++++++++++++++++
 web-extension/styles.css  |  7 ++++---
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/web-extension/options.css b/web-extension/options.css
index 485d450..8957e9a 100644
--- a/web-extension/options.css
+++ b/web-extension/options.css
@@ -1,7 +1,44 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: #fff;
+        --text-color: #000;
+        --link-color: #004650;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #23222b;
+        --text-color: #ddd;
+        --link-color: #bde;
+    }
+}
+
+body {
+    min-width: 600px;
+}
+
+body,
+input {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+a {
+    color: var(--link-color);
+}
+
 .container > label {
     display: block;
 }
 
+.container > * {
+    margin: 12px 0;
+}
+
+li {
+    line-height: 2;
+}
+
 #savingindicator {
     display: inline-block;
     width: 20px;
@@ -18,3 +55,7 @@
     opacity: 1;
     transition: none;
 }
+
+#clear {
+    height: 32px;
+}
diff --git a/web-extension/styles.css b/web-extension/styles.css
index b745f2d..b2da0bd 100644
--- a/web-extension/styles.css
+++ b/web-extension/styles.css
@@ -4,6 +4,7 @@
         --row-background-color: #fff;
         --text-color: #000;
         --hover-color: #bde;
+        --basic-auth-header-color: #bde;
     }
 }
 @media (prefers-color-scheme: dark) {
@@ -12,6 +13,7 @@
         --row-background-color: #000;
         --text-color: #ddd;
         --hover-color: #bde3;
+        --basic-auth-header-color: #004650;
     }
 }
 
@@ -70,7 +72,7 @@ input {
     line-height: 1.2;
     font-size: 12px;
     min-height: 32px;
-    color: #ddd;
+    color: var(--text-color);
 }
 
 .detail-clickable-value:hover {
@@ -218,7 +220,6 @@ input {
 
 .create > form > div {
     padding: 5px;
-    width: 100%;
 }
 
 #create_name {
@@ -289,7 +290,7 @@ input {
 
 #auth_login {
     padding: 10px;
-    background-color: #6bd6e4;
+    background-color: var(--basic-auth-header-color);
     font-size: 14px;
     line-height: 1.2;
 }