[v2,17/21] docs/sphinx: add CSS styling for qmp-example directive

Commit Message

John Snow June 26, 2024, 10:21 p.m. UTC

From: Harmonie Snow <[e-mail]>

Add CSS styling for qmp-example directives to increase readability and
consistently style all example blocks.

Signed-off-by: Harmonie Snow <[e-mail]>
Signed-off-by: John Snow <[e-mail]>
---
 docs/sphinx-static/theme_overrides.css | 46 ++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

Patch

diff --git a/docs/sphinx-static/theme_overrides.css b/docs/sphinx-static/theme_overrides.css
index c70ef951286..f3223af62b2 100644
--- a/docs/sphinx-static/theme_overrides.css
+++ b/docs/sphinx-static/theme_overrides.css
@@ -87,6 +87,52 @@  div[class^="highlight"] pre {
     padding-bottom: 1px;
 }
 
+/* qmp-example directive styling */
+
+.rst-content .admonition-example {
+    background-color: #fcfcfc;
+    padding: 0px;
+}
+
+.rst-content .admonition-example > .admonition-title {
+    background-color: #338254;
+    margin: 0px;
+}
+
+.rst-content .admonition-example > div[class^=highlight] {
+    border-top: 1px solid #d7f0d7;
+    border-bottom: 1px solid #d7f0d7;
+    border-left: 3px solid #d7f0d7;
+    border-right: 3px solid #d7f0d7;
+}
+
+.rst-content .admonition-example .highlight {
+    background: linear-gradient(#d9f1d9 1%, #ecf8ec 10%,
+                                #ecf8ec 90%, #d9f1d9 99%);
+}
+
+.rst-content .admonition-example > .admonition-title:before {
+    content: "