refactor: Make source admonitions more subtle

pawamoy · pawamoy · commit 76f4764b8b6c · 2025-05-23T15:53:50.000+02:00
Issue-mkdocstrings#525: mkdocstrings/mkdocstrings#525
diff --git a/src/mkdocstrings_handlers/python/templates/material/_base/class.html.jinja b/src/mkdocstrings_handlers/python/templates/material/_base/class.html.jinja
@@ -192,7 +192,7 @@ Context:
             {% if config.merge_init_into_class %}
               {% if "__init__" in all_members and all_members["__init__"].source %}
                 {% with init = all_members["__init__"] %}
-                  <details class="quote">
+                  <details class="mkdocstrings-source">
                     <summary>Source code in <code>
                       {%- if init.relative_filepath.is_absolute() -%}
                         {{ init.relative_package_filepath }}
@@ -205,7 +205,7 @@ Context:
                 {% endwith %}
               {% endif %}
             {% elif class.source %}
-              <details class="quote">
+              <details class="mkdocstrings-source">
                 <summary>Source code in <code>
                   {%- if class.relative_filepath.is_absolute() -%}
                     {{ class.relative_package_filepath }}
diff --git a/src/mkdocstrings_handlers/python/templates/material/_base/function.html.jinja b/src/mkdocstrings_handlers/python/templates/material/_base/function.html.jinja
@@ -145,7 +145,7 @@ Context:
           This block renders the source code for the function.
           -#}
           {% if config.show_source and function.source %}
-            <details class="quote">
+            <details class="mkdocstrings-source">
               <summary>{{ lang.t("Source code in") }} <code>
                 {%- if function.relative_filepath.is_absolute() -%}
                   {{ function.relative_package_filepath }}
diff --git a/src/mkdocstrings_handlers/python/templates/material/style.css b/src/mkdocstrings_handlers/python/templates/material/style.css
@@ -178,3 +178,26 @@ code.doc-symbol-module::after {
   color: inherit;
   border-bottom: 1px dotted currentcolor;
 }
+
+/* Source code blocks (admonitions). */
+:root {
+  --md-admonition-icon--mkdocstrings-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06m-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0"/></svg>')
+}
+.md-typeset .admonition.mkdocstrings-source,
+.md-typeset details.mkdocstrings-source {
+  border: none;
+  padding: 0;
+}
+.md-typeset .admonition.mkdocstrings-source:focus-within,
+.md-typeset details.mkdocstrings-source:focus-within {
+  box-shadow: none;
+}
+.md-typeset .mkdocstrings-source > .admonition-title,
+.md-typeset .mkdocstrings-source > summary {
+  background-color: inherit;
+}
+.md-typeset .mkdocstrings-source > .admonition-title::before,
+.md-typeset .mkdocstrings-source > summary::before {
+  -webkit-mask-image: var(--md-admonition-icon--mkdocstrings-source);
+          mask-image: var(--md-admonition-icon--mkdocstrings-source);
+}
