docs: add initial documentation to external assets

apps/server/src/user/README.md

@@ -0,0 +1,5 @@
+# user
+
+The user folder contains assets that are used in Ontime's UI runtime.
+
+This is likely something you should not change manually.

apps/server/src/user/styles/README.md

@@ -0,0 +1,6 @@
+# styles
+
+The styles folder contain the user's custom stylesheet which is used for theming in Ontime.
+The file should be named `override.css`.
+
+https://docs.getontime.no/features/custom-styling/

apps/server/src/user/styles/override.css

@@ -0,0 +1,77 @@
+/** 
+ * 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;
+
+    /** Background for card elements on background */
+    --card-background-color-override: #fff;
+
+    /** Background highlight for blink behaviour, used only in /backstage */
+    --card-background-color-blink-override: #339e4e;
+    
+    /** 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 progress bar background */
+    --timer-progress-bg-override: #fff;
+
+    /** Colour used for progress bar progress */
+    --timer-progress-override: #202020;
+    
+    /** Colour used for external message and aux timer in /timer */
+    --external-color-override: #161616;
+    
+    /** View specific features: /cuesheet */
+    --cuesheet-running-bg-override: #D20300;
+    
+    /** View specific features: /op */
+    --operator-running-bg-override: #D20300;
+    --operator-highlight-override: #FFAB33;
+    
+    /** 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: 'Times New Roman';
+    --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: center;
+}
+
+/** 
+ * 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;
+}