docs/sphinx: add CSS styling for qmp-example directive
Add CSS styling for qmp-example directives to increase readability and consistently style all example blocks. Signed-off-by: Harmonie Snow <harmonie@gmail.com> Signed-off-by: John Snow <jsnow@redhat.com> Acked-by: Markus Armbruster <armbru@redhat.com> Message-ID: <20240717021312.606116-6-jsnow@redhat.com> Signed-off-by: Markus Armbruster <armbru@redhat.com>
This commit is contained in:
parent
76e375fc3c
commit
e597a73a8c
@ -87,6 +87,55 @@ div[class^="highlight"] pre {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
/* qmp-example directive styling */
|
||||
|
||||
.rst-content .admonition-example {
|
||||
/* do not apply the standard admonition background */
|
||||
background-color: transparent;
|
||||
border: solid #ffd2ed 1px;
|
||||
}
|
||||
|
||||
.rst-content .admonition-example > .admonition-title:before {
|
||||
content: "▷";
|
||||
}
|
||||
|
||||
.rst-content .admonition-example > .admonition-title {
|
||||
background-color: #5980a6;
|
||||
}
|
||||
|
||||
.rst-content .admonition-example > div[class^="highlight"] {
|
||||
/* make code boxes take up the full width of the admonition w/o margin */
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
|
||||
border-top: 1px solid #ffd2ed;
|
||||
border-bottom: 1px solid #ffd2ed;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.rst-content .admonition-example > div[class^="highlight"]:nth-child(2) {
|
||||
/* If a code box is the second element in an example admonition,
|
||||
* it is the first child after the title. let it sit flush against
|
||||
* the title. */
|
||||
margin-top: -12px;
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.rst-content .admonition-example > div[class^="highlight"]:last-child {
|
||||
/* If a code box is the final element in an example admonition, don't
|
||||
* render margin below it; let it sit flush with the end of the
|
||||
* admonition box */
|
||||
margin-bottom: -12px;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.rst-content .admonition-example .highlight {
|
||||
background-color: #fffafd;
|
||||
}
|
||||
|
||||
/* end qmp-example styling */
|
||||
|
||||
@media screen {
|
||||
|
||||
/* content column
|
||||
|
Loading…
Reference in New Issue
Block a user