More Customizable CSS (#902)

I made some minor CSS change to allow a stand alone opencast server to use more customizable colors, with css vars.

Added vars :

* --theme-ui-colors-btn-hover (hover bg color for buttons)
* --theme-ui-colors-button_fg (button foreground color)
* --theme-ui-colors-controls (text color for video player controls)
* --theme-ui-colors-info (bg color for an 'info' panel (like in video parameters popup)

CONFIGURATION.md

@@ -166,6 +166,28 @@ parameter as well. See further below for information on that.
 # Note: this setting can ONLY be set via `settings.toml` and not via GET
 # parameter.
 #allowedDomains = ["mylms.myuniversity.de"]
+
+[theme]
+# You can add here your own CSS
+customCSS = """
+/* Sample pink theme */
+#root {
+  --theme-ui-colors-primary: #b03c7e;
+  --theme-ui-colors-btn-hover: #93326a;
+}
+
+/* Sample dark theme */
+/*
+:root {
+  --theme-ui-colors-background: #303238;
+  --theme-ui-colors-text: #FFF;
+}
+#root {
+  --theme-ui-colors-info: #737373;
+  --theme-ui-colors-gray-3: #797676;
+}
+*/
+"""
 ```
 
 

src/App.js

@@ -6,6 +6,9 @@ import { Flex } from '@theme-ui/components';
 import { useState, Fragment } from 'react';
 import { BrowserRouter as Router, Switch, Redirect, Route, useLocation } from 'react-router-dom';
 import { Beforeunload } from 'react-beforeunload';
+import { Global } from '@emotion/core';
+import { useSettings } from './settings';
+
 
 import { Provider, useStudioState, STATE_UPLOADED, STATE_UPLOADING } from './studio-state';
 
@@ -17,12 +20,13 @@ import Warnings from './ui/warnings';
 
 
 function App({ settingsManager, userHasWebcam }) {
+  const settings = useSettings();
   return (
     <Router basename={process.env.PUBLIC_URL || '/'}>
+      <Global styles={settings.theme?.customCSS || ''}/>
       <Provider>
-      <Flex sx={{ flexDirection: 'column', height: '100%' }}>
+        <Flex sx={{ flexDirection: 'column', height: '100%' }}>
           <Header />
-
           <main sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: '285px' }}>
             <Warnings />
             <Routes settingsManager={settingsManager} userHasWebcam={userHasWebcam} />

src/settings.js

@@ -498,6 +498,9 @@ const SCHEMA = {
       }
     },
   },
+  theme: {
+    customCSS: types.string,
+  },
 };
 
 

src/theme.js

@@ -47,6 +47,7 @@ const base = {
   colors: {
     text: '#000',
     background: '#fff',
+    button_fg: '#fff',
     primary: '#47af7a',
     secondary: '#30c',
     muted: '#888888',
@@ -69,9 +70,9 @@ const base = {
     primary: {
       ...baseButton,
       bg: 'primary',
-      color: 'background',
-      '&:not(:disabled):hover': {
-        bg: darken('primary', 0.03)
+      color: 'button_fg',
+      '&:not(:disabled):hover,&:not(:disabled):focus': {
+        bg: 'var(--theme-ui-colors-btn-hover)'
       },
       '&:disabled': {
         bg: 'gray.1'
@@ -80,7 +81,7 @@ const base = {
     danger: {
       ...baseButton,
       bg: 'error',
-      color: 'background',
+      color: 'button_fg',
       '&:not(:disabled):hover': {
         bg: darken('error', 0.03)
       }
@@ -108,7 +109,10 @@ const base = {
     root: {
       fontFamily: 'body',
       lineHeight: 'body',
-      fontWeight: 'body'
+      fontWeight: 'body',
+      '--theme-ui-colors-btn-hover': darken('primary', 0.03),
+      '--theme-ui-colors-controls': '#000',
+      '--theme-ui-colors-info': '#f5f5f5',
     },
     h1: {
       ...heading,

src/ui/studio/review/index.js

@@ -116,6 +116,7 @@ export default function Review(props) {
 const ControlBox = ({ previewController, currentTime }) => (
   <div sx={{
     backgroundColor: 'gray.4',
+    color: 'var(--theme-ui-colors-controls)',
     borderRadius: '8px',
   }}>
     <VideoControls {...{ previewController, currentTime }} />

src/ui/studio/save-creation/recording-preview.js

@@ -90,6 +90,7 @@ const RecordingPreview = ({ onDownload, recording, title, presenter }) => {
       </div>
       <Button
         as="a"
+        role="button"
         title={t('save-creation-download-button')}
         sx={{
           width: '100%',

src/ui/studio/video-setup/prefs.js

@@ -220,7 +220,7 @@ export const StreamSettings = ({ isDesktop, stream }) => {
         flex: '0 1 auto',
         transition: 'height 0.2s',
         overflow: 'hidden',
-        backgroundColor: 'white',
+        backgroundColor: 'background',
         fontSize: '18px',
         boxShadow: isExpanded ? '0 0 15px rgba(0, 0, 0, 0.3)' : 'none',
       }}>
@@ -242,7 +242,7 @@ export const StreamSettings = ({ isDesktop, stream }) => {
             </div>
 
             <div sx={{
-              backgroundColor: '#ebebeb',
+              backgroundColor: 'var(--theme-ui-colors-info)',
               m: 2,
               py: 1,
               px: 2,