Component classes

Class names moss emits on auto-generated components. Target them directly in .moss/theme/style.css.

Class names moss emits on auto-generated components. Target them directly in .moss/theme/style.css.

/ $ delimiters included — HTML-escaped: an honest fallback that never shows a blank where an equation was written, and never deletes the delimiters of prose that merely looked like math. Requires [site].math (default on). |
| .moss-math-scroll | container | Horizontal-scroll container the build path wraps around typeset display math (svg.moss-math[data-moss-math="display"]). On a narrow viewport a wide equation scrolls inside this box at its natural size rather than shrinking to unreadability or pushing the page into horizontal overflow. Emitted only by P2's typeset path; the P1 <code> fallback is never wrapped. A display SVG left unwrapped still cannot overflow the page — it falls back to scaling down via max-width: 100%. |
| .moss-table-scroll | container | Horizontal-scroll wrapper the renderer emits around every Markdown table and every CSV/TSV embed (.moss-embed[data-type="table"]). Keeps the <table> semantically intact (unlike a display:block table, which breaks column layout and assistive-tech table semantics) while letting a wide table scroll inside its own box instead of pushing the page into horizontal overflow. tabindex="0" makes an overflowing table keyboard-scrollable. |
| .moss-scroll-dots | container | Position dots after a :::grid N {scroll} row, one per card. Added by the scroll-row runtime script, never by the build, so a page without scripts keeps the plain scrolling row. Cards in view carry .is-visible; the first of them is aria-current. Hidden when the row has nothing to scroll, and in print. |
| .moss-scroll-dots-viewport | container | Clipping wrapper directly inside .moss-scroll-dots, around .moss-scroll-dots-track. overflow: hidden crops the track to what's visible and touch-action: pan-y reserves the horizontal gesture for the pointer-driven scrub instead of ceding it to page panning. In dynamic mode (data-indicator="dynamic" on the ancestor, more than ten cards) it also fixes its inline-size to exactly seven dot-slots so a longer set of dots slides through a stable window; in the plain dots mode it sizes to its content and shows every dot. Added by the scroll-row runtime script, never by the build. |
| .moss-scroll-dots-track | container | Flex row of dot buttons inside .moss-scroll-dots-viewport. Slides via transform: translateX() driven by the --moss-scroll-dot-start custom property the script sets on navigation, over a 0.22s transition — suppressed while the reader is actively dragging (.moss-scroll-dots[data-scrubbing] on the ancestor, so the track tracks the pointer 1:1) or under prefers-reduced-motion: reduce. Added by the scroll-row runtime script, never by the build. |
| .moss-col-right | instance | Right-aligned table cell (<th>/<td>). Applied to a whole column when the author right-aligned it in GFM (\|--:\|) or when the column auto-detects as numeric, so figures register on their trailing digits. Pairs with the table's font-variant-numeric: tabular-nums. |
| .moss-col-center | instance | Center-aligned table cell (<th>/<td>). Applied to a whole column the author center-aligned in GFM (\|:-:\|). |
| .moss-search | chrome | Site-search overlay. Not emitted by the build — the client runtime (_moss/js/search.<hash>.js, shipped only when the build wrote a Pagefind index) constructs this subtree lazily on the first open, so a reader who never searches downloads no index and materializes no DOM. Opened by the nav's .nav-search-btn, by /, or by ⌘K/Ctrl+K. BEM children carry the interior: __backdrop (translucent page-coloured scrim, not an opaque modal takeover), __panel (top-anchored at 18vh, fixed 18px radius at any height), __field/__input, __progress (1px accent hairline, delayed 200ms so fast queries never flash it), __seam (hairline inset by the corner radius), __status (idle / no-matches line, sharing one vertical slot with the results so the panel never jumps), __results/__row/__link/__title/__excerpt. Selection is a 2px --moss-color-ui-accent left border plus a ~4% accent tint — never a solid fill block. <mark> inside __excerpt is Pagefind's own term highlighting, restyled to colour emphasis rather than a highlighter box. |
| .moss-footnotes | container | The document's endnote section, appended after the body by the renderer. Holds one <li id="fn-N"> per footnote in first-reference order, whatever depth the author wrote the definition at — a definition inside a blockquote or a list item is hoisted here too. Present only on pages that define at least one footnote. role="doc-endnotes" (DPUB-ARIA) names the region for assistive tech. |
| .moss-footnote-ref | instance | The in-body footnote marker: a superscript number linking down to its note. The number is first-reference order, not the author's label, so [^method] and [^1] both print as ordinals. A second marker for the same note takes id fnref-N-2, fnref-N-3, … so each has its own back-link. |
| .moss-footnote-backref | instance | The return arrow at the end of a note, linking back to the marker that sent the reader there. One per marker, so a note referenced twice ends with two arrows. A note nobody referenced has none. The arrow carries VARIATION SELECTOR-15 (︎) so mobile Chrome renders it as plain text rather than a coloured emoji. |
| .moss-sidenote | instance | A copy of an endnote, built in the browser by sidenotes.ts (never emitted by the build) and inserted immediately after its marker, which is aria-describedby-linked to it. Rendered only in a wide viewport's reserved gutter, where it floats beside the line that cites it; at narrow widths it stays display:none and the endnote section itself — lifted as the sticky bottom sheet — is the note's one presentation. |
| .moss-sidenote-number | instance | The ordinal at the head of a margin sidenote, repeating its marker's number. The one raised element inside the note, and what lets a reader tell two adjacent notes apart. |
| .moss-footnotes-title | instance | The endnote section's heading (localized en/zh-hans/zh-hant), inserted by sidenotes.ts — the pure renderer has no language. In flow always, not only on the lifted sheet, so the docked list and the sheet are the same pixels. Differentiated from the notes by type, not lines: the display face, small, muted, letter-spaced. |
| .moss-footnote-grab | instance | The lifted sheet's grabber: a full-width 24px touch strip drawing the standard pill, honest per iOS's rule because the sheet drags between two detents. A button (aria-label localized en/zh-hans/zh-hant), so the drag's destination — the expanded glossary — is equally reachable by tap, keyboard and screen reader. Hidden while the section rests in flow; its opacity rides the dock's --moss-sheet-away fade. |
| .moss-footnote-scroller | instance | The wrapper sidenotes.ts folds the endnote section's content into at init — layout-neutral in flow, the clipped scroll area on the lifted sheet. data-scrolly (present at the expanded detent only) is what re-enables native pan-y scrolling; below it the sheet itself owns every vertical gesture. |
| .moss-footnotes-cloned | state | The atomic licence, as a class: set by sidenotes.ts only when EVERY note gained a margin twin. Under the same screen-scoped media condition that renders the margin asides, it retires the endnote list from flow, tab order and the accessibility tree — the reader meets each note exactly once. One unclonable note and the class never lands. Print is outside the scope, so paper always gets the list. |
| .moss-footnotes-lifted | state | The endnote section as the bottom sheet: position: sticky; bottom: 0 plus a JS-driven height clip. The section never leaves flow — the peek clips to exactly the tapped note, dragging up expands to a 62vh glossary, and scrolling the page to the section's true place docks it back, chrome fading via --moss-sheet-away. One surface; nothing is cloned or re-parented. |
| .moss-footnote-landed | instance | The arrival wash, as a class: :target cannot reach a margin aside (no note id by design), so sidenotes.ts moves this class to whichever element the reader landed on — a margin aside on a #fn-N deep link, or the marker a backref returned them to. It fires only for an arrival the reader could not see coming: opening the sheet is not one, because the sheet shows the note. One element carries it at a time; same keyframes and reduced-motion contract as the li:target wash. |
| .container | chrome | The reading-width wrapper. It is the <article> on a page or post, and also the <nav class="main-nav container"> — one class, one measure, so the masthead lines up with the text under it. Site JS treats article.container as "the current document": immersive mode promotes its direct-child iframes, and the share card reads its data-share-cover. |
| .nav-content | chrome | The row inside the nav bar that holds .nav-left and .nav-right. It is the box the responsive nav measures itself against: when the two groups no longer fit on one line, nav-split.ts sets data-nav-split on this element and the links move to a second row. |
| .font-anchor | chrome | Positioning box for the reading-preferences control that sits at the end of an article's date line. Holds the trigger and the size pills; exists so the pills can be positioned against the trigger rather than the page. |
| .font-pill | instance | The reading-size control that opens from the font trigger. Each button carries data-scale; the one matching the current size additionally carries the bare class active. |
| .font-trigger | instance | The button that opens the reading-size pills. Its second class tracks the chosen size (size-std by default); moss's own theme no longer sizes the closed glyph by it (the trigger is one fixed size regardless of the reader's scale), but the co-class remains, so a theme can still restyle the trigger per size without reading state from JS. |
| .size-std | instance | Co-class on the font trigger reflecting the current reading size (size-std at the default). The default theme's closed glyph is one fixed size regardless of this class; it remains a hook for a theme that wants to show the active size on the closed control. |
| .cover-thumb | instance | The still frame stacked over a video cover. It is what the reader sees until they hover: card-video.ts fades this image out and starts the <video> underneath, and fades it back in on leave. Emitted only for video covers, inside .moss-card-cover or .moss-collection-cover. |
| .media-item | instance | One tile on the media-collection page. fullscreen.ts collects these in document order to build the lightbox playlist, so their order on the page is the order the arrows step through. |
| .lightbox-content | chrome | The stage of the media-collection lightbox. Holds all three players at once; fullscreen.ts unhides whichever one matches the opened item's data-type and leaves the others hidden. |
| .lightbox-image | instance | The lightbox's image player. Emitted empty and hidden; its src is filled in when an image item opens. |
| .lightbox-video | instance | The lightbox's video player. Emitted empty and hidden; paused and cleared when the lightbox closes so audio never outlives the overlay. |
| .lightbox-iframe | instance | The lightbox's embed surface, for media items that are an external player rather than a file. |
| .lightbox-title | instance | Caption line under the lightbox stage. Filled from the open item's data-title. |
| .lightbox-article-link | instance | The way back from a media tile to the article it appeared in. Its href is filled from the open item's data-article, and it is hidden when the item has none. |
| .lightbox-close | instance | Dismisses the media-collection lightbox. Escape does the same thing. |
| .lightbox-next | instance | Steps forward through the .media-item playlist, wrapping at the end. Carries lightbox-nav as well, which styles both arrows together. |
| .lightbox-prev | instance | Steps backward through the .media-item playlist, wrapping at the start. |
| .comments-toggle | instance | The <summary> that opens and closes the comment thread. Its <span> holds the count, which the client rewrites as comments arrive — so the span is a contract of its own, not decoration. |
| .comments-icon | instance | Speech-bubble icon inside the comments disclosure summary. |
| .comments-chevron | instance | Disclosure arrow inside the comments summary. Rotates with the <details> open state; the rotation is the only affordance saying the section collapses. |
| .comment-list | container | The top-level comment thread, rendered server-side at build time and then hydrated in place. New comments are appended here by the client rather than replacing the list, so server-rendered and live comments share one shape. |
| .comment-item | instance | One comment. Holds a .comment-header, a .comment-body, and — if it has replies — a nested .comment-replies. The data-comment-* pair is how the client matches a live comment to the one already on the page instead of rendering it twice. |
| .comment-header | instance | Attribution row of a single comment: who wrote it, when, and where it came from. |
| .comment-body | instance | The comment text itself, separated from the attribution header so the two can be styled independently. |
| .comment-author | instance | The commenter's name, linked to the URL they supplied. Always carries rel=nofollow ugc — the link is reader-supplied content, not an endorsement by the site. | | `.comment-date` | instance | Publication time of a comment, as a `<time>` element carrying a machine-readable `datetime`. | | `.comment-source-link` | instance | Link back to where a syndicated comment originated, for comments moss did not receive directly. | | `.comment-replies` | container | Nested replies under a comment, same shape as `.comment-list`. Emitted only when a comment has replies; the client creates one on demand when the first reply arrives. | | `.comment-reply-btn` | instance | Moves the comment form under this comment so the reply is written where it will appear. Emitted only for comments moss can reply to; a syndicated comment gets a link out to its own platform instead. | | `.review-colophon` | standalone | Footer block of a review page carrying the details of the work being reviewed. A `<footer>` because it describes the subject rather than continuing the argument. | | `.review-colophon-details` | instance | Container for the reviewed work's identifying fields inside the colophon. | | `.review-biblio` | instance | Full bibliographic citation of the reviewed work, formatted as one line. | | `.review-rating` | instance | The reviewer's own rating of the work. | | `.review-community-rating` | instance | Aggregate rating carried over from the source catalogue, kept visually distinct from the reviewer's own so the two are never read as one judgement. | | `.review-links` | instance | Navigation to the reviewed work elsewhere — catalogue entries, purchase pages, the publisher. | | `.review-sep` | instance | Separator between review links. An element rather than a `::before` so it can be hidden when links wrap. | | `.review-colophon-title` | instance | Title of the work being reviewed — not the title of the review itself, which is the page heading. | | `.review-colophon-subtitle` | instance | Subtitle of the reviewed work, rendered only when one is present. | | `.review-colophon-identity` | instance | The reviewed work's identifier (ISBN, DOI or equivalent), which is what makes a review resolvable to a specific edition. | | `.page-wrapper` | container | Outermost wrapper of a generated media-collection page. | | `.main-content` | instance | Primary content column of a media-collection page, inside the page wrapper. | | `.media-grid` | instance | The grid of media items on a media-collection page. | | `.media-overlay` | instance | Caption overlay drawn over a media thumbnail, typically revealed on hover or focus. | | `.media-title` | instance | Title of a single media item, inside its overlay. | | `.lightbox` | standalone | Full-screen viewer for a media collection. Ships `hidden` and `tabindex=`-1 so it is out of the tab order until opened. |
| .lightbox-caption | instance | Caption area of the lightbox, describing the item currently shown. |
| .lightbox-nav | instance | Previous/next control in the lightbox. Carries a direction co-class (lightbox-prev / lightbox-next) and always an aria-label, since the visible glyph is a chevron. |
| .latest-sidebar | standalone | Sidebar listing the most recent entries. A <nav> because it is a navigational aid, not part of the page's argument. |
| .sidebar-more | instance | Link from the latest-entries sidebar to the full listing. |
| .active | instance | Bare state co-class marking the currently-selected item in a set — the current page in .nav-links, the current size in .font-pill. Style it scoped to its container (.nav-links .active), never on its own. |
| .has-sidebar-layout | instance | Marks a page laid out with a sidebar, so the main column can reserve room for it without the sidebar having rendered yet. |
| .wikilink | instance | Marks a link that came from [[wikilink]] syntax rather than a markdown link, so a theme can distinguish internal cross-references from ordinary links. |
| .moss-term-role | instance | Section heading on a term page (e.g. /people//) for one name-list field's group of works, when the kind names more than one field. |
| .moss-place-breadcrumb | instance | Ancestor trail on a place page (e.g. /places//), oldest ancestor first, reusing the masthead's own .breadcrumb-segment/.breadcrumb-separator classes. Absent for a root place with no gazetteer parent, and for every non-place term. |
| .moss-place-children | instance | Direct child places on a place page, each with its roll-up-inclusive member count. Absent for a leaf place with no children, and for every non-place term. |
| .moss-place-line | instance | The automatic place line under a page's byline, generated from location: — every declared place, linked to its term page. Absent when location: is unset, or the site declares no place-typed kind. No opt-out: this is generated chrome with no authored equivalent. |
| .moss-place-map | instance | Offline SVG map on a place term page or explicit style:map embed. Geography and privacy precision come from .moss/places.toml; no browser network request is made. |
| .moss-place-map-frame | container | Placement wrapper for an explicit map embed. Carries the standard width, alignment and size attributes while the semantic map figure remains self-contained. |
| .moss-place-map-caption | instance | Optional caption below an explicitly embedded place map. |
| .moss-place-locator | container | Compact sparse map after an authored page's location line when [site].locator = "align-right"; collapses into the reading flow on narrow screens. |
| .moss-places-viewport | instance | The focusable, pannable region the explorer lays over the static figure's box once the world map has loaded. Captures drag, wheel, pinch and arrow-key gestures; absent (the static SVG alone) until then or if the data fetch fails. |
| .moss-places-world | instance | Carries the world's own decoded raster (raster.ts's splitMapSvg/rasterizeOrFallback, built from the fetched world.svg) plus its live, unfiltered rivers overlay, and the CSS transform the camera drives. |
| .moss-places-world-surface | instance | The world layer's own decoded raster — an <img>, or (a browser lacking Blob/HTMLImageElement.decode() support) the live, unrasterised <svg> itself. Re-decoded at a sharper size on settle, up to a capped zoom past which it is left to go soft under whatever regional tiles cover that area. |
| .moss-places-rivers | instance | A live, unfiltered overlay of just the [data-map-layer="rivers"] group, extracted from the world or a regional tile's own fetched SVG (raster.ts's splitMapSvg) so --moss-place-river-scale keeps working — a rasterised sibling has no access to the page's own custom properties. One per moss-places-world and one per moss-places-tile that actually drew a river. |
| .moss-places-tiles | instance | Regional detail layer above moss-places-world: once the camera's screen scale passes the world ceiling, the tiles tiles.json lists for the current view are fetched, cached and positioned here at their own 10° cell. |
| .moss-places-tile | instance | One fetched, decoded regional tile: a positioned wrapper (tiles.ts's TileLayer) carrying the tile's own raster image and, if the tile drew one, its own moss-places-rivers overlay. |
| .moss-places-labels | container | Decorative place-name layer, above the map and below moss-places-markers. Rebuilt on every camera settle (skipped mid-gesture, matching moss-places-world's own [data-gesture] window) from labels.json's cities, mountain ranges, peaks and rivers, greedily placed by priority within an area budget and never overlapping another label, a marker, the controls or the card row. |
| .moss-places-label | instance | One placed label's text. hidden when the greedy placement pass this settle did not have room for it — present in the DOM either way, so repeated camera settles never rebuild the underlying text/measurement work. |
| .moss-places-label-dot | instance | A city label's own anchor point, shown only when its name text had to move aside from a work marker sitting on the exact place — hidden (the marker IS the dot) when the label sits beside a marker whose own place it names, and hidden along with the label itself when dropped entirely. |
| .moss-places-markers | instance | Marker and ring layer, above the map layers. Rebuilt on every camera settle from the works currently in scope and view. |
| .moss-places-marker | instance | One button per work, or per cluster of works mergeByProximity merges at the current zoom. Clicking a single-work marker selects it; clicking a separable cluster zooms to separate it; clicking a cluster that stays merged at the detail ceiling blooms it into a ring instead. |
| .moss-places-ring-leg | instance | A hairline from a bloomed ring's anchor to one of its own moss-places-ring-dot buttons, evenly spaced clockwise from 12 o'clock. |
| .moss-places-ring-dot | instance | One real, individually-clickable button per work in a bloomed ring — a coincident cluster too close to ever separate by zooming, rendered as a small circle of dots instead of staying a single merged marker. Row order matches the scoped card row, both derived from the same work order. |
| .moss-places-controls | container | Top-right floating control stack: the zoom capsule and the reset-to-cover circle, sharing one glass material. |
| .moss-places-capsule | container | The two-cell zoom pill. Carries the glass material and the capsule's own rounded ends; its two moss-places-control cells are transparent so the capsule's background shows through, divided by one hairline. |
| .moss-places-control | instance | One control button: a 36px visible circle with a 44px hit area (an inset pseudo-element extends it without growing the painted size), round focus/hover/pressed states following that shape. |
| .moss-places-chip | container | Top-left floating breadcrumb scope chip, sharing moss-places-controls' own glass material. Shows the trail from every work down to the current scope (or the selected work, or an open ring's own member count) and is the map's one hierarchy control: an earlier crumb widens back out, the terminal crumb's own chevron digs into its children. |
| .moss-places-chip-trail | instance | Flex row of moss-places-chip-crumb/moss-places-chip-sep pairs, rebuilt whole on every scope, selection or ring change. |
| .moss-places-chip-crumb | instance | One crumb: a <button> when clicking it widens the scope (or opens the terminal crumb's own menu), a plain <span> for a leaf terminal crumb (a selected work, an open ring's count, or a place with no children). display: flex; align-items: center keeps every crumb's text on the same baseline as its neighbouring moss-places-chip-sep, regardless of which element is a real button. |
| .moss-places-chip-sep | instance | The › between two crumbs, decorative (aria-hidden). |
| .moss-places-chip-chevron | instance | Inline-SVG chevron inside the terminal crumb, present only when places lie under the current scope; flips 180° when its own crumb's aria-expanded is true. |
| .moss-places-chip-collapsible | instance | Wraps every crumb between the trail's first and terminal one. Always in the DOM; places-explorer.css hides it below a phone-width breakpoint, where moss-places-chip-ellipsis shows in its place — a CSS-only swap, nothing JS toggles on resize, except data-expanded, which moss-places-chip-ellipsis itself sets. |
| .moss-places-chip-ellipsis | instance | The phone-width stand-in for moss-places-chip-collapsible, hidden above that breakpoint. A real button, not decorative text: activating it sets its own aria-expanded and toggles moss-places-chip-collapsible's data-expanded, so every crumb the phone width would otherwise hide stays reachable by keyboard or touch. |
| .moss-places-chip-menu | container | The terminal crumb's dig-down menu: the current scope's own direct children, sharing the chip's glass material. Opens on the terminal crumb's click, closes on Escape, an outside click, or choosing an item; arrow keys move a roving tabindex between moss-places-chip-menu-items. |
| .moss-places-chip-menu-item | instance | One child place, sorted by work count descending then name (the same order scope.ts's childrenOf already gives a place term page's own children list). Hovering or focusing it exempts its own works from the marker layer's dimming attribute — the same one a bloomed ring uses — and dims the rest; choosing it narrows the scope to that place. |
| .moss-places-chip-menu-count | instance | A menu item's own locale-formatted work count, in parentheses. |
| .moss-places-cards | container | The horizontal row of works currently in scope and in view, floating along the bottom of the map. Each child is a moss-card, sorted by date descending then title. |
| .moss-places-card-select | instance | Wraps a moss-places-cards card's own moss-card-row: the whole card's click target, toggling its moss-places-card-detail open or closed. |
| .moss-places-card-detail | instance | A selected moss-places-cards card's own expand-in-place detail: description, place names, companion links and a link to the article. Collapsed (and inert) on every other card. |
| .moss-card-meta-author | instance | The author names on a collapsed moss-places-cards card's one-line meta, joined with the language's list separator. It shrinks and is ellipsised when the line is too long; the date beside it never is. |
| .moss-card-meta-date | instance | The date on a collapsed moss-places-cards card's meta line. It carries its own leading no-break-space, middle dot, no-break-space separator when an author precedes it, and never shrinks or wraps. |
| .moss-places-chip-scope | instance | The two-segment "This article | All articles" switch that replaces the breadcrumb trail on an article's own map. The current segment carries aria-current. |
| .moss-places-chip-scope-option | instance | One segment of the moss-places-chip-scope switch. |
| .immersive-fullscreen-btn | standalone | The expand control moss adds over an embedded iframe (a places map or any embed that goes fullscreen); inside fullscreen it is the exit control, a solid 36px circle with the same shadow as the map's own zoom controls so it reads over any map colour. |
| .moss-places-card-read | instance | Link to the work's own article, inside an expanded card's detail region. |
| .moss-places-status | standalone | Visually-hidden polite live region announcing scope and selection changes — never pan or zoom, and never a visible status line. |
| .moss-places-embed-frame | instance | The lazy-hydrated iframe embed.ts creates behind a style:map/locator poster once it nears the viewport (or on tap, under Save-Data). Transparent and non-interactive until it cross-fades in. |
| .moss-places-embed-frame--settled | instance | Added once the iframe's own explorer posts back ready: cross-fades it over the static poster. Never added at all when the fetch fails or times out — the poster stays exactly as it was. |
| .moss-places-coop-hint | instance | map.ts's one-time nudge toward the zoom modifier: appended to the viewport the first time a reader wheels a COOPERATIVE (collapsed-embed) map without it held, since a bare wheel there deliberately does nothing — gestures.ts leaves it for the page's own scroll. Never appears on the full explorer page, which has no competing scroll to defer to. |
| .moss-places-coop-hint--visible | instance | Added one frame after the hint mounts (so its own opacity transition runs) and removed a couple of seconds later as the hint auto-dismisses — never left present once dismissed. |