Two independent choices shape the public display: the page layout arranges the player, chapters and transcript, and the player style changes the audio bar itself. Both are global settings with per-site overrides.
Page layouts
| Layout | Description |
|---|---|
| Classic (default) | Player on top, chapter rail beside the transcript. |
| Sidecar | Player, chapters and search stick in a left column; the transcript scrolls alongside, screencast-app style. |
| Document | A reading view: slim sticky player, chapters rendered as section headings inline in the transcript, full-page text flow. |
Placement on the page decides whether the automatic rendering appears before or after the page's own content.
The Player shows the Classic layout with the Slate style.
Player styles
Styles apply to audio. Video keeps the browser's native controls.
| Style | Description |
|---|---|
| Basic (default) | The browser's standard audio player, untouched. |
| Slate | Full-width dark bar with a large play button and a seekable waveform visualization. |
| Chapter timeline | A progress bar segmented proportionally by chapter. Hover shows titles, click jumps. |
| Compact | A slim single-line pill with a small play button, thin progress line and times. |
| Card | A cover-art card using the media thumbnail, or a generated backdrop, with an overlay play button. |
These are structural layouts, not colour schemes. Every style reads the same CSS variables, so a theme can recolour any of them. The root element also carries a class such as oral-archivist-player--slate for targeted overrides.
Theming with CSS variables
The player ships neutral: it inherits the theme's fonts and uses grayscale accents defined as custom properties on .oral-archivist-player. Override them in the theme:
.oral-archivist-player {
--oa-accent: #1d4e33; /* active chapter rail, timestamps */
--oa-muted: #6f6a5d; /* secondary text */
--oa-border: #ddd6c7; /* rules and rails */
--oa-surface: #f7f3e8; /* hover panels */
--oa-highlight-bg: #f6efdf; /* active paragraph/chapter */
--oa-bar-bg: #1d4e33; /* audio bar background */
--oa-bar-fg: #fff; /* audio bar text */
--oa-play-bg: #d9a53a; /* play button circle */
--oa-play-fg: #1d4e33; /* play button icon */
--oa-wave-played: #d9a53a; /* waveform, played portion */
--oa-wave-rest: rgba(255, 255, 255, 0.35);
--oa-radius: 10px;
}