1/*
2 * SPDX-FileCopyrightText: 2021 GNOME Foundation
3 *
4 * SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
5 */
6
7@import url("solarized-light.css") (prefers-color-scheme: light);
8@import url("solarized-dark.css") (prefers-color-scheme: dark);
9
10@import url("fonts.css");
11
12/*********************************
13 * LIGHT THEME
14 *********************************/
15:root {
16
17  /* colors */
18  --text-color: #333;
19  --text-color-muted: #999;
20  --primary: rgb(28, 118, 228);
21  --body-bg: #fff;
22  --sidebar-primary: rgb(144, 194, 255);
23  --sidebar-bg: #151515;
24  --sidebar-selected-bg: var(--primary);
25  --sidebar-hover-bg: rgba(127, 127, 127, 0.2);
26  --sidebar-text-color: #fafafa;
27  --sidebar-padding: 1.5em;
28
29  /* boxes, e.g. code blocks */
30  --box-bg: rgba(135, 135, 135, 0.085);
31  --box-radius: 0.35rem;
32  --box-padding: 0.75rem;
33  --box-margin: 0.75rem 0;
34  --box-text-color: #111;
35
36  /* typography */
37  --body-font-family: "Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
38  --body-font-scale: 0.95;
39  --body-font-size: calc(var(--body-font-scale) * clamp(16px, 1vw, 18px));
40  --body-font-weight: normal;
41
42  --monospace-font-family: "Source Code Pro", monospace;
43  --monospace-font-size: calc(0.86 * var(--body-font-size)); /* Monospace fonts are very different in terms of font-sizes. Adjust this value to scale it */
44
45  --heading-font-family: "Red Hat Display", var(--body-font-family);
46  --heading-weight: 900;
47  --heading-font-scale: 1.05;
48
49  --heading-small-font-family: var(--heading-font-family);
50  --heading-small-weight: 600;
51  --heading-small-font-scale: 1;
52
53  --heading-table-font-family: var(--heading-font-family);
54  --heading-table-weight: 600;
55
56  --heading-docblock-color: #6d6d6d;  /* docblocks have headings from source comments. we want them to differ.*/
57  --heading-docblock-scale: 0.9;        /* docblocks have headings from source comments. we want them to differ.*/
58
59  --symbol-font-family: var(--heading-font-family);
60  --symbol-font-weight: 500;
61  --symbol-font-scale: 1;
62
63  --table-font-size: 0.92em;    /* Tables often contain lots information. It's better to scale them down a big to get more sutff fitted inside */
64
65  /* misc */
66  --prefered-content-width: 90ch; /* The preferred width for the readable content */
67  --anchor-sign: "#";
68
69}
70
71/*********************************
72 * DARK THEME (overrides)
73 *********************************/
74 @media (prefers-color-scheme: dark) {
75  :root {
76    --primary: rgb(144, 194, 255);
77    --text-color: #f6f6f6;
78    --text-color-muted: #686868;
79    --body-bg: #121212;
80    --sidebar-primary: rgb(144, 194, 255);
81    --sidebar-bg: #1e1e1e;
82    --sidebar-selected-bg: rgb(17, 112, 228);
83    --sidebar-text-color: #fafafa;
84    --box-bg: rgba(135, 135, 135, 0.1);
85    --box-text-color: #fff;
86    --heading-docblock-color: #b7b7b7;
87  }
88}
89
90/*********************************
91 * GENERAL STYLING
92 *********************************/
93*,
94*:before,
95*:after {
96  box-sizing: border-box;
97}
98
99::-moz-selection {
100  color: white;
101  background: var(--primary);
102}
103
104::selection {
105  color: white;
106  background: var(--primary);
107}
108
109::-webkit-scrollbar {
110  width: 8px;
111  height: 8px;
112}
113
114::-webkit-scrollbar-thumb {
115  border-radius: 10px;
116  background: rgba(128, 128, 128, 0.6);
117}
118
119::-webkit-scrollbar-thumb:hover {
120  background: rgba(128, 128, 128, 1);
121}
122
123::-webkit-scrollbar-track {
124  background: rgba(128, 128, 128, 0.15);
125}
126
127* {
128  scrollbar-width: initial;
129}
130
131body {
132  font: 16px/1.5 var(--body-font-family);
133  font-weight: var(--body-font-weight);
134  font-size: var(--body-font-size);
135  margin: 0;
136  padding: 0;
137  position: relative;
138
139  -webkit-font-feature-settings: "kern", "liga";
140  -moz-font-feature-settings: "kern", "liga";
141  font-feature-settings: "kern", "liga";
142  color: var(--text-color);
143  background: var(--body-bg);
144}
145
146h1, h2, h3, h4, h5, h6 {
147  font-family: var(--heading-font-family);
148  font-weight: var(--heading-weight);
149  margin: 1.75em 0 0.75em 0;
150  display: flex;
151  align-items: center;
152}
153
154h1 {
155  font-size: calc(1.75em * var(--heading-font-scale));
156}
157
158
159header h1 {
160  margin-top: 0;
161}
162
163h2 {
164  font-size: calc(1.4em * var(--heading-font-scale));
165}
166
167h3 {
168  font-size: calc(1.2em * var(--heading-font-scale));
169}
170
171header h3 {
172  color: var(--text-color-muted);
173  margin-bottom: 0;
174}
175
176h4, h5 {
177  font-size: calc(1em * var(--heading-font-scale));
178}
179
180h6 {
181  font-size: calc(1em * var(--heading-small-font-scale));
182  font-family: var(--heading-small-font-family);
183  font-weight: var(--heading-small-weight);
184}
185
186ol, ul {
187  padding-left: 1rem;
188}
189
190ul ul, ol ul, ul ol, ol ol {
191  margin-bottom: .6em;
192}
193
194p {
195  margin: 0 0 .6em 0;
196}
197
198a {
199  color: var(--primary);
200  text-decoration: none;
201}
202
203a:hover {
204  text-decoration: underline;
205}
206
207summary {
208  outline: none;
209}
210
211blockquote {
212  border-left: 3px solid var(--primary);
213  background: var(--box-bg);
214  padding: var(--box-padding);
215  border-radius: var(--box-radius);
216  margin: var(--box--margin);
217}
218
219span.sep::after {
220  content: "▸";
221}
222
223span.sep {
224  font-size: calc(0.5em * var(--monospace-font-size));
225  opacity: 0.55;
226  padding-left: .25em;
227  padding-right: .25em;
228}
229
230code,
231pre {
232  font-family: var(--monospace-font-family);
233  font-size: var(--monospace-font-size);
234  color: var(--box-text-color);
235}
236
237pre {
238  background: var(--box-bg);
239  padding: var(--box-padding);
240  border-radius: var(--box-radius);
241  overflow: auto;
242}
243
244code {
245  background: var(--box-bg);
246  padding: 0 0.35em;
247  border-radius: 0.35rem;
248  word-break: break-word;
249}
250
251a > code {
252  color: var(--primary);
253}
254
255
256pre pre,
257pre code {
258  padding: 0;
259  margin: 0;
260  font-size: 1em;
261  background: none;
262  color: inherit;
263}
264
265h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
266  font-family: inherit;
267  font-weight: inherit;
268  font-size: 0.85em;
269}
270
271strong, b {
272  font-weight: 600;
273}
274
275/* fix alignment of images on small screen */
276img, svg {
277    display: block;
278    max-width: 100%;
279    height: auto;
280}
281
282svg .node polygon, svg .node path {
283  transition: fill 150ms ease;
284  fill: var(--box-bg);
285  stroke: none;
286}
287
288svg .node a {
289  text-decoration: none !important;
290}
291
292svg .node a text {
293  fill: var(--text-color);
294  font-family: var(--body-font-family);
295}
296
297svg .node.link text {
298  fill: var(--primary);
299}
300
301svg .node.link:hover polygon, svg .node.link:hover path {
302  fill: var(--sidebar-hover-bg);
303}
304svg .node.link:hover text {
305  fill: var(--box-text-color);
306}
307svg .edge path {
308  stroke: var(--text-color);
309}
310
311/* fix unwanted margins in tables, code, lists and blockquotes */
312li > *:first-child,
313li > *:first-child > *:first-child,
314li > *:first-child > *:first-child > *:first-child,
315td > *:first-child,
316td > *:first-child > *:first-child,
317td > *:first-child > *:first-child > *:first-child,
318pre > *:first-child,
319pre > *:first-child > *:first-child,
320pre > *:first-child > *:first-child > *:first-child,
321blockquote > *:first-child,
322blockquote > *:first-child > *:first-child,
323blockquote > *:first-child > *:first-child > *:first-child {
324  margin-top: 0;
325}
326li > *:last-child,
327li > *:last-child > *:last-child,
328li > *:last-child > *:last-child > *:last-child,
329td > *:last-child,
330td > *:last-child > *:last-child,
331td > *:last-child > *:last-child > *:last-child,
332pre > *:last-child,
333pre > *:last-child > *:last-child,
334pre > *:last-child > *:last-child > *:last-child,
335blockquote > *:last-child,
336blockquote > *:last-child > *:last-child,
337blockquote > *:last-child > *:last-child > *:last-child {
338  margin-bottom: 0;
339}
340
341/*********************************
342 * PAGE STRUCTURE
343 *********************************/
344#body-wrapper {
345  display: flex;
346  flex-wrap: nowrap;
347  flex-direction: row;
348}
349
350#body-wrapper:focus {
351  outline: none;
352}
353
354#main {
355  position: relative;
356  flex-grow: 1;
357  min-width: 0;
358  box-shadow: 0 0 134px rgba(0, 0, 0, 0.1);
359}
360
361footer {
362  width: 100%;
363  display: none;
364}
365
366/*********************************
367 * Button
368 *********************************/
369
370#btn-to-top {
371  position: fixed;
372  bottom: 12px;
373  right: 32px;
374  z-index: 1000;
375  border-radius: 50%;
376  width: 42px;
377  height: 42px;
378  border: 1px solid var(--primary);
379  background: var(--box-bg);
380  color: var(--text-color);
381  cursor: pointer;
382  text-transform: none;
383}
384
385#btn-to-top > .up-arrow {
386  margin-left: -2px;
387}
388
389#btn-to-top > .up-arrow:after {
390  content: url(go-up-symbolic.png);
391}
392
393/*********************************
394 * SIDEBAR
395 *********************************/
396.sidebar {
397  scrollbar-width: thin;
398  background: var(--sidebar-bg);
399  border-right: 1px solid var(--sidebar-bg);
400  min-width: 35ch;
401  padding: var(--sidebar-padding);
402  color: var(--sidebar-text-color);
403  position: sticky;
404  top: 0;
405  z-index: 2;
406  height: 100vh;
407  overflow-y: auto;
408}
409
410.sidebar a,
411.sidebar a:hover {
412  text-decoration: none;
413}
414
415.sidebar .logo {
416  display: block;
417  margin: 1rem auto 1.2rem auto;
418  width: 50%;
419}
420
421.sidebar .section > ul > li {
422  margin-right: -10px;
423}
424
425.sidebar .section h3, .sidebar .section h5 {
426  text-align: left;
427  padding-left: 0.5rem;
428  padding-right: 0.5rem;
429  font-weight: var(--heading-weight);
430}
431
432.sidebar .section h5 {
433  font-size: 1em;
434  margin-bottom: 0.5em;
435}
436
437.sidebar .namespace > h3 {
438  margin-bottom: 0;
439  padding: 0;
440  font-size: 1.5em;
441  text-transform: uppercase;
442  font-weight: 900;
443}
444
445.sidebar .namespace > p {
446  font-size: 0.9em;
447  opacity: 0.8;
448  padding-left: 0.5rem;
449}
450
451.sidebar .section {
452  padding-left: 0.5rem;
453  padding-right: 0.5rem;
454  font-size: 80%;
455}
456
457.sidebar .links {
458  margin-bottom: 1rem;
459}
460
461.sidebar .section a {
462  display: block;
463  text-overflow: ellipsis;
464  overflow: hidden;
465  transition: background-color 150ms ease;
466  color: var(--sidebar-primary);
467  border-radius: var(--box-radius);
468   padding: 0.2rem 0.5rem;
469  margin-bottom: 0.15rem;
470}
471
472.sidebar .section a:hover {
473  background-color: var(--sidebar-hover-bg);
474  color: var(--sidebar-text-color);
475}
476
477.sidebar .section a.current {
478  background-color: var(--sidebar-selected-bg);
479  color: white;
480}
481
482.sidebar .search {
483  box-sizing: border-box;
484  text-align: center;
485}
486
487.sidebar .search input[type="text"] {
488  border-color: transparent;
489  width: 100%;
490  border: 1px solid #ccc;
491  border-radius: 50px;
492  padding: 6px 12px;
493  display: inline-block;
494  font-size: 14px;
495  box-shadow: inset 0 1px 3px #ddd;
496  transition: border .3s linear;
497}
498
499.toc {
500  display: block;
501  margin-top: 2em;
502  z-index: 3;
503  min-width: 15ch;
504  font-size: 80%;
505}
506
507.toc nav {
508  margin-left: 2em;
509  margin-right: 2em;
510}
511
512#toc-title {
513  text-transform: uppercase;
514  font-weight: var(--heading-weight);
515}
516
517.toc-list {
518  list-style-type: none;
519  margin: 0;
520  padding-left: 0;
521}
522
523.toc-list-item {
524  padding-top: .25em;
525}
526
527/*********************************
528 * ANCHORS & TOGGLERS
529 *********************************/
530.anchor,
531.md-anchor {
532  position: relative;
533  z-index: 1;
534  text-decoration: none;
535  padding: 0 0.5em;
536  color: var(--text-color-muted);
537}
538
539.anchor:hover,
540.md-anchor:hover {
541  color: var(--primary);
542}
543
544.anchor:not([href]),
545.md-anchor:not([href]) {
546  display: none;
547}
548
549.anchor:before,
550.md-anchor:before {
551  content: var(--anchor-sign); /*'§'*/
552}
553
554.toggle-wrapper {
555  position: relative;
556}
557
558.collapse-toggle {
559  position: absolute;
560  right: 0;
561  left: -2em;
562  white-space: nowrap;
563  text-decoration: none;
564  font-size: 0.8em;
565  color: transparent;
566}
567
568.collapse-toggle > .inner {
569  width: 1rem;
570  height: 1rem;
571  border-radius: calc(0.75 * var(--box-radius));
572  display: inline-flex;
573  justify-content: center;
574  align-items: center;
575  text-align: center;
576  vertical-align: middle;
577  color: var(--box-text-color);
578  position: relative;
579  left: -0.25rem;
580  font-family: monospace;
581  font-size: 0.7rem;
582  font-weight: bold;
583  background: var(--box-bg);
584}
585
586/*********************************
587 * UTILITY
588 *********************************/
589.deprecated > h6 > a {
590  opacity: 0.65;
591}
592
593.hidden {
594  display: none !important;
595}
596
597/*********************************
598 * CONTENT STYLING
599 *********************************/
600.content {
601  padding: 2em 4em;
602  overflow: visible;
603  max-width: calc(var(--prefered-content-width) + 8em);
604}
605
606.content table:not(.table-display) {
607  border-spacing: 0 0.25rem;
608}
609
610.content td {
611  vertical-align: top;
612}
613
614.content td:first-child {
615  padding-right: 1rem;
616}
617
618.content td p:first-child {
619  margin-top: 0;
620}
621
622.content td h1, .content td h2 {
623  margin-left: 0;
624  font-size: 1.1em;
625}
626
627.content tr:first-child td {
628  border-top: 0;
629}
630
631kbd {
632  display: inline-block;
633  padding: 3px 5px;
634  font: 15px monospace;
635  line-height: 10px;
636  vertical-align: middle;
637  border: solid 1px;
638  border-radius: 3px;
639  box-shadow: inset 0 -1px 0;
640  cursor: default;
641}
642
643.content tr:first-child {
644  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
645}
646
647.content td {
648  vertical-align: top;
649}
650
651.content td:first-child {
652  padding-right: 1rem;
653}
654
655.content td p:first-child {
656  margin-top: 0;
657}
658
659.content td h4, .content td h5 {
660  margin-left: 0;
661  font-size: 1.1em;
662}
663
664.content tr:first-child td {
665  border-top: 0;
666}
667
668.srclink {
669  color: var(--text-color-muted);
670  font-size: 1rem;
671  font-weight: var(--body-font-weight);
672  flex-grow: 0;
673  text-decoration: none;
674  margin-left: auto;
675  position: relative;
676  z-index: 1;
677}
678
679.meta tr > td:not(:first-child) {
680  width: 100%;
681}
682
683.meta tr > td:first-child {
684  white-space: nowrap;
685}
686
687/*********************************
688 * DOCBLOCK STYLING
689 *********************************/
690.docblock {
691  position: relative;
692  text-align: left;
693}
694
695.docblock h1 {
696  font-size: calc(1.3em * var(--heading-docblock-scale) * var(--heading-font-scale));
697}
698
699.docblock h2 {
700  font-size: calc(1.2em * var(--heading-docblock-scale) * var(--heading-font-scale));
701}
702
703.docblock h3 {
704  font-size: calc(1.1em * var(--heading-docblock-scale) * var(--heading-font-scale));
705}
706
707.docblock h4 {
708  font-size: calc(1.05em * var(--heading-docblock-scale) * var(--heading-font-scale));
709}
710
711.docblock h1,
712.docblock h2,
713.docblock h3,
714.docblock h4,
715.docblock h5,
716.docblock h6 {
717  color: var(--heading-docblock-color)
718}
719
720.docblock table {
721  margin: .25em 0;
722  max-width: 100%;
723  font-size: var(--table-font-size);
724}
725
726.docblock table td {
727  padding: .25em;
728}
729
730.docblock table th {
731  padding: .25em;
732  text-align: left;
733  font-family: var(--heading-table-font-family);
734  font-weight: var(--heading-table-weight);
735}
736
737.docblock table tr th:first-child,
738.docblock table tr td:first-child {
739  padding-left: 0;
740}
741
742.docblock table tr th:last-child,
743.docblock table tr td:last-child {
744  padding-right: 0;
745}
746
747table.enum-members,
748table.results {
749  border-radius: var(--box-radius);
750  border: 1px solid var(--text-color-muted);
751  border-spacing: 0 0 !important;
752  font-size: 80%;
753}
754
755table.enum-members tr th,
756table.results tr th {
757  border-top-color: var(--body-bg);
758  background-color: var(--box-bg);
759  border-bottom: 1px solid var(--text-color-muted);
760}
761
762table.enum-members tr th:first-child,
763table.enum-members tr td:first-child {
764  min-width: 25em;
765  padding-left: .5em;
766}
767
768table.results tr th:first-child,
769table.results tr td:first-child {
770  padding-left: .5em;
771}
772
773table.enum-members tr th:last-child,
774table.enum-members tr td:last-child,
775table.results tr th:last-child,
776table.results tr td:last-child {
777  max-width: 35em;
778  padding-right: .5em;
779}
780
781table.results tr td code {
782  font-size: 100%;
783}
784
785table.arguments tr td,
786table.returns tr td {
787  color: var(--text-color-muted);
788}
789
790table.arguments tr td:first-child,
791table.returns tr td:first-child {
792  min-width: 12em;
793}
794
795table.arguments tr.arg-name td,
796table.arguments tr.arg-description td,
797table.returns tr.arg-name td,
798table.returns tr.arg-description td {
799  color: var(--text-color);
800}
801
802.docblock ul li,
803.docblock ol li {
804  padding-top: 0.15rem;
805  padding-bottom: 0.15rem;
806}
807
808.docblock ul.type {
809  list-style: none;
810}
811
812.docblock ul.type li::before {
813  content: "»";
814  color: var(--text-color);
815  display: inline-block;
816  width: 1em;
817  margin-left: -1em;
818}
819
820.docblock .codehilite {
821  position: relative;
822}
823.docblock .codehilite > .copy-button {
824  position: absolute;
825  top: 0;
826  right: 0;
827
828  border: none;
829  background: none;
830
831  margin: var(--box-padding);
832  cursor: pointer;
833}
834
835.docblock .codehilite > .copy-button {
836  transition: background-color 150ms ease;
837  color: var(--primary);
838  border-radius: var(--box-radius);
839  padding: 0.2rem 0.5rem;
840  margin: var(--box-padding);
841}
842
843.docblock .codehilite > .copy-button:hover {
844  background-color: var(--sidebar-hover-bg);
845  color: var(--text-color);
846}
847
848.docblock .codehilite > .copy-button:active {
849  background-color: var(--primary);
850}
851
852
853/*************************************************************
854 SYMBOLS
855**************************************************************/
856.symbol,
857.constructors h6,
858.methods h6,
859.signals h6,
860.properties h6,
861.type-funcs h6,
862.implements a,
863.ancestors a,
864.descendants a,
865.implementations a,
866.sidebar .links a
867.toc a
868{
869  font-family: var(--symbol-font-family);
870  font-size: calc(1em * var(--symbol-font-scale));
871  font-weight: var(--symbol-font-weight);
872}
873
874/**************************
875 RESPONSIVENESS
876**************************/
877@media (max-width: 700px) {
878  body {
879    padding-top: 0px;
880  }
881
882  #body-wrapper {
883    flex-direction: column;
884    overflow: hidden;
885  }
886
887  #main {
888    width: 100%;
889    padding: 2rem;
890  }
891
892  .sidebar {
893    position: static;
894    height: initial;
895    order: 1;
896  }
897
898  .toc {
899    display: hidden;
900  }
901}
902