webgui
webgui copied to clipboard
limetech
feat(css): add CSS3 variables to aid theming
This is currently a RFC draft PR.
As an example I have moved default-white.css to use CSS3 variables to help with maintaining a colour pallet. My end goal for the themes is to move the default CSS style to something like base.css that is always imported. And then import [theme].css that simply contains :root { --colour-000: [...] } to alter the colours in use.
This will simplify maintaining CSS edits as every theme will have a base 'layout' meaning only the base.css file will need to be edited when changing the style of an element etc.
The end end goal for this is to make it easier for me to implement a responsive layout across all themes as I'll only need to edit one base file.
NB: I am aware that we will need two base theme files: Azure & Default(?) that will each have two colour theme files.
Implementation Example
Current pseudo code:
<head>
<style src="white-default.css" />
<head>
Proposed pseudo code:
<head>
<style src="default-base.css" /> <!-- Base layout -->
<style src="white-theme.css" /> <!-- :root overwrite -->
<head>
NBB: The file has also been formatted, this can be reverted but IMO makes a very nice change and dramatically increases the readability. Also up for discussion.
- To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1207090911750774
As I can't request reviews, would love some input from @bergware, @zackspear & @ljm42. Thank you.
@BaileyJM02 you legend! Thank you for taking a first go at this.
This has been something I've been wanting to do for a really long time and haven't been able to get to it – even in the last few months it's been a stretch goal of mine to start working on this. Just my other projects have taken longer and gotten in the way.
I think you're heading in the right direction here. I had the same plan with formatting the file to vastly improve DX, making all colors CSS vars, creating a base CSS file, and having individual theme CSS files do the overwriting of anything from the base file.
Then once getting that sorted start attempting to refactor the base theme(s) to be responsive.
I think the response refactor will be turn out to be a bit difficult as there's quite a lot of straggling styles in <style> tags & even inline on DOM elements that have been written in various PHP templates, .page templates, other file / script formats, and CSS included by libraries. So finding all those will be half the battle here.
So what I'm getting at is that this will likely be a pretty iterative process in that we shouldn't expect 100% responsive coverage right away. Perhaps focusing on that biggest elements and main pages / templates and then eventually finding and drilling down into specific components / elements after is the best path forward here. As I think any semblance of having a responsive dashboard will greatly benefit Unraid users – even if it's not perfect.
NBB: The file has also been formatted, this can be reverted but IMO makes a very nice change and dramatically increases the readability. Also up for discussion.
Great, great change IMO. We'll keep these formatted in a readable way like you've started. Eventually I could see us adding a build process to compile the CSS & JS so we can use autoprefixer and whatnot…but I don't want to do that quite yet.
Don't hesitate to ask questions or run ideas by us. Feel free to even reach out to me on Discord – zspearmint.
Awesome to hear I'm off to a good start and in the right direction. Glad we're also aligned on the overall plan.
Aiming for this PR to just be theme changes, namely:
- Format CSS files
- Move to CSS variables
- Move to base file + theme file
From looking through the code, I can see that responsiveness is going to be a much bigger project so will probably do that with a PR for each base theme separately. Possibly even add a perquisite PR to try and move all inline styles to a file etc.
Will drop you a Discord friend request 👍
As a first step for Unraid 6.13 I have moved all the inline style coding of .page files to separate css files. These css files will get automatically loaded with the specific .page file when building the GUI content. This approach should make it easier to maintain styling.
@BaileyJM02, this was a big undertaking. Thank you again for all this work.
I wanted to let you know that I'm picking up with where you left off.
I checked out this PR locally and rebased origin/master resolving the conflicts. And then did the necessary updating of the CSS with all the additions / refactors that had been done since this PR was opened. I also have started on setting up CSS vars for the azure & gray themes to further assist with less duplication of CSS.
I'll be closing this PR and as I've opened a new one that was started via your original work in this PR.