626 lines
12 KiB
CSS
626 lines
12 KiB
CSS
/*
|
|
* This is (basically) water.css.
|
|
*
|
|
* repo: https://github.com/kognise/water.css
|
|
*
|
|
* The license:
|
|
*
|
|
* The MIT License (MIT)
|
|
*
|
|
* Copyright © 2019 Kognise
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the “Software”), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*/
|
|
:root {
|
|
--background-body:#4a4a55;
|
|
--background:#383844;
|
|
--background-alt:#242438;
|
|
--selection:#23bf7c;
|
|
--text-main:#dfdfef;
|
|
--text-bright:#f7f7ff;
|
|
--text-muted:#878797;
|
|
--links:#28db8f;
|
|
--focus:#299465df;
|
|
--border:#676773;
|
|
--code:var(--text-main);
|
|
--animation-duration:0.1s;
|
|
--button-base:#299465;
|
|
--button-hover:#23bf7c;
|
|
--scrollbar-thumb:var(--button-hover);
|
|
--scrollbar-thumb-hover:#000;
|
|
--form-placeholder:#a9a9a9;
|
|
--form-text:#fff;
|
|
--variable:#d941e2;
|
|
--highlight:#efdb43;
|
|
--select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
|
|
}
|
|
html {
|
|
scrollbar-color:#040a0f #202b38;
|
|
scrollbar-color:var(--scrollbar-thumb) var(--background-body);
|
|
scrollbar-width:thin
|
|
}
|
|
body {
|
|
font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,sans-serif;
|
|
line-height:1.4;
|
|
max-width:800px;
|
|
margin:20px auto;
|
|
padding:0 10px;
|
|
word-wrap:break-word;
|
|
color:#dbdbdb;
|
|
color:var(--text-main);
|
|
background:#202b38;
|
|
background:var(--background-body);
|
|
text-rendering:optimizeLegibility
|
|
}
|
|
button,
|
|
input,
|
|
textarea {
|
|
transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease;
|
|
transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease
|
|
}
|
|
h1 {
|
|
font-size:2.2em;
|
|
margin-top:0
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom:12px;
|
|
margin-top:24px
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong {
|
|
color:#fff;
|
|
color:var(--text-bright)
|
|
}
|
|
b,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong,
|
|
th {
|
|
font-weight:600
|
|
}
|
|
q:after,
|
|
q:before {
|
|
content:none
|
|
}
|
|
blockquote,
|
|
q {
|
|
border-left:4px solid rgba(0,150,191,.67);
|
|
border-left:4px solid var(--focus);
|
|
margin:1.5em 0;
|
|
padding:.5em 1em;
|
|
font-style:italic
|
|
}
|
|
blockquote>footer {
|
|
font-style:normal;
|
|
border:0
|
|
}
|
|
address,
|
|
blockquote cite {
|
|
font-style:normal
|
|
}
|
|
a[href^=mailto\:]:before {
|
|
content:"📧 "
|
|
}
|
|
a[href^=tel\:]:before {
|
|
content:"📞 "
|
|
}
|
|
a[href^=sms\:]:before {
|
|
content:"💬 "
|
|
}
|
|
mark {
|
|
background-color:#efdb43;
|
|
background-color:var(--highlight);
|
|
border-radius:2px;
|
|
padding:0 2px;
|
|
color:#000
|
|
}
|
|
a>code,
|
|
a>strong {
|
|
color:inherit
|
|
}
|
|
button,
|
|
input[type=button],
|
|
input[type=checkbox],
|
|
input[type=radio],
|
|
input[type=range],
|
|
input[type=reset],
|
|
input[type=submit],
|
|
select {
|
|
cursor:pointer
|
|
}
|
|
input,
|
|
select {
|
|
display:block
|
|
}
|
|
[type=checkbox],
|
|
[type=radio] {
|
|
display:initial
|
|
}
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
color:#fff;
|
|
color:var(--form-text);
|
|
background-color:#161f27;
|
|
background-color:var(--background);
|
|
font-family:inherit;
|
|
font-size:inherit;
|
|
margin-right:6px;
|
|
margin-bottom:6px;
|
|
padding:10px;
|
|
border:none;
|
|
border-radius:6px;
|
|
outline:none
|
|
}
|
|
button,
|
|
input[type=button],
|
|
input[type=reset],
|
|
input[type=submit] {
|
|
background-color:#0c151c;
|
|
background-color:var(--button-base);
|
|
padding-right:30px;
|
|
padding-left:30px
|
|
}
|
|
button:hover,
|
|
input[type=button]:hover,
|
|
input[type=reset]:hover,
|
|
input[type=submit]:hover {
|
|
background:#040a0f;
|
|
background:var(--button-hover)
|
|
}
|
|
input[type=color] {
|
|
min-height:2rem;
|
|
padding:8px;
|
|
cursor:pointer
|
|
}
|
|
input[type=checkbox],
|
|
input[type=radio] {
|
|
height:1em;
|
|
width:1em
|
|
}
|
|
input[type=radio] {
|
|
border-radius:100%
|
|
}
|
|
input {
|
|
vertical-align:top
|
|
}
|
|
label {
|
|
vertical-align:middle;
|
|
margin-bottom:4px;
|
|
display:inline-block
|
|
}
|
|
button,
|
|
input:not([type=checkbox]):not([type=radio]),
|
|
input[type=range],
|
|
select,
|
|
textarea {
|
|
-webkit-appearance:none
|
|
}
|
|
textarea {
|
|
display:block;
|
|
margin-right:0;
|
|
box-sizing:border-box;
|
|
resize:vertical
|
|
}
|
|
textarea:not([cols]) {
|
|
width:100%
|
|
}
|
|
textarea:not([rows]) {
|
|
min-height:40px;
|
|
height:140px
|
|
}
|
|
select {
|
|
background:#161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
|
|
background:var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
|
|
padding-right:35px
|
|
}
|
|
select::-ms-expand {
|
|
display:none
|
|
}
|
|
select[multiple] {
|
|
padding-right:10px;
|
|
background-image:none;
|
|
overflow-y:auto
|
|
}
|
|
button:focus,
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
box-shadow:0 0 0 2px rgba(0,150,191,.67);
|
|
box-shadow:0 0 0 2px var(--focus)
|
|
}
|
|
button:active,
|
|
input[type=button]:active,
|
|
input[type=checkbox]:active,
|
|
input[type=radio]:active,
|
|
input[type=range]:active,
|
|
input[type=reset]:active,
|
|
input[type=submit]:active {
|
|
transform:translateY(2px)
|
|
}
|
|
button:disabled,
|
|
input:disabled,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
cursor:not-allowed;
|
|
opacity:.5
|
|
}
|
|
::-moz-placeholder {
|
|
color:#a9a9a9;
|
|
color:var(--form-placeholder)
|
|
}
|
|
:-ms-input-placeholder {
|
|
color:#a9a9a9;
|
|
color:var(--form-placeholder)
|
|
}
|
|
::-ms-input-placeholder {
|
|
color:#a9a9a9;
|
|
color:var(--form-placeholder)
|
|
}
|
|
::placeholder {
|
|
color:#a9a9a9;
|
|
color:var(--form-placeholder)
|
|
}
|
|
fieldset {
|
|
border:1px solid rgba(0,150,191,.67);
|
|
border:1px solid var(--focus);
|
|
border-radius:6px;
|
|
margin:0 0 12px;
|
|
padding:10px
|
|
}
|
|
legend {
|
|
font-size:.9em;
|
|
font-weight:600
|
|
}
|
|
input[type=range] {
|
|
margin:10px 0;
|
|
padding:10px 0;
|
|
background:transparent
|
|
}
|
|
input[type=range]:focus {
|
|
outline:none
|
|
}
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
width:100%;
|
|
height:9.5px;
|
|
-webkit-transition:.2s;
|
|
transition:.2s;
|
|
background:#161f27;
|
|
background:var(--background);
|
|
border-radius:3px
|
|
}
|
|
input[type=range]::-webkit-slider-thumb {
|
|
box-shadow:0 1px 1px #000,0 0 1px #0d0d0d;
|
|
height:20px;
|
|
width:20px;
|
|
border-radius:50%;
|
|
background:#526980;
|
|
background:var(--border);
|
|
-webkit-appearance:none;
|
|
margin-top:-7px
|
|
}
|
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background:#161f27;
|
|
background:var(--background)
|
|
}
|
|
input[type=range]::-moz-range-track {
|
|
width:100%;
|
|
height:9.5px;
|
|
-moz-transition:.2s;
|
|
transition:.2s;
|
|
background:#161f27;
|
|
background:var(--background);
|
|
border-radius:3px
|
|
}
|
|
input[type=range]::-moz-range-thumb {
|
|
box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;
|
|
height:20px;
|
|
width:20px;
|
|
border-radius:50%;
|
|
background:#526980;
|
|
background:var(--border)
|
|
}
|
|
input[type=range]::-ms-track {
|
|
width:100%;
|
|
height:9.5px;
|
|
background:transparent;
|
|
border-color:transparent;
|
|
border-width:16px 0;
|
|
color:transparent
|
|
}
|
|
input[type=range]::-ms-fill-lower,
|
|
input[type=range]::-ms-fill-upper {
|
|
background:#161f27;
|
|
background:var(--background);
|
|
border:.2px solid #010101;
|
|
border-radius:3px;
|
|
box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d
|
|
}
|
|
input[type=range]::-ms-thumb {
|
|
box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;
|
|
border:1px solid #000;
|
|
height:20px;
|
|
width:20px;
|
|
border-radius:50%;
|
|
background:#526980;
|
|
background:var(--border)
|
|
}
|
|
input[type=range]:focus::-ms-fill-lower,
|
|
input[type=range]:focus::-ms-fill-upper {
|
|
background:#161f27;
|
|
background:var(--background)
|
|
}
|
|
a {
|
|
text-decoration:none;
|
|
color:#41adff;
|
|
color:var(--links)
|
|
}
|
|
a:hover {
|
|
text-decoration:underline
|
|
}
|
|
code,
|
|
samp,
|
|
time {
|
|
background:#161f27;
|
|
background:var(--background);
|
|
color:#ffbe85;
|
|
color:var(--code);
|
|
padding:2.5px 5px;
|
|
border-radius:6px;
|
|
font-size:1em
|
|
}
|
|
pre>code {
|
|
padding:10px;
|
|
display:block;
|
|
overflow-x:auto
|
|
}
|
|
var {
|
|
color:#d941e2;
|
|
color:var(--variable);
|
|
font-style:normal;
|
|
font-family:monospace
|
|
}
|
|
kbd {
|
|
background:#161f27;
|
|
background:var(--background);
|
|
border:1px solid #526980;
|
|
border:1px solid var(--border);
|
|
border-radius:2px;
|
|
color:#dbdbdb;
|
|
color:var(--text-main);
|
|
padding:2px 4px
|
|
}
|
|
img,
|
|
video {
|
|
max-width:100%;
|
|
height:auto
|
|
}
|
|
hr {
|
|
border:none;
|
|
border-top:1px solid #526980;
|
|
border-top:1px solid var(--border)
|
|
}
|
|
table {
|
|
border-collapse:collapse;
|
|
margin-bottom:10px;
|
|
width:100%;
|
|
table-layout:fixed
|
|
}
|
|
table caption,
|
|
td,
|
|
th {
|
|
text-align:left
|
|
}
|
|
td,
|
|
th {
|
|
padding:6px;
|
|
vertical-align:top;
|
|
word-wrap:break-word
|
|
}
|
|
thead {
|
|
border-bottom:1px solid #526980;
|
|
border-bottom:1px solid var(--border)
|
|
}
|
|
tfoot {
|
|
border-top:1px solid #526980;
|
|
border-top:1px solid var(--border)
|
|
}
|
|
tbody tr:nth-child(2n) {
|
|
background-color:#161f27;
|
|
background-color:var(--background)
|
|
}
|
|
tbody tr:nth-child(2n) button {
|
|
background-color:#1a242f;
|
|
background-color:var(--background-alt)
|
|
}
|
|
tbody tr:nth-child(2n) button:hover {
|
|
background-color:#202b38;
|
|
background-color:var(--background-body)
|
|
}
|
|
::-webkit-scrollbar {
|
|
height:10px;
|
|
width:10px
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background:#161f27;
|
|
background:var(--background);
|
|
border-radius:6px
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background:#040a0f;
|
|
background:var(--scrollbar-thumb);
|
|
border-radius:6px
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background:#000;
|
|
background:var(--scrollbar-thumb-hover)
|
|
}
|
|
::-moz-selection {
|
|
background-color:#1c76c5;
|
|
background-color:var(--selection);
|
|
color:#fff;
|
|
color:var(--text-bright)
|
|
}
|
|
::selection {
|
|
background-color:#1c76c5;
|
|
background-color:var(--selection);
|
|
color:#fff;
|
|
color:var(--text-bright)
|
|
}
|
|
details {
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
background-color:#1a242f;
|
|
background-color:var(--background-alt);
|
|
padding:10px 10px 0;
|
|
margin:1em 0;
|
|
border-radius:6px;
|
|
overflow:hidden
|
|
}
|
|
details[open] {
|
|
padding:10px
|
|
}
|
|
details>:last-child {
|
|
margin-bottom:0
|
|
}
|
|
details[open] summary {
|
|
margin-bottom:10px
|
|
}
|
|
summary {
|
|
display:list-item;
|
|
background-color:#161f27;
|
|
background-color:var(--background);
|
|
padding:10px;
|
|
margin:-10px -10px 0;
|
|
cursor:pointer;
|
|
outline:none
|
|
}
|
|
summary:focus,
|
|
summary:hover {
|
|
text-decoration:underline
|
|
}
|
|
details>:not(summary) {
|
|
margin-top:0
|
|
}
|
|
summary::-webkit-details-marker {
|
|
color:#dbdbdb;
|
|
color:var(--text-main)
|
|
}
|
|
dialog {
|
|
background-color:#1a242f;
|
|
background-color:var(--background-alt);
|
|
color:#dbdbdb;
|
|
color:var(--text-main);
|
|
border-radius:6px;
|
|
border:#526980;
|
|
border-color:var(--border);
|
|
padding:10px 30px
|
|
}
|
|
dialog>header:first-child {
|
|
background-color:#161f27;
|
|
background-color:var(--background);
|
|
border-radius:6px 6px 0 0;
|
|
margin:-10px -30px 10px;
|
|
padding:10px;
|
|
text-align:center
|
|
}
|
|
dialog::-webkit-backdrop {
|
|
background:rgba(0,0,0,.61);
|
|
-webkit-backdrop-filter:blur(4px);
|
|
backdrop-filter:blur(4px)
|
|
}
|
|
dialog::backdrop {
|
|
background:rgba(0,0,0,.61);
|
|
-webkit-backdrop-filter:blur(4px);
|
|
backdrop-filter:blur(4px)
|
|
}
|
|
footer {
|
|
border-top:1px solid #526980;
|
|
border-top:1px solid var(--border);
|
|
padding-top:10px;
|
|
color:#a9b1ba;
|
|
color:var(--text-muted)
|
|
}
|
|
body>footer {
|
|
margin-top:40px
|
|
}
|
|
@media print {
|
|
body,
|
|
button,
|
|
code,
|
|
details,
|
|
input,
|
|
pre,
|
|
summary,
|
|
textarea {
|
|
background-color:#fff
|
|
}
|
|
button,
|
|
input,
|
|
textarea {
|
|
border:1px solid #000
|
|
}
|
|
body,
|
|
button,
|
|
code,
|
|
footer,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
input,
|
|
pre,
|
|
strong,
|
|
summary,
|
|
textarea {
|
|
color:#000
|
|
}
|
|
summary::marker {
|
|
color:#000
|
|
}
|
|
summary::-webkit-details-marker {
|
|
color:#000
|
|
}
|
|
tbody tr:nth-child(2n) {
|
|
background-color:#f2f2f2
|
|
}
|
|
a {
|
|
color:#00f;
|
|
text-decoration:underline
|
|
}
|
|
}
|
|
|