170 lines
2.7 KiB
SCSS
170 lines
2.7 KiB
SCSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1a1923;
|
|
--bg-secondary: #14131d;
|
|
--bg-tertiary: #100e18;
|
|
--bg-quartiary: #0a0e11;
|
|
--bg-light: #201e2a;
|
|
--never-see-this-color: #00ff1f;
|
|
--fg-text: #c7c6ca;
|
|
--fg-link: #b18cf3;
|
|
--fg-dimmed: #7f879b;
|
|
--color-accent: #b18cf3;
|
|
--borders: #222a30;
|
|
--font-normal: sans-serif;
|
|
--font-mono: monospace;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
color: var(--fg-text);
|
|
background: var(--bg-tertiary);
|
|
font: 16px/1.3 var(--font-normal);
|
|
}
|
|
|
|
h1 { font-size: 2em }
|
|
h2 { font-size: 1.5em }
|
|
h3 { font-size: 1.3em }
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--fg-link);
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.broken {
|
|
cursor: not-allowed;
|
|
color: #e66e82;
|
|
}
|
|
|
|
a:hover, a:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
// yes, i know italic and oblique are different and i don't care
|
|
i, em {
|
|
font-style: italic;
|
|
}
|
|
|
|
// seems strange why they go off the page by default
|
|
ol, ul {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
pre, code {
|
|
font-family: var(--font-mono);
|
|
|
|
&:not(.lang-mono) {
|
|
background: var(--bg-secondary);
|
|
padding: 0 4px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
pre:not(.lang-mono) {
|
|
padding: 4px;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: auto;
|
|
padding: 4px;
|
|
}
|
|
|
|
table {
|
|
border: solid var(--borders) 1px;
|
|
// border-radius: 4px;
|
|
border-spacing: 0;
|
|
|
|
& > thead {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
& > tbody > tr:nth-child(even) {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
& td, th {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
input, textarea, button, select, label.button {
|
|
background: var(--bg-secondary);
|
|
color: inherit;
|
|
border: solid var(--borders) 1px;
|
|
border-radius: 2px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
button, input[type=submit], label.button {
|
|
color: var(--fg-link);
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover, button:focus-visible,
|
|
input[type=submit]:hover, input[type=submit]:focus-visible,
|
|
label.button:hover, label.button:focus-visible {
|
|
text-decoration: underline;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.description, span.info {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.description {
|
|
color: #b5b0c2;
|
|
}
|
|
|
|
span.info {
|
|
color: var(--fg-dimmed);
|
|
font-size: .8em;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.nojs {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1em;
|
|
|
|
& > main {
|
|
display: inline-block;
|
|
border: solid var(--borders) 1px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
max-width: 550px;
|
|
|
|
& > p {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-bottom: solid var(--borders) 1px;
|
|
}
|