feat: UI access for custom views (#2020)

* style: consistent casing on menu

* refactor: bundle demo from code

* feat: allow uploading custom views
This commit is contained in:
Carlos Valente
2026-03-24 09:19:45 +01:00
committed by GitHub
parent 95536902f5
commit 7e3aaa8c30
39 changed files with 1799 additions and 817 deletions
-67
View File
@@ -1,67 +0,0 @@
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;
}
`;
@@ -1,3 +0,0 @@
import { langEn } from 'ontime-types';
export const defaultTranslation = JSON.stringify(langEn, null, 2);