From 49883dc3ac43054ed1090107ed761d95074ef2eb Mon Sep 17 00:00:00 2001
From: R4SAS <r4sas@i2pmail.org>
Date: Mon, 8 Nov 2021 07:02:11 +0300
Subject: [PATCH] [webconsole] update stylesheet (closes #1699)

Signed-off-by: R4SAS <r4sas@i2pmail.org>
---
 contrib/webconsole/style-dark.css | 272 ------------------------------
 contrib/webconsole/style.css      | 107 +++++++++---
 daemon/HTTPServerResources.h      |  97 ++++++-----
 3 files changed, 133 insertions(+), 343 deletions(-)
 delete mode 100644 contrib/webconsole/style-dark.css

diff --git a/contrib/webconsole/style-dark.css b/contrib/webconsole/style-dark.css
deleted file mode 100644
index 6ec19023..00000000
--- a/contrib/webconsole/style-dark.css
+++ /dev/null
@@ -1,272 +0,0 @@
-:root {
-	--main-bg-color: #121212;
-	--main-text-color: #156A3D;
-	--main-link-color: #894C84;
-}
-
-body {
-	font: 100%/1.5em sans-serif;
-	margin: 0;
-	padding: 1.5em;
-	background: var(--main-bg-color);
-	color: var(--main-text-color);
-}
-
-a, .slide label {
-	text-decoration: none;
-	color: var(--main-link-color);
-}
-
-a:hover, .slide label:hover, button[type=submit]:hover {
-	color: #FAFAFA;
-	background: var(--main-link-color);
-}
-
-a.button {
-	appearance: button;
-	text-decoration: none;
-	padding: 0 5px;
-	border: 1px solid var(--main-link-color);
-}
-
-.header {
-	font-size: 2.5em;
-	text-align: center;
-	margin: 1em 0;
-	color: var(--main-link-color);
-}
-
-.wrapper {
-	margin: 0 auto;
-	padding: 1em;
-	max-width: 64em;
-}
-
-.menu {
-	display: block;
-	float: left;
-	overflow: hidden;
-	max-width: 12em;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.listitem {
-	display: block;
-	font-family: monospace;
-	font-size: 1.2em;
-	white-space: nowrap;
-}
-
-.tableitem {
-	font-family: monospace;
-	font-size: 1.2em;
-	white-space: nowrap;
-}
-
-.content {
-	float: left;
-	font-size: 1em;
-	margin-left: 4em;
-	max-width: 48em;
-	overflow: auto;
-}
-
-.tunnel.established {
-	color: #56B734;
-}
-
-.tunnel.expiring {
-	color: #D3AE3F;
-}
-
-.tunnel.failed {
-	color: #D33F3F;
-}
-
-.tunnel.building {
-	color: #434343;
-}
-
-caption {
-	font-size: 1.5em;
-	text-align: center;
-	color: var(--main-link-color);
-}
-
-table {
-	display: table;
-	border-collapse: collapse;
-	text-align: center;
-}
-
-table.extaddr {
-	text-align: left;
-}
-
-table.services {
-	width: 100%;
-}
-
-textarea {
-	background-color: var(--main-bg-color);
-	color: var(--main-text-color);
-	word-break: break-all;
-}
-
-.streamdest {
-	width: 120px;
-	max-width: 240px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.slide div.slidecontent, .slide [type="checkbox"] {
-	display: none;
-}
-
-.slide [type="checkbox"]:checked ~ div.slidecontent {
-	display: block;
-	margin-top: 0;
-	padding: 0;
-}
-
-.disabled {
-	color: #D33F3F;
-}
-
-.enabled {
-	color: #56B734;
-}
-
-button[type=submit] {
-	background-color: transparent;
-	color: var(--main-link-color);
-	text-decoration: none;
-	padding: 5px;
-	border: 1px solid var(--main-link-color);
-	font-size: 14px;
-}
-
-input, select, select option {
-	background-color: var(--main-bg-color);
-	color: var(--main-link-color);
-	padding: 5px;
-	border: 1px solid var(--main-link-color);
-	font-size: 14px;
-}
-
-input:focus, select:focus, select option:focus {
-	outline: none;
-}
-
-input[type=number]::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-}
-
-@media screen and (max-width: 1150px) { /* adaptive style */
-	.wrapper {
-		max-width: 58em;
-	}
-	
-	.menu {
-		max-width: 10em;
-	}
-
-	.content {
-		margin-left: 2em;
-		max-width: 42em;
-	}
-}
-
-@media screen and (max-width: 980px) {
-	body {
-		font: 100%/1.2em sans-serif;
-		padding: 1.2em 0 0 0;
-	}
-
-	.menu {
-		width: 100%;
-		max-width: unset;
-		display: block;
-		float: none;
-		position: unset;
-		font-size: 16px;
-		text-align: center;
-	}
-
-	.menu a, .commands a {
-		display: inline-block;
-		padding: 4px;
-	}
-
-	.content {
-		float: none;
-		margin-left: unset;
-		margin-top: 16px;
-		max-width: 100%;
-		width: 100%;
-		text-align: center;
-	}
-
-	a, .slide label {
-		/* margin-right: 10px; */
-		display: block;
-		/* font-size: 18px; */
-	}
-
-	.header {
-		margin: unset;
-		font-size: 1.5em;
-	}
-
-	small {
-		display: block
-	}
-
-	a.button {
-		appearance: button;
-		text-decoration: none;
-		margin-top: 10px;
-		padding: 6px;
-		border: 2px solid var(--main-link-color);
-		border-radius: 5px;
-		width: -webkit-fill-available;
-	}
-
-	input, select {
-		width: 35%;
-		text-align: center;
-		padding: 5px;
-		border: 2px solid var(--main-link-color);
-		border-radius: 5px;
-		font-size: 18px;
-	}
-
-	table.extaddr {
-		margin: auto;
-		text-align: unset;
-	}
-
-	textarea {
-		width: -webkit-fill-available;
-		height: auto;
-		padding: 5px;
-		border: 2px solid var(--main-link-color);
-		border-radius: 5px;
-		font-size: 12px;
-	}
-
-	button[type=submit] {
-		padding: 5px 15px;
-		background: transparent;
-		border: 2px solid var(--main-link-color);
-		cursor: pointer;
-		-webkit-border-radius: 5px;
-		border-radius: 5px;
-		position: relative;
-		height: 36px;
-		display: -webkit-inline-box;
-		margin-top: 10px;
-	}
-}
\ No newline at end of file
diff --git a/contrib/webconsole/style.css b/contrib/webconsole/style.css
index 047839a6..3a6ab059 100644
--- a/contrib/webconsole/style.css
+++ b/contrib/webconsole/style.css
@@ -1,35 +1,63 @@
+/*
+ * Copyright (c) 2013-2021, The PurpleI2P Project
+ *
+ * This file is part of Purple i2pd project and licensed under BSD3
+ *
+ * See full license text in LICENSE file at top of project tree
+ *
+ ******************************************************************
+ *
+ * This is styles heet for webconsole, with @media selectors for adaptive
+ * view on desktop and mobile devices, respecting preferred user's color
+ * scheme used in system/browser.
+ *
+ * Minified copy of that style sheet is bundled inside i2pd sources.
+*/
+
+:root {
+	--main-bg-color: #FAFAFA;
+	--main-text-color: #103456;
+	--main-link-color: #894C84;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--main-bg-color: #121212;
+		--main-text-color: #156A3D;
+		--main-link-color: #894C84;
+	}
+}
+
 body {
 	font: 100%/1.5em sans-serif;
 	margin: 0;
 	padding: 1.5em;
-	background: #FAFAFA;
-	color: #103456;
+	background: var(--main-bg-color);
+	color: var(--main-text-color);
 }
 
 a, .slide label {
 	text-decoration: none;
-	color: #894C84;
+	color: var(--main-link-color);
 }
 
-a:hover, .slide label:hover {
+a:hover, .slide label:hover, button[type=submit]:hover {
 	color: #FAFAFA;
-	background: #894C84;
+	background: var(--main-link-color);
 }
 
 a.button {
-	-webkit-appearance: button;
-	-moz-appearance: button;
 	appearance: button;
 	text-decoration: none;
 	padding: 0 5px;
-	border: 1px solid #894C84;
+	border: 1px solid var(--main-link-color);
 }
 
 .header {
 	font-size: 2.5em;
 	text-align: center;
 	margin: 1em 0;
-	color: #894C84;
+	color: var(--main-link-color);
 }
 
 .wrapper {
@@ -42,6 +70,7 @@ a.button {
 	display: block;
 	float: left;
 	overflow: hidden;
+	padding: 4px;
 	max-width: 12em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -63,8 +92,9 @@ a.button {
 .content {
 	float: left;
 	font-size: 1em;
-	margin-left: 4em;
-	max-width: 48em;
+	margin-left: 2em;
+	padding: 4px;
+	max-width: 50em;
 	overflow: auto;
 }
 
@@ -87,7 +117,7 @@ a.button {
 caption {
 	font-size: 1.5em;
 	text-align: center;
-	color: #894C84;
+	color: var(--main-link-color);
 }
 
 table {
@@ -105,6 +135,8 @@ table.services {
 }
 
 textarea {
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
 	word-break: break-all;
 }
 
@@ -133,9 +165,34 @@ textarea {
 	color: #56B734;
 }
 
+button[type=submit] {
+	background-color: transparent;
+	color: var(--main-link-color);
+	text-decoration: none;
+	padding: 5px;
+	border: 1px solid var(--main-link-color);
+	font-size: 14px;
+}
+
+input, select, select option {
+	background-color: var(--main-bg-color);
+	color: var(--main-link-color);
+	padding: 5px;
+	border: 1px solid var(--main-link-color);
+	font-size: 14px;
+}
+
+input:focus, select:focus, select option:focus {
+	outline: none;
+}
+
+input[type=number]::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+}
+
 @media screen and (max-width: 1150px) { /* adaptive style */
 	.wrapper {
-		max-width: 58em;
+		max-width: 60em;
 	}
 	
 	.menu {
@@ -144,13 +201,14 @@ textarea {
 
 	.content {
 		margin-left: 2em;
-		max-width: 42em;
+		max-width: 46em;
 	}
 }
 
 @media screen and (max-width: 980px) {
 	body {
-		padding: 1.5em 0 0 0;
+		font: 100%/1.2em sans-serif;
+		padding: 1.2em 0 0 0;
 	}
 
 	.menu {
@@ -178,9 +236,7 @@ textarea {
 	}
 
 	a, .slide label {
-		/* margin-right: 10px; */
 		display: block;
-		/* font-size: 18px; */
 	}
 
 	.header {
@@ -193,13 +249,12 @@ textarea {
 	}
 
 	a.button {
-		-webkit-appearance: button;
-		-moz-appearance: button;
 		appearance: button;
 		text-decoration: none;
 		margin-top: 10px;
 		padding: 6px;
-		border: 1px solid #894c84;
+		border: 2px solid var(--main-link-color);
+		border-radius: 5px;
 		width: -webkit-fill-available;
 	}
 
@@ -207,8 +262,7 @@ textarea {
 		width: 35%;
 		text-align: center;
 		padding: 5px;
-		border: 2px solid #ccc;
-		-webkit-border-radius: 5px;
+		border: 2px solid var(--main-link-color);
 		border-radius: 5px;
 		font-size: 18px;
 	}
@@ -221,17 +275,16 @@ textarea {
 	textarea {
 		width: -webkit-fill-available;
 		height: auto;
-		padding:5px;
-		border:2px solid #ccc;
-		-webkit-border-radius: 5px;
+		padding: 5px;
+		border: 2px solid var(--main-link-color);
 		border-radius: 5px;
 		font-size: 12px;
 	}
 
 	button[type=submit] {
 		padding: 5px 15px;
-		background: #ccc;
-		border: 0 none;
+		background: transparent;
+		border: 2px solid var(--main-link-color);
 		cursor: pointer;
 		-webkit-border-radius: 5px;
 		border-radius: 5px;
diff --git a/daemon/HTTPServerResources.h b/daemon/HTTPServerResources.h
index 876948e8..75cf2d6e 100644
--- a/daemon/HTTPServerResources.h
+++ b/daemon/HTTPServerResources.h
@@ -34,50 +34,59 @@ namespace http
 	// bundled style sheet
 	const std::string internalCSS =
 		"<style>\r\n"
-		"  body { font: 100%/1.5em sans-serif; margin: 0; padding: 1.5em; background: #FAFAFA; color: #103456; }\r\n"
-		"  a, .slide label { text-decoration: none; color: #894C84; }\r\n"
-		"  a:hover, .slide label:hover { color: #FAFAFA; background: #894C84; }\r\n"
-		"  a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none;\r\n"
-		"    padding: 0 5px; border: 1px solid #894C84; }\r\n"
-		"  .header { font-size: 2.5em; text-align: center; margin: 1em 0; color: #894C84; }\r\n"
-		"  .wrapper { margin: 0 auto; padding: 1em; max-width: 64em; }\r\n"
-		"  .menu { display: block; float: left; overflow: hidden; 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: 4em; max-width: 48em; overflow: auto; }\r\n"
-		"  .tunnel.established { color: #56B734; } .tunnel.expiring { color: #D3AE3F; }\r\n"
-		"  .tunnel.failed { color: #D33F3F; } .tunnel.building { color: #434343; }\r\n"
-		"  caption { font-size: 1.5em; text-align: center; color: #894C84; }\r\n"
-		"  table { display: table; border-collapse: collapse; text-align: center; }\r\n"
-		"  table.extaddr { text-align: left; } table.services { width: 100%; }\r\n"
-		"  textarea { 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; } .enabled { color: #56B734; }\r\n"
-		"  @media screen and (max-width: 1150px) {\r\n" /* adaptive style */
-		"    .wrapper { max-width: 58em; } .menu { max-width: 10em; }\r\n"
-		"    .content { margin-left: 2em; max-width: 42em; }\r\n"
-		"  }\r\n"
-		"  @media screen and (max-width: 980px) {\r\n"
-		"    body { padding: 1.5em 0 0 0; }\r\n"
-		"    .menu { width: 100%; max-width: unset; display: block; float: none; position: unset; font-size: 16px;\r\n"
-		"      text-align: center; }\r\n"
-		"    .menu a, .commands a { display: inline-block; padding: 4px; }\r\n"
-		"    .content { float: none; margin-left: unset; margin-top: 16px; max-width: 100%; width: 100%;\r\n"
-		"      text-align: center; }\r\n"
-		"    a, .slide label { /* margin-right: 10px; */ display: block; /* font-size: 18px; */ }\r\n"
-		"    .header { margin: unset; font-size: 1.5em; } small {display: block}\r\n"
-		"    a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none;\r\n"
-		"      margin-top: 10px; padding: 6px; border: 1px solid #894c84; width: -webkit-fill-available; }\r\n"
-		"    input, select { width: 35%; text-align: center; padding: 5px;\r\n"
-		"      border: 2px solid #ccc; -webkit-border-radius: 5px; border-radius: 5px; font-size: 18px; }\r\n"
-		"    table.extaddr { margin: auto; text-align: unset; }\r\n"
-		"    textarea { width: -webkit-fill-available; height: auto; padding:5px; border:2px solid #ccc;\r\n"
-		"      -webkit-border-radius: 5px; border-radius: 5px; font-size: 12px; }\r\n"
-		"    button[type=submit] { padding: 5px 15px; background: #ccc; border: 0 none; cursor: pointer;\r\n"
-		"      -webkit-border-radius: 5px; border-radius: 5px; position: relative; height: 36px; display: -webkit-inline-box; margin-top: 10px; }\r\n"
-		"  }\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: #121212; --main-text-color: #156A3D; --main-link-color: #894C84; } }\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"
+		"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"
+		"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"
+		"@media screen and (max-width: 1150px) { /* adaptive style */\r\n"
+		"	.wrapper { max-width: 60em; }\r\n"
+		"	.menu { max-width: 10em; }\r\n"
+		"	.content { margin-left: 2em; max-width: 46em; }\r\n"
+		"}\r\n"
+		"@media screen and (max-width: 980px) { body { font: 100%/1.2em sans-serif; padding: 1.2em 0 0 0; }\r\n"
+		"	.menu { width: 100%; max-width: unset; display: block; float: none; position: unset; font-size: 16px; text-align: center; }\r\n"
+		"	.menu a, .commands a { display: inline-block; padding: 4px; }\r\n"
+		"	.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"
+		"	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"
+		"	table.extaddr { margin: auto; text-align: unset; }\r\n"
+		"	textarea { width: -webkit-fill-available; height: auto; padding: 5px; border: 2px solid var(--main-link-color);\r\n"
+		"		border-radius: 5px; font-size: 12px; }\r\n"
+		"	button[type=submit] { padding: 5px 15px; background: transparent; border: 2px solid var(--main-link-color); cursor: pointer;\r\n"
+		"		border-radius: 5px; position: relative; height: 36px; display: -webkit-inline-box; margin-top: 10px; }\r\n"
+		"}\r\n"
 		"</style>\r\n";
 
 	// for external style sheet