Skip to content

Commit 74e30fe

Browse files
ryystryyst
authored
Docs: leftover CSS fixes from recent redesign (#2273)
* Docs: Move all new color & layout style changes into their own files Very rudimentary and basic namespacing for better maintainability. * Docs: Fine-tune new header font kerning This makes headers slightly more tighter from the font default. * Docs: Make Chrome scroll bar match selected theme color * Docs: Eliminate extra horizontal space from API refs parameter listings * Docs: Notification box readability fixes Aim for lighter contrasts, while keeping the general tone similar. * Docs: Adjust footer next/prev button colors for dark mode
1 parent 2a67b8c commit 74e30fe

4 files changed

Lines changed: 469 additions & 359 deletions

File tree

‎doc/_static/css/colors.css‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
/*
2+
* This files is dedicated purely to color scheme overrides of the stock light RTD
3+
* theme as well as the dark-mode theme provided by separate extension.
4+
*/
5+
6+
:root {
7+
/* --color-emphasis: #73c054; */
8+
--color-emphasis: #54c079;
9+
10+
--color-sidebar-bg-light: #2b2b2b;
11+
--color-sidebar-bg-dark: #171716;
12+
13+
--color-main-bg-light: #f2f2f2;
14+
--color-main-bg-dark: #202020;
15+
16+
/* Variable defined by the rtd dark mode extension.
17+
* Explicitly redefined to match the light mode link color. */
18+
---dark-link-color: #2980b9;
19+
}
20+
21+
22+
/*
23+
* Basic html element dark mode color fixes.
24+
*/
25+
html[data-theme="dark"] input,
26+
html[data-theme="dark"] label {
27+
color: var(--dark-text-color);
28+
}
29+
30+
31+
/*
32+
* Dark mode scrollbar color fixes, mostly for Chrome-based browsers.
33+
*/
34+
html[data-theme="dark"] * {
35+
scrollbar-color: #424242 #242424;
36+
}
37+
html[data-theme="dark"] > *::-webkit-scrollbar-track {
38+
background: #242424;
39+
}
40+
html[data-theme="dark"] > *::-webkit-scrollbar-thumb {
41+
background-color: #424242;
42+
border: 1px none #000000;
43+
}
44+
45+
46+
/*
47+
* Sidebar and top left logo area.
48+
*/
49+
.wy-side-nav-search,
50+
.wy-nav-side {
51+
background-color: var(--color-sidebar-bg-light) !important;
52+
}
53+
html[data-theme="dark"] .wy-side-nav-search,
54+
html[data-theme="dark"] .wy-nav-side {
55+
background-color: var(--color-sidebar-bg-dark) !important;
56+
}
57+
58+
/* Sidebar big headers, same for both themes. */
59+
.wy-menu-vertical p.caption {
60+
color: var(--color-emphasis);
61+
}
62+
/* 1st level sections */
63+
html[data-theme="dark"] .wy-menu-vertical li.current > a {
64+
background-color: var(--color-main-bg-dark) !important;
65+
}
66+
html[data-theme="dark"] .wy-menu-vertical li.toctree-l2 a {
67+
background-color: #131313 !important;
68+
}
69+
/* 2nd level sections */
70+
html[data-theme="dark"] .wy-menu-vertical li.toctree-l2.current a {
71+
background-color: #222222 !important;
72+
}
73+
/* 3rd level sections */
74+
html[data-theme="dark"] .wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {
75+
background-color: #222222 !important;
76+
border-right: currentcolor;
77+
}
78+
79+
/* Fix nav tree item visibility for API reference page titles */
80+
.toctree-l3 code,
81+
html[data-theme="dark"] .toctree-l3 code {
82+
background: none;
83+
border: none;
84+
font-size: 90%;
85+
}
86+
87+
88+
/*
89+
* Mobile top header bar.
90+
*/
91+
.wy-nav-top,
92+
.wy-nav-top a {
93+
color: var(--color-emphasis) !important;
94+
background-color: var(--color-sidebar-bg-light) !important;
95+
}
96+
html[data-theme="dark"] .wy-nav-top,
97+
html[data-theme="dark"] .wy-nav-top a {
98+
color: var(--color-emphasis) !important;
99+
background-color: var(--color-sidebar-bg-light) !important;
100+
}
101+
102+
103+
/*
104+
* The main content area
105+
*/
106+
.wy-nav-content {
107+
background-color: var(--color-main-bg-light);
108+
}
109+
html[data-theme="dark"] .wy-nav-content {
110+
background-color: var(--color-main-bg-dark) !important;
111+
}
112+
113+
114+
/*
115+
* The area under main content, when content doesn't fill the full height of the window
116+
*/
117+
.wy-nav-content-wrap {
118+
background-color: #e8e8e8;
119+
}
120+
html[data-theme="dark"] .wy-nav-content-wrap {
121+
background-color: #252525 !important;
122+
}
123+
124+
125+
/*
126+
* Fix the monospaced fonts in API quick reference listing
127+
*/
128+
#quickapi code {
129+
background: none;
130+
border: none;
131+
font-size: 85%;
132+
color: var(--dark-link-color);
133+
}
134+
135+
136+
/*
137+
* Mid-article notification box color fixes.
138+
*/
139+
/* Tips & Hints */
140+
html[data-theme="dark"] .rst-content .admonition.hint .admonition-title,
141+
html[data-theme="dark"] .rst-content .admonition.tip .admonition-title,
142+
html[data-theme="dark"] .rst-content .admonition.note .admonition-title {
143+
background-color: #478352 !important;
144+
}
145+
html[data-theme="dark"] .rst-content .admonition.hint,
146+
html[data-theme="dark"] .rst-content .admonition.tip,
147+
html[data-theme="dark"] .rst-content .admonition.note {
148+
background-color: #304a32 !important;
149+
color: #dedede;
150+
}
151+
152+
/* Warnings */
153+
html[data-theme="dark"] .rst-content .admonition.attention .admonition-title,
154+
html[data-theme="dark"] .rst-content .admonition.warning .admonition-title {
155+
background-color: #965f36 !important;
156+
}
157+
html[data-theme="dark"] .rst-content .admonition.attention,
158+
html[data-theme="dark"] .rst-content .admonition.warning {
159+
background-color: #543f28 !important;
160+
color: #dedede;
161+
}
162+
163+
/* Important */
164+
html[data-theme="dark"] .rst-content .admonition.important .admonition-title {
165+
background-color: #33678a !important;
166+
}
167+
html[data-theme="dark"] .rst-content .admonition.important {
168+
background-color: #27445a !important;
169+
color: #dedede;
170+
}
171+
172+
173+
/*
174+
* Syntax highlight color fixes for basic code blocks in dark mode.
175+
* <code_colors>
176+
*/
177+
html[data-theme="dark"] pre {
178+
/* baseline */
179+
background-color: #282828 !important;
180+
color: #e0e0e0 !important;
181+
}
182+
html[data-theme="dark"] pre .linenos {
183+
/* line numbers */
184+
color: #888 !important;
185+
border-right-color: #404040 !important;
186+
}
187+
html[data-theme="dark"] pre .nc {
188+
/* class declarations */
189+
color: #0880FF !important;
190+
}
191+
html[data-theme="dark"] pre .kc,
192+
html[data-theme="dark"] pre .kn,
193+
html[data-theme="dark"] pre .nb,
194+
html[data-theme="dark"] pre .bp,
195+
html[data-theme="dark"] pre .k {
196+
/* `None` + `import` + typehints + `self` + keywords */
197+
color: var(--color-emphasis) !important;
198+
}
199+
html[data-theme="dark"] pre .fm,
200+
html[data-theme="dark"] pre .vm,
201+
html[data-theme="dark"] pre .nf {
202+
/* function + method declarations + `__name__` */
203+
color: #00B7FF !important;
204+
font-weight: bold;
205+
}
206+
html[data-theme="dark"] pre .nd,
207+
html[data-theme="dark"] pre .ow,
208+
html[data-theme="dark"] pre .si,
209+
html[data-theme="dark"] pre .sa {
210+
/* decorators + `in` + f-string tokens */
211+
color: #D56CF2 !important;
212+
}
213+
html[data-theme="dark"] pre .s1,
214+
html[data-theme="dark"] pre .s2,
215+
html[data-theme="dark"] pre .sd {
216+
/* strings + docstrings */
217+
color: #FF873F !important;
218+
}
219+
html[data-theme="dark"] pre .c1 {
220+
/* comments */
221+
color: #4c8831 !important;
222+
}
223+
html[data-theme="dark"] pre .o,
224+
html[data-theme="dark"] pre .mf,
225+
html[data-theme="dark"] pre .mi {
226+
/* operators + numeral variable values */
227+
color: #afafaf !important;
228+
}
229+
html[data-theme="dark"] pre .gp {
230+
/* The REPL `>>>` token */
231+
color: var(--color-emphasis) !important;
232+
}
233+
html[data-theme="dark"] pre .hll {
234+
/* Line highlights background */
235+
background-color: #323331 !important;
236+
}
237+
238+
html[data-theme="dark"] .rst-content code.literal {
239+
/* in-line code blocks */
240+
color: #FF873F;
241+
}
242+
/* </code_colors> */
243+
244+
245+
/*
246+
* Color fixes for Sphinx-generated class and function info boxes in dark mode.
247+
* <sphinx_colors>
248+
*/
249+
html.writer-html4 .rst-content dl:not(.docutils) > dt,
250+
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
251+
border-color: var(--color-emphasis);
252+
color: #383838;
253+
background-color: #eef6eb;
254+
}
255+
html[data-theme="dark"].writer-html4 .rst-content dl:not(.docutils) > dt,
256+
html[data-theme="dark"].writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
257+
border-color: #689d52 !important;
258+
color: #ababab !important;
259+
background-color: #262826 !important;
260+
}
261+
262+
html[data-theme="dark"] .sig.py .descname .pre,
263+
html[data-theme="dark"] .sig.py .descclassname .pre {
264+
color: #eee !important;
265+
}
266+
html[data-theme="dark"] .rst-content .viewcode-link {
267+
/* make the "[source]" link less popping in the definition boxes */
268+
color: var(--dark-link-color);
269+
opacity: 0.3;
270+
}
271+
/* </sphinx_colors> */
272+
273+
274+
/*
275+
* Footer prev/next buttons
276+
*/
277+
html[data-theme="dark"] .rst-footer-buttons .btn-neutral {
278+
color: #c1c1c1 !important;
279+
background-color: #1a1a1a !important;
280+
}
281+
html[data-theme="dark"] .rst-footer-buttons .btn-neutral:hover {
282+
color: var(--color-emphasis) !important;
283+
background-color: #1a1a1a !important;
284+
}
285+

0 commit comments

Comments
 (0)