More customizable CSS

[Badatos]

Hello !
First, I want to thank you for this useful tool.
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)

• add a "role=button" on download link for better accessibility.

[lkiesow]

Hi @Badatos, thanks for the contribution.
Can you explain how someone would use these?
They aren't available from the configuration, are they?

[Badatos]

Hello Lars!
To customise this app by now, we can for sample add one link to a custom.css file in the public/index.html file :
<link rel="stylesheet" type="text/css" href="custom.css">
and put in this custom.css file our brand colors, for sample:

/* pink theme */
#root {
  --theme-ui-colors-primary: #b03c7e;
  --theme-ui-colors-btn-hover: #93326a;
}

... or another 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;
}

[Badatos]

another way is to load opencast app inside another website, and apply directly the main website's CSS;

[lkiesow]

Seems like a goood idea. But one thing that is definitely missing from this patch is documentation about this. No one will ever know or remember if we do not add this.

Also, this is really hard to use in this form. Users would actually need to modify the code. What if we just add a simple style or theme configuration which would simply drop the configured value into a <style> tag on the main page. The configuration could the be used like this (applying your theme):

theme = """
:root {
  --theme-ui-colors-background: #303238;
  --theme-ui-colors-text: #FFF;
}
#root {
  --theme-ui-colors-info: #737373;
  --theme-ui-colors-gray-3: #797676;
}
"""

This would be much more convenient for adopters to use and should be relatively easy to implement.

[Badatos]

Good idea Lars.
I just add it in my branch : now user can directly add customised CSS in a customCSS param (in [theme] section of settings)
and I added a sample of use in configuration.md to help users.

[Badatos]

is it ok for you @lkiesow ?

[lkiesow]

Hi @Badatos, sorry, I was busy with the Opencast Summit last week and had no time to look at this. Will do so tomorrow.

[lkiesow]

Merged into the current master branch, I get the following error. Maybe because a newer (stricter) version of TypeScript is being used?

You built your patch on a somewhat old state of this project, can you rebase your patch or merge it with master?

[Badatos]

Hello @lkiesow.
I just merged master with my branch, and tested again and I can't see this error. When does it appears ?

The "npm run build" command does not raise it for me.

[Badatos]

Ok, I see it : it happens when there is no [theme] entry in settings.toml.
I try to correct this.

[Badatos]

New commit pushed ! Thank you for the testing @lkiesow, it works now ;)

[lkiesow]

Thanks for fixing this. Merged.