Merge pull request #270 from gopasspw/improve-dark-mode

Improve dark mode and options styling

Author: Pharb

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

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