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
There was a problem hiding this comment.
This file is for illustration only.
There was a problem hiding this comment.
Also for illustration only
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 think this is a good pattern and it's going in a good direction.
Here you have my observations:
- I'd like to write the CSS code in a CSS file
- We should have a new HTML file showing an example that overrides the defaults
- There are some properties that were calculated based in others and now they are fixed values
- Some defaults are not defined (eg. font family)
| /* | ||
| * Specific styles based on documentation tools and themes | ||
| * | ||
| * Usage of `@layer` at-rule pushes this rules down a step in | ||
| * precedence/priority. This allows a user `:root` rule to override these | ||
| * values. | ||
| **/ | ||
| defaultStyleSheet.replaceSync(` |
There was a problem hiding this comment.
I don't like too much that we are writing all these CSS in a JS file. Can't we just have a defaults.css file and import it here instead?
There was a problem hiding this comment.
Actually, I don't really understand why you migrated from doctools.css to default.js. You had to change the code in application.js as well -- why not just keep the doctools.css (or defaults.css if you want) but keeping the CSS extension and importing the CSS from application.js as we were doing?
| --readthedocs-flyout-font-size: 0.725rem; | ||
| } | ||
|
|
||
| :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] { | ||
| --readthedocs-font-size: 0.58rem; | ||
| --readthedocs-flyout-header-font-size: 0.7rem; |
There was a problem hiding this comment.
Why did you remove all the flyout-header-font-size?
There was a problem hiding this comment.
We can probably create another HTML file to keep in the repository and show this as example 👍🏼
| --readthedocs-flyout-font-family: var(--readthedocs-font-family); | ||
| --readthedocs-flyout-font-size: var(--readthedocs-font-size); |
There was a problem hiding this comment.
It seems we need to define these in defaults.js, right? I mean, --readthedocs-font-*. I didn't find where they are defined.
| color: var(--readthedocs-flyout-current-version-color, #27ae60); | ||
| color: var(--readthedocs-flyout-current-version-color); | ||
| font-size: var(--readthedocs-flyout-header-font-size); | ||
| margin-left: 10px; |
There was a problem hiding this comment.
This property is new. Is this correct?
| font-size: var( | ||
| --readthedocs-flyout-dd-font-size, | ||
| calc(var(--addons-flyout-font-size) * 1.125) | ||
| ); |
There was a problem hiding this comment.
We are missing the calculated value here.
Potentially replaces #492