css classes need a prefix/namespace

[mgaitan]

I've been updating sphinxcontrib-mermaid to render inline diagrams (instead of using mermaid-cli and include them as <img> tag). It works but looks weird with the default sphinx theme, because mermaid's css set the following:

.section {
  opacity: 0.2;
}

Isn't this class name too common? shouldn't mermaid set all its own css under a namespace .mermaid or name them with a prefix like .mermaid_section ?

[tylerlong]

I agree with you that it's an issue. Maybe we should change it to .mermad .section.

[sclarson]

#577 Should resolve this

[mgaitan]

🍻 !

[ip2k]

This bit me as well. I ended up needing to change the 4 sections in the JS where this is specified. I searched for Sequence Diagram variables and it's inside the block. Specifically, I changed:
*/\n.section { to */\n.mermaid .section { . This fixed the issue when embedding Mermaid charts in an MkDocs site. I had to make this edit to https://unpkg.com/mermaid@7.1.0/dist/mermaid.js , so it looks like it's still an issue on the most-current release available from unpkg.

Thanks!

[tylerlong]

It has been fixed.