Add backgrounds and borders to admonitions

python · Jun 9, 2024 · 20af5ec · 20af5ec
1 parent 97952b5
commit 20af5ec
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 5 deletions.
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -242,7 +242,74 @@ div.body pre {
     border: 1px solid #ac9;
 }
 
-div.body div.admonition,
+/* Admonitions */
+:root {
+    --admonition-background: #eee;
+    --admonition-border: #ccc;
+    --attention-background: #bbddff5c;
+    --attention-border: #0000ff36;
+    --caution-background: #ffc;
+    --caution-border: #dddd66;
+    --danger-background: #ffe4e4;
+    --danger-border: red;
+    --error-background: #ffe4e4;
+    --error-border: red;
+    --hint-background: #bfc;
+    --hint-border: green;
+    --seealso-background: #ffc;
+    --seealso-border: #dddd66;
+    --tip-background: #bfc;
+    --tip-border: green;
+    --warning-background: #ffe4e4;
+    --warning-border: red;
+}
+
+div.body div.admonition {
+    background-color: var(--admonition-background);
+    border-radius: 3px;
+    border: 1px solid var(--admonition-border);
+}
+
+div.body div.admonition.attention {
+    background-color: var(--attention-background);
+    border-color: var(--attention-border);
+}
+
+div.body div.admonition.caution {
+    background-color: var(--caution-background);
+    border-color: var(--caution-border);
+}
+
+div.body div.admonition.danger {
+    background-color: var(--danger-background);
+    border-color: var(--danger-border);
+}
+
+div.body div.admonition.error {
+    background-color: var(--error-background);
+    border-color: var(--error-border);
+}
+
+div.body div.admonition.hint {
+    background-color: var(--hint-background);
+    border-color: var(--hint-border);
+}
+
+div.body div.admonition.seealso {
+    background-color: var(--seealso-background);
+    border-color: var(--seealso-border);
+}
+
+div.body div.admonition.tip {
+    background-color: var(--tip-background);
+    border-color: var(--tip-border);
+}
+
+div.body div.admonition.warning {
+    background-color: var(--warning-background);
+    border-color: var(--warning-border);
+}
+
 div.body div.impl-detail {
     border-radius: 3px;
 }
@@ -251,10 +318,6 @@ div.body div.impl-detail > p {
     margin: 0;
 }
 
-div.body div.seealso {
-    border: 1px solid #dddd66;
-}
-
 div.body a {
     color: #0072aa;
 }

diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css
@@ -113,6 +113,28 @@ div.warning {
     background-color: rgba(255, 0, 0, 0.5);
 }
 
+/* Admonitions */
+:root {
+    --admonition-background: rgba(255, 255, 255, 0.1);
+    --admonition-border: currentColor;
+    --attention-background: rgba(255, 255, 255, 0.1);
+    --attention-border: currentColor;
+    --caution-background: rgba(255, 255, 0, 0.1);
+    --caution-border: #dd6;
+    --danger-background: rgba(255, 0, 0, 0.2);
+    --danger-border: #f66;
+    --error-background: rgba(255, 0, 0, 0.2);
+    --error-border: #f66;
+    --hint-background: #0044117a;
+    --hint-border: green;
+    --seealso-background: rgba(255, 255, 0, 0.1);
+    --seealso-border: #dd6;
+    --tip-background: #0044117a;
+    --tip-border: green;
+    --warning-background: rgba(255, 0, 0, 0.2);
+    --warning-border: #f66;
+}
+
 aside.topic,
 div.topic,
 div.note,