---
title: "Variables"
description: "Every custom property you can set on Clover, what it does and where to set it: colors, spaces and text sizes, the Body, Items and templates."
url: https://clover.iiif.library.northwestern.edu/docs/styling/variables
version: "4"
---

# 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](https://clover.iiif.library.northwestern.edu/docs/styling#stylesheets) there.

## Colors

Try yours in the [contrast guide](https://clover.iiif.library.northwestern.edu/docs/styling/colors#contrast-guide).

| Variable                         | Purpose                                                                                                                                   |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `--clover-color-primary`         | Text, and the dark tone of a two-tone ring over a picture                                                                                 |
| `--clover-color-primary-muted`   | Quieter text (descriptions, formats, status) and field edges                                                                              |
| `--clover-color-secondary`       | The ground under Clover’s text: the Panel, menus, popups and fields                                                                       |
| `--clover-color-secondary-muted` | Hairlines between regions, and fills under the pointer                                                                                    |
| `--clover-color-secondary-alt`   | Quieter 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-accent`          | Focus rings, the selected item, the current tab and row, and a round control under the pointer                                            |
| `--clover-color-accent-text`     | Text in the accent: links, Read more, the selected item’s label                                                                           |
| `--clover-color-control`         | The round controls’ fill, on a light page and a dark one                                                                                  |
| `--clover-color-control-glyph`   | The 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.

| Variable                          | Purpose                                                                                             |
| --------------------------------- | --------------------------------------------------------------------------------------------------- |
| `--clover-player-text`            | Text on the controls and in the Captions menu, and slider thumbs                                    |
| `--clover-player-track`           | The seek and volume sliders’ tracks                                                                 |
| `--clover-player-track-shadow`    | A shadow under those tracks                                                                         |
| `--clover-player-menu-surface`    | The Captions menu’s ground                                                                          |
| `--clover-player-menu-hover`      | An option in the Captions menu under the pointer                                                    |
| `--clover-player-caption-surface` | The box behind captions                                                                             |
| `--clover-player-caption-text`    | The captions’ text                                                                                  |
| `--clover-player-caption-edge`    | An outline around the captions’ letters (a `text-shadow`)                                           |
| `--clover-transport-track`        | The height of the seek and volume sliders’ tracks (set it on `.clover-canvas-transport`)            |
| `--clover-transport-gap`          | The 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](https://clover.iiif.library.northwestern.edu/docs/styling/spacing#the-scale) or [Fonts](https://clover.iiif.library.northwestern.edu/docs/styling/fonts#text-sizes). Set the spaces on `:root`, where `--clover-inset`, `--clover-control` and `--clover-picture` are worked out from them.

| Variable             | Purpose                                                                                                            |
| -------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `--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-m`   | Your `1rem`: between components in a region                                                                        |
| `--clover-space-l`   | φ: a region’s inset                                                                                                |
| `--clover-space-xl`  | φ²                                                                                                                 |
| `--clover-space-2xl` | φ³, the largest space                                                                                              |
| `--clover-text-xs`   | A badge: a duration on a thumbnail                                                                                 |
| `--clover-text-s`    | Secondary text: times, formats, captions under thumbnails, legends                                                 |
| `--clover-text-m`    | A section’s heading, as in the Panel’s accordion                                                                   |
| `--clover-text-l`    | An error’s headline, a sound Canvas’s label beside other Canvases, captions in a Body at least 47.5rem wide        |
| `--clover-control`   | Every round control’s width and height (2.236rem)                                                                  |
| `--clover-inset`     | The room between a region’s edge and the components in it                                                          |
| `--clover-picture`   | A chapter’s picture over the seek bar, and under the chapter playing in Contents and the Chapters menu (10.472rem) |

## Shape and motion

| Variable               | Purpose                                                                                                                                                                           |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--clover-radius`      | Corners of tips, menus, thumbnails, hotspots, the Map and the rows in the Panel’s lists                                                                                           |
| `--clover-radius-pill` | Fully rounded corners, as on the round controls and Search’s field                                                                                                                |
| `--clover-transition`  | How a control changes under the pointer and on focus; instant in [high contrast](https://clover.iiif.library.northwestern.edu/docs/styling/colors#high-contrast)                  |
| `--clover-field-edge`  | A field’s edge: Search’s, the Transcript’s, CollectionSelect’s. Keep it [3:1](https://clover.iiif.library.northwestern.edu/docs/styling/colors#contrast-guide) against the ground |

## The Body

Set [`--clover-body-height`](https://clover.iiif.library.northwestern.edu/docs/styling/spacing#the-body) 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)`.

| Variable                         | Purpose                                           |
| -------------------------------- | ------------------------------------------------- |
| `--clover-body-height`           | The Body’s height                                 |
| `--clover-canvas-background`     | The Canvas’s background, kept in full screen      |
| `--clover-canvas-inset`          | A margin around the picture at home               |
| `--clover-canvas-controls-inset` | How far the controls sit in from the Body’s edges |
| `--clover-controls-leave`        | How the controls leave when idle                  |
| `--clover-controls-enter`        | How they come back                                |
| `--clover-controls-tuck`         | How far they tuck toward their edge as they leave |

Set `--clover-canvas-background` for each [`data-media`](https://clover.iiif.library.northwestern.edu/docs/styling/classes#classes-and-states):

```css
.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.

## Items, Summary, Logo, Map and Search

Set Items’ on [`.clover-items`](https://clover.iiif.library.northwestern.edu/docs/styling/classes#classes-and-states).

| Variable                      | Purpose                                                                       |
| ----------------------------- | ----------------------------------------------------------------------------- |
| `--clover-items-height`       | A slider’s picture height                                                     |
| `--clover-items-size`         | A grid’s cell (the Gallery’s `size` sets it)                                  |
| `--clover-items-gap`          | The space between items                                                       |
| `--clover-items-inset`        | Room at a slider’s ends, so its first and last items clear its arrows         |
| `--clover-items-lines`        | Lines of an item’s label before it is cut                                     |
| `--clover-summary-lines`      | Lines of a Summary before Read more                                           |
| `--clover-content-search-top` | How far below the top of its scrolling box Search’s field sticks              |
| `--clover-transcript-top`     | How far below the top of its scrolling box the Transcript’s find field sticks |
| `--clover-logo-height`        | A provider’s logo height; its width follows                                   |
| `--clover-map-height`         | The Map’s height                                                              |
| `--clover-map-controls-inset` | How far the Map’s controls sit in from its edges (set it on `.clover-geomap`) |

## Templates

| Variable                               | Purpose                                                                                               |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| `--clover-template-document-height`    | Document’s height, set on `.clover-template-document`                                                 |
| `--clover-template-default-rail-width` | The width of Default’s thumbnail strip beside the Body, for a Manifest read down the page             |
| `--clover-title-weight`                | The weight of every [title](https://clover.iiif.library.northwestern.edu/docs/styling/fonts#headings) |
| `--clover-template-lightbox-top`       | Your sticky header’s height, so the Gallery’s lightbox holds under it                                 |
| `--clover-template-lightbox-inset`     | Room around the Gallery’s lightbox, inside the Gallery                                                |
| `--clover-template-lightbox-backdrop`  | What fills that room                                                                                  |
| `--clover-template-lightbox-radius`    | The lightbox’s corners                                                                                |