Try CSS variable again #545
Conversation
Use our heuristic to detect the documentation tool/theme and add specific `--readthedocs-*` CSS variables based on that for known tools/themes. Reference: readthedocs/readthedocs.org#11849 (comment)
This moves the inner CSS rules from inside the shadow DOM to the parent DOM. This allows users to still set a `--readthedocs-font-size` and similar variables.
This moves the inner CSS rules from inside the shadow DOM to the parent DOM. This allows users to still set a `--readthedocs-font-size` and similar variables.
Merge branch 'humitos/footer-style' into agj/footer-style
public/_/readthedocs-addons.json
Outdated
There was a problem hiding this comment.
This file is for illustration only.
public/global.css
Outdated
There was a problem hiding this comment.
Also for illustration only
public/index.html
Outdated
There was a problem hiding this comment.
And also not needed
There was a problem hiding this comment.
We can probably create another HTML file to keep in the repository and show this as example 👍🏼
|
Marking this for review so it doesn't get lost again. @humitos can you look at this and see if it makes sense to you? There are some extra changes here that can be removed before merging, it's just for example. Right now, with all of the changes and the defaults applied with the extra files, here is what the flyout and notification look like:
|
There was a problem hiding this comment.
I re-review this and I think the pattern is correct 👍🏼
The last 3 bullets from my previous review are still valid: #545 (review)
You can add these variables on the existing example test page as a rule on We can unit test some of these styles with web-test-runner though, and should probably eventually use a visual diffing tool like Happo to just automate this.
What are you referring to here? There are a few places that a complex
This was already resolved. |
|
I am still poking this as the search addon is quite chaotic on font-sizes. It overuses
|
Yes, I mentioned this at #545 (comment) It seems you already replied to that and I've missed. |
Just a basic font-size and color example, we can build on these as we go
|
I wrote up a quick example of what CSS style testing would look like in 4b683a3. I didn't do this across our addons or customization points yet, but this would be easy to expand on. I'm going to push off fixing issues with font sizes in search to a later issue. The font size issue is a current bug with search already:
So I think we can continue with this from here. Follow up work to this issue can be:
|
| --readthedocs-search-footer-code-border-color: #e1e4e5; | ||
| --readthedocs-search-input-background-color: #eaeaea; | ||
|
|
||
| /* `--readthedocs-search-result-section-highlight-color` is deprecated but |
There was a problem hiding this comment.
The result-section prefix confused me, as these rules target not the "section" -- ie the surrounding element around results -- but are instead for the individual results. So I think these should all be search-result-background-color not search-result-section-background-color, etc.
There was a problem hiding this comment.
I don't remember exactly how this works, but I remember that a section can have multiple results -- if that helps 😄
There was a problem hiding this comment.
There is a div.results that has all of the individual page .hit elements and each .hit can have multiple nested results. But the styles in these variables aren't affecting div.results, what I assumed section referred to. It's ambiguous enough it's worth removing either way.
|
@humitos I'd take one last look at the change here. Notable changes at this point:
|
Yeah, no, I'm not talking about something complex like this. I was thinking of just having a page using the CSS variables with noticeable changes (very big flyout/search/etc) just to quickly see they have effect. |
This was quickly copied from the old Sphinx extension without thinking too much about it or doing any modification. Feel free to re-structure it with a more modern pattern. |
| --readthedocs-search-footer-code-border-color: #e1e4e5; | ||
| --readthedocs-search-input-background-color: #eaeaea; | ||
|
|
||
| /* `--readthedocs-search-result-section-highlight-color` is deprecated but |
There was a problem hiding this comment.
I don't remember exactly how this works, but I remember that a section can have multiple results -- if that helps 😄
| const element = document.querySelector("readthedocs-flyout"); | ||
| await elementUpdated(element); | ||
|
|
||
| // Addon default of 80% of global --readthedocs-font-size, default 16px |
There was a problem hiding this comment.
Where this "default 16px" comes from? We are defining these values in em, how they are converted into px at start up?
There was a problem hiding this comment.
From the browser, 16px is the default font size for almost all browsers.
|
Should we merge and deploy this? |
|
I'm fine merging this but I wouldn't deploy this tomorrow if we aren't all available. That's fine though, we can just release a day that we are around. |
Potentially replaces #492