Skip to content

Custom styling

You can override the app-defined styles for some views by changing a supplied CSS override file.

You can toggle this feature and edit the CSS file in Editor -> Settings -> View settings.

The provided CSS will be loaded along with the page.

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

:root {
/** Background colour for the views */
--background-color-override: #ececec;
/** Main text colour for the views */
--color-override: #101010;
/** Text colour for the views */
--secondary-color-override: #404040;
/** Accent text colour, used on active elements */
--accent-color-override: #fa5656;
/** Label text colour, used on active elements */
--label-color-override: #6c6c6c;
/** Timer text colour */
--timer-color-override: #202020;
--timer-warning-color-override: #ffbc56;
--timer-danger-color-override: #e69000;
--timer-overtime-color-override: #fa5656;
--timer-pending-color-override: #578AF4;
/** Background for card elements on background */
--card-background-color-override: #fff;
/** Font used for all text in views */
--font-family-override: 'Open Sans';
/** Colour used for external message and aux timer in /timer */
--external-color-override: #161616;
/** View specific features: /backstage */
/** ---- Background highlight for blink behaviour */
--card-background-color-blink-override: #339e4e;
/** ---- Colour used for progress bar background */
--timer-progress-bg-override: #fff;
/** ---- Colour used for progress bar progress */
--timer-progress-override: #202020;
/** View specific features: /op */
--operator-customfield-font-size-override: 1.25rem;
--operator-running-bg-override: #339e4e;
/** View specific features: /studio */
--studio-active: #101010;
--studio-idle: #cfcfcf;
--studio-active-label: #101010;
--studio-idle-label: #595959;
--studio-overtime: #101010;
}