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:
parent
938c2d277b
commit
5d2f8d10ea
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue