Styling for admonition works differently than before

[pideu-mh]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Please forgive me if this is not a bug and everything works as expected.

I moved from mkdocs-material==8.2.8 to mkdocs-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:

.md-typeset .note > .admonition-title, .md-typeset .note > summary {
  background-color: red;
}

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

$ python --version
Python 3.10.2

$ mkdocs --version
mkdocs, version 1.3.0 from C:\[...]\.virtualenvs\foo-kZ_gRane\lib\site-packages\mkdocs (Python 3.10)

$ pip show mkdocs-material | grep -E ^Version
Version: 8.2.8

Configuration

site_name: My Docs

theme:
  name: material
  
markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences
  
extra_css:
  - extra.css

System information

The problem is independent of the browser and shows with Mozilla Firefox and Microsoft Edge.

[squidfunk]

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.

[pideu-mh]

Thank you very much for your answer and thank you very much for the hard work you and others put into mkdocs-material.

but the rendering bugs were pretty severe, which is why there was no choice but to change the current behavior.

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?

[squidfunk]

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.

[pideu-mh]

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 #eef1f5.

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?

[squidfunk]

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:

• Author's notes – How this project is maintained #2399

[pideu-mh]

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.