From b33fb2ac67361d7868ccaf45ee8d3a1f022f3e1e Mon Sep 17 00:00:00 2001
From: Oleh Prypin <oleh@pryp.in>
Date: Mon, 19 Sep 2022 22:19:04 +0200
Subject: [PATCH] Update admonition styles in MkDocs theme: (#2981)

* Apply admonition styles also to <details> tags
* Increase contrast of default admonitions
* Add some admonition styles (only for use on MkDocs' site for now)
---
 docs/css/extra.css                | 11 +++++++++++
 docs/dev-guide/plugins.md         |  2 +-
 mkdocs/themes/mkdocs/css/base.css | 26 +++++++++++++++-----------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/docs/css/extra.css b/docs/css/extra.css
index 334b05a8..ba566c91 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -29,6 +29,17 @@ div.admonition.new {
     border-color: #bcf1e8;
 }
 
+.admonition.new, details.new {
+    color: #15654a;
+    background-color: #edfff9;
+    border-color: #bcf1e8;
+}
+.admonition.example, details.example {
+    color: #353579;
+    background-color: #f0f1ff;
+    border-color: #d8dcf0;
+}
+
 /* Definition List styles */
 
 dd {
diff --git a/docs/dev-guide/plugins.md b/docs/dev-guide/plugins.md
index 77c29b97..86e1544f 100644
--- a/docs/dev-guide/plugins.md
+++ b/docs/dev-guide/plugins.md
@@ -140,7 +140,7 @@ There are three kinds of events: [Global Events], [Page Events] and
 [Template Events].
 
 <details class="card">
-  <summary class="card-header">
+  <summary>
     See a diagram with relations between all the plugin events
   </summary>
   <div class="card-body">
diff --git a/mkdocs/themes/mkdocs/css/base.css b/mkdocs/themes/mkdocs/css/base.css
index 25e17a63..3a4c08f4 100644
--- a/mkdocs/themes/mkdocs/css/base.css
+++ b/mkdocs/themes/mkdocs/css/base.css
@@ -215,7 +215,7 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
 
 
 
-.admonition {
+.admonition, details {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
@@ -223,29 +223,33 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
     text-align: left;
 }
 
-.admonition.note { /* csslint allow: adjoining-classes */
-    color: #3a87ad;
-    background-color: #d9edf7;
+.admonition.note, details.note { /* csslint allow: adjoining-classes */
+    color: #2e6b89;
+    background-color: #e2f0f7;
     border-color: #bce8f1;
 }
 
-.admonition.warning { /* csslint allow: adjoining-classes */
-    color: #c09853;
-    background-color: #fcf8e3;
+.admonition.warning, details.warning { /* csslint allow: adjoining-classes */
+    color: #7a6032;
+    background-color: #fffae5;
     border-color: #fbeed5;
 }
 
-.admonition.danger { /* csslint allow: adjoining-classes */
-    color: #b94a48;
-    background-color: #f2dede;
+.admonition.danger, details.danger { /* csslint allow: adjoining-classes */
+    color: #7f3130;
+    background-color: #fde3e3;
     border-color: #eed3d7;
 }
 
-.admonition-title {
+.admonition-title, summary {
     font-weight: bold;
     text-align: left;
 }
 
+.admonition>p:last-child, details>p:last-child {
+    margin-bottom: 0;
+}
+
 @media (max-width: 991.98px) {
     .navbar-collapse.show { /* csslint allow: adjoining-classes */
         overflow-y: auto;