1+ html {
2+ scroll-padding-top : 80px ;
3+ }
14body {
25 padding-bottom : 20px ;
36}
@@ -33,6 +36,35 @@ h2, h3 {
3336}
3437.navbar {
3538 margin-bottom : 30px ;
39+ position : sticky;
40+ top : 0px ;
41+ z-index : 1 ;
42+ background-color : rgba (255 , 255 , 255 , 1 );
43+ border-bottom : 1px solid # EEE ;
44+ height : 60px ;
45+ }
46+ .brand-type {
47+ color : # E83524 ;
48+ }
49+ .brand-orm {
50+ color : # 000 ;
51+ }
52+ .svgIcon {
53+ fill : # 2c2c2c ;
54+ }
55+ @supports (-webkit-backdrop-filter : blur (6px )) or (backdrop-filter : blur (6px )) {
56+ .navbar {
57+ background-color : rgba (255 , 255 , 255 , 0.6 );
58+ -webkit-backdrop-filter : blur (6px );
59+ backdrop-filter : blur (6px );
60+ }
61+
62+ @media (prefers-color-scheme : dark) {
63+ .navbar {
64+ background-color : rgba (36 , 37 , 38 , 0.6 );
65+ border-bottom : 1px solid # 1b1b1b ;
66+ }
67+ }
3668}
3769.document h1 + ul , .document h1 + ul ul {
3870 list-style : none;
@@ -55,9 +87,30 @@ h1 code, h2 code, h3 code {
5587 color : # 333 ;
5688}
5789
58- .bg-light {
59- background-color : transparent !important ;
60- border-bottom : 1px solid # EEE ;
90+ .panels {
91+ display : flex;
92+ flex-direction : row;;
93+ flex- wrap: wrap;
94+ }
95+
96+ .left-panel {
97+ max-width : 340px ;
98+ min-width : 240px ;
99+ padding-right : 16px ;
100+ flex : 1 ;
101+ }
102+
103+ @media only screen and (max-width : 579px ) {
104+ .left-panel {
105+ max-width : 579px ;
106+ }
107+ }
108+
109+ .right-panel {
110+ flex : 2 ;
111+ width : 0px ;
112+ min-width : 340px ;
113+ padding : 0px 16px ;
61114}
62115
63116.left-panel ul {
@@ -116,14 +169,14 @@ ol {
116169 cursor : pointer;
117170}
118171
119- .language .dropdown-item : hover ,
172+ .language .dropdown-item : hover ,
120173.language .dropdown-item : focus {
121174 color : # E83524 !important ;
122175 text-decoration : none;
123176 background-color : # f8f9fa ;
124177}
125-
126- .language .dropdown-item .active ,
178+
179+ .language .dropdown-item .active ,
127180.language .dropdown-item : active {
128181 color : # ffffff ;
129182 text-decoration : none;
134187 border-top : 1px solid # eee ;
135188 padding-top : 20px ;
136189 margin-left : 80px ;
137- margin-right : 80 px ;
190+ margin-right : 60 px ;
138191 min-width : 120px ;
139192 margin-bottom : 20px ;
140193}
@@ -247,3 +300,141 @@ img {
247300.DocSearch mark {
248301 padding : initial;
249302}
303+
304+ @media (prefers-color-scheme : dark) {
305+ body {
306+ background-color : # 18191a ;
307+ color : # eeeeee ;
308+ }
309+
310+ .carbon-container {
311+ border-top : 1px solid # 3b3b3b ;
312+ }
313+ h2 , h3 {
314+ border-bottom : 1px solid # 3b3b3b ;
315+ }
316+
317+ .brand-type {
318+ color : # E83524 ;
319+ }
320+ .brand-orm {
321+ color : # ffffff ;
322+ }
323+ .svgIcon {
324+ fill : # eeeeee ;
325+ }
326+
327+ a .anchor {
328+ color : # E83524 ;
329+ }
330+
331+ a {
332+ color : # 8ad4ff ;
333+ }
334+
335+ a : not (.anchor ): hover {
336+ color : # dbefff ;
337+ }
338+
339+ .document h1 + ul li ::before {
340+ color : # E83524 ;
341+ }
342+ code {
343+ color : # 8ad4ff ;
344+ }
345+ h1 code , h2 code , h3 code {
346+ color : # 333 ;
347+ }
348+
349+ .left-panel ul a {
350+ color : # cccccc ;
351+ }
352+ .left-panel ul a .router-link-active {
353+ color : # E83524 ;
354+ }
355+ .left-panel ul a b {
356+ color : # 999999 ;
357+ }
358+ .left-panel ul a : hover {
359+ color : # E83524 ;
360+ }
361+ .left-panel ul a b : hover {
362+ color : # E83524 ;
363+ }
364+
365+ .navbar-brand {
366+ font-size : 1.4rem ;
367+ }
368+
369+ .contribute {
370+ color : # 999 ;
371+ }
372+
373+ .contribute a {
374+ color : # cecece ;
375+ }
376+
377+
378+ .language .dropdown-menu a {
379+ color : # 616161 ;
380+ }
381+
382+ .language .dropdown-item : hover ,
383+ .language .dropdown-item : focus {
384+ color : # E83524 !important ;
385+ background-color : # f8f9fa ;
386+ }
387+
388+ .language .dropdown-item .active ,
389+ .language .dropdown-item : active {
390+ color : # ffffff ;
391+ background-color : transparent;
392+ }
393+
394+ img [src $= "/logo_big.png" ] {
395+ background-color : rgb (255 255 255 );
396+ border-radius : 12px ;
397+ }
398+
399+
400+ # carbonads {
401+ background-color : hsl (0 , 0% , 2% );
402+ }
403+
404+ # carbonads a {
405+ color : inherit;
406+ }
407+
408+ # carbonads a : hover {
409+ color : inherit;
410+ }
411+
412+ .DocSearch {
413+ --docsearch-text-color : # f5f6f7 ;
414+ --docsearch-muted-color : # 7f8497 ;
415+ --docsearch-logo-color : # fff ;
416+ --docsearch-container-background : rgba (47 , 55 , 69 , 0.7 );
417+
418+ /* Modal */
419+ --docsearch-modal-background : # 18191a ;
420+
421+ /* Search box */
422+ --docsearch-searchbox-background : # 18191a ;
423+ --docsearch-searchbox-focus-background : # 000 ;
424+
425+ /* Hit */
426+ --docsearch-hit-color : # f5f6f7 ;
427+ --docsearch-hit-active-color : # fff ;
428+ --docsearch-hit-background : # 1c1e21 ;
429+
430+ /* Footer */
431+ --docsearch-footer-background : # 242526 ;
432+ --docsearch-key-gradient : linear-gradient (-26.5deg , # 515151, # 404040 );
433+
434+ /* Shadows */
435+ --docsearch-modal-shadow : inset 1px 1px 0 0 # 2c2e40, 0 , 0 3px 8px 0 # 000309 ;
436+ --docsearch-hit-shadow : none;
437+ --docsearch-key-shadow : inset 0 -2px 0 0 # 282d55, inset 0 0 1px 1px # 51577d, 0 2px 2px 0 rgba (3 , 4 , 9 , .3 );
438+ --docsearch-footer-shadow : inset 0 1px 0 0 rgba (73 , 76 , 106 , .5 ), 0 -4px 8px 0 rgba (0 , 0 , 0 , .2 );
439+ }
440+ }
0 commit comments