mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-15 04:13:47 +00:00
Carlos Valente
7e3aaa8c30
* style: consistent casing on menu * refactor: bundle demo from code * feat: allow uploading custom views
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
export const defaultCss = `
|
|
/**
|
|
* This CSS file allows user customisation of the UI
|
|
* We expose some CSS properties to facilitate this (see below in :root)
|
|
* In the cases where this is missing, you can add your selectors 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';
|
|
|
|
/** 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;
|
|
}
|
|
|
|
/**
|
|
* You can inspect the page in your browser and add the selectors here.
|
|
* In the below example, we change the colour of the overlay message in the stage-timer view.
|
|
*/
|
|
.stage-timer > .message-overlay--active > div {
|
|
color: red;
|
|
}
|
|
`;
|