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.

Where is the file?

The CSS file location is dependent on both the operating system and installation.

If you are running Ontime from install, you can use the native Menu to find the folder by navigating to File -> Open directory -> CSS override.
It is also worth noting that other potentially useful directories are listed here.

For users running headless installations (npm or docker), you can find the path to the file by navigating in app in the Editor -> Settings -> App settings -> View settings where you activate the CSS override.

For PC users:
AppData/Roaming/Ontime/user/styles/override.css

For Mac users:
Library/Application Support/Ontime/user/styles/override.css

For Linux users:
Home/Ontime/user/styles/override.css

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 properties (see below).
Alternatively, can inspect the page manually and override any styles relevant.

Show me the code

The documentation here will likely become out of sync as we add more features to Ontime. See the definition directly in the example override file here.

: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';

  /** Font used for clock in /minimal and /clock views */
  --font-family-bold-override: 'Arial Black';

  /** 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;

  /** View specific features: /lower */
  --lowerThird-font-family-override: 'Courier New';
  --lowerThird-top-font-weight-override: bold;
  --lowerThird-bottom-font-weight-override: bold;
  --lowerThird-top-font-style-override: normal;
  --lowerThird-bottom-font-style-override: italic;
  --lowerThird-line-height-override: 1vh;
  --lowerThird-text-align-override: end;
}