mirror of
https://github.com/jgm/pandoc.git
synced 2026-08-25 01:36:45 +00:00
* 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
228 lines
4.7 KiB
CSS
228 lines
4.7 KiB
CSS
/* 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;
|
||
}
|
||
}
|