CSS contract

This page is generated from MDLeaf’s source code, so it always matches the app. Contract version:

1

.

Stability policy: within a contract version, properties and classes are only ever added, never renamed or removed. A breaking change increases the version, and this page keeps a migration note.

Cascade

Stylesheets apply in this order; later ones win at equal specificity:

1. KaTeX’s stylesheet
2. The bundled fonts
3. MDLeaf’s base stylesheet: contract defaults and all structural rules
4. Your theme
5. The page geometry from the profile (@page size and margins, and the read-only layout properties)
6. Preview chrome (screen only: page gaps, shadows, zoom)

Because the profile comes after the theme, page size and margins always come from the profile. A theme may still style other @page properties.

html has the class mdl-mode-draft or mdl-mode-page; when printing it is always page mode.

Custom properties

Set these on :root. The defaults are those of the base stylesheet.

Property	Group	Default	Description	Read-only
—mdl-font-body	Fonts	“Source Serif 4 Variable”, Georgia, serif	Body text family
—mdl-font-heading	Fonts	var(—mdl-font-body)	Heading family
—mdl-font-mono	Fonts	“JetBrains Mono Variable”, ui-monospace, monospace	Code family
—mdl-font-size	Fonts	11pt	Base body size
—mdl-line-height	Fonts	1.45	Body line height
—mdl-color-text	Colours	#1b1b1b	Body text
—mdl-color-muted	Colours	#5f6368	Secondary text (captions, TOC leaders)
—mdl-color-accent	Colours	#1a4d8f	Links and accents
—mdl-color-border	Colours	#d0d4d9	Rules and borders
—mdl-color-page-bg	Colours	#ffffff	Page background
—mdl-heading-color	Headings	var(—mdl-color-text)	Heading colour
—mdl-heading-weight	Headings	700	Heading weight
—mdl-h1-size	Headings	2em	Heading 1 size
—mdl-h2-size	Headings	1.6em	Heading 2 size
—mdl-h3-size	Headings	1.3em	Heading 3 size
—mdl-h4-size	Headings	1.1em	Heading 4 size
—mdl-h5-size	Headings	1em	Heading 5 size
—mdl-h6-size	Headings	0.9em	Heading 6 size
—mdl-heading-space-before	Headings	1.2em	Space above headings
—mdl-heading-space-after	Headings	0.5em	Space below headings
—mdl-paragraph-spacing	Blocks	0.6em	Space between paragraphs
—mdl-blockquote-border	Blocks	3px solid var(—mdl-color-border)	Quote rule
—mdl-blockquote-color	Blocks	var(—mdl-color-muted)	Quote text
—mdl-code-font-size	Code	0.9em	Inline and block code size
—mdl-code-bg	Code	#f4f5f7	Code background
—mdl-code-color	Code	var(—mdl-color-text)	Code text
—mdl-code-radius	Code	3px	Corner radius
—mdl-code-padding	Code	0.75em 1em	Code block padding
—mdl-code-keyword	Code	#cf222e	Highlighted keywords
—mdl-code-string	Code	#0a3069	Strings, regular expressions, URLs
—mdl-code-comment	Code	var(—mdl-color-muted)	Comments
—mdl-code-number	Code	#0550ae	Numbers, booleans, null and other constants
—mdl-code-name	Code	#8250df	Function and macro names
—mdl-code-type	Code	#953800	Types, classes, namespaces, HTML tags
—mdl-code-property	Code	#0550ae	Properties, keys and attributes
—mdl-code-meta	Code	#6639ba	Annotations, decorators, preprocessor lines
—mdl-code-inserted	Code	#116329	Added lines (diff)
—mdl-code-deleted	Code	#82071e	Removed lines (diff)
—mdl-table-font-size	Tables	0.95em	Table text
—mdl-table-border	Tables	1px solid var(—mdl-color-border)	Cell borders
—mdl-table-cell-padding	Tables	0.35em 0.6em	Cell padding
—mdl-table-header-bg	Tables	transparent	Header row background
—mdl-table-stripe-bg	Tables	transparent	Even-row background
—mdl-running-font	Running	var(—mdl-font-body)	Header/footer family
—mdl-running-font-size	Running	9pt	Header/footer size
—mdl-running-color	Running	var(—mdl-color-muted)	Header/footer colour
—mdl-toc-leader	TOC	”.”	Leader character ("" = none)
—mdl-toc-indent	TOC	1.2em	Indent per level
—mdl-toc-title-size	TOC	var(—mdl-h2-size)	TOC title size
—mdl-draft-marker-color	Draft	#9aa0a6	Page-break and directive pill colour (draft only)
—mdl-page-width	Layout	210mm	Page width (from the profile)	yes
—mdl-page-height	Layout	297mm	Page height (from the profile)	yes
—mdl-margin-top	Layout	25mm	Top margin (from the profile)	yes
—mdl-margin-right	Layout	25mm	Right margin (from the profile)	yes
—mdl-margin-bottom	Layout	25mm	Bottom margin (from the profile)	yes
—mdl-margin-left	Layout	25mm	Left margin (from the profile)	yes
—mdl-content-width	Layout	160mm	Content-area width (from the profile)	yes
—mdl-content-height	Layout	247mm	Content-area height (from the profile)	yes

Classes and structure

Selector	Modes	Meaning
html.mdl-mode-draft / html.mdl-mode-page	draft, page	Current preview mode
.mdl-document	draft, page	Root <article> of rendered content
.mdl-page	page	One page (alias class added to .pagedjs_page)
.mdl-page—first	page	Physical page 1
.mdl-page—no-header, .mdl-page—no-footer	page	Header/footer hidden on that page
[data-mdl-page]	page	Displayed page number on .mdl-page
.mdl-page-header, .mdl-page-footer	page	Running header/footer containers
.mdl-slot, .mdl-slot—left, .mdl-slot—center, .mdl-slot—right	page	Header/footer slots
.mdl-pagebreak, .mdl-pagebreak-label	draft, page	Page-break marker (label visible in draft only)
.mdl-directive, .mdl-directive—header, —footer, —hide, —pagenumber, .mdl-directive-pill	draft, page	Directive markers (pill visible in draft only)
.mdl-toc, .mdl-toc-title, .mdl-toc-list, .mdl-toc-item, .mdl-toc-item—level-1 … —level-6, .mdl-toc-link, .mdl-toc-text, .mdl-toc-leader, .mdl-toc-page	draft, page	Table of contents
.mdl-img, .mdl-img[data-align], .mdl-img-block, .mdl-img-missing	draft, page	Images
.mdl-math, .katex, .katex-display	draft, page	Math
.mdl-keep, .mdl-keep—heading, .mdl-force-break	page	Keep-together wrappers (themes may add break-* rules to them)
section.footnotes, sup.footnote-ref, a.footnote-backref	draft, page	Footnotes (from markdown-it-footnote)
ul.contains-task-list, li.task-list-item, input.task-list-item-checkbox	draft, page	Task lists
.mdl-tok-keyword, .mdl-tok-string, .mdl-tok-comment, .mdl-tok-number, .mdl-tok-name, .mdl-tok-type, .mdl-tok-property, .mdl-tok-meta, .mdl-tok-inserted, .mdl-tok-deleted, .mdl-tok-heading, .mdl-tok-strong, .mdl-tok-emphasis	draft, page	Highlighted tokens inside fenced code with a known language
h1–h6, p, a, ul, ol, blockquote, pre > code, code, table, thead, th, td, hr, img	draft, page	Standard elements inside .mdl-document

Themes may also use paged-media CSS: break-before, break-after, break-inside, orphans, widows, @page :first and @page margin boxes.

Structure of a page

<div class="pagedjs_page mdl-page mdl-page--first" data-mdl-page="1">
  …
  <div class="pagedjs_pagebox">
    <div class="pagedjs_area">
      <article class="mdl-document">…your content…</article>
    </div>
    <div class="mdl-page-header">
      <div class="mdl-slot mdl-slot--left">…</div>
      <div class="mdl-slot mdl-slot--center">…</div>
      <div class="mdl-slot mdl-slot--right">…</div>
    </div>
    <div class="mdl-page-footer">…same three slots…</div>
  </div>
</div>

Structure of a table of contents

<nav class="mdl-toc">
  <div class="mdl-toc-title" role="heading" aria-level="2">Contents</div>
  <ol class="mdl-toc-list">
    <li class="mdl-toc-item mdl-toc-item--level-2">
      <a class="mdl-toc-link" href="#results">
        <span class="mdl-toc-text">Results</span>
        <span class="mdl-toc-leader" aria-hidden="true"></span>
        <span class="mdl-toc-page">7</span>
      </a>
    </li>
  </ol>
</nav>

Offline-safe themes

• In a file theme, embed fonts and images as data: URLs.
• A URL theme caches only its own text; fonts it loads from elsewhere need a network.

Download the starter stylesheet