From ac7b98de3e0910ef94f89819becdd976af4ecc0b Mon Sep 17 00:00:00 2001
From: Naman Sood <mail@nsood.in>
Date: Sat, 11 Mar 2023 10:31:01 -0500
Subject: [PATCH] css: improve color picker color scheme

Signed-off-by: Naman Sood <mail@nsood.in>
---
 css/style.css  | 14 ++++++++------
 css/style.scss | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/css/style.css b/css/style.css
index a65e833..061b699 100644
--- a/css/style.css
+++ b/css/style.css
@@ -256,8 +256,8 @@ body.blue-mode {
   left: 0;
   right: 0;
   margin: auto;
-  background: var(--bgColor);
-  color: var(--textColor);
+  color: var(--bgColor);
+  background: var(--textColor);
   padding: 2rem;
   border: 0;
   border-radius: 0 0 0.25rem 0.25rem;
@@ -284,13 +284,13 @@ body.blue-mode {
   padding: 0.5rem 1rem;
   border: 0;
   margin: 1rem 0.5rem 0;
-  background: var(--textColor);
-  color: var(--bgColor);
+  color: var(--textColor);
+  background: var(--bgColor);
   border-radius: 0.25rem;
   cursor: pointer;
 }
 .main dialog.change-color-dialog form input[type=button]:hover, .main dialog.change-color-dialog form input[type=submit]:hover {
-  background: var(--boldColor);
+  color: var(--boldColor);
 }
 .main dialog.change-color-dialog .radio-buttons {
   display: flex;
@@ -312,9 +312,11 @@ body.blue-mode {
   margin: 0 0.25rem 0 0.75rem;
   line-height: 2rem;
   text-align: center;
+  border: 0.5rem solid var(--textColor);
+  background-clip: padding-box;
 }
 .main dialog.change-color-dialog .radio-buttons > div input:checked + label div {
-  border: 3px solid;
+  border: 0;
 }
 .main dialog.change-color-dialog[open] + button.change-color-button {
   display: none;
diff --git a/css/style.scss b/css/style.scss
index dd03929..dd57a0d 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -285,8 +285,8 @@ body {
 		left: 0;
 		right: 0;
 		margin: auto;
-		background: var(--bgColor);
-		color: var(--textColor);
+		color: var(--bgColor);
+		background: var(--textColor);
 		padding: 2rem;
 		border: 0;
 		border-radius: 0 0 0.25rem 0.25rem;
@@ -316,13 +316,13 @@ body {
 				padding: 0.5rem 1rem;
 				border: 0;
 				margin: 1rem 0.5rem 0;
-				background: var(--textColor);
-				color: var(--bgColor);
+				color: var(--textColor);
+				background: var(--bgColor);
 				border-radius: 0.25rem;
 				cursor: pointer;
 
 				&:hover {
-					background: var(--boldColor);
+					color: var(--boldColor);
 				}
 			}
 		}
@@ -348,10 +348,12 @@ body {
 					margin: 0 0.25rem 0 0.75rem;
 					line-height: 2rem;
 					text-align: center;
+					border: 0.5rem solid var(--textColor);
+					background-clip: padding-box;
 				}
 
 				input:checked + label div {
-					border: 3px solid;
+					border: 0;
 				}
 			}
 		}