Style: Fix colors and style for all admonitions (#2691)

Since the basic admonition admonition styles are just applied to a couple individual admonitions, rather than admonitions in general, those other than "warning" and "note" won't display as admonitions at all. In addition to fixing that, this PR adds appropriate, standard colors for each of the additional admonition types in both light and dark mode.
This commit is contained in:
CAM Gerlach 2022-07-06 13:59:41 -05:00 committed by GitHub
parent 938c2d277b
commit 5d2f8d10ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 10 deletions

View File

@ -32,14 +32,19 @@
/* Set master colours */
:root {
--colour-background: var(--light, white) var(--dark, #011);
--colour-background-accent: var(--light, #eee) var(--dark, #333);
--colour-background-accent: var(--light, #ccc) var(--dark, #333);
--colour-text: var(--light, #333) var(--dark, #ccc);
--colour-links: var(--light, #0072aa) var(--dark, #8bf);
--colour-links: var(--light, #069) var(--dark, #8bf);
--colour-links-light: var(--light, #057) var(--dark, #acf);
--colour-scrollbar: var(--light, #ccc) var(--dark, #333);
--colour-rule-strong: var(--light, #888) var(--dark, #777);
--colour-rule-light: var(--light, #ddd) var(--dark, #222);
--colour-inline-code: var(--light, #f8f8f8) var(--dark, #333);
--colour-warning: var(--light, #fee) var(--dark, #900);
--colour-error: var(--light, #faa) var(--dark, #800);
--colour-warning: var(--light, #fca) var(--dark, #840);
--colour-caution: var(--light, #ffa) var(--dark, #550);
--colour-attention: var(--light, #bdf) var(--dark, #045);
--colour-tip: var(--light, #bfc) var(--dark, #041);
}
img.invert-in-dark-mode {
@ -287,18 +292,35 @@ ul.breadcrumbs a {
:root[data-colour_scheme="light"] #colour-scheme-cycler svg.colour-scheme-icon-when-light {display: initial}
/* Admonitions rules */
div.note,
div.warning {
padding: 0.5rem 0.75rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
div.note {
div.admonition {
background-color: var(--colour-background-accent);
margin-bottom: 1rem;
margin-top: 1rem;
padding: 0.5rem 0.75rem;
}
div.admonition a {
color: var(--colour-links-light);
}
div.danger,
div.error {
background-color: var(--colour-error);
}
div.warning {
background-color: var(--colour-warning);
}
div.caution {
background-color: var(--colour-caution);
}
div.attention,
div.important {
background-color: var(--colour-attention);
}
div.hint,
div.tip {
background-color: var(--colour-tip);
}
p.admonition-title {
font-weight: bold;
}