Skip to Content

Variables

Every custom property you can set, and where to set it.

Set them on Clover or anything around it, and they cascade. Where Clover sets one closer in, set yours on that element: the Canvas’s on .clover-canvas, Items’ on .clover-items, a template’s on its class, such as .clover-template-default. Your CSS wins over Clover’s layer there.

Colors

Try yours in the contrast guide.

VariablePurpose
--clover-color-primaryText, and the dark tone of a two-tone ring over a picture
--clover-color-primary-mutedQuieter text (descriptions, formats, status) and field edges
--clover-color-secondaryThe ground under Clover’s text: the Panel, menus, popups and fields
--clover-color-secondary-mutedHairlines between regions, and fills under the pointer
--clover-color-secondary-altQuieter words in a popover, such as a chapter’s title on the seek bar or a place’s date on the Map, and a closed accordion heading’s line
--clover-color-accentFocus rings, the selected item, the current tab and row, and a round control under the pointer
--clover-color-accent-textText in the accent: links, Read more, the selected item’s label
--clover-color-controlThe round controls’ fill, on a light page and a dark one
--clover-color-control-glyphThe round controls’ glyphs, and Exit full screen’s label

The media player

Video and sound play with light-on-dark controls, captions and Captions menu in every theme. The Chapters menu takes Clover’s colors, as the Canvas’s other menus do.

VariablePurpose
--clover-player-textText on the controls and in the Captions menu, and slider thumbs
--clover-player-trackThe seek and volume sliders’ tracks
--clover-player-track-shadowA shadow under those tracks
--clover-player-menu-surfaceThe Captions menu’s ground
--clover-player-menu-hoverAn option in the Captions menu under the pointer
--clover-player-caption-surfaceThe box behind captions
--clover-player-caption-textThe captions’ text
--clover-player-caption-edgeAn outline around the captions’ letters (a text-shadow)
--clover-transport-trackThe height of the seek and volume sliders’ tracks (set it on .clover-canvas-transport)
--clover-transport-gapThe gap cut in the seek bar where a chapter begins (set it on .clover-canvas-transport-seek-area)

Sizes and spaces

Every size and space follows from your 1rem: try another on Spacing or Fonts. Set the spaces on :root, where --clover-inset, --clover-control and --clover-picture are worked out from them.

VariablePurpose
--clover-space-3xsφ⁻⁴, the smallest space
--clover-space-2xsφ⁻³
--clover-space-xsφ⁻²: a thumbnail over its label
--clover-space-sφ⁻¹: within a component
--clover-space-mYour 1rem: between components in a region
--clover-space-lφ: a region’s inset
--clover-space-xlφ²
--clover-space-2xlφ³, the largest space
--clover-text-xsA badge: a duration on a thumbnail
--clover-text-sSecondary text: times, formats, captions under thumbnails, legends
--clover-text-mA section’s heading, as in the Panel’s accordion
--clover-text-lAn error’s headline, a sound Canvas’s label beside other Canvases, captions in a Body at least 47.5rem wide
--clover-controlEvery round control’s width and height (2.236rem)
--clover-insetThe room between a region’s edge and the components in it
--clover-pictureA chapter’s picture over the seek bar, and under the chapter playing in Contents and the Chapters menu (10.472rem)

Shape and motion

VariablePurpose
--clover-radiusCorners of tips, menus, thumbnails, hotspots, the Map and the rows in the Panel’s lists
--clover-radius-pillFully rounded corners, as on the round controls and Search’s field
--clover-transitionHow a control changes under the pointer and on focus; instant in high contrast
--clover-field-edgeA field’s edge: Search’s, the Transcript’s, CollectionSelect’s. Keep it 3:1 against the ground

The Body

Set --clover-body-height around a Body you compose, or on .clover-template-default or the Gallery lightbox’s .clover-template-lightbox-content. In Document, the Body fills its page: size Document with --clover-template-document-height. Set the rest on .clover-canvas itself: the Canvas declares their defaults, which win over any it would inherit. Where the system asks for reduced motion, Clover sets the controls’ durations to 0s, so set yours inside @media (prefers-reduced-motion: no-preference).

VariablePurpose
--clover-body-heightThe Body’s height
--clover-canvas-backgroundThe Canvas’s background, kept in full screen
--clover-canvas-insetA margin around the picture at home
--clover-canvas-controls-insetHow far the controls sit in from the Body’s edges
--clover-controls-leaveHow the controls leave when idle
--clover-controls-enterHow they come back
--clover-controls-tuckHow far they tuck toward their edge as they leave

Set --clover-canvas-background for each data-media:

.clover-canvas[data-media="image"] {
  --clover-canvas-background: #fff;
}
 
.clover-canvas[data-media="video"] {
  --clover-canvas-background: #000;
}

A sound recording plays on a ground of its artwork’s colors, over this background.

Set Items’ on .clover-items.

VariablePurpose
--clover-items-heightA slider’s picture height
--clover-items-sizeA grid’s cell (the Gallery’s size sets it)
--clover-items-gapThe space between items
--clover-items-insetRoom at a slider’s ends, so its first and last items clear its arrows
--clover-items-linesLines of an item’s label before it is cut
--clover-summary-linesLines of a Summary before Read more
--clover-content-search-topHow far below the top of its scrolling box Search’s field sticks
--clover-transcript-topHow far below the top of its scrolling box the Transcript’s find field sticks
--clover-logo-heightA provider’s logo height; its width follows
--clover-map-heightThe Map’s height
--clover-map-controls-insetHow far the Map’s controls sit in from its edges (set it on .clover-geomap)

Templates

VariablePurpose
--clover-template-document-heightDocument’s height, set on .clover-template-document
--clover-template-default-rail-widthThe width of Default’s thumbnail strip beside the Body, for a Manifest read down the page
--clover-title-weightThe weight of every title
--clover-template-lightbox-topYour sticky header’s height, so the Gallery’s lightbox holds under it
--clover-template-lightbox-insetRoom around the Gallery’s lightbox, inside the Gallery
--clover-template-lightbox-backdropWhat fills that room
--clover-template-lightbox-radiusThe lightbox’s corners