Modernized look of admonitions

Author: squidfunk

docs/reference/admonitions.md

@@ -388,6 +388,46 @@ the default type, and thus fallback for unknown type qualifiers, is `note`:
 
 ## Customization
 
+### Classic admonitions
+
+Prior to version [:octicons-tag-24: 8.6.0][Admonition modern], admonitions had
+a slightly different appearance:
+
+!!! classic "Note"
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+If you want to restore this appearance, add the following CSS to an
+[additional style sheet]:
+
+<style>
+  .md-typeset .admonition.classic {
+    border-width: 0;
+    border-left-width: 4px;
+  }
+</style>
+
+=== ":octicons-file-code-16: `docs/stylesheets/extra.css`"
+
+    ``` css
+    .md-typeset .admonition,
+    .md-typeset details {
+      border-width: 0;
+      border-left-width: 4px;
+    }
+    ```
+
+=== ":octicons-file-code-16: `mkdocs.yml`"
+
+    ``` yaml
+    extra_css:
+      - stylesheets/extra.css
+    ```
+
+[Admonition modern]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.6.0
+
 ### Custom admonitions
 
 If you want to add a custom admonition type, all you need is a color and an

docs/setup/setting-up-tags.md

@@ -32,7 +32,7 @@ The following configuration options are available:
 
 [`tags_file`](#+tags.tags_file){ #+tags.tags_file }
 
-:   :octicons-milestone-24: Default: _none_ – This option specifies which file
+:   :octicons-milestone-24: Default: _none_ – This option specifies which page
     should be used to render the tags index. See the section on [adding a tags 
     index][tags index] for more information. If this option is specified, tags
     will become clickable, pointing to the corresponding section in the tags
@@ -48,7 +48,7 @@ The following configuration options are available:
     of `mkdocs.yml`. Note, however, that this options is not required – only use
     it if you want a tags index page.
 
-[`tags_extra_files`](#+tags.tags_extra_files){ #+tags.tags_extra_files } :material-alert-decagram:{ .mdx-pulse title="Added on July 7, 2022" }
+[`tags_extra_files`](#+tags.tags_extra_files){ #+tags.tags_extra_files }
 
 :   [:octicons-tag-24: insiders-4.20.0][Insiders] · :octicons-milestone-24: 
     Default: _none_ – This option allows to define additional pages to render

material/assets/stylesheets/main.80dcb947.min.css renamed to material/assets/stylesheets/main.20d9efc8.min.css

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.80dcb947.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.20d9efc8.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">

material/assets/stylesheets/main.80dcb947.min.css.map renamed to material/assets/stylesheets/main.20d9efc8.min.css.map

@@ -29,17 +29,17 @@
 
 /// Admonition flavours
 $admonitions: (
-  note:                       pencil $clr-blue-a200,
+  note:                       pencil-circle $clr-blue-a200,
   abstract summary tldr:      clipboard-text $clr-light-blue-a400,
   info todo:                  information $clr-cyan-a700,
   tip hint important:         fire $clr-teal-a700,
-  success check done:         check-bold $clr-green-a700,
+  success check done:         check $clr-green-a700,
   question help faq:          help-circle $clr-light-green-a700,
   warning caution attention:  alert $clr-orange-a400,
-  failure fail missing:       close-thick $clr-red-a200,
-  danger error:               lightning-bolt $clr-red-a400,
-  bug:                        bug $clr-pink-a400,
-  example:                    format-list-numbered $clr-deep-purple-a200,
+  failure fail missing:       close $clr-red-a200,
+  danger error:               lightning-bolt-circle $clr-red-a400,
+  bug:                        shield-bug $clr-pink-a400,
+  example:                    test-tube $clr-deep-purple-a200,
   quote cite:                 format-quote-close $clr-grey
 ) !default;
 
@@ -62,17 +62,17 @@ $admonitions: (
 
   // Admonition - note that all styles also apply to details tags, which are
   // rendered as collapsible admonitions with summary elements as titles.
-  :is(.admonition, details) {
+  .admonition,
+  details {
     display: flow-root;
     margin: px2em(20px, 12.8px) 0;
     padding: 0 px2rem(12px);
     color: var(--md-admonition-fg-color);
     font-size: px2rem(12.8px);
     page-break-inside: avoid;
     background-color: var(--md-admonition-bg-color);
-    border: 0 solid $clr-blue-a200;
-    border-inline-start-width: px2rem(4px);
-    border-radius: px2rem(2px);
+    border: px2rem(1px) solid $clr-blue-a200;
+    border-radius: px2rem(4px);
     box-shadow: var(--md-shadow-z1);
 
     // [print]: Omit shadow as it may lead to rendering errors
@@ -114,12 +114,13 @@ $admonitions: (
   }
 
   // Admonition title
-  :is(.admonition-title, summary) {
+  .admonition-title,
+  summary {
     position: relative;
     margin-block: 0;
-    margin-inline: px2rem(-16px) px2rem(-12px);
+    margin-inline: px2rem(-12px);
     padding-block: px2rem(8px);
-    padding-inline: px2rem(44px) px2rem(12px);
+    padding-inline: px2rem(40px) px2rem(12px);
     font-weight: 700;
     background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
     border: none;
@@ -136,7 +137,7 @@ $admonitions: (
     &::before {
       position: absolute;
       top: px2em(10px);
-      inset-inline-start: px2rem(16px);
+      inset-inline-start: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
       background-color: $clr-blue-a200;
@@ -146,6 +147,11 @@ $admonitions: (
       mask-size: contain;
       content: "";
     }
+
+    // Inline code block
+    code {
+      box-shadow: 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
+    }
   }
 }
 
@@ -178,5 +184,10 @@ $admonitions: (
       background-color: $tint;
       mask-image: var(--md-admonition-icon--#{$name});
     }
+
+    // Details marker
+    &::after {
+      color: $tint;
+    }
   }
 }