Nested admonitions are CSS styled incorrectly

[leifp]

I don't know if this is a MyST problem or a Sphinx problem, I just noticed it while reading your docs. I can try to figure out exactly where the CSS is being generated if you need me to.

Describe the bug

Nested admonitions are CSS styled incorrectly.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://myst-parser.readthedocs.io/en/latest/using/syntax.html#nesting-directives
2. The nested "Warning" admonition inherits some of the surrounding "Note" styling, specifically the title bg
   and icon are blue, and the icon is an info-circle.

Expected behavior

The nested "Warning" admonition is styled correctly, specifically the title bg and icon are yellow, and the icon
is an exclamation-triangle.

Environment

Whatever environment generated https://myst-parser.readthedocs.io/en/latest/

I am viewing it with Mozilla Firefox 88.0 (64-bit), on Ubuntu 20.

Towards a Fix

The problem is fixed if the generated CSS is more strict and specifies that the title is a direct child of the
admonition div:

.admonition.warning .admonition-title { /* current, bug */ }
.admonition.warning > .admonition-title { /* seems to fix */ }

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[choldgraf]

Ah I think this is a sphinx book theme issue. Gonna transfer there!

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[pradyunsg]

Equivalent fix in Furo: pradyunsg/furo@75d2eef#diff-94166aebc814a825b614b598b2e74ce0d969be1326710ba9ce599370d889be69

[choldgraf]

thanks for the pointer @pradyunsg - I realized this is actually also a bug in the PyData theme, so I upstreamed a fix here: pydata/pydata-sphinx-theme#407 which will close this issue as well

@pradyunsg I am jealous of your nicely-structured SCSS for loops and such :-)