Skip to content

Commit 5d2f8d1

Browse files
authored
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.
1 parent 938c2d2 commit 5d2f8d1

File tree

1 file changed

+31
-9
lines changed
  • pep_sphinx_extensions/pep_theme/static

1 file changed

+31
-9
lines changed

pep_sphinx_extensions/pep_theme/static/style.css

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,19 @@
3232
/* Set master colours */
3333
:root {
3434
--colour-background: var(--light, white) var(--dark, #011);
35-
--colour-background-accent: var(--light, #eee) var(--dark, #333);
35+
--colour-background-accent: var(--light, #ccc) var(--dark, #333);
3636
--colour-text: var(--light, #333) var(--dark, #ccc);
37-
--colour-links: var(--light, #0072aa) var(--dark, #8bf);
37+
--colour-links: var(--light, #069) var(--dark, #8bf);
38+
--colour-links-light: var(--light, #057) var(--dark, #acf);
3839
--colour-scrollbar: var(--light, #ccc) var(--dark, #333);
3940
--colour-rule-strong: var(--light, #888) var(--dark, #777);
4041
--colour-rule-light: var(--light, #ddd) var(--dark, #222);
4142
--colour-inline-code: var(--light, #f8f8f8) var(--dark, #333);
42-
--colour-warning: var(--light, #fee) var(--dark, #900);
43+
--colour-error: var(--light, #faa) var(--dark, #800);
44+
--colour-warning: var(--light, #fca) var(--dark, #840);
45+
--colour-caution: var(--light, #ffa) var(--dark, #550);
46+
--colour-attention: var(--light, #bdf) var(--dark, #045);
47+
--colour-tip: var(--light, #bfc) var(--dark, #041);
4348
}
4449

4550
img.invert-in-dark-mode {
@@ -287,18 +292,35 @@ ul.breadcrumbs a {
287292
:root[data-colour_scheme="light"] #colour-scheme-cycler svg.colour-scheme-icon-when-light {display: initial}
288293

289294
/* Admonitions rules */
290-
div.note,
291-
div.warning {
292-
padding: 0.5rem 0.75rem;
293-
margin-top: 1rem;
295+
div.admonition {
296+
background-color: var(--colour-background-accent);
294297
margin-bottom: 1rem;
298+
margin-top: 1rem;
299+
padding: 0.5rem 0.75rem;
295300
}
296-
div.note {
297-
background-color: var(--colour-background-accent);
301+
div.admonition a {
302+
color: var(--colour-links-light);
303+
}
304+
305+
div.danger,
306+
div.error {
307+
background-color: var(--colour-error);
298308
}
299309
div.warning {
300310
background-color: var(--colour-warning);
301311
}
312+
div.caution {
313+
background-color: var(--colour-caution);
314+
}
315+
div.attention,
316+
div.important {
317+
background-color: var(--colour-attention);
318+
}
319+
div.hint,
320+
div.tip {
321+
background-color: var(--colour-tip);
322+
}
323+
302324
p.admonition-title {
303325
font-weight: bold;
304326
}

0 commit comments

Comments
 (0)