-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
Styling for admonition works differently than before #3849
Comments
Thanks for reporting. This was a deliberate change due to renderings bugs in Firefox on larger screens reported in #3782, as you already noticed. I understand the need to customize admonitions, but the rendering bugs were pretty severe, which is why there was no choice but to change the current behavior. If you don't mind that admonitions look awful in Firefox, you can add custom CSS which reverts the changes made in 0f7e9fa back to 8eb2375. It's only a few lines. |
Thank you very much for your answer and thank you very much for the hard work you and others put into mkdocs-material.
I totally understand that. However due to this change, the border on the left now is essentially split in 2 parts and the upper part is rendered with a different color than the lower half, because of the transparency of the color that is lying on top. I agree that the deviation may be minimal usually, however it still bugs me. 😄 Isn't there a way to have both? Fixing the rendering bugs and having one consistent border on the left? |
Yes, we could move the title over a few pixels, but then the focus outline for details (collapsible admonitions) looks weird, as it doesn't start on the left side, but next to the border. We've had this before. The current solution is the best compromise with maximum compatibility and maintainability I could think of. |
Thanks for the confirmation. I don't mind if the color of the border is off, however I want the header itself to have a certain color. In the example that I gave I simply used red. But actually I want the header of the admonition to have the color value Now I cannot use that color directly, because it does not have transparency and so the border is lost. So I have to use another color for the header that has transparency and when everything is rendered, it looks like the value that I want, but uses transparency. At the moment I am stuck how to "calculate" this new color that has transparency, so that it looks like the color that I want when rendered. I can imagine that other people that want to use a certain color for their headers will have similar problems. What do you think? |
I can only repeat myself – it's the best compromise. It's always a trade-off. Material for MkDocs has to strike a balance. You can probably imagine that this kind of project, which is an HTML template, where everybody has pretty strong thoughts about how things should look, is very hard to make look great, keep it customizable and accessible. I guess the easiest thing for you is to just add back the border on the left. Recommended read: |
Thanks again for your answer. I am afraid that customizing too much stuff on my side will only make things break later, so I'm happy to follow whatever development is done. For everybody else coming around this issue: for my target color #eef1f5 the color that I will be using is rgba(85,115,155,0.1); How did I come up with that value? I went to the online calculator at https://filosophy.org/code/online-tool-to-lighten-color-without-alpha-channel/ , choose 0.1 as the transparency I want to use, then I played around with the "foreground" value until the "flattened" value matched #eef1f5. |
Contribution guidelines
I've found a bug and checked that ...
mkdocs
orreadthedocs
themescustom_dir
,extra_javascript
andextra_css
Description
Please forgive me if this is not a bug and everything works as expected.
I moved from
mkdocs-material==8.2.8
tomkdocs-material==8.2.9
and noticed that the styling of the admonitions did not work as expected for me any more.I think this is related to the changes that were done for fixing #3782
The following snippet of my
extras.css
is a minimal working example that shows the problem:The idea is that I want to change the background color of the admonition and I took it from the "pied piper" example at https://squidfunk.github.io/mkdocs-material/reference/admonitions/#custom-admonitions
I now noticed that the example uses transparency for the color value. When I took this over I did not notice this and just used my desired color value.
With version 8.2.8 and using transparency, the color of the upper part of the border was slightly different. When not using transparency, the color of the upper part of the border matches the lower part of the border.
With version 8.2.9 you now must use transparency to get the same behavior and then the color of the upper and the lower border are not the same. Is this a real visual problem then?
For me the main problem is that I am using CSS variables all over the place and I don't like the idea to add additional colors variables with just different transparency values.
Some googling provided https://stackoverflow.com/a/41265350 as a possible solution, but I could not make it work.
I hope I could make my point clear. I am wondering if this was a deliberate change and if so, what I can do to make it work again for me. I am not opting to revert any changes.
Expected behaviour
With
mkdocs-material==8.2.8
the admonition looked like this:Actual behaviour
With
mkdocs-material==8.2.9
the admonition now looks like this:It looks like the header is now put "on top" of the border.
Steps to reproduce
See above.
Package versions
Configuration
System information
The problem is independent of the browser and shows with Mozilla Firefox and Microsoft Edge.
The text was updated successfully, but these errors were encountered: