1239 lines
19 KiB
CSS
1239 lines
19 KiB
CSS
|
|
:root {
|
|
font-size: 16px;
|
|
--font-open-sans: 'Open Sans', sans-serif;
|
|
--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
:root {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) or (min-height: 1600px) {
|
|
:root {
|
|
font-size: calc(12px + 100vw / 400);
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
:root {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--theme-bg-main);
|
|
}
|
|
|
|
color-theme-toggle,
|
|
maximize-toggle,
|
|
outline-toggle {
|
|
position: fixed;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
display: block;
|
|
z-index: 2;
|
|
}
|
|
|
|
maximize-toggle {
|
|
top: 0.5rem;
|
|
right: 3rem;
|
|
}
|
|
|
|
outline-toggle {
|
|
top: 0.5rem;
|
|
right: 5.5rem;
|
|
}
|
|
|
|
#outline {
|
|
position: fixed;
|
|
top: 4rem;
|
|
right: 2rem;
|
|
width: min(30rem, 80vw);
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
background: var(--theme-bg-light);
|
|
border: 0.2rem solid var(--theme-line);
|
|
display: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
[data-show-outline] #outline {
|
|
display: block;
|
|
}
|
|
|
|
#outline h2 {
|
|
margin-block: 1rem;
|
|
margin-inline: 1rem;
|
|
padding: 0;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
#outline ol {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#outline li[data-depth='h1'] {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-inline-start: 1rem;
|
|
}
|
|
|
|
#outline li[data-depth='h2'] {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-inline-start: 2rem;
|
|
}
|
|
|
|
#outline li[data-depth='h3'] {
|
|
margin-inline-start: 3rem;
|
|
}
|
|
|
|
#outline li[data-depth='h4'] {
|
|
font-size: 0.9rem;
|
|
margin-inline-start: 4rem;
|
|
}
|
|
|
|
#outline li[data-depth='h5'] {
|
|
font-size: 0.9rem;
|
|
margin-inline-start: 5rem;
|
|
}
|
|
|
|
#outline li[data-depth='h6'] {
|
|
font-size: 0.9rem;
|
|
margin-inline-start: 6rem;
|
|
}
|
|
|
|
@media print {
|
|
color-theme-toggle,
|
|
maximize-toggle,
|
|
outline-toggle,
|
|
#outline {
|
|
display: hidden !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ===== Theme Toggle Animations ===== */
|
|
|
|
/* todo: is there a better way to handle defining these animations? despite efforts,
|
|
this implementation still has some degree of transition stacking / delays in nested
|
|
svg contexts in chrome */
|
|
|
|
/* BG Color Only */
|
|
body[data-color-transition-enabled],
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
|
|
button,
|
|
) {
|
|
transition: background linear .5s;
|
|
}
|
|
|
|
/* Border Color Only */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
|
|
) {
|
|
transition: border-color linear .5s;
|
|
}
|
|
|
|
/* Color Only */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
|
|
p,
|
|
a:not(h1 a),
|
|
span:not(p span),
|
|
time:not(p time),
|
|
li:not([role='doc-footnote']), dt, dd,
|
|
h1, h2, h3, h4, h5, h6,
|
|
td, th
|
|
) {
|
|
transition: color linear .5s;
|
|
}
|
|
|
|
/* BG and Color */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-color-transition]:not([data-border-transition]),
|
|
pre,
|
|
code:not(pre code),
|
|
samp:not(pre samp),
|
|
mark,
|
|
[role='doc-footnote']
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
background linear .5s;
|
|
}
|
|
|
|
/* BG and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-border-transition]:not([data-color-transition]),
|
|
#root > footer,
|
|
p.error-box,
|
|
.popup form,
|
|
#outline
|
|
) {
|
|
transition:
|
|
background linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/** Color and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-color-transition][data-border-transition]:not([data-bg-transition]),
|
|
.private-indicator,
|
|
tbody tr,
|
|
.tbody .tr,
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/* BG, Color, and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-border-transition][data-color-transition],
|
|
input, textarea, select,
|
|
blockquote,
|
|
:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
background linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/* Fill and Stroke */
|
|
body[data-color-transition-enabled] svg [fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *) {
|
|
transition:
|
|
fill linear .5s,
|
|
stroke linear .5s;
|
|
}
|
|
|
|
/* Fill Only */
|
|
body[data-color-transition-enabled] svg [fill^='var(']:not([stroke^='var(']):not([fill^='var('] *) {
|
|
transition: fill linear .5s;
|
|
}
|
|
|
|
/* Stroke Only */
|
|
body[data-color-transition-enabled] :is(
|
|
svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
|
|
svg.icon
|
|
) {
|
|
transition: stroke linear .5s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Base Layout ===== */
|
|
|
|
#root {
|
|
position: relative;
|
|
min-height: 100%;
|
|
padding-block: 2rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media print {
|
|
#root {
|
|
padding-block: 0.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Footer ===== */
|
|
|
|
#root > footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2.5rem;
|
|
background: var(--theme-bg-light);
|
|
border-block-start: 0.1rem solid var(--theme-line);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#root > footer :is(.left, .right) {
|
|
min-width: 22rem;
|
|
}
|
|
|
|
#root > footer :is(.left, .center, .right) {
|
|
flex: 1 1 calc(100% / 3);
|
|
}
|
|
|
|
#root > footer .left {
|
|
text-align: left;
|
|
padding-inline-start: 1.5rem;
|
|
}
|
|
|
|
#root > footer .center {
|
|
text-align: center;
|
|
}
|
|
|
|
#root > footer .right {
|
|
text-align: right;
|
|
}
|
|
|
|
#root > footer ul {
|
|
padding: 0;
|
|
}
|
|
|
|
#root > footer p {
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
padding-block: 0.5rem;
|
|
}
|
|
|
|
|
|
@media (max-width: 1199px) {
|
|
#root > footer {
|
|
margin-block-start: 8rem;
|
|
padding-block-end: 2rem;
|
|
background: transparent;
|
|
border: 0;
|
|
position: static;
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
#root > footer > div,
|
|
#root > footer :is(p, .left, .center, .right) {
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
padding-inline: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Typography ===== */
|
|
|
|
ul, ol {
|
|
padding-inline-start: 2.5rem;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
p, a, li, dt, dd, label,
|
|
table, .table, td, .td {
|
|
font-family: var(--font-open-sans);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
th, .th {
|
|
color: var(--theme-text-heading);
|
|
}
|
|
|
|
code, samp, pre {
|
|
color: var(--theme-code-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
:not(pre) > code {
|
|
color: inherit;
|
|
background: var(--theme-bg-light);
|
|
padding-inline: 0.25rem;
|
|
border: 0.1rem solid var(--theme-line);
|
|
}
|
|
|
|
pre {
|
|
margin-block: 3rem;
|
|
margin-inline: 2rem;
|
|
padding-block: 0.5rem;
|
|
padding-inline: 1rem;
|
|
border: 0.1rem solid var(--theme-line);
|
|
border-radius: 1rem;
|
|
font-size: 1rem;
|
|
overflow: auto;
|
|
background: var(--theme-bg-light);
|
|
}
|
|
|
|
code, samp {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
article header h1:not(.multiline),
|
|
article header h1.multiline > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: 1rem;
|
|
align-items: center;
|
|
margin-block: 0.5rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
article header h1:not(.multiline) > svg,
|
|
article header h1.multiline > div > svg {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
margin-block: 4rem 1rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.17rem;
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
margin-block: 3rem 1rem;
|
|
}
|
|
|
|
h5, h6 {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h6 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
:not(li) > :is(h1, h2, h3, h4, h5, h6),
|
|
li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
|
|
padding-block-start: 1rem;
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3),
|
|
:is(h1, h2, h3):first-child {
|
|
margin-block-start: 1rem;
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6),
|
|
:is(h4, h5, h6):first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
p, small, li, dt, dd, label,
|
|
table, .table, td, .td {
|
|
color: var(--theme-text-body);
|
|
}
|
|
|
|
p {
|
|
margin-block: 1.25rem;
|
|
margin-inline: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) {
|
|
font-size: 1rem;
|
|
color: var(--theme-text-light);
|
|
padding-block: 0.6rem;
|
|
padding-inline-start: 1rem;
|
|
margin: 1rem;
|
|
border-inline-start: 0.8rem solid var(--theme-line);
|
|
background: var(--theme-bg-light);
|
|
}
|
|
|
|
:is(aside, section).info {
|
|
border-inline-start-color: var(--theme-accent-info);
|
|
}
|
|
|
|
:is(aside, section).highlight {
|
|
border-inline-start-color: var(--theme-accent-highlight);
|
|
}
|
|
|
|
:is(aside, section).warning {
|
|
border-inline-start-color: var(--theme-accent-warning);
|
|
}
|
|
|
|
:is(aside, section).problem {
|
|
border-inline-start-color: var(--theme-accent-problem);
|
|
}
|
|
|
|
:is(a, svg.icon).safe {
|
|
color: var(--theme-text-safe);
|
|
}
|
|
|
|
:is(a, svg.icon).warn {
|
|
color: var(--theme-text-warn);
|
|
}
|
|
|
|
:is(a, svg.icon).danger {
|
|
color: var(--theme-text-danger);
|
|
}
|
|
|
|
[data-currency].negative {
|
|
color: var(--theme-icon-failure-indicator);
|
|
}
|
|
|
|
li {
|
|
font-size: 1rem;
|
|
margin-block: 0.5rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
ul[role='doc-endnotes'] {
|
|
list-style: none;
|
|
padding-inline-start: 1rem;
|
|
}
|
|
|
|
[role='doc-footnote']:target {
|
|
background: var(--theme-bg-heavy);
|
|
}
|
|
|
|
dl {
|
|
padding: 1rem;
|
|
}
|
|
|
|
dt, dd {
|
|
/* */
|
|
}
|
|
|
|
dt {
|
|
font-weight: 700;
|
|
}
|
|
|
|
dt p {
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
dt:not(:first-of-type) {
|
|
margin-block-start: 2rem;
|
|
}
|
|
|
|
/* dd {
|
|
margin-inline-start: 1rem;
|
|
padding-inline-start: 1rem;
|
|
padding-block: 0.125rem;
|
|
border-inline-start: 0.5rem var(--theme-line) solid;
|
|
background: var(--theme-bg-heavy)
|
|
} */
|
|
|
|
dd p {
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
table, .table {
|
|
display: table;
|
|
margin-block: 2rem;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table, th, td,
|
|
.table, .th, .td {
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
thead, .thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
tbody, .tbody {
|
|
display: table-row-group;
|
|
}
|
|
|
|
tbody tr,
|
|
.tbody .tr {
|
|
border-top: 1px var(--theme-line) solid;
|
|
}
|
|
|
|
tr, .tr {
|
|
display: table-row;
|
|
}
|
|
|
|
th, .th {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
}
|
|
|
|
th, .th,
|
|
td, .td {
|
|
padding-block: 0.5rem;
|
|
padding-inline: 1rem;
|
|
display: table-cell;
|
|
}
|
|
|
|
td, .td {
|
|
display: table-cell;
|
|
font-weight: 300;
|
|
vertical-align: top;
|
|
}
|
|
|
|
:is(td, .td):not(:last-of-type) {
|
|
border-inline-end: 0.1rem solid var(--theme-line);
|
|
}
|
|
|
|
:is(table, .table) :is(input, select) {
|
|
margin-block: 0;
|
|
}
|
|
|
|
table dl {
|
|
padding: 0;
|
|
}
|
|
|
|
small {
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-open-sans);
|
|
/* font-family: var(--font-nunito); */
|
|
}
|
|
|
|
a {
|
|
color: var(--theme-text-link);
|
|
}
|
|
|
|
a:active,
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--theme-text-link-active);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--theme-text-link-visited);
|
|
}
|
|
|
|
a.local-ref {
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
}
|
|
|
|
blockquote {
|
|
margin-block: 2rem;
|
|
margin-inline: 1rem;
|
|
padding-block: 0.5rem;
|
|
padding-inline: 1.5rem;
|
|
border-inline-start: 0.25rem var(--theme-line) solid;
|
|
}
|
|
|
|
blockquote.external-embed {
|
|
max-width: 60rem;
|
|
background: var(--theme-bg-light);
|
|
}
|
|
|
|
blockquote p {
|
|
margin: 0;
|
|
}
|
|
|
|
hr {
|
|
border-block-start-width: 0.1rem;
|
|
border-style: solid;
|
|
border-color: var(--theme-line);
|
|
width: 90%;
|
|
margin-block: 4rem 6rem;
|
|
}
|
|
|
|
mark {
|
|
color: var(--theme-text-highlight);
|
|
background-color: var(--theme-bg-text-highlight);
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
::selection {
|
|
fill: var(--theme-text-selection) !important;
|
|
color: var(--theme-text-selection) !important;
|
|
background-color: var(--theme-bg-text-selection) !important;
|
|
}
|
|
|
|
figure {
|
|
margin-block: 2rem;
|
|
margin-inline: 1rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
figure > :not(figcaption) {
|
|
margin-block: 0rem;
|
|
}
|
|
|
|
figure pre {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
figcaption {
|
|
font-family: var(--font-open-sans);
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
margin-block-start: 1rem;
|
|
color: var(--theme-text-light);
|
|
max-width: 60vw;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
a.icon-link {
|
|
display: inline-flex;
|
|
column-gap: 0.3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
a.icon-link svg.icon {
|
|
--icon-size: 1rem;
|
|
}
|
|
|
|
a.heading-anchor {
|
|
color: var(--theme-text-light);
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {
|
|
--icon-size: 1em;
|
|
}
|
|
|
|
.private-indicator {
|
|
color: var(--theme-text-safe);
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
column-gap: 0.25rem;
|
|
margin-inline: 0.25rem;
|
|
margin-block-end: 1rem;
|
|
font-family: var(--font-open-sans);
|
|
border: 0.15rem solid var(--theme-line-safe);
|
|
border-radius: 1rem;
|
|
padding: 0.2rem 0.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.private-indicator > svg.icon {
|
|
align-self: center;
|
|
}
|
|
|
|
.cite-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Popups ===== */
|
|
|
|
.popup {
|
|
z-index: 1;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
display: flex;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.125s linear,
|
|
background .5s linear;
|
|
background: var(--theme-bg-popup-mask);
|
|
}
|
|
|
|
.popup:target {
|
|
opacity: 1;
|
|
user-select: unset;
|
|
pointer-events: unset;
|
|
}
|
|
|
|
.popup form {
|
|
margin: auto;
|
|
position: relative;
|
|
background: var(--theme-bg-main);
|
|
border: 0.125rem solid var(--theme-border-input);
|
|
border-radius: 1rem;
|
|
padding-block-start: 1rem;
|
|
padding-block-end: 2rem;
|
|
padding-inline: 2rem;
|
|
width: 40rem;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.popup h3 {
|
|
margin-block-start: 2rem;
|
|
}
|
|
|
|
.popup form :is(h1, h2, h3, h4, h5, h6):first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
.popup a.close-popup {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 2rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.popup form :is(input, select) {
|
|
margin-block-start: 0.35rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
.popup form .inline-list {
|
|
margin-block-start: 2rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Forms and Inputs ===== */
|
|
|
|
label {
|
|
display: block;
|
|
font-family: var(--font-open-sans);
|
|
font-size: 1rem;
|
|
margin-block-start: 1rem;
|
|
}
|
|
|
|
label:not(:first-of-type) {
|
|
margin-block-start: 2rem;
|
|
}
|
|
|
|
label.radio {
|
|
display: flex;
|
|
margin-block: 1rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
display: block;
|
|
margin-block-start: 0.35rem;
|
|
margin-block-end: 1rem;
|
|
border: 0.125rem var(--theme-border-input) solid;
|
|
border-radius: 0.25rem;
|
|
color: var(--theme-text-body);
|
|
background-color: var(--theme-bg-input);
|
|
padding: 0.5rem;
|
|
font-family: var(--font-open-sans);
|
|
font-size: 1rem;
|
|
width: 20rem;
|
|
}
|
|
|
|
input[disabled],
|
|
textarea[disabled] {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type='text']:invalid,
|
|
input[type='password']:invalid,
|
|
textarea:invalid {
|
|
border-color: var(--theme-border-input-invalid);
|
|
}
|
|
|
|
input[type='text'][readonly] {
|
|
color: var(--theme-text-light);
|
|
border-color: var(--theme-line);
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
input[type='checkbox'] + label {
|
|
margin-inline-start: 0.5rem;
|
|
margin-inline-end: 2rem;
|
|
}
|
|
|
|
input[type='radio'] {
|
|
flex: 0 0 2rem;
|
|
margin: 0.2rem;
|
|
}
|
|
|
|
textarea {
|
|
line-height: 1.7rem;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: var(--theme-text-light);
|
|
}
|
|
|
|
button {
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 1rem;
|
|
margin-block-start: 1rem;
|
|
margin-inline-end: 1rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
appearance: none;
|
|
color: var(--theme-text-button-primary);
|
|
background: var(--theme-bg-button-primary);
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
font-family: var(--font-open-sans);
|
|
font-weight: 700;
|
|
line-height: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
button.icon-only {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
button svg.icon {
|
|
--icon-size: 2rem;
|
|
}
|
|
|
|
button:not(.icon-only) svg.icon:first-child {
|
|
margin-inline-end: 0.5rem;
|
|
}
|
|
|
|
button:not(.icon-only) svg.icon:last-child {
|
|
margin-inline-start: 0.5rem;
|
|
}
|
|
|
|
button[data-style='secondary'] {
|
|
color: var(--theme-text-button-secondary);
|
|
background: var(--theme-bg-button-secondary);
|
|
}
|
|
|
|
button:not([disabled]):hover {
|
|
background: var(--theme-bg-button-primary-hover);
|
|
}
|
|
|
|
button[data-style='secondary']:not([disabled]):hover {
|
|
background: var(--theme-bg-button-secondary-hover);
|
|
}
|
|
|
|
button[disabled] {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
select {
|
|
display: block;
|
|
margin-block-start: 0.35rem;
|
|
margin-block-end: 1rem;
|
|
border: 0.125rem var(--theme-border-input) solid;
|
|
border-radius: 0.25rem;
|
|
color: var(--theme-text-body);
|
|
background-color: var(--theme-bg-input);
|
|
padding: 0.5rem;
|
|
font-family: var(--font-open-sans);
|
|
font-size: 1rem;
|
|
width: 20rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
select[disabled] {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
select option {
|
|
color: var(--theme-text-body);
|
|
background-color: var(--theme-bg-input);
|
|
padding: 0.5rem;
|
|
font-family: var(--font-open-sans);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
:is(table, .table) :is(input, select) {
|
|
margin-block: 0;
|
|
}
|
|
|
|
p.error-box {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
color: var(--theme-text-error-box);
|
|
background: var(--theme-bg-error-box);
|
|
border: 0.1rem solid var(--theme-border-error-box);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Rendered Blocks ===== */
|
|
|
|
/* === General === */
|
|
|
|
figure[data-lang] {
|
|
margin-block: 2rem;
|
|
}
|
|
|
|
figure[data-lang] svg {
|
|
display: block;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
figure[data-size='small'] svg {
|
|
max-width: 40rem;
|
|
max-height: min(20rem, 50vw);
|
|
}
|
|
|
|
figure[data-size='medium'] svg {
|
|
max-width: 60rem;
|
|
max-height: min(40rem, 50vw);
|
|
}
|
|
|
|
figure[data-size='large'] svg {
|
|
max-height: min(60rem, 80vw);
|
|
}
|
|
|
|
/* figure[data-lang].big {
|
|
background: var(--theme-bg-main);
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
border: 0.25rem var(--theme-line) solid;
|
|
margin: 3rem;
|
|
}
|
|
|
|
figure[data-lang].big svg {
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
} */
|
|
|
|
figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
|
|
fill: var(--theme-text-body);
|
|
}
|
|
|
|
figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
|
|
font-family: var(--font-open-sans);
|
|
}
|
|
|
|
[data-lang='bash:samp'] samp {
|
|
display: block;
|
|
margin-block-start: 0.5rem;
|
|
padding-block-start: 0.5rem;
|
|
border-block-start: 0.1rem solid var(--theme-line);
|
|
}
|
|
|
|
/* === KaTeX === */
|
|
|
|
.katex-display {
|
|
color: var(--theme-text-body);
|
|
}
|
|
|
|
.katex-display .katex {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
/* using "body" here to add specificity, to override styles from katex.min.css */
|
|
body .katex-display {
|
|
margin: 2rem;
|
|
}
|
|
|
|
body .katex-display > .katex {
|
|
text-align: left;
|
|
}
|
|
|
|
:not(.katex-display) > .katex {
|
|
font-size: inherit;
|
|
margin-inline: 0.5rem;
|
|
}
|
|
|
|
.katex span[style~='color:transparent;'] {
|
|
user-select: none;
|
|
}
|
|
|
|
/* === Pikchr */
|
|
|
|
/* boxes */
|
|
.rendered-pikchr svg path[style*='fill:none;'] {
|
|
fill: var(--theme-bg-light) !important;
|
|
transition: fill linear .5s;
|
|
}
|
|
|
|
/* lines and boxes */
|
|
.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] {
|
|
stroke: var(--theme-text-body) !important;
|
|
}
|
|
|
|
/* circles */
|
|
.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] {
|
|
stroke: var(--theme-text-body) !important;
|
|
}
|
|
|
|
/* arrow heads */
|
|
.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] {
|
|
fill: var(--theme-text-body) !important;
|
|
transition: fill linear .5s;
|
|
}
|
|
|
|
/* === Bytefield === */
|
|
|
|
figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
|
|
font-size: 14px;
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
|
|
font-size: 16px;
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
|
|
font-family: var(--font-open-sans);
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
|
|
stroke-dasharray: 4px, 3px;
|
|
}
|
|
|
|
figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
|
|
stroke-dasharray: 2px, 3px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
blockquote.external-embed .h-entry footer p {
|
|
font-size: 0.8rem;
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
main > .h-entry header p {
|
|
margin-block: 0.6rem;
|
|
}
|
|
|
|
main > .h-entry header p.p-summary {
|
|
font-style: italic;
|
|
color: var(--theme-text-light);
|
|
}
|
|
|
|
main > .h-entry header p.event-time {
|
|
font-size: 0.8rem;
|
|
margin-block: 0.3rem;
|
|
}
|
|
|
|
main > .h-entry header p.publish-time {
|
|
font-size: 0.8rem;
|
|
margin-block: 0.3rem;
|
|
}
|
|
|
|
|