Skip to content

Commit 9d094b3

Browse files
vkarpov15vkarpov15
authored
Merge pull request #15753 from White-Devil2839/master
feat: Add dark mode support and CSS improvements
2 parents 39b8251 + e2464af commit 9d094b3

File tree

7 files changed

+905
-57
lines changed

7 files changed

+905
-57
lines changed

‎docs/css/api.css‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,28 @@
1212
height: 100%;
1313
padding-bottom: 10px;
1414
overflow-y: auto;
15+
background-color: var(--menu-bg, #fafafa);
16+
border-left: 1px solid var(--border-color, #ddd);
17+
scrollbar-width: thin;
18+
scrollbar-color: var(--border-color, #ddd) var(--menu-bg, #fafafa);
19+
transition: background-color 0.3s ease, border-color 0.3s ease;
20+
}
21+
22+
.api-nav::-webkit-scrollbar {
23+
width: 8px;
24+
}
25+
26+
.api-nav::-webkit-scrollbar-track {
27+
background: var(--menu-bg, #fafafa);
28+
}
29+
30+
.api-nav::-webkit-scrollbar-thumb {
31+
background-color: var(--border-color, #ddd);
32+
border-radius: 4px;
33+
}
34+
35+
.api-nav::-webkit-scrollbar-thumb:hover {
36+
background-color: var(--text-muted, #777);
1537
}
1638

1739
.api-nav .nav-item-title {
@@ -24,7 +46,18 @@
2446
}
2547

2648
.api-nav a {
27-
color: #777;
49+
color: var(--text-muted, #777);
50+
transition: color 0.2s ease;
51+
}
52+
53+
.api-nav a:hover {
54+
color: var(--link-color, #0971B2);
55+
}
56+
57+
.api-nav a:focus-visible {
58+
outline: 3px solid var(--focus-ring, #0971B2);
59+
outline-offset: 2px;
60+
border-radius: 2px;
2861
}
2962

3063
.api-nav .nav-item-sub {
@@ -54,12 +87,47 @@
5487
margin-top: 3em;
5588
}
5689

90+
/* Responsive API navigation */
5791
@media (max-width: 1785px) {
5892
.api-nav {
5993
display: none;
6094
}
6195
}
6296

97+
/* Tablet: Show API nav as collapsible sidebar */
98+
@media (min-width: 1400px) and (max-width: 1785px) {
99+
.api-nav {
100+
display: block;
101+
left: auto;
102+
right: 0;
103+
width: 280px;
104+
z-index: 10;
105+
}
106+
}
107+
108+
/* Mobile: API nav as bottom sheet or hidden */
109+
@media (max-width: 1400px) {
110+
.api-nav {
111+
display: none;
112+
}
113+
114+
/* Optionally show as bottom sheet on mobile */
115+
.api-nav.mobile-open {
116+
display: block;
117+
position: fixed;
118+
bottom: 0;
119+
left: 0;
120+
right: 0;
121+
top: auto;
122+
height: 50vh;
123+
width: 100%;
124+
border-left: none;
125+
border-top: 1px solid var(--border-color, #ddd);
126+
border-radius: 8px 8px 0 0;
127+
box-shadow: 0 -2px 8px var(--shadow, rgba(0, 0, 0, 0.1));
128+
}
129+
}
130+
63131
ul {
64132
margin-top: -10px;
65133
}
@@ -166,4 +234,37 @@ hr.separate-api {
166234

167235
.deprecated {
168236
color: #ff0000;
237+
font-weight: 600;
238+
}
239+
240+
/* Accessibility improvements */
241+
.method-type:focus-visible,
242+
.api-nav .nav-item-title:focus-visible {
243+
outline: 3px solid var(--focus-ring, #0971B2);
244+
outline-offset: 2px;
245+
border-radius: 2px;
246+
}
247+
248+
/* Dark mode support for API page */
249+
@media (prefers-color-scheme: dark) {
250+
.api-nav {
251+
background-color: var(--menu-bg, #252525);
252+
border-left-color: var(--border-color, #444);
253+
}
254+
255+
.api-nav a {
256+
color: var(--text-muted, #888);
257+
}
258+
259+
.api-nav a:hover {
260+
color: var(--link-color, #4a9eff);
261+
}
262+
263+
.native-ad {
264+
background-color: var(--bg-secondary, #2d2d2d);
265+
}
266+
267+
.native-ad a {
268+
color: var(--text-primary, #e0e0e0);
269+
}
169270
}

‎docs/css/github.css‎

Lines changed: 192 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
11
code {
2-
background-color: #eee;
3-
padding: 2px 4px;
2+
background-color: var(--code-bg, #eee);
3+
padding: 2px 6px;
44
font-size: 0.9em;
5-
color: #800;
5+
color: var(--link-color, #800);
66
border-radius: 4px;
7+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
8+
transition: background-color 0.3s ease, color 0.3s ease;
79
}
810

911
pre code {
1012
background-color: transparent;
1113
padding: 0;
1214
font-size: 1em;
13-
color: #222;
15+
color: var(--code-text, #222);
1416
}
1517

1618
pre {
1719
display: block;
18-
padding: 9.5px;
19-
margin: 10px 0 10px;
20+
padding: 12px 16px;
21+
margin: 16px 0;
2022
font-size: 13px;
21-
line-height: 1.42857143;
22-
color: #333;
23-
word-break: break-all;
24-
word-wrap: break-word;
25-
background-color: #f5f5f5;
26-
border: 1px solid #ccc;
27-
border-radius: 4px;
28-
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
23+
line-height: 1.6;
24+
color: var(--code-text, #333);
25+
word-break: break-word;
26+
overflow-wrap: break-word;
27+
overflow-x: auto;
28+
background-color: var(--code-bg, #f5f5f5);
29+
border: 1px solid var(--border-color, #ccc);
30+
border-radius: 6px;
31+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
32+
box-shadow: 0 1px 3px var(--shadow, rgba(0, 0, 0, 0.1));
33+
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
34+
}
35+
36+
/* Enable absolute positioning for copy button and improve hover effect */
37+
pre {
38+
position: relative;
39+
}
40+
41+
pre:hover {
42+
box-shadow: 0 2px 6px var(--shadow, rgba(0, 0, 0, 0.15));
2943
}
3044

3145
/*
@@ -38,9 +52,10 @@ github.com style (c) Vasily Polovnyov <[email protected]>
3852
display: block;
3953
overflow-x: auto;
4054
padding: 0.5em;
41-
color: #333;
42-
background: #f8f8f8;
55+
color: var(--code-text, #333);
56+
background: var(--code-bg, #f8f8f8);
4357
-webkit-text-size-adjust: none;
58+
transition: background-color 0.3s ease, color 0.3s ease;
4459
}
4560

4661
.hljs-comment,
@@ -152,3 +167,164 @@ github.com style (c) Vasily Polovnyov <[email protected]>
152167
.hljs-chunk {
153168
color: #aaa;
154169
}
170+
171+
/* Dark mode support for syntax highlighting */
172+
.code-theme-dark code {
173+
background-color: var(--code-bg, #2d2d2d);
174+
color: var(--link-color, #4a9eff);
175+
}
176+
177+
.code-theme-dark pre {
178+
background-color: var(--code-bg, #2d2d2d);
179+
border-color: var(--border-color, #444);
180+
color: var(--code-text, #e0e0e0);
181+
}
182+
183+
.code-theme-dark .hljs {
184+
background: var(--code-bg, #2d2d2d);
185+
color: var(--code-text, #e0e0e0);
186+
}
187+
188+
.code-theme-dark .hljs-comment,
189+
.code-theme-dark .diff .hljs-header,
190+
.code-theme-dark .hljs-javadoc {
191+
color: #6a9955;
192+
}
193+
194+
.code-theme-dark .hljs-keyword,
195+
.code-theme-dark .css .rule .hljs-keyword,
196+
.code-theme-dark .hljs-winutils,
197+
.code-theme-dark .nginx .hljs-title,
198+
.code-theme-dark .hljs-subst,
199+
.code-theme-dark .hljs-request,
200+
.code-theme-dark .hljs-status {
201+
color: #569cd6;
202+
font-weight: bold;
203+
}
204+
205+
.code-theme-dark .hljs-number,
206+
.code-theme-dark .hljs-hexcolor,
207+
.code-theme-dark .ruby .hljs-constant {
208+
color: #b5cea8;
209+
}
210+
211+
.code-theme-dark .hljs-string,
212+
.code-theme-dark .hljs-tag .hljs-value,
213+
.code-theme-dark .hljs-phpdoc,
214+
.code-theme-dark .hljs-dartdoc,
215+
.code-theme-dark .tex .hljs-formula {
216+
color: #ce9178;
217+
}
218+
219+
.code-theme-dark .hljs-title,
220+
.code-theme-dark .hljs-id,
221+
.code-theme-dark .scss .hljs-preprocessor {
222+
color: #d7ba7d;
223+
font-weight: bold;
224+
}
225+
226+
.code-theme-dark .hljs-class .hljs-title,
227+
.code-theme-dark .hljs-type,
228+
.code-theme-dark .vhdl .hljs-literal,
229+
.code-theme-dark .tex .hljs-command {
230+
color: #4ec9b0;
231+
font-weight: bold;
232+
}
233+
234+
.code-theme-dark .hljs-tag,
235+
.code-theme-dark .hljs-tag .hljs-title,
236+
.code-theme-dark .hljs-rules .hljs-property,
237+
.code-theme-dark .django .hljs-tag .hljs-keyword {
238+
color: #569cd6;
239+
font-weight: normal;
240+
}
241+
242+
.code-theme-dark .hljs-attribute,
243+
.code-theme-dark .hljs-variable,
244+
.code-theme-dark .lisp .hljs-body {
245+
color: #9cdcfe;
246+
}
247+
248+
.code-theme-dark .hljs-regexp {
249+
color: #d16969;
250+
}
251+
252+
.code-theme-dark .hljs-symbol,
253+
.code-theme-dark .ruby .hljs-symbol .hljs-string,
254+
.code-theme-dark .lisp .hljs-keyword,
255+
.code-theme-dark .clojure .hljs-keyword,
256+
.code-theme-dark .scheme .hljs-keyword,
257+
.code-theme-dark .tex .hljs-special,
258+
.code-theme-dark .hljs-prompt {
259+
color: #c586c0;
260+
}
261+
262+
.code-theme-dark .hljs-built_in {
263+
color: #4fc1ff;
264+
}
265+
266+
.code-theme-dark .hljs-preprocessor,
267+
.code-theme-dark .hljs-pragma,
268+
.code-theme-dark .hljs-pi,
269+
.code-theme-dark .hljs-doctype,
270+
.code-theme-dark .hljs-shebang,
271+
.code-theme-dark .hljs-cdata {
272+
color: #808080;
273+
font-weight: bold;
274+
}
275+
276+
.code-theme-dark .hljs-deletion {
277+
background: #5a1d1d;
278+
color: #f48771;
279+
}
280+
281+
.code-theme-dark .hljs-addition {
282+
background: #1e3a1e;
283+
color: #b5cea8;
284+
}
285+
286+
.code-theme-dark .diff .hljs-change {
287+
background: #2d4d2d;
288+
color: #4ec9b0;
289+
}
290+
291+
.code-theme-dark .hljs-chunk {
292+
color: #808080;
293+
}
294+
295+
/* Accessibility: Ensure sufficient contrast for code */
296+
code,
297+
pre,
298+
.hljs {
299+
/* WCAG AA compliant contrast ratios */
300+
min-height: 1.5em;
301+
}
302+
303+
/* Improve code block readability on small screens */
304+
@media (max-width: 768px) {
305+
pre {
306+
font-size: 12px;
307+
padding: 10px;
308+
margin: 12px 0;
309+
}
310+
311+
code {
312+
font-size: 0.85em;
313+
padding: 2px 4px;
314+
}
315+
}
316+
317+
/* Print styles for code blocks */
318+
@media print {
319+
pre {
320+
border: 1px solid #ccc;
321+
page-break-inside: avoid;
322+
background: #f5f5f5;
323+
color: #000;
324+
}
325+
326+
code {
327+
background: #f0f0f0;
328+
color: #000;
329+
}
330+
}

0 commit comments

Comments
 (0)