Files
pandoc/data/epub.css
T
k6G52m4Dz75W 51c7b1bfc4 epub.css: add optional dark-mode (light-dark) support (#11791)
* epub.css: add optional dark-mode (light-dark) support

The default EPUB stylesheet hardcodes a single dark text color
(#1a1a1a) on top of the reading system's own background. This wraps
that color — and the <hr> rule and table borders that use it — with
CSS light-dark(), so readers supporting `color-scheme` get an
inverted dark theme.

Each light-dark() declaration is preceded by a plain #1a1a1a
fallback, so readers that do not support light-dark() simply drop
the new declaration and keep the unchanged original appearance
(graceful degradation). No change to pandoc's conversion logic.

Align dark-mode values with bundled breezedark palette
2026-08-12 10:25:15 -07:00

228 lines
4.7 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* This defines styles and classes used in the book */
/* Light/Dark color scheme support.
`color-scheme: light dark` on :root is REQUIRED to enable the light-dark()
color function (CSS Color Module Level 5) and also lets the reading system
flip its own canvas/scrollbars to dark. Individual colors below use
light-dark(<light-value>, <dark-value>); the dark value uses the
designer-specified Breeze dark palette (text #cfcfc2, background #232629)
shipped with pandoc's bundled "breezedark" theme, so the document and its
code blocks share one coherent dark aesthetic instead of a mechanical
inversion.
For reading systems that do NOT support light-dark(), each declaration is
preceded by a plain fallback using the original light value, so the rule is
not dropped and the original look is preserved (graceful degradation). */
:root {
color-scheme: light dark;
}
@page {
margin: 10px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, ol,
ul, li, dl, dt, dd {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1.2;
font-family: Georgia, serif;
color: #1a1a1a;
color: light-dark(#1a1a1a, #cfcfc2);
background-color: light-dark(transparent, #232629);
}
p {
text-indent: 0;
margin: 1em 0;
widows: 2;
orphans: 2;
}
img {
max-width: 100%;
}
sup {
vertical-align: super;
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
}
h1, h2, h3, h4, h5, h6 {
text-indent: 0;
text-align: left;
font-weight: bold;
page-break-after: avoid;
page-break-inside: avoid;
}
h1 {
margin: 3em 0 0 0;
font-size: 2em;
page-break-before: always;
line-height: 150%;
}
h2 {
margin: 1.5em 0 0 0;
font-size: 1.5em;
line-height: 135%;
}
h3 {
margin: 1.3em 0 0 0;
font-size: 1.3em;
}
h4 {
margin: 1.2em 0 0 0;
font-size: 1.2em;
}
h5 {
margin: 1.1em 0 0 0;
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
ol, ul {
margin: 1em 0 0 1.7em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
background-color: light-dark(#1a1a1a, #cfcfc2);
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-top: 1px solid light-dark(#1a1a1a, #cfcfc2);
border-bottom: 1px solid #1a1a1a;
border-bottom: 1px solid light-dark(#1a1a1a, #cfcfc2);
}
th, td {
padding: 0.25em 0.5em 0.25em 0.5em;
}
th {
border-top: 1px solid #1a1a1a;
border-top: 1px solid light-dark(#1a1a1a, #cfcfc2);
}
header {
margin-bottom: 4em;
text-align: center;
}
code {
white-space: pre-wrap;
}
span.smallcaps {
font-variant: small-caps;
}
/* This is the most compatible CSS, but it only allows two columns: */
div.column {
display: inline-block;
vertical-align: top;
width: 50%;
}
/* If you can rely on CSS3 support, use this instead: */
/* div.columns {
display: flex;
gap: min(4vw, 1.5em);
}
div.column {
flex: auto;
overflow-x: auto;
} */
div.hanging-indent {
margin-left: 1.5em;
text-indent: -1.5em;
}
ul.task-list {
list-style: none;
}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math {
display: block;
text-align: center;
margin: 0.5rem auto;
}
/* For title, author, and date on the cover page */
h1.title { }
p.author { }
p.date { }
nav#toc ol, nav#landmarks ol {
padding: 0;
margin-left: 1em;
}
nav#toc ol li, nav#landmarks ol li {
list-style-type: none;
margin: 0;
padding: 0;
}
a.footnote-ref {
vertical-align: super;
}
em, em em em, em em em em em {
font-style: italic;
}
em em, em em em em {
font-style: normal;
}
q {
quotes: "“" "”" "" "";
}
@media screen { /* Workaround for iBooks issue; see #6242 */
.sourceCode {
overflow: visible !important;
white-space: pre-wrap !important;
}
}