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.

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.

You can also see an example of this is practice in the Custom background tip.

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