PurpleI2P
/
i2pd
mirror of https://github.com/PurpleI2P/i2pd.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

[webconsole] update stylesheet (closes #1699) 

Signed-off-by: R4SAS <r4sas@i2pmail.org>
pull/1705/head
R4SAS 3 years ago
parent
d798faa1ca
commit
49883dc3ac
Signed by: r4sas
GPG Key ID: 66F6C87B98EBCFE2
3 changed files with 133 additions and 343 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 272
      contrib/webconsole/style-dark.css
  2. 107
      contrib/webconsole/style.css
  3. 93
      daemon/HTTPServerResources.h

272
contrib/webconsole/style-dark.css
Unescape View File

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

107
contrib/webconsole/style.css
Unescape View File

@ -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 { body {
font: 100%/1.5em sans-serif; font: 100%/1.5em sans-serif;
margin: 0; margin: 0;
padding: 1.5em; padding: 1.5em;
background: #FAFAFA; background: var(--main-bg-color);
color: #103456; color: var(--main-text-color);
} }
a, .slide label { a, .slide label {
text-decoration: none; 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; color: #FAFAFA;
background: #894C84; background: var(--main-link-color);
} }
a.button { a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button; appearance: button;
text-decoration: none; text-decoration: none;
padding: 0 5px; padding: 0 5px;
border: 1px solid #894C84; border: 1px solid var(--main-link-color);
} }
.header { .header {
font-size: 2.5em; font-size: 2.5em;
text-align: center; text-align: center;
margin: 1em 0; margin: 1em 0;
color: #894C84; color: var(--main-link-color);
} }
.wrapper { .wrapper {
@ -42,6 +70,7 @@ a.button {
display: block; display: block;
float: left; float: left;
overflow: hidden; overflow: hidden;
padding: 4px;
max-width: 12em; max-width: 12em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -63,8 +92,9 @@ a.button {
.content { .content {
float: left; float: left;
font-size: 1em; font-size: 1em;
margin-left: 4em; margin-left: 2em;
max-width: 48em; padding: 4px;
max-width: 50em;
overflow: auto; overflow: auto;
} }
@ -87,7 +117,7 @@ a.button {
caption { caption {
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
color: #894C84; color: var(--main-link-color);
} }
table { table {
@ -105,6 +135,8 @@ table.services {
} }
textarea { textarea {
background-color: var(--main-bg-color);
color: var(--main-text-color);
word-break: break-all; word-break: break-all;
} }
@ -133,9 +165,34 @@ textarea {
color: #56B734; 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 */ @media screen and (max-width: 1150px) { /* adaptive style */
.wrapper { .wrapper {
max-width: 58em; max-width: 60em;
} }
.menu { .menu {
@ -144,13 +201,14 @@ textarea {
.content { .content {
margin-left: 2em; margin-left: 2em;
max-width: 42em; max-width: 46em;
} }
} }
@media screen and (max-width: 980px) { @media screen and (max-width: 980px) {
body { body {
padding: 1.5em 0 0 0; font: 100%/1.2em sans-serif;
padding: 1.2em 0 0 0;
} }
.menu { .menu {
@ -178,9 +236,7 @@ textarea {
} }
a, .slide label { a, .slide label {
/* margin-right: 10px; */
display: block; display: block;
/* font-size: 18px; */
} }
.header { .header {
@ -193,13 +249,12 @@ textarea {
} }
a.button { a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button; appearance: button;
text-decoration: none; text-decoration: none;
margin-top: 10px; margin-top: 10px;
padding: 6px; padding: 6px;
border: 1px solid #894c84; border: 2px solid var(--main-link-color);
border-radius: 5px;
width: -webkit-fill-available; width: -webkit-fill-available;
} }
@ -207,8 +262,7 @@ textarea {
width: 35%; width: 35%;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
border: 2px solid #ccc; border: 2px solid var(--main-link-color);
-webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
font-size: 18px; font-size: 18px;
} }
@ -221,17 +275,16 @@ textarea {
textarea { textarea {
width: -webkit-fill-available; width: -webkit-fill-available;
height: auto; height: auto;
padding:5px; padding: 5px;
border:2px solid #ccc; border: 2px solid var(--main-link-color);
-webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
} }
button[type=submit] { button[type=submit] {
padding: 5px 15px; padding: 5px 15px;
background: #ccc; background: transparent;
border: 0 none; border: 2px solid var(--main-link-color);
cursor: pointer; cursor: pointer;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;

93
daemon/HTTPServerResources.h
Unescape View File

@ -34,50 +34,59 @@ namespace http
// bundled style sheet // bundled style sheet
const std::string internalCSS = const std::string internalCSS =
"<style>\r\n" "<style>\r\n"
" body { font: 100%/1.5em sans-serif; margin: 0; padding: 1.5em; background: #FAFAFA; color: #103456; }\r\n" ":root { --main-bg-color: #FAFAFA; --main-text-color: #103456; --main-link-color: #894C84; }\r\n"
" a, .slide label { text-decoration: none; color: #894C84; }\r\n" "@media (prefers-color-scheme: dark) { :root { --main-bg-color: #121212; --main-text-color: #156A3D; --main-link-color: #894C84; } }\r\n"
" a:hover, .slide label:hover { color: #FAFAFA; background: #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.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none;\r\n" "a, .slide label { text-decoration: none; color: var(--main-link-color)}\r\n"
" padding: 0 5px; border: 1px solid #894C84; }\r\n" "a:hover, .slide label:hover, button[type=submit]:hover { color: #FAFAFA; background: var(--main-link-color)}\r\n"
" .header { font-size: 2.5em; text-align: center; margin: 1em 0; color: #894C84; }\r\n" "a.button { appearance: button; text-decoration: none; padding: 0 5px; border: 1px solid var(--main-link-color)}\r\n"
" .wrapper { margin: 0 auto; padding: 1em; max-width: 64em; }\r\n" ".header { font-size: 2.5em; text-align: center; margin: 1em 0; color: var(--main-link-color)}\r\n"
" .menu { display: block; float: left; overflow: hidden; max-width: 12em; white-space: nowrap; text-overflow: ellipsis; }\r\n" ".wrapper { margin: 0 auto; padding: 1em; max-width: 64em}\r\n"
" .listitem { display: block; font-family: monospace; font-size: 1.2em; white-space: nowrap; }\r\n" ".menu { display: block; float: left; overflow: hidden; padding: 4px; max-width: 12em; white-space: nowrap; text-overflow: ellipsis}\r\n"
" .tableitem { font-family: monospace; font-size: 1.2em; white-space: nowrap; }\r\n" ".listitem { display: block; 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" ".tableitem { font-family: monospace; font-size: 1.2em; white-space: nowrap}\r\n"
" .tunnel.established { color: #56B734; } .tunnel.expiring { color: #D3AE3F; }\r\n" ".content { float: left; font-size: 1em; margin-left: 2em; padding: 4px; max-width: 50em; overflow: auto}\r\n"
" .tunnel.failed { color: #D33F3F; } .tunnel.building { color: #434343; }\r\n" ".tunnel.established { color: #56B734}\r\n"
" caption { font-size: 1.5em; text-align: center; color: #894C84; }\r\n" ".tunnel.expiring { color: #D3AE3F}\r\n"
" table { display: table; border-collapse: collapse; text-align: center; }\r\n" ".tunnel.failed { color: #D33F3F}\r\n"
" table.extaddr { text-align: left; } table.services { width: 100%; }\r\n" ".tunnel.building { color: #434343}\r\n"
" textarea { word-break: break-all; }\r\n" "caption { font-size: 1.5em; text-align: center; color: var(--main-link-color)}\r\n"
" .streamdest { width: 120px; max-width: 240px; overflow: hidden; text-overflow: ellipsis;}\r\n" "table { display: table; border-collapse: collapse; text-align: center}\r\n"
" .slide div.slidecontent, .slide [type=\"checkbox\"] { display: none; }\r\n" "table.extaddr { text-align: left}\r\n"
" .slide [type=\"checkbox\"]:checked ~ div.slidecontent { display: block; margin-top: 0; padding: 0; }\r\n" "table.services { width: 100%}\r\n"
" .disabled { color: #D33F3F; } .enabled { color: #56B734; }\r\n" "textarea { background-color: var(--main-bg-color); color: var(--main-text-color); word-break: break-all}\r\n"
" @media screen and (max-width: 1150px) {\r\n" /* adaptive style */ ".streamdest { width: 120px; max-width: 240px; overflow: hidden; text-overflow: ellipsis}\r\n"
" .wrapper { max-width: 58em; } .menu { max-width: 10em; }\r\n" ".slide div.slidecontent, .slide [type=\"checkbox\"] { display: none}\r\n"
" .content { margin-left: 2em; max-width: 42em; }\r\n" ".slide [type=\"checkbox\"]:checked ~ div.slidecontent { display: block; margin-top: 0; padding: 0}\r\n"
" }\r\n" ".disabled { color: #D33F3F}\r\n"
" @media screen and (max-width: 980px) {\r\n" ".enabled { color: #56B734}\r\n"
" body { padding: 1.5em 0 0 0; }\r\n" "button[type=submit] { background-color: transparent; color: var(--main-link-color); text-decoration: none;\r\n"
" .menu { width: 100%; max-width: unset; display: block; float: none; position: unset; font-size: 16px;\r\n" " padding: 5px; border: 1px solid var(--main-link-color); font-size: 14px}\r\n"
" text-align: center; }\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" " .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" " .content { float: none; margin-left: unset; margin-top: 16px; max-width: 100%; width: 100%; text-align: center; }\r\n"
" text-align: center; }\r\n" " a, .slide label { display: block; }\r\n"
" a, .slide label { /* margin-right: 10px; */ display: block; /* font-size: 18px; */ }\r\n" " .header { margin: unset; font-size: 1.5em; }\r\n"
" .header { margin: unset; font-size: 1.5em; } small {display: block}\r\n" " small { display: block }\r\n"
" a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none;\r\n" " a.button { appearance: button; text-decoration: none; margin-top: 10px; padding: 6px; border: 2px solid var(--main-link-color);\r\n"
" margin-top: 10px; padding: 6px; border: 1px solid #894c84; width: -webkit-fill-available; }\r\n" " border-radius: 5px; width: -webkit-fill-available; }\r\n"
" input, select { width: 35%; text-align: center; padding: 5px;\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"
" 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" " table.extaddr { margin: auto; text-align: unset; }\r\n"
" textarea { width: -webkit-fill-available; height: auto; padding:5px; border:2px solid #ccc;\r\n" " textarea { width: -webkit-fill-available; height: auto; padding: 5px; border: 2px solid var(--main-link-color);\r\n"
" -webkit-border-radius: 5px; border-radius: 5px; font-size: 12px; }\r\n" " border-radius: 5px; font-size: 12px; }\r\n"
" button[type=submit] { padding: 5px 15px; background: #ccc; border: 0 none; cursor: pointer;\r\n" " button[type=submit] { padding: 5px 15px; background: transparent; border: 2px solid var(--main-link-color); cursor: pointer;\r\n"
" -webkit-border-radius: 5px; border-radius: 5px; position: relative; height: 36px; display: -webkit-inline-box; margin-top: 10px; }\r\n" " border-radius: 5px; position: relative; height: 36px; display: -webkit-inline-box; margin-top: 10px; }\r\n"
" }\r\n" "}\r\n"
"</style>\r\n"; "</style>\r\n";
// for external style sheet // for external style sheet

Write Preview
Loading…
Cancel
Save