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.
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;
}