feat(css): add CSS3 variables to aid theming#1425
Conversation
|
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 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.
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 – |
|
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:
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. |
|
That sounds good, should make this much easier, thank you! |
|
@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 I'll be closing this PR and as I've opened a new one that was started via your original work in this PR. |
3 participants
As an example I have moved
default-white.cssto 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 likebase.cssthat is always imported. And then import[theme].cssthat 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.cssfile 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:
Proposed pseudo code:
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.