250 lines
8.4 KiB
CSS
250 lines
8.4 KiB
CSS
/* ==========================================================================
|
|
Bitcoin After Life — manual theme
|
|
Palette taken from the bitcoin-after.life landing page ("Slate" system).
|
|
Change a value here and it propagates through the whole manual.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--bal-accent: #2d6cdf;
|
|
--bal-accent-soft: #e6eefc;
|
|
--bal-accent-line: #cfe0fb;
|
|
--bal-accent-dark: #2559b8;
|
|
--bal-ink: #1a2027;
|
|
--bal-muted: #5b6672;
|
|
--bal-bg: #eef1f4;
|
|
--bal-panel: #ffffff;
|
|
--bal-line: #dfe4ea;
|
|
--bal-line-strong: #cbd2da;
|
|
--bal-ok: #1f9d57;
|
|
--bal-ok-soft: #e3f4ea;
|
|
--bal-warn: #b5701b;
|
|
--bal-warn-soft: #fbf0df;
|
|
--bal-btc: #f7931a;
|
|
--bal-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* -------- Light scheme ---------------------------------------------------- */
|
|
[data-md-color-scheme="default"] {
|
|
--md-primary-fg-color: var(--bal-accent);
|
|
--md-primary-fg-color--light: #4f85e6;
|
|
--md-primary-fg-color--dark: var(--bal-accent-dark);
|
|
--md-primary-bg-color: #ffffff;
|
|
--md-primary-bg-color--light: rgba(255, 255, 255, .7);
|
|
|
|
--md-accent-fg-color: var(--bal-accent-dark);
|
|
--md-accent-fg-color--transparent: var(--bal-accent-soft);
|
|
--md-accent-bg-color: #ffffff;
|
|
|
|
--md-default-bg-color: var(--bal-bg);
|
|
--md-default-fg-color: var(--bal-ink);
|
|
--md-default-fg-color--light: var(--bal-muted);
|
|
--md-default-fg-color--lighter: var(--bal-line-strong);
|
|
--md-default-fg-color--lightest: var(--bal-line);
|
|
|
|
--md-typeset-color: var(--bal-ink);
|
|
--md-typeset-a-color: var(--bal-accent);
|
|
|
|
--md-code-bg-color: #e4e9ef;
|
|
--md-code-fg-color: var(--bal-ink);
|
|
|
|
--md-footer-bg-color: var(--bal-ink);
|
|
--md-footer-bg-color--dark: #12171c;
|
|
}
|
|
|
|
/* Content sits on white panels, like the cards on the website. */
|
|
[data-md-color-scheme="default"] .md-main__inner .md-content__inner {
|
|
background: var(--bal-panel);
|
|
border: 1px solid var(--bal-line);
|
|
border-radius: 10px;
|
|
padding: 8px 28px 40px;
|
|
box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
|
|
}
|
|
|
|
/* -------- Dark scheme ----------------------------------------------------- */
|
|
/* The website has no dark mode; this is a faithful dark counterpart built
|
|
around the same accent blue. */
|
|
[data-md-color-scheme="slate"] {
|
|
--md-hue: 215;
|
|
|
|
--md-primary-fg-color: #5b8ce8;
|
|
--md-primary-fg-color--light: #7ea6ee;
|
|
--md-primary-fg-color--dark: var(--bal-accent);
|
|
--md-primary-bg-color: #0f1419;
|
|
|
|
--md-accent-fg-color: #7ea6ee;
|
|
--md-accent-fg-color--transparent: rgba(45, 108, 223, .12);
|
|
|
|
--md-default-bg-color: #12171c;
|
|
--md-typeset-a-color: #7ea6ee;
|
|
|
|
--md-code-bg-color: #1a2027;
|
|
--md-footer-bg-color: #0f1419;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-main__inner .md-content__inner {
|
|
background: #171d24;
|
|
border: 1px solid #262e37;
|
|
border-radius: 10px;
|
|
padding: 8px 28px 40px;
|
|
}
|
|
|
|
/* -------- Typography ------------------------------------------------------ */
|
|
.md-typeset h1,
|
|
.md-typeset h2,
|
|
.md-typeset h3 {
|
|
font-weight: 600;
|
|
letter-spacing: -.015em;
|
|
}
|
|
.md-typeset h1 { color: var(--md-default-fg-color); }
|
|
.md-typeset h2 { border-bottom: 1px solid var(--md-default-fg-color--lightest); padding-bottom: .3em; }
|
|
|
|
.md-typeset code,
|
|
.md-typeset pre > code { font-family: var(--bal-mono); }
|
|
|
|
/* Code blocks use the site's dark "ink" background in both schemes. */
|
|
[data-md-color-scheme="default"] .md-typeset pre > code {
|
|
background: var(--bal-ink);
|
|
color: #e8edf3;
|
|
}
|
|
|
|
/* -------- Tables ---------------------------------------------------------- */
|
|
.md-typeset table:not([class]) {
|
|
border: 1px solid var(--md-default-fg-color--lightest);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
font-size: .78rem;
|
|
}
|
|
.md-typeset table:not([class]) th {
|
|
background: var(--md-default-bg-color);
|
|
color: var(--md-default-fg-color--light);
|
|
font-size: .68rem;
|
|
font-weight: 600;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* -------- Admonitions mapped to the site's semantic colours --------------- */
|
|
.md-typeset .admonition,
|
|
.md-typeset details { border-radius: 10px; font-size: .76rem; }
|
|
|
|
:root {
|
|
--md-admonition-icon--note: var(--md-admonition-icon--abstract);
|
|
}
|
|
.md-typeset .admonition.info,
|
|
.md-typeset .admonition.note,
|
|
.md-typeset details.info,
|
|
.md-typeset details.note { border-color: var(--bal-accent); }
|
|
.md-typeset .info > .admonition-title,
|
|
.md-typeset .note > .admonition-title,
|
|
.md-typeset .info > summary,
|
|
.md-typeset .note > summary { background: var(--bal-accent-soft); }
|
|
|
|
.md-typeset .admonition.tip,
|
|
.md-typeset details.tip { border-color: var(--bal-ok); }
|
|
.md-typeset .tip > .admonition-title,
|
|
.md-typeset .tip > summary { background: var(--bal-ok-soft); }
|
|
|
|
.md-typeset .admonition.warning,
|
|
.md-typeset details.warning { border-color: var(--bal-warn); }
|
|
.md-typeset .warning > .admonition-title,
|
|
.md-typeset .warning > summary { background: var(--bal-warn-soft); }
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
|
|
[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
|
|
[data-md-color-scheme="slate"] .md-typeset .info > summary,
|
|
[data-md-color-scheme="slate"] .md-typeset .note > summary { background: rgba(45, 108, 223, .16); }
|
|
[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title,
|
|
[data-md-color-scheme="slate"] .md-typeset .tip > summary { background: rgba(31, 157, 87, .16); }
|
|
[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
|
|
[data-md-color-scheme="slate"] .md-typeset .warning > summary { background: rgba(181, 112, 27, .18); }
|
|
|
|
/* FAQ accordions read better with a little separation. */
|
|
.md-typeset details { margin-bottom: .5rem; }
|
|
|
|
/* -------- Screenshots ----------------------------------------------------- */
|
|
img.screenshot {
|
|
border: 1px solid var(--md-default-fg-color--lightest);
|
|
border-radius: 8px;
|
|
box-shadow: 0 6px 20px rgba(20, 30, 50, .08);
|
|
max-width: 100%;
|
|
}
|
|
img.screenshot + em,
|
|
p > img.screenshot + em {
|
|
display: block;
|
|
margin-top: .4rem;
|
|
font-size: .72rem;
|
|
font-style: normal;
|
|
color: var(--md-default-fg-color--light);
|
|
}
|
|
|
|
/* -------- Misc ------------------------------------------------------------ */
|
|
.md-typeset .grid.cards > :is(ul, ol) > li,
|
|
.md-typeset .grid > .card { border-radius: 10px; }
|
|
|
|
.md-typeset a.btc,
|
|
.md-typeset .btc { color: var(--bal-btc); font-weight: 700; }
|
|
|
|
:focus-visible { outline: 2px solid var(--bal-accent); outline-offset: 2px; }
|
|
|
|
|
|
/* -------- Brand ----------------------------------------------------------- */
|
|
/* Header sits on the accent blue, so it uses the white mark directly
|
|
(docs/assets/logo.svg is a copy of logo-mark-white.svg). */
|
|
.md-header__button.md-logo img,
|
|
.md-header__button.md-logo svg {
|
|
height: 1.6rem;
|
|
width: auto;
|
|
}
|
|
|
|
/* Homepage lockup: the mark plus the name set in Inter — the same construction
|
|
the website uses in its top bar, and immune to the Optima dependency of the
|
|
SVG wordmark. */
|
|
.bal-hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: .7rem;
|
|
margin: 1.4rem 0 2.2rem;
|
|
text-align: center;
|
|
}
|
|
.bal-hero img { width: 116px; height: auto; }
|
|
.bal-hero .name {
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
letter-spacing: -.015em;
|
|
line-height: 1.1;
|
|
color: var(--md-default-fg-color);
|
|
}
|
|
.bal-hero .tagline {
|
|
font-size: .68rem;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--md-default-fg-color--light);
|
|
}
|
|
/* Swap black / white mark with the colour scheme. */
|
|
.bal-hero .logo-dark { display: none; }
|
|
[data-md-color-scheme="slate"] .bal-hero .logo-light { display: none; }
|
|
[data-md-color-scheme="slate"] .bal-hero .logo-dark { display: inline; }
|
|
|
|
/* -------- Diagrams -------------------------------------------------------- */
|
|
/* Wide technical diagrams: full content width, light frame, no drop shadow
|
|
(they already have their own internal panels). */
|
|
img.diagram {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border: 1px solid var(--md-default-fg-color--lightest);
|
|
border-radius: 8px;
|
|
background: var(--bal-panel);
|
|
padding: 4px;
|
|
}
|
|
[data-md-color-scheme="slate"] img.diagram { background: #f6f8fa; }
|
|
img.diagram + em {
|
|
display: block;
|
|
margin-top: .4rem;
|
|
font-size: .72rem;
|
|
font-style: normal;
|
|
color: var(--md-default-fg-color--light);
|
|
}
|