Skip to content

Custom styling

You can override the app-defined styles for some views by changing a supplied CSS override file.
There are a few CSS variables which allow for quick customisation of the viewers.

You can toggle this feature on / off at Editor -> Settings -> App settings -> View settings.

Notes on style overriding

The provided CSS will be loaded along with the page.

We simplify the customisation of the views by exposing a few CSS custom propertries (see below).
Alternatively, can inspect the page manually and override any styles relevant.

:root {
--background-color-override: #ececec; --> page background
--color-override: #101010; --> text colour
--secondary-color-override: #404040; --> text colour for secondary fields such as clocks
--accent-color-override: #fa5656; --> accent colour
--label-color-override: #6c6c6c; --> text colour for labels such as "Time now"
--timer-color-override: #202020; --> timer colour
--card-background-color-override: #fff; --> background colour for cards
--font-family-override: "Open Sans"; --> default font for all views
--font-family-bold-override: "Arial Black"; --> default font for clocks in Minimal and Clock views
--timer-progress-bg-override: #fff; --> default colour for progress bar background
--timer-progress-override: #202020; --> default colour for progress bar progress section
/* View specific: timer */
--external-color-override: #161616; --> text colour of external data field
/* View specific: backstage */
--card-background-color-blink-override: #339e4e; --> modified the card with a blink behaviour when a timer changes
/* View specific: cuesheet */
--cuesheet-running-bg-override: #D20300; --> background colour of running event
/* View specific: operator */
--operator-running-bg-override: #D20300; --> background colour of running event
--operator-highlight-override: #FFAB33; --> background colour of highlighted user field
/* View specific: studio clock */
--studio-active: #101010; --> colour for active indicators
--studio-idle: #cfcfcf; --> colour for idle indicators
--studio-active-label: #101010; --> colour for active labels
--studio-idle-label: #595959; --> colour for idle labels