From 0d6e801595cb306927abb4a54d4dbc5e01de6755 Mon Sep 17 00:00:00 2001
From: R4SAS <r4sas@i2pmail.org>
Date: Sun, 9 Jan 2022 20:49:27 +0300
Subject: [PATCH] [webconsole] change dark style colors

Signed-off-by: R4SAS <r4sas@i2pmail.org>
---
 contrib/webconsole/style.css | 14 +++++----
 daemon/HTTPServerResources.h | 60 ++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/contrib/webconsole/style.css b/contrib/webconsole/style.css
index 3edfe470..e6ddd6ad 100644
--- a/contrib/webconsole/style.css
+++ b/contrib/webconsole/style.css
@@ -15,16 +15,18 @@
 */
 
 :root {
-	--main-bg-color: #FAFAFA;
+	--main-bg-color: #fafafa;
 	--main-text-color: #103456;
-	--main-link-color: #894C84;
+	--main-link-color: #894c84;
+	--main-link-hover-color: #fafafa;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--main-bg-color: #181818;
-		--main-text-color: #156A3D;
-		--main-link-color: #894C84;
+		--main-bg-color: #242424;
+		--main-text-color: #17ab5c;
+		--main-link-color: #bf64b7;
+		--main-link-hover-color: #000000;
 	}
 }
 
@@ -42,7 +44,7 @@ a, .slide label {
 }
 
 a:hover, .slide label:hover, button[type=submit]:hover {
-	color: #FAFAFA;
+	color: var(--main-link-hover-color);
 	background: var(--main-link-color);
 }
 
diff --git a/daemon/HTTPServerResources.h b/daemon/HTTPServerResources.h
index d821aa2a..4e4eac4f 100644
--- a/daemon/HTTPServerResources.h
+++ b/daemon/HTTPServerResources.h
@@ -34,38 +34,38 @@ namespace http
 	// bundled style sheet
 	const std::string internalCSS =
 		"<style>\r\n"
-		":root { --main-bg-color: #FAFAFA; --main-text-color: #103456; --main-link-color: #894C84; }\r\n"
-		"@media (prefers-color-scheme: dark) { :root { --main-bg-color: #181818; --main-text-color: #156A3D; --main-link-color: #894C84; } }\r\n"
+		":root { --main-bg-color: #fafafa; --main-text-color: #103456; --main-link-color: #894c84; --main-link-hover-color: #fafafa; }\r\n"
+		"@media (prefers-color-scheme: dark) { :root { --main-bg-color: #242424; --main-text-color: #17ab5c; --main-link-color: #bf64b7; --main-link-hover-color: #000000; } }\r\n"
 		"body { font: 100%/1.5em sans-serif; margin: 0; padding: 1.5em; background: var(--main-bg-color); color: var(--main-text-color); }\r\n"
-		"a, .slide label { text-decoration: none; color: var(--main-link-color)}\r\n"
-		"a:hover, .slide label:hover, button[type=submit]:hover { color: #FAFAFA; background: var(--main-link-color)}\r\n"
-		"a.button { appearance: button; text-decoration: none; padding: 0 5px; border: 1px solid var(--main-link-color)}\r\n"
-		".header { font-size: 2.5em; text-align: center; margin: 1em 0; color: var(--main-link-color)}\r\n"
-		".wrapper { margin: 0 auto; padding: 1em; max-width: 64em}\r\n"
-		".menu { display: block; float: left; overflow: hidden; padding: 4px; max-width: 12em; white-space: nowrap; text-overflow: ellipsis}\r\n"
-		".listitem { display: block; font-family: monospace; font-size: 1.2em; white-space: nowrap}\r\n"
-		".tableitem { font-family: monospace; font-size: 1.2em; white-space: nowrap}\r\n"
-		".content { float: left; font-size: 1em; margin-left: 2em; padding: 4px; max-width: 50em; overflow: auto}\r\n"
-		".tunnel.established { color: #56B734}\r\n"
-		".tunnel.expiring { color: #D3AE3F}\r\n"
-		".tunnel.failed { color: #D33F3F}\r\n"
-		".tunnel.building { color: #434343}\r\n"
-		"caption { font-size: 1.5em; text-align: center; color: var(--main-link-color)}\r\n"
-		"table { display: table; border-collapse: collapse; text-align: center}\r\n"
-		"table.extaddr { text-align: left}\r\n"
-		"table.services { width: 100%}\r\n"
-		"textarea { background-color: var(--main-bg-color); color: var(--main-text-color); word-break: break-all}\r\n"
-		".streamdest { width: 120px; max-width: 240px; overflow: hidden; text-overflow: ellipsis}\r\n"
-		".slide div.slidecontent, .slide [type=\"checkbox\"] { display: none}\r\n"
-		".slide [type=\"checkbox\"]:checked ~ div.slidecontent { display: block; margin-top: 0; padding: 0}\r\n"
-		".disabled { color: #D33F3F}\r\n"
-		".enabled { color: #56B734}\r\n"
+		"a, .slide label { text-decoration: none; color: var(--main-link-color); }\r\n"
+		"a:hover, .slide label:hover, button[type=submit]:hover { color: var(--main-link-hover-color); background: var(--main-link-color); }\r\n"
+		"a.button { appearance: button; text-decoration: none; padding: 0 5px; border: 1px solid var(--main-link-color); }\r\n"
+		".header { font-size: 2.5em; text-align: center; margin: 1em 0; color: var(--main-link-color); }\r\n"
+		".wrapper { margin: 0 auto; padding: 1em; max-width: 64em; }\r\n"
+		".menu { display: block; float: left; overflow: hidden; padding: 4px; max-width: 12em; white-space: nowrap; text-overflow: ellipsis ;}\r\n"
+		".listitem { display: block; font-family: monospace; font-size: 1.2em; white-space: nowrap; }\r\n"
+		".tableitem { font-family: monospace; font-size: 1.2em; white-space: nowrap; }\r\n"
+		".content { float: left; font-size: 1em; margin-left: 2em; padding: 4px; max-width: 50em; overflow: auto; }\r\n"
+		".tunnel.established { color: #56B734; }\r\n"
+		".tunnel.expiring { color: #D3AE3F; }\r\n"
+		".tunnel.failed { color: #D33F3F; }\r\n"
+		".tunnel.building { color: #434343; }\r\n"
+		"caption { font-size: 1.5em; text-align: center; color: var(--main-link-color); }\r\n"
+		"table { display: table; border-collapse: collapse; text-align: center; }\r\n"
+		"table.extaddr { text-align: left; }\r\n"
+		"table.services { width: 100%; }\r\n"
+		"textarea { background-color: var(--main-bg-color); color: var(--main-text-color); word-break: break-all; }\r\n"
+		".streamdest { width: 120px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }\r\n"
+		".slide div.slidecontent, .slide [type=\"checkbox\"] { display: none; }\r\n"
+		".slide [type=\"checkbox\"]:checked ~ div.slidecontent { display: block; margin-top: 0; padding: 0; }\r\n"
+		".disabled { color: #D33F3F; }\r\n"
+		".enabled { color: #56B734; }\r\n"
 		"button[type=submit] { background-color: transparent; color: var(--main-link-color); text-decoration: none;\r\n"
-		"	padding: 5px; border: 1px solid var(--main-link-color); font-size: 14px}\r\n"
+		"	padding: 5px; border: 1px solid var(--main-link-color); font-size: 14px; }\r\n"
 		"input, select, select option { background-color: var(--main-bg-color); color: var(--main-link-color); padding: 5px;\r\n"
-		"	border: 1px solid var(--main-link-color); font-size: 14px}\r\n"
-		"input:focus, select:focus, select option:focus { outline: none}\r\n"
-		"input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none}\r\n"
+		"	border: 1px solid var(--main-link-color); font-size: 14px; }\r\n"
+		"input:focus, select:focus, select option:focus { outline: none; }\r\n"
+		"input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }\r\n"
 		"@media screen and (max-width: 1150px) { /* adaptive style */\r\n"
 		"	.wrapper { max-width: 58em; }\r\n"
 		"	.content { max-width: 40em; }\r\n"
@@ -76,7 +76,7 @@ namespace http
 		"	.content { float: none; margin-left: unset; margin-top: 16px; max-width: 100%; width: 100%; text-align: center; }\r\n"
 		"	a, .slide label { display: block; }\r\n"
 		"	.header { margin: unset; font-size: 1.5em; }\r\n"
-		"	small { display: block }\r\n"
+		"	small { display: block; }\r\n"
 		"	a.button { appearance: button; text-decoration: none; margin-top: 10px; padding: 6px; border: 2px solid var(--main-link-color);\r\n"
 		"		border-radius: 5px; width: -webkit-fill-available; }\r\n"
 		"	input, select { width: 35%; text-align: center; padding: 5px; border: 2px solid var(--main-link-color); border-radius: 5px; font-size: 18px; }\r\n"