mirror of https://github.com/PurpleI2P/i2pd.git
R4SAS
2 years ago
6 changed files with 311 additions and 309 deletions
@ -1,293 +1,293 @@
@@ -1,293 +1,293 @@
|
||||
/* |
||||
* Copyright (c) 2021-2022, 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 style sheet 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; |
||||
--main-link-hover-color: #fafafa; |
||||
} |
||||
|
||||
@media (prefers-color-scheme: dark) { |
||||
:root { |
||||
--main-bg-color: #242424; |
||||
--main-text-color: #17ab5c; |
||||
--main-link-color: #bf64b7; |
||||
--main-link-hover-color: #000000; |
||||
} |
||||
} |
||||
|
||||
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: var(--main-link-hover-color); |
||||
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; |
||||
padding: 4px; |
||||
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: 2em; |
||||
padding: 4px; |
||||
max-width: 50em; |
||||
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; |
||||
} |
||||
|
||||
.content { |
||||
max-width: 40em; |
||||
} |
||||
} |
||||
|
||||
@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 { |
||||
display: block; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
/* |
||||
* Copyright (c) 2021-2023, 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 style sheet 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; |
||||
--main-link-hover-color: #fafafa; |
||||
} |
||||
|
||||
@media (prefers-color-scheme: dark) { |
||||
:root { |
||||
--main-bg-color: #242424; |
||||
--main-text-color: #17ab5c; |
||||
--main-link-color: #bf64b7; |
||||
--main-link-hover-color: #000000; |
||||
} |
||||
} |
||||
|
||||
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, a.button.selected, .slide label:hover, button[type=submit]:hover { |
||||
color: var(--main-link-hover-color); |
||||
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; |
||||
padding: 4px; |
||||
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: 2em; |
||||
padding: 4px; |
||||
max-width: 50em; |
||||
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; |
||||
} |
||||
|
||||
.content { |
||||
max-width: 40em; |
||||
} |
||||
} |
||||
|
||||
@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 { |
||||
display: block; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
|
Loading…
Reference in new issue