The player and the Listen block take their colours and sizes from custom properties. The ones below are public: each keeps its name within a major version. Any other --riff-* property is internal and may change.
The player
Set on the player's root, #riff, so they reach the bar and Now Playing and nothing else. --riff-bar-h is on :root, since the page keeps room for the bar.
| Property | Description |
|---|---|
--riff-bar-h64px | The height of the player bar. The page keeps this much room at its end so the bar never covers the last line. |
--riff-bg#030303 | The background of Now Playing. |
--riff-surface#212121 | The bar, the Up next sheet, tooltips, and the Song and Video switch. |
--riff-fg#fff | The player's text and icons, and the played part of the seek bar in Now Playing. |
--riff-fg-2rgb(255 255 255 / 0.7) | Secondary text, such as the artist, the times and the format, and toggles that are off. |
--riff-fg-3rgb(255 255 255 / 0.5) | The unselected side of the Song and Video switch. |
--riff-linergb(255 255 255 / 0.1) | Dividers and the unplayed part of the seek bar. |
--riff-hoverrgb(255 255 255 / 0.1) | The wash behind a control under the pointer, and behind chips, the current Up next item, and artwork while it loads. |
--riff-accent#ffb020 | The played part of the seek bar in the bar, its knob, the format label, and the glow behind the cover. A theme sets it in theme.json under settings.custom.riff.accent, and the riff_accent filter has the last word. |
The Listen block
Set on the block's root, .riff-app. The block's colour settings in the editor set its background and text colour directly, on top of these.
| Property | Description |
|---|---|
--riff-app-bg#f6f6f6 | The Listen block's background. |
--riff-app-surface#fff | The album's track list and the now-playing card in the Listen block. |
--riff-app-ink#1e1e1e | The Listen block's text. |
--riff-app-ink-2#656a71 | Secondary text in the Listen block. |
--riff-app-line#d9d9d9 | Borders in the Listen block, and the space artwork fills while it loads. |
--riff-app-accent#3858e9 | Links, play buttons, focus rings, and the title of the card under the pointer in the Listen block. |
--riff-app-accent-deep#213fd4 | The accent under the pointer or in focus. |
--riff-app-accent-tint#eff2ff | The background of the row playing. |
The accent
A theme sets the player's accent in theme.json; any plugin can through the riff_accent filter, which has the last word.
{
"settings": {
"custom": {
"riff": { "accent": "#e26f56" }
}
}
}A theme or plugin can set the others in its own stylesheet, with a selector one step more specific than the player's #riff so the order the stylesheets load in does not matter.
body #riff {
--riff-bg: #101010;
--riff-surface: #1c1c1c;
}