From 91b7464386a3bf25cbf7d3d472603be00d454595 Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 13 May 2026 18:53:00 -0700
Subject: [PATCH 1/7] wip modern dark

---
 themes/modern-dark.css | 112 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 themes/modern-dark.css

diff --git a/themes/modern-dark.css b/themes/modern-dark.css
new file mode 100644
index 0000000..e80ce18
--- /dev/null
+++ b/themes/modern-dark.css
@@ -0,0 +1,112 @@
+/* LeechBlock Modern theme style */
+
+body {
+	background: #000;
+	color: #eee;
+}
+
+.ui-button {
+	background: #444;
+	color: #eee;
+	border: none;
+}
+
+.ui-button:focus {
+	background: #666cdd;
+	color: #eee;
+	border: none;
+}
+
+.ui-button:hover {
+	background: #333;
+	color: #eee;
+	border: none;
+}
+
+.ui-widget button {
+	background: #444;
+	color: #eee;
+	border: none;
+}
+
+.ui-widget button:hover:enabled {
+	background: #333;
+}
+
+.ui-widget button:active:enabled {
+	background: #222;
+}
+
+.ui-widget button:disabled {
+	background: #333;
+	color: #666;
+	border: none;
+}
+
+.ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
+	background: #222;
+	color: #eee;
+	border: none;
+}
+
+.ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
+	background: #333;
+	color: #666;
+	border: none;
+}
+
+.ui-widget hr {
+	height: 0px;
+	margin: 0px;
+	border-top: none;
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+}
+
+.ui-widget th, td {
+	border: none;
+}
+
+.ui-widget-header {
+	background: #444;
+	color: #eee;
+	border: none;
+}
+
+.ui-widget-content {
+	background: #222;
+	color: #eee;
+	border: none;
+}
+
+.ui-widget.ui-widget-content {
+	border: none;
+}
+
+.ui-tabs .ui-state-default {
+	background: #aaa;
+	border: none;
+}
+
+.ui-tabs .ui-state-default a {
+	color: #000;
+}
+
+.ui-tabs .ui-state-hover {
+	background: #999;
+	border: none;
+}
+
+.ui-tabs .ui-state-active {
+	background: #222;
+	border: none;
+}
+
+.ui-tabs .ui-state-active a {
+	color: #eee;
+}
+
+#paneAbout {
+	color: #eee;
+}

From f861ed9ba1d74fbaedd5038edcffa943e0af138b Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 13 May 2026 19:37:02 -0700
Subject: [PATCH 2/7] Revise styles and add animations in modern-dark theme

Updated colors and added animations for buttons and tabs.
---
 themes/modern-dark.css | 59 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/themes/modern-dark.css b/themes/modern-dark.css
index e80ce18..54b6735 100644
--- a/themes/modern-dark.css
+++ b/themes/modern-dark.css
@@ -1,36 +1,44 @@
 /* LeechBlock Modern theme style */
 
 body {
-	background: #000;
+	background: #111;
 	color: #eee;
 }
 
 .ui-button {
-	background: #444;
+	background: #253;
 	color: #eee;
 	border: none;
+	border-radius: 50px;
+	padding:8px 15px;
 }
 
 .ui-button:focus {
-	background: #666cdd;
+	background: #253;
 	color: #eee;
 	border: none;
 }
 
 .ui-button:hover {
-	background: #333;
+	background: #142;
 	color: #eee;
 	border: none;
+	animation-name: ui-button-hover;
+ 	animation-duration: 0.3s;
 }
 
-.ui-widget button {
+.ui-widget button, input[type="file"]::file-selector-button{
 	background: #444;
 	color: #eee;
 	border: none;
+	padding:8px 12px;
+	border-radius:50px;
 }
 
-.ui-widget button:hover:enabled {
+.ui-widget button:hover:enabled, input[type="file"]::file-selector-button:hover{
 	background: #333;
+	animation-name: widget-hover;
+ 	animation-duration: 0.3s;
 }
 
 .ui-widget button:active:enabled {
@@ -46,13 +54,16 @@ body {
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
 	background: #222;
 	color: #eee;
-	border: none;
+	border: 1px #aaa solid;
+	border-radius:15px;
+	padding: 2px 10px;
+	margin: 10px 0px;
 }
 
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
 	background: #333;
 	color: #666;
-	border: none;
+	border: 1px #aaa solid;
 }
 
 .ui-widget hr {
@@ -85,22 +96,26 @@ body {
 }
 
 .ui-tabs .ui-state-default {
-	background: #aaa;
+	background: #333;
 	border: none;
 }
 
 .ui-tabs .ui-state-default a {
-	color: #000;
+	color: #eee;
 }
 
 .ui-tabs .ui-state-hover {
-	background: #999;
+	background: #777;
 	border: none;
+	animation-name: tab-hover;
+  	animation-duration: 0.3s;
 }
 
 .ui-tabs .ui-state-active {
 	background: #222;
 	border: none;
+	animation-name: tab-select;
+  	animation-duration: 0.3s;
 }
 
 .ui-tabs .ui-state-active a {
@@ -110,3 +125,25 @@ body {
 #paneAbout {
 	color: #eee;
 }
+
+/* Animations */
+
+@keyframes ui-button-hover {
+  from {background-color: #253;}
+  to {background-color: #142;}
+}
+
+@keyframes widget-hover {
+  from {background-color: #444;}
+  to {background-color: #333;}
+}
+
+@keyframes tab-select {
+  from {background-color: #333;}
+  to {background-color: #222;}
+}
+
+@keyframes tab-hover {
+  from {background-color: #333;}
+  to {background-color: #777;}
+}

From 9e3eb3f2d21c5f7e5f77269f0727492a8f28426d Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 13 May 2026 19:48:48 -0700
Subject: [PATCH 3/7] Add 'Modern' option to theme selection

---
 options.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/options.html b/options.html
index f9e615d..4d6584b 100644
--- a/options.html
+++ b/options.html
@@ -538,6 +538,7 @@
 									<option value="light">Light</option>
 									<option value="dark">Dark</option>
 									<option value="spruce">Spruce</option>
+									<option value="modern-dark">Modern</option>
 								</select>
 							</p>
 							<p class="simplifiable">

From 0759a9ed369f7370b0cc282bd064fb373ba376bb Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 13 May 2026 20:00:07 -0700
Subject: [PATCH 4/7] Update border color and padding in modern-dark theme

---
 themes/modern-dark.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/themes/modern-dark.css b/themes/modern-dark.css
index 54b6735..83a2cd4 100644
--- a/themes/modern-dark.css
+++ b/themes/modern-dark.css
@@ -54,16 +54,16 @@ body {
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
 	background: #222;
 	color: #eee;
-	border: 1px #aaa solid;
+	border: 1px #555 solid;
 	border-radius:15px;
-	padding: 2px 10px;
+	padding: 8px 10px;
 	margin: 10px 0px;
 }
 
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
 	background: #333;
 	color: #666;
-	border: 1px #aaa solid;
+	border: 1px #555 solid;
 }
 
 .ui-widget hr {

From 21db59435b6e0676fa75da4470b049c676aa2e85 Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 13 May 2026 20:10:32 -0700
Subject: [PATCH 5/7] Add border radius and padding to tab styles

---
 themes/modern-dark.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/themes/modern-dark.css b/themes/modern-dark.css
index 83a2cd4..36787b1 100644
--- a/themes/modern-dark.css
+++ b/themes/modern-dark.css
@@ -98,6 +98,8 @@ body {
 .ui-tabs .ui-state-default {
 	background: #333;
 	border: none;
+	border-radius: 15px 15px 0px 0px;
+	padding-top: 3px !important;
 }
 
 .ui-tabs .ui-state-default a {

From 47edce798a08d7bb481652f61f03c2b1f725419f Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Thu, 14 May 2026 18:52:25 -0700
Subject: [PATCH 6/7] integration and light theme

---
 options.css            | 131 +++++++++++++++++++++++++++++------
 options.html           |   1 -
 popup.css              |  27 ++++++--
 style.css              |  46 ++++++++++---
 themes/dark.css        | 127 +++++++++++++++++++++++-----------
 themes/default.css     | 127 ++++++++++++++++++++++++----------
 themes/modern-dark.css | 151 -----------------------------------------
 7 files changed, 346 insertions(+), 264 deletions(-)
 delete mode 100644 themes/modern-dark.css

diff --git a/options.css b/options.css
index c66f359..e8056fa 100644
--- a/options.css
+++ b/options.css
@@ -12,45 +12,47 @@ html {
 
 }
 
-@media (prefers-color-scheme: dark) {
-
-	body {
-		background: #222;
-	}
-
-}
-
 body {
-	color: #000;
+	color: #fff;
 	font-size: 14px;
 }
 
 .ui-button {
-	background: #eee;
-	color: #333;
-	border: 1px solid #888;
+	background: #34d46a;
+	color: #000;
+	border: none;
+	border-radius: 50px;
+	padding:8px 15px;
+	animation-name: ui-button-unhover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-button:focus {
-	background: #eee;
-	border: 1px solid #888;
+	background: #34d46a;
+	border:none;
 }
 
 .ui-button:hover {
-	background: #ddd;
-	border: 1px solid #888;
+	background: #8cff6f;
+	border:none;
+	animation-name: ui-button-hover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-widget button {
-	padding: 2px 8px;
-	background: #eee;
+	background: #ccc;
 	color: #333;
-	border: 1px solid #888;
-	border-radius: 3px;
+	border: none;
+	padding:8px 12px;
+	border-radius:50px;
+	animation-name: widget-unhover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-widget button:hover:enabled {
 	background: #ddd;
+	animation-name: widget-hover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-widget button:active:enabled {
@@ -60,13 +62,16 @@ body {
 .ui-widget button:disabled {
 	background: #eee;
 	color: #666;
-	border: 1px solid #ccc;
+	border: none;
 }
 
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
 	background: #fff;
 	color: #000;
-	border: 1px solid #888;
+	border: 1px #aaa solid;
+	border-radius:15px;
+	padding: 8px 10px;
+	margin: 10px 0px;
 }
 
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
@@ -100,12 +105,59 @@ body {
 .ui-widget th, .ui-widget td {
 	text-align: center;
 	padding: 4px 12px;
+	border: none;
 }
 
 .ui-widget code {
 	font: normal 14px monospace;
 }
 
+.ui-widget-header {
+	background: #fff;
+	color: #333;
+	border: none;
+}
+
+.ui-widget-content {
+	background: #eee;
+	color: #000;
+	border: none;
+}
+
+.ui-widget.ui-widget-content {
+	border: none;
+}
+
+.ui-tabs .ui-state-default {
+	background: #ccc;
+	border: none;
+	border-radius: 15px 15px 0px 0px;
+	padding-top: 3px !important;
+}
+
+.ui-tabs .ui-state-default a {
+	color: #333;
+}
+
+.ui-tabs .ui-state-hover {
+	background: #aaa;
+	border: none;
+	animation-name: tab-hover;
+  	animation-duration: 0.2s;
+}
+
+.ui-tabs .ui-state-active {
+	background: #777;
+	border: none;
+	animation-name: tab-select;
+  	animation-duration: 0.2s;
+}
+
+.ui-tabs .ui-state-active a {
+	color: #eee;
+}
+
+
 .logo {
 	width: 408px;
 }
@@ -153,3 +205,38 @@ body {
 #results {
 	font: normal 12px monospace;
 }
+
+@keyframes ui-button-hover {
+  	from {background-color: #34d46a;}
+  	to {background-color: #8cff6f;}
+}
+
+@keyframes ui-button-unhover {
+  	from {background-color: #8cff6f;}
+  	to {background-color: #34d46a;}
+}
+
+@keyframes widget-hover {
+	from {background-color: #ccc;}
+	to {background-color: #ddd;}
+}
+
+@keyframes widget-unhover {
+	from {background-color: #ddd;}
+	to {background-color: #ccc;}
+}
+
+@keyframes tab-select {
+  	from {background-color: #ccc;}
+  	to {background-color: #777;}
+}
+
+@keyframes tab-hover {
+  	from {background-color: #ccc;}
+  	to {background-color: #aaa;}
+}
+
+@keyframes tab-unhover {
+  	from {background-color: #aaa;}
+  	to {background-color: #ccc;}
+}
\ No newline at end of file
diff --git a/options.html b/options.html
index 4d6584b..f9e615d 100644
--- a/options.html
+++ b/options.html
@@ -538,7 +538,6 @@
 									<option value="light">Light</option>
 									<option value="dark">Dark</option>
 									<option value="spruce">Spruce</option>
-									<option value="modern-dark">Modern</option>
 								</select>
 							</p>
 							<p class="simplifiable">
diff --git a/popup.css b/popup.css
index 12ae4ae..461d874 100644
--- a/popup.css
+++ b/popup.css
@@ -17,7 +17,7 @@
 }
 
 body {
-	color: #000;
+	color: #fff;
 	font-size: 14px;
 	text-align: center;
 }
@@ -28,17 +28,20 @@ body {
 }
 
 button {
-	display: inline;
-	width: 100%;
-	margin: 2px;
-	padding: 2px;
 	background: #eee;
-	border: 1px solid #888;
-	border-radius: 6px;
+	color: #333;
+	border: none;
+	padding:8px 12px;
+	margin: 2px 0px;
+	border-radius:50px;
+	animation-name: button-unhover;
+ 	animation-duration: 0.2s;
 }
 
 button:hover:enabled {
 	background: #ddd;
+	animation: button-hover;
+	animation-duration: 0.2s;
 }
 
 button:active:enabled {
@@ -48,3 +51,13 @@ button:active:enabled {
 .logo {
 	width: 204px;
 }
+
+@keyframes button-hover {
+  	from {background-color: #eee;}
+  	to {background-color: #ddd;}
+}
+
+@keyframes button-unhover {
+  	from {background-color: #ddd;}
+  	to {background-color: #eee;}
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 8c557d0..a7f4f2f 100644
--- a/style.css
+++ b/style.css
@@ -11,13 +11,14 @@
 @media (prefers-color-scheme: dark) {
 
 	body {
-		background: #222;
+		background: #000;
 	}
 
 }
 
 body {
-	color: #2e3436;
+	padding:30px 0px;
+	color: #000;
 	font: normal 16px "Open Sans", Arial, sans-serif;
 	text-align: center;
 }
@@ -44,28 +45,55 @@ blockquote {
 	font-weight: bold;
 }
 
-input, button {
-	color: #333;
-	font: normal 16px "Open Sans", Arial, sans-serif;
-	padding: 2px 8px;
-	border: 1px solid #888;
-	border-radius: 6px;
+input {
+	background: #fff;
+	color: #000;
+	border: 1px #aaa solid;
+	border-radius:15px;
+	padding: 8px 10px;
+	margin: 10px 0px;
 }
 
 button {
 	background: #eee;
+	color: #333;
+	border: none;
+	padding:6px 12px;
+	margin: 2px 0px;
+	border-radius:50px;
+	animation-name: button-unhover;
+ 	animation-duration: 0.2s;
 }
 
 button:hover:enabled {
 	background: #ddd;
+	animation: button-hover;
+	animation-duration: 0.2s;
 }
 
 button:active:enabled {
 	background: #ccc;
 }
 
+@keyframes button-hover {
+  	from {background-color: #eee;}
+  	to {background-color: #ddd;}
+}
+
+@keyframes button-unhover {
+  	from {background-color: #ddd;}
+  	to {background-color: #eee;}
+}
+
 .logo {
-	width: 408px;
+	width:408px;
+	animation: leechblock;
+	animation-duration: 1s;
+}
+
+@keyframes leechblock {
+  	from {width:100%;}
+  	to {width:408px;}
 }
 
 .keyword {
diff --git a/themes/dark.css b/themes/dark.css
index 8838e9e..b2088c9 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -1,58 +1,68 @@
-/* LeechBlock Dark theme style */
+/* LeechBlock Modern theme style */
 
 body {
-	background: #222;
-	color: #bbb;
+	background: #111;
+	color: #eee;
 }
 
 .ui-button {
-	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #253;
+	color: #eee;
+	border: none;
+	border-radius: 50px;
+	padding:8px 15px;
+	animation-name: ui-button-unhover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-button:focus {
-	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #253;
+	color: #eee;
 }
 
 .ui-button:hover {
-	background: #333;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #142;
+	color: #eee;
+	animation-name: ui-button-hover;
+ 	animation-duration: 0.2s;
 }
 
-.ui-widget button {
+.ui-widget button, input[type="file"]::file-selector-button{
 	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	color: #eee;
+	animation-name: widget-unhover;
+ 	animation-duration: 0.2s;
 }
 
-.ui-widget button:hover:enabled {
+.ui-widget button:hover:enabled, input[type="file"]::file-selector-button:hover{
 	background: #333;
+	animation-name: widget-hover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-widget button:active:enabled {
-	background: #222;
+	background: #444;
 }
 
 .ui-widget button:disabled {
 	background: #333;
 	color: #666;
-	border: 1px solid #444;
+	border: none;
 }
 
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
 	background: #222;
-	color: #bbb;
-	border: 1px solid #666;
+	color: #eee;
+	border: 1px #555 solid;
+	border-radius:15px;
+	padding: 8px 10px;
+	margin: 10px 0px;
 }
 
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
 	background: #333;
 	color: #666;
-	border: 1px solid #444;
+	border: 1px #555 solid;
 }
 
 .ui-widget hr {
@@ -61,52 +71,91 @@ body {
 	border-top: none;
 	border-left: none;
 	border-right: none;
-	border-bottom: 1px solid #666;
-}
-
-.ui-widget th, td {
-	border: 1px solid #666;
+	border-bottom: 1px solid #555;
 }
 
 .ui-widget-header {
 	background: #444;
-	color: #bbb;
-	border: 1px solid #888;
+	color: #eee;
+	border: none;
 }
 
 .ui-widget-content {
 	background: #222;
-	color: #bbb;
-	border: 1px solid #888;
+	color: #eee;
+	border: none;
 }
 
 .ui-widget.ui-widget-content {
-	border: 1px solid #888;
+	border: none;
 }
 
 .ui-tabs .ui-state-default {
-	background: #aaa;
-	border: 1px solid #666;
+	background: #333;
+	border: none;
+	border-radius: 15px 15px 0px 0px;
+	padding-top: 3px !important;
 }
 
 .ui-tabs .ui-state-default a {
-	color: #000;
+	color: #eee;
 }
 
 .ui-tabs .ui-state-hover {
-	background: #999;
-	border: 1px solid #666;
+	background: #777;
+	border: none;
+	animation-name: tab-hover;
+  	animation-duration: 0.2s;
 }
 
 .ui-tabs .ui-state-active {
 	background: #222;
-	border: 1px solid #666;
+	border: none;
+	animation-name: tab-select;
+  	animation-duration: 0.2s;
 }
 
 .ui-tabs .ui-state-active a {
-	color: #bbb;
+	color: #eee;
 }
 
 #paneAbout {
-	color: #bbb;
+	color: #eee;
+}
+
+/* Animations */
+
+@keyframes ui-button-hover {
+  	from {background-color: #253;}
+  	to {background-color: #142;}
 }
+
+@keyframes ui-button-unhover {
+  	from {background-color: #142;}
+  	to {background-color: #253;}
+}
+
+@keyframes widget-hover {
+	from {background-color: #444;}
+	to {background-color: #333;}
+}
+
+@keyframes widget-unhover {
+	from {background-color: #333;}
+	to {background-color: #444;}
+}
+
+@keyframes tab-select {
+  	from {background-color: #333;}
+  	to {background-color: #222;}
+}
+
+@keyframes tab-hover {
+  	from {background-color: #333;}
+  	to {background-color: #777;}
+}
+
+@keyframes tab-unhover {
+  	from {background-color: #777;}
+  	to {background-color: #333;}
+}
\ No newline at end of file
diff --git a/themes/default.css b/themes/default.css
index 87d064d..828dc1b 100644
--- a/themes/default.css
+++ b/themes/default.css
@@ -5,58 +5,73 @@
 /* The following should replicate the Dark theme style */
 
 body {
-	background: #222;
-	color: #bbb;
+	background: #111;
+	color: #eee;
 }
 
 .ui-button {
-	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #253;
+	color: #eee;
+	border: none;
+	border-radius: 50px;
+	padding:8px 15px;
+	animation-name: ui-button-unhover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-button:focus {
-	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #253;
+	color: #eee;
+	border: none;
 }
 
 .ui-button:hover {
-	background: #333;
-	color: #bbb;
-	border: 1px solid #666;
+	background: #142;
+	color: #eee;
+	border: none;
+	animation-name: ui-button-hover;
+ 	animation-duration: 0.2s;
 }
 
-.ui-widget button {
+.ui-widget button, input[type="file"]::file-selector-button{
 	background: #444;
-	color: #bbb;
-	border: 1px solid #666;
+	color: #eee;
+	border: none;
+	padding:8px 12px;
+	border-radius:50px;
+	animation-name: widget-unhover;
+ 	animation-duration: 0.2s;
 }
 
-.ui-widget button:hover:enabled {
+.ui-widget button:hover:enabled, input[type="file"]::file-selector-button:hover{
 	background: #333;
+	animation-name: widget-hover;
+ 	animation-duration: 0.2s;
 }
 
 .ui-widget button:active:enabled {
-	background: #222;
+	background: #444;
 }
 
 .ui-widget button:disabled {
 	background: #333;
 	color: #666;
-	border: 1px solid #444;
+	border: none;
 }
 
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
 	background: #222;
-	color: #bbb;
-	border: 1px solid #666;
+	color: #eee;
+	border: 1px #555 solid;
+	border-radius:15px;
+	padding: 8px 10px;
+	margin: 10px 0px;
 }
 
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
 	background: #333;
 	color: #666;
-	border: 1px solid #444;
+	border: 1px #555 solid;
 }
 
 .ui-widget hr {
@@ -65,54 +80,96 @@ body {
 	border-top: none;
 	border-left: none;
 	border-right: none;
-	border-bottom: 1px solid #666;
+	border-bottom: none;
 }
 
 .ui-widget th, td {
-	border: 1px solid #666;
+	border: none;
 }
 
 .ui-widget-header {
 	background: #444;
-	color: #bbb;
-	border: 1px solid #888;
+	color: #eee;
+	border: none;
 }
 
 .ui-widget-content {
 	background: #222;
-	color: #bbb;
-	border: 1px solid #888;
+	color: #eee;
+	border: none;
 }
 
 .ui-widget.ui-widget-content {
-	border: 1px solid #888;
+	border: none;
 }
 
 .ui-tabs .ui-state-default {
-	background: #aaa;
-	border: 1px solid #666;
+	background: #333;
+	border: none;
+	border-radius: 15px 15px 0px 0px;
+	padding-top: 3px !important;
 }
 
 .ui-tabs .ui-state-default a {
-	color: #000;
+	color: #eee;
 }
 
 .ui-tabs .ui-state-hover {
-	background: #999;
-	border: 1px solid #666;
+	background: #777;
+	border: none;
+	animation-name: tab-hover;
+  	animation-duration: 0.2s;
 }
 
 .ui-tabs .ui-state-active {
 	background: #222;
-	border: 1px solid #666;
+	border: none;
+	animation-name: tab-select;
+  	animation-duration: 0.2s;
 }
 
 .ui-tabs .ui-state-active a {
-	color: #bbb;
+	color: #eee;
 }
 
 #paneAbout {
-	color: #bbb;
+	color: #eee;
 }
 
+/* Animations */
+
+@keyframes ui-button-hover {
+  	from {background-color: #253;}
+  	to {background-color: #142;}
+}
+
+@keyframes ui-button-unhover {
+  	from {background-color: #142;}
+  	to {background-color: #253;}
+}
+
+@keyframes widget-hover {
+	from {background-color: #444;}
+	to {background-color: #333;}
+}
+
+@keyframes widget-unhover {
+	from {background-color: #333;}
+	to {background-color: #444;}
+}
+
+@keyframes tab-select {
+  	from {background-color: #333;}
+  	to {background-color: #222;}
+}
+
+@keyframes tab-hover {
+  	from {background-color: #333;}
+  	to {background-color: #777;}
+}
+
+@keyframes tab-unhover {
+  	from {background-color: #777;}
+  	to {background-color: #333;}
+}
 }
diff --git a/themes/modern-dark.css b/themes/modern-dark.css
deleted file mode 100644
index 36787b1..0000000
--- a/themes/modern-dark.css
+++ /dev/null
@@ -1,151 +0,0 @@
-/* LeechBlock Modern theme style */
-
-body {
-	background: #111;
-	color: #eee;
-}
-
-.ui-button {
-	background: #253;
-	color: #eee;
-	border: none;
-	border-radius: 50px;
-	padding:8px 15px;
-}
-
-.ui-button:focus {
-	background: #253;
-	color: #eee;
-	border: none;
-}
-
-.ui-button:hover {
-	background: #142;
-	color: #eee;
-	border: none;
-	animation-name: ui-button-hover;
- 	animation-duration: 0.3s;
-}
-
-.ui-widget button, input[type="file"]::file-selector-button{
-	background: #444;
-	color: #eee;
-	border: none;
-	padding:8px 12px;
-	border-radius:50px;
-}
-
-.ui-widget button:hover:enabled, input[type="file"]::file-selector-button:hover{
-	background: #333;
-	animation-name: widget-hover;
- 	animation-duration: 0.3s;
-}
-
-.ui-widget button:active:enabled {
-	background: #222;
-}
-
-.ui-widget button:disabled {
-	background: #333;
-	color: #666;
-	border: none;
-}
-
-.ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
-	background: #222;
-	color: #eee;
-	border: 1px #555 solid;
-	border-radius:15px;
-	padding: 8px 10px;
-	margin: 10px 0px;
-}
-
-.ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
-	background: #333;
-	color: #666;
-	border: 1px #555 solid;
-}
-
-.ui-widget hr {
-	height: 0px;
-	margin: 0px;
-	border-top: none;
-	border-left: none;
-	border-right: none;
-	border-bottom: none;
-}
-
-.ui-widget th, td {
-	border: none;
-}
-
-.ui-widget-header {
-	background: #444;
-	color: #eee;
-	border: none;
-}
-
-.ui-widget-content {
-	background: #222;
-	color: #eee;
-	border: none;
-}
-
-.ui-widget.ui-widget-content {
-	border: none;
-}
-
-.ui-tabs .ui-state-default {
-	background: #333;
-	border: none;
-	border-radius: 15px 15px 0px 0px;
-	padding-top: 3px !important;
-}
-
-.ui-tabs .ui-state-default a {
-	color: #eee;
-}
-
-.ui-tabs .ui-state-hover {
-	background: #777;
-	border: none;
-	animation-name: tab-hover;
-  	animation-duration: 0.3s;
-}
-
-.ui-tabs .ui-state-active {
-	background: #222;
-	border: none;
-	animation-name: tab-select;
-  	animation-duration: 0.3s;
-}
-
-.ui-tabs .ui-state-active a {
-	color: #eee;
-}
-
-#paneAbout {
-	color: #eee;
-}
-
-/* Animations */
-
-@keyframes ui-button-hover {
-  from {background-color: #253;}
-  to {background-color: #142;}
-}
-
-@keyframes widget-hover {
-  from {background-color: #444;}
-  to {background-color: #333;}
-}
-
-@keyframes tab-select {
-  from {background-color: #333;}
-  to {background-color: #222;}
-}
-
-@keyframes tab-hover {
-  from {background-color: #333;}
-  to {background-color: #777;}
-}

From 7135de16690bf9e11b18f4fe729dec1129940911 Mon Sep 17 00:00:00 2001
From: cuhassle <143834475+cuhassle@users.noreply.github.com>
Date: Wed, 20 May 2026 17:46:05 -0700
Subject: [PATCH 7/7] Make light theme look better

---
 options.css | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/options.css b/options.css
index e8056fa..fcec8af 100644
--- a/options.css
+++ b/options.css
@@ -66,7 +66,6 @@ body {
 }
 
 .ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
-	background: #fff;
 	color: #000;
 	border: 1px #aaa solid;
 	border-radius:15px;
@@ -74,6 +73,10 @@ body {
 	margin: 10px 0px;
 }
 
+.ui-widget input, .ui-widget select {
+	background-color:white;
+}
+
 .ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
 	background: #eee;
 	color: #666;
@@ -140,23 +143,19 @@ body {
 }
 
 .ui-tabs .ui-state-hover {
-	background: #aaa;
+	background: #ddd;
 	border: none;
 	animation-name: tab-hover;
   	animation-duration: 0.2s;
 }
 
 .ui-tabs .ui-state-active {
-	background: #777;
+	background: #eee;
 	border: none;
 	animation-name: tab-select;
   	animation-duration: 0.2s;
 }
 
-.ui-tabs .ui-state-active a {
-	color: #eee;
-}
-
 
 .logo {
 	width: 408px;
@@ -228,15 +227,15 @@ body {
 
 @keyframes tab-select {
   	from {background-color: #ccc;}
-  	to {background-color: #777;}
+  	to {background-color: #eee;}
 }
 
 @keyframes tab-hover {
   	from {background-color: #ccc;}
-  	to {background-color: #aaa;}
+  	to {background-color: #ddd;}
 }
 
 @keyframes tab-unhover {
-  	from {background-color: #aaa;}
+  	from {background-color: #ddd;}
   	to {background-color: #ccc;}
-}
\ No newline at end of file
+}