refactor: Make source admonitions more subtle

pawamoy · pawamoy · commit 8eebfce313ca · 2025-05-23T15:52:26.000+02:00
Issue-mkdocstrings#525: mkdocstrings/mkdocstrings#525
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -175,7 +175,7 @@ plugins:
           show_root_heading: true
           show_root_full_path: false
           show_signature_annotations: true
-          show_source: false
+          show_source: true
           show_symbol_type_heading: true
           show_symbol_type_toc: true
           signature_crossrefs: true
diff --git a/src/mkdocstrings_handlers/python/templates/material/_base/class.html.jinja b/src/mkdocstrings_handlers/python/templates/material/_base/class.html.jinja
@@ -119,6 +119,7 @@ Context:
     {% endif %}
 
     <div class="doc doc-contents {% if root %}first{% endif %}">
+
       {% block contents scoped %}
         {#- Contents block.
 
@@ -192,7 +193,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 +206,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,71 @@ code.doc-symbol-module::after {
   color: inherit;
   border-bottom: 1px dotted currentcolor;
 }
+
+:root {
+  --md-admonition-icon--source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.6 16.6 4.6-4.6-4.6-4.6L16 6l6 6-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6z"/></svg>')
+  /* --md-admonition-icon--source: "" */
+}
+.md-typeset .admonition.source,
+.md-typeset details.source {
+  border-color: var(--md-code-bg-color);
+}
+.md-typeset .source > .admonition-title,
+.md-typeset .source > summary {
+  background-color: var(--md-code-bg-color);
+}
+.md-typeset .source > .admonition-title::before,
+.md-typeset .source > summary::before {
+  /* background-color: rgb(128, 128, 128); */
+  background-color: var(--md-code-bg-color);
+  /* -webkit-mask-image: var(--md-admonition-icon--source);
+          mask-image: var(--md-admonition-icon--source); */
+  -webkit-mask-image: unset;
+          mask-image: unset;
+}
+
+.doc details.source {
+  background-color: var(--md-code-bg-color);
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  transition: none;
+}
+
+.doc details.source summary {
+  background-color: inherit;
+  border: 0;
+  border-radius: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+
+.doc details.source summary code {
+  box-shadow: none;
+  padding: 0;
+}
+
+/* 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);
+}
