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 @@ |
|||||||
/* |
/* |
||||||
* Copyright (c) 2021-2022, The PurpleI2P Project |
* Copyright (c) 2021-2023, The PurpleI2P Project |
||||||
* |
* |
||||||
* This file is part of Purple i2pd project and licensed under BSD3 |
* This file is part of Purple i2pd project and licensed under BSD3 |
||||||
* |
* |
||||||
* See full license text in LICENSE file at top of project tree |
* See full license text in LICENSE file at top of project tree |
||||||
* |
* |
||||||
****************************************************************** |
****************************************************************** |
||||||
* |
* |
||||||
* This is style sheet for webconsole, with @media selectors for adaptive |
* This is style sheet for webconsole, with @media selectors for adaptive |
||||||
* view on desktop and mobile devices, respecting preferred user's color |
* view on desktop and mobile devices, respecting preferred user's color |
||||||
* scheme used in system/browser. |
* scheme used in system/browser. |
||||||
* |
* |
||||||
* Minified copy of that style sheet is bundled inside i2pd sources. |
* Minified copy of that style sheet is bundled inside i2pd sources. |
||||||
*/ |
*/ |
||||||
|
|
||||||
:root { |
:root { |
||||||
--main-bg-color: #fafafa; |
--main-bg-color: #fafafa; |
||||||
--main-text-color: #103456; |
--main-text-color: #103456; |
||||||
--main-link-color: #894c84; |
--main-link-color: #894c84; |
||||||
--main-link-hover-color: #fafafa; |
--main-link-hover-color: #fafafa; |
||||||
} |
} |
||||||
|
|
||||||
@media (prefers-color-scheme: dark) { |
@media (prefers-color-scheme: dark) { |
||||||
:root { |
:root { |
||||||
--main-bg-color: #242424; |
--main-bg-color: #242424; |
||||||
--main-text-color: #17ab5c; |
--main-text-color: #17ab5c; |
||||||
--main-link-color: #bf64b7; |
--main-link-color: #bf64b7; |
||||||
--main-link-hover-color: #000000; |
--main-link-hover-color: #000000; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
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: var(--main-bg-color); |
background: var(--main-bg-color); |
||||||
color: var(--main-text-color); |
color: var(--main-text-color); |
||||||
} |
} |
||||||
|
|
||||||
a, .slide label { |
a, .slide label { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
color: var(--main-link-color); |
color: var(--main-link-color); |
||||||
} |
} |
||||||
|
|
||||||
a:hover, .slide label:hover, button[type=submit]:hover { |
a:hover, a.button.selected, .slide label:hover, button[type=submit]:hover { |
||||||
color: var(--main-link-hover-color); |
color: var(--main-link-hover-color); |
||||||
background: var(--main-link-color); |
background: var(--main-link-color); |
||||||
} |
} |
||||||
|
|
||||||
a.button { |
a.button { |
||||||
appearance: button; |
appearance: button; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
padding: 0 5px; |
padding: 0 5px; |
||||||
border: 1px solid var(--main-link-color); |
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: var(--main-link-color); |
color: var(--main-link-color); |
||||||
} |
} |
||||||
|
|
||||||
.wrapper { |
.wrapper { |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
padding: 1em; |
padding: 1em; |
||||||
max-width: 64em; |
max-width: 64em; |
||||||
} |
} |
||||||
|
|
||||||
.menu { |
.menu { |
||||||
display: block; |
display: block; |
||||||
float: left; |
float: left; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
padding: 4px; |
padding: 4px; |
||||||
max-width: 12em; |
max-width: 12em; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||||||
} |
} |
||||||
|
|
||||||
.listitem { |
.listitem { |
||||||
display: block; |
display: block; |
||||||
font-family: monospace; |
font-family: monospace; |
||||||
font-size: 1.2em; |
font-size: 1.2em; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
} |
} |
||||||
|
|
||||||
.tableitem { |
.tableitem { |
||||||
font-family: monospace; |
font-family: monospace; |
||||||
font-size: 1.2em; |
font-size: 1.2em; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
} |
} |
||||||
|
|
||||||
.content { |
.content { |
||||||
float: left; |
float: left; |
||||||
font-size: 1em; |
font-size: 1em; |
||||||
margin-left: 2em; |
margin-left: 2em; |
||||||
padding: 4px; |
padding: 4px; |
||||||
max-width: 50em; |
max-width: 50em; |
||||||
overflow: auto; |
overflow: auto; |
||||||
} |
} |
||||||
|
|
||||||
.tunnel.established { |
.tunnel.established { |
||||||
color: #56B734; |
color: #56B734; |
||||||
} |
} |
||||||
|
|
||||||
.tunnel.expiring { |
.tunnel.expiring { |
||||||
color: #D3AE3F; |
color: #D3AE3F; |
||||||
} |
} |
||||||
|
|
||||||
.tunnel.failed { |
.tunnel.failed { |
||||||
color: #D33F3F; |
color: #D33F3F; |
||||||
} |
} |
||||||
|
|
||||||
.tunnel.building { |
.tunnel.building { |
||||||
color: #434343; |
color: #434343; |
||||||
} |
} |
||||||
|
|
||||||
caption { |
caption { |
||||||
font-size: 1.5em; |
font-size: 1.5em; |
||||||
text-align: center; |
text-align: center; |
||||||
color: var(--main-link-color); |
color: var(--main-link-color); |
||||||
} |
} |
||||||
|
|
||||||
table { |
table { |
||||||
display: table; |
display: table; |
||||||
border-collapse: collapse; |
border-collapse: collapse; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
table.extaddr { |
table.extaddr { |
||||||
text-align: left; |
text-align: left; |
||||||
} |
} |
||||||
|
|
||||||
table.services { |
table.services { |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
textarea { |
textarea { |
||||||
background-color: var(--main-bg-color); |
background-color: var(--main-bg-color); |
||||||
color: var(--main-text-color); |
color: var(--main-text-color); |
||||||
word-break: break-all; |
word-break: break-all; |
||||||
} |
} |
||||||
|
|
||||||
.streamdest { |
.streamdest { |
||||||
width: 120px; |
width: 120px; |
||||||
max-width: 240px; |
max-width: 240px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||||||
} |
} |
||||||
|
|
||||||
.slide div.slidecontent, .slide [type="checkbox"] { |
.slide div.slidecontent, .slide [type="checkbox"] { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.slide [type="checkbox"]:checked ~ div.slidecontent { |
.slide [type="checkbox"]:checked ~ div.slidecontent { |
||||||
display: block; |
display: block; |
||||||
margin-top: 0; |
margin-top: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
} |
} |
||||||
|
|
||||||
.disabled { |
.disabled { |
||||||
color: #D33F3F; |
color: #D33F3F; |
||||||
} |
} |
||||||
|
|
||||||
.enabled { |
.enabled { |
||||||
color: #56B734; |
color: #56B734; |
||||||
} |
} |
||||||
|
|
||||||
button[type=submit] { |
button[type=submit] { |
||||||
background-color: transparent; |
background-color: transparent; |
||||||
color: var(--main-link-color); |
color: var(--main-link-color); |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
padding: 5px; |
padding: 5px; |
||||||
border: 1px solid var(--main-link-color); |
border: 1px solid var(--main-link-color); |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
} |
} |
||||||
|
|
||||||
input, select, select option { |
input, select, select option { |
||||||
background-color: var(--main-bg-color); |
background-color: var(--main-bg-color); |
||||||
color: var(--main-link-color); |
color: var(--main-link-color); |
||||||
padding: 5px; |
padding: 5px; |
||||||
border: 1px solid var(--main-link-color); |
border: 1px solid var(--main-link-color); |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
} |
} |
||||||
|
|
||||||
input:focus, select:focus, select option:focus { |
input:focus, select:focus, select option:focus { |
||||||
outline: none; |
outline: none; |
||||||
} |
} |
||||||
|
|
||||||
input[type=number]::-webkit-inner-spin-button { |
input[type=number]::-webkit-inner-spin-button { |
||||||
-webkit-appearance: none; |
-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: 58em; |
||||||
} |
} |
||||||
|
|
||||||
.content { |
.content { |
||||||
max-width: 40em; |
max-width: 40em; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (max-width: 980px) { |
@media screen and (max-width: 980px) { |
||||||
body { |
body { |
||||||
font: 100%/1.2em sans-serif; |
font: 100%/1.2em sans-serif; |
||||||
padding: 1.2em 0 0 0; |
padding: 1.2em 0 0 0; |
||||||
} |
} |
||||||
|
|
||||||
.menu { |
.menu { |
||||||
width: 100%; |
width: 100%; |
||||||
max-width: unset; |
max-width: unset; |
||||||
display: block; |
display: block; |
||||||
float: none; |
float: none; |
||||||
position: unset; |
position: unset; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
.menu a, .commands a { |
.menu a, .commands a { |
||||||
display: inline-block; |
display: inline-block; |
||||||
padding: 4px; |
padding: 4px; |
||||||
} |
} |
||||||
|
|
||||||
.content { |
.content { |
||||||
float: none; |
float: none; |
||||||
margin-left: unset; |
margin-left: unset; |
||||||
margin-top: 16px; |
margin-top: 16px; |
||||||
max-width: 100%; |
max-width: 100%; |
||||||
width: 100%; |
width: 100%; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
a, .slide label { |
a, .slide label { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.header { |
.header { |
||||||
margin: unset; |
margin: unset; |
||||||
font-size: 1.5em; |
font-size: 1.5em; |
||||||
} |
} |
||||||
|
|
||||||
small { |
small { |
||||||
display: block |
display: block |
||||||
} |
} |
||||||
|
|
||||||
a.button { |
a.button { |
||||||
appearance: button; |
appearance: button; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
margin-top: 10px; |
margin-top: 10px; |
||||||
padding: 6px; |
padding: 6px; |
||||||
border: 2px solid var(--main-link-color); |
border: 2px solid var(--main-link-color); |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
width: -webkit-fill-available; |
width: -webkit-fill-available; |
||||||
} |
} |
||||||
|
|
||||||
input, select { |
input, select { |
||||||
width: 35%; |
width: 35%; |
||||||
text-align: center; |
text-align: center; |
||||||
padding: 5px; |
padding: 5px; |
||||||
border: 2px solid var(--main-link-color); |
border: 2px solid var(--main-link-color); |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
} |
} |
||||||
|
|
||||||
table.extaddr { |
table.extaddr { |
||||||
margin: auto; |
margin: auto; |
||||||
text-align: unset; |
text-align: unset; |
||||||
} |
} |
||||||
|
|
||||||
textarea { |
textarea { |
||||||
width: -webkit-fill-available; |
width: -webkit-fill-available; |
||||||
height: auto; |
height: auto; |
||||||
padding: 5px; |
padding: 5px; |
||||||
border: 2px solid var(--main-link-color); |
border: 2px solid var(--main-link-color); |
||||||
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: transparent; |
background: transparent; |
||||||
border: 2px solid var(--main-link-color); |
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; |
||||||
position: relative; |
position: relative; |
||||||
height: 36px; |
height: 36px; |
||||||
display: -webkit-inline-box; |
display: -webkit-inline-box; |
||||||
margin-top: 10px; |
margin-top: 10px; |
||||||
} |
} |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue