-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rendering of :kbd: role is a bit off #322
Comments
Can you supply the RST code to reproduce? It looks like the undesired offset happens when there's nested <kbd>
<kbd>Ctrl</kbd>
+
<kbd>F</kbd>
</kbd> Have you also looked into the |
See: highlight_text.rst
Okay, it helped with the nested case 👍 But the top of the object is still not distinct: Compare with: |
CSS for the keys role is inherited from mkdocs-material source: src/assets/stylesheets/main/extensions/pymdownx/_keys.scss. We also don't use any CSS from sphinx basic theme: sphinx/themes/basic/static/basic.css_t. But I don't see any CSS rules specific to kbd elements there. Lastly, the RTD sphinx theme adds its own CSS specific to kbd elements: See their src/sass/_theme_rst.sass file. So, to solve this we would need to add some CSS for kbd elements that are generated by the Just my opinionI have some reservations about making any CSS changes because this theme is meant to be a port of the mkdocs-material theme to sphinx, not a material-design adaptation of the RTD sphinx theme... Looking at how the kbd elements are styled in upstream mkdocs-material, I feel like the current style is expected behavior. There's also nothing stopping users from adding their own CSS to a project via sphinx, but having the different |
There also seems to be slight differences in how different browsers render the kbd elements. In Firefox, the offset looks fine, but Chrome seems to position the kbd elements' contents a bit higher than Firefox. |
Okay, I see, indeed the issue is the same there.
For me, Firefox looks similar: |
I think the upstream artistic style can still be preserved while adding the requested visual distinction by simply darkening the kbd elements' [data-md-color-scheme="default"] kbd {
background-color: #dfdfdf;
} The EDIT: I also noticed that the
|
Look good: Code: ruslo/read_the_docs_template@6951d7a Thank you! |
Here is how
:kbd:
rendered in a light theme:It seems that the top of the object is missing.
It's slightly better with a dark theme:
Same code for the read-the-docs theme:
Live samples:
The text was updated successfully, but these errors were encountered: