You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
442 lines
7.2 KiB
442 lines
7.2 KiB
/* Import Inter font */ |
|
/* More info at https://github.com/xz/fonts */ |
|
@import url("https://fonts.xz.style/serve/inter.css"); |
|
|
|
:root { |
|
--nc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
|
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, |
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
|
--nc-font-mono: "Courier New", Courier, "Ubuntu Mono", "Liberation Mono", |
|
monospace; |
|
--nc-tx-1: #000000; |
|
--nc-tx-2: #1a1a1a; |
|
--nc-bg-1: #ffffff; |
|
--nc-bg-2: #f6f8fa; |
|
--nc-bg-3: #e5e7eb; |
|
--nc-lk-1: #0070f3; |
|
--nc-lk-2: #0366d6; |
|
--nc-lk-tx: #ffffff; |
|
--nc-ac-1: #79ffe1; |
|
--nc-ac-tx: #0c4047; |
|
} |
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--nc-tx-1: #ffffff; |
|
--nc-tx-2: #eeeeee; |
|
--nc-bg-1: #000000; |
|
--nc-bg-2: #111111; |
|
--nc-bg-3: #222222; |
|
--nc-lk-1: #3291ff; |
|
--nc-lk-2: #0070f3; |
|
--nc-lk-tx: #ffffff; |
|
--nc-ac-1: #7928ca; |
|
--nc-ac-tx: #ffffff; |
|
} |
|
} |
|
|
|
* { |
|
/* Reset margins and padding */ |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
address, |
|
area, |
|
article, |
|
aside, |
|
audio, |
|
blockquote, |
|
datalist, |
|
details, |
|
dl, |
|
fieldset, |
|
figure, |
|
form, |
|
input, |
|
iframe, |
|
img, |
|
meter, |
|
nav, |
|
ol, |
|
optgroup, |
|
option, |
|
output, |
|
p, |
|
pre, |
|
progress, |
|
ruby, |
|
section, |
|
table, |
|
textarea, |
|
ul, |
|
video { |
|
/* Margins for most elements */ |
|
margin-bottom: 1rem; |
|
} |
|
|
|
html, |
|
input, |
|
select, |
|
button { |
|
/* Set body font family and some finicky elements */ |
|
font-family: var(--nc-font-sans); |
|
} |
|
|
|
body { |
|
/* Center body in page */ |
|
margin: 0 auto; |
|
max-width: 750px; |
|
padding: 2rem; |
|
border-radius: 6px; |
|
overflow-x: hidden; |
|
background: var(--nc-bg-1); |
|
|
|
/* Main body text */ |
|
color: var(--nc-tx-2); |
|
font-size: 1.03rem; |
|
line-height: 1.5; |
|
} |
|
|
|
::selection { |
|
/* Set background color for selected text */ |
|
background: var(--nc-ac-1); |
|
color: var(--nc-ac-tx); |
|
} |
|
|
|
p { |
|
margin-bottom: 1rem; |
|
} |
|
|
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
line-height: 1; |
|
color: var(--nc-tx-1); |
|
padding-top: 0.875rem; |
|
} |
|
|
|
h1, |
|
h2, |
|
h3 { |
|
color: var(--nc-tx-1); |
|
padding-bottom: 2px; |
|
margin-bottom: 8px; |
|
border-bottom: 1px solid var(--nc-bg-2); |
|
} |
|
|
|
h4, |
|
h5, |
|
h6 { |
|
margin-bottom: 0.3rem; |
|
} |
|
|
|
h1 { |
|
font-size: 2.25rem; |
|
} |
|
|
|
h2 { |
|
font-size: 1.85rem; |
|
} |
|
|
|
h3 { |
|
font-size: 1.55rem; |
|
} |
|
|
|
h4 { |
|
font-size: 1.25rem; |
|
} |
|
|
|
h5 { |
|
font-size: 1rem; |
|
} |
|
|
|
h6 { |
|
font-size: 0.875rem; |
|
} |
|
|
|
a { |
|
color: var(--nc-lk-1); |
|
} |
|
|
|
a:hover { |
|
color: var(--nc-lk-2); |
|
} |
|
|
|
abbr:hover { |
|
/* Set the '?' cursor while hovering an abbreviation */ |
|
cursor: help; |
|
} |
|
|
|
blockquote { |
|
padding: 1.5rem; |
|
background: var(--nc-bg-2); |
|
border-left: 5px solid var(--nc-bg-3); |
|
} |
|
|
|
abbr { |
|
cursor: help; |
|
} |
|
|
|
blockquote *:last-child { |
|
padding-bottom: 0; |
|
margin-bottom: 0; |
|
} |
|
|
|
header { |
|
background: var(--nc-bg-2); |
|
border-bottom: 1px solid var(--nc-bg-3); |
|
padding: 2rem 1.5rem; |
|
|
|
/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ |
|
|
|
margin: -2rem calc(0px - (50vw - 50%)) 2rem; |
|
|
|
/* Shorthand for: |
|
|
|
margin-top: -2rem; |
|
margin-bottom: 2rem; |
|
|
|
margin-left: calc(0px - (50vw - 50%)); |
|
margin-right: calc(0px - (50vw - 50%)); */ |
|
|
|
padding-left: calc(50vw - 50%); |
|
padding-right: calc(50vw - 50%); |
|
} |
|
|
|
header h1, |
|
header h2, |
|
header h3 { |
|
padding-bottom: 0; |
|
border-bottom: 0; |
|
} |
|
|
|
header > *:first-child { |
|
margin-top: 0; |
|
padding-top: 0; |
|
} |
|
|
|
header > *:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
.button, |
|
button, |
|
input[type="submit"], |
|
input[type="reset"], |
|
input[type="button"] { |
|
font-size: 1rem; |
|
display: inline-block; |
|
padding: 6px 12px; |
|
text-align: center; |
|
text-decoration: none; |
|
white-space: nowrap; |
|
background: var(--nc-lk-1); |
|
color: var(--nc-lk-tx); |
|
border: 0; |
|
border-radius: 4px; |
|
box-sizing: border-box; |
|
cursor: pointer; |
|
color: var(--nc-lk-tx); |
|
} |
|
|
|
.button[disabled], |
|
button[disabled], |
|
input[type="submit"][disabled], |
|
input[type="reset"][disabled], |
|
input[type="button"][disabled] { |
|
cursor: default; |
|
opacity: 0.5; |
|
|
|
/* Set the [X] cursor while hovering a disabled link */ |
|
cursor: not-allowed; |
|
} |
|
|
|
.button:focus, |
|
.button:hover, |
|
button:focus, |
|
button:hover, |
|
input[type="submit"]:focus, |
|
input[type="submit"]:hover, |
|
input[type="reset"]:focus, |
|
input[type="reset"]:hover, |
|
input[type="button"]:focus, |
|
input[type="button"]:hover { |
|
background: var(--nc-lk-2); |
|
} |
|
|
|
code, |
|
pre, |
|
kbd, |
|
samp { |
|
/* Set the font family for monospaced elements */ |
|
font-family: var(--nc-font-mono); |
|
} |
|
|
|
code, |
|
samp, |
|
kbd, |
|
pre { |
|
/* The main preformatted style. This is changed slightly across different cases. */ |
|
background: var(--nc-bg-2); |
|
border: 1px solid var(--nc-bg-3); |
|
border-radius: 4px; |
|
padding: 3px 6px; |
|
font-size: 0.9rem; |
|
} |
|
|
|
kbd { |
|
/* Makes the kbd element look like a keyboard key */ |
|
border-bottom: 3px solid var(--nc-bg-3); |
|
} |
|
|
|
pre { |
|
padding: 1rem 1.4rem; |
|
max-width: 100%; |
|
overflow: auto; |
|
} |
|
|
|
pre code { |
|
/* When <code> is in a <pre>, reset it's formatting to blend in */ |
|
background: inherit; |
|
font-size: inherit; |
|
color: inherit; |
|
border: 0; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
code pre { |
|
/* When <pre> is in a <code>, reset it's formatting to blend in */ |
|
display: inline; |
|
background: inherit; |
|
font-size: inherit; |
|
color: inherit; |
|
border: 0; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
details { |
|
/* Make the <details> look more "clickable" */ |
|
padding: 0.6rem 1rem; |
|
background: var(--nc-bg-2); |
|
border: 1px solid var(--nc-bg-3); |
|
border-radius: 4px; |
|
} |
|
|
|
summary { |
|
/* Makes the <summary> look more like a "clickable" link with the pointer cursor */ |
|
cursor: pointer; |
|
font-weight: bold; |
|
} |
|
|
|
details[open] { |
|
/* Adjust the <details> padding while open */ |
|
padding-bottom: 0.75rem; |
|
} |
|
|
|
details[open] summary { |
|
/* Adjust the <details> padding while open */ |
|
margin-bottom: 6px; |
|
} |
|
|
|
details[open] > *:last-child { |
|
/* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */ |
|
margin-bottom: 0; |
|
} |
|
|
|
dt { |
|
font-weight: bold; |
|
} |
|
|
|
dd::before { |
|
/* Add an arrow to data table definitions */ |
|
content: "→ "; |
|
} |
|
|
|
hr { |
|
/* Reset the border of the <hr> separator, then set a better line */ |
|
border: 0; |
|
border-bottom: 1px solid var(--nc-bg-3); |
|
margin: 1rem auto; |
|
} |
|
|
|
fieldset { |
|
margin-top: 1rem; |
|
padding: 2rem; |
|
border: 1px solid var(--nc-bg-3); |
|
border-radius: 4px; |
|
} |
|
|
|
legend { |
|
padding: auto 0.5rem; |
|
} |
|
|
|
textarea { |
|
/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */ |
|
max-width: 100%; |
|
} |
|
|
|
ol, |
|
ul { |
|
/* Replace the browser default padding */ |
|
padding-left: 2rem; |
|
} |
|
|
|
li { |
|
margin-top: 0.4rem; |
|
} |
|
|
|
ul ul, |
|
ol ul, |
|
ul ol, |
|
ol ol { |
|
margin-bottom: 0; |
|
} |
|
|
|
mark { |
|
padding: 3px 6px; |
|
background: var(--nc-ac-1); |
|
color: var(--nc-ac-tx); |
|
} |
|
|
|
textarea, |
|
select, |
|
input { |
|
padding: 6px 12px; |
|
margin-bottom: 0.5rem; |
|
background: var(--nc-bg-2); |
|
color: var(--nc-tx-2); |
|
|
|
/* Set a border of the same color as the main background. It isn't visible on idle, but prevents the cell from growing in size when a darker border is set on focus. */ |
|
border: 1px solid var(--nc-bg-2); |
|
border-radius: 4px; |
|
box-shadow: none; |
|
box-sizing: border-box; |
|
} |
|
|
|
textarea:focus, |
|
select:focus, |
|
input[type]:focus { |
|
border: 1px solid var(--nc-bg-3); |
|
|
|
/* Reset any browser default outlines */ |
|
outline: 0; |
|
} |
|
|
|
img { |
|
max-width: 100%; |
|
} |
|
|
|
/* Customizations */ |
|
.menu-comment { |
|
font-weight: bold; |
|
border: 0; |
|
margin: 0; |
|
padding: 0; |
|
font-size: 1.2rem; |
|
}
|
|
|