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: rgb(51, 51, 51);
19  --text-color-muted: rgba(51, 51, 51, 0.65);
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: 8px;
634  font: 10px monospace;
635  line-height: 10px;
636  vertical-align: middle;
637  border: none;
638  border-radius: 6px;
639  box-shadow: 0 0 3px rgba(0,0,0,0.3);
640  margin: 3px;
641  background-color: var(--box-bg);
642  cursor: default;
643}
644
645.content tr:first-child {
646  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
647}
648
649.content td {
650  vertical-align: top;
651}
652
653.content td:first-child {
654  padding-right: 1rem;
655}
656
657.content td p:first-child {
658  margin-top: 0;
659}
660
661.content td h4, .content td h5 {
662  margin-left: 0;
663  font-size: 1.1em;
664}
665
666.content tr:first-child td {
667  border-top: 0;
668}
669
670.srclink {
671  color: var(--text-color-muted);
672  font-size: 1rem;
673  font-weight: var(--body-font-weight);
674  flex-grow: 0;
675  text-decoration: none;
676  margin-left: auto;
677  position: relative;
678  z-index: 1;
679}
680
681.meta tr > td:not(:first-child) {
682  width: 100%;
683}
684
685.meta tr > td:first-child {
686  white-space: nowrap;
687}
688
689/*********************************
690 * DOCBLOCK STYLING
691 *********************************/
692.docblock {
693  position: relative;
694  text-align: left;
695}
696
697.docblock h1 {
698  font-size: calc(1.3em * var(--heading-docblock-scale) * var(--heading-font-scale));
699}
700
701.docblock h2 {
702  font-size: calc(1.2em * var(--heading-docblock-scale) * var(--heading-font-scale));
703}
704
705.docblock h3 {
706  font-size: calc(1.1em * var(--heading-docblock-scale) * var(--heading-font-scale));
707}
708
709.docblock h4 {
710  font-size: calc(1.05em * var(--heading-docblock-scale) * var(--heading-font-scale));
711}
712
713.docblock h1,
714.docblock h2,
715.docblock h3,
716.docblock h4,
717.docblock h5,
718.docblock h6 {
719  color: var(--heading-docblock-color)
720}
721
722.docblock table {
723  margin: .25em 0;
724  max-width: 100%;
725  font-size: var(--table-font-size);
726}
727
728.docblock table td {
729  padding: .25em;
730}
731
732.docblock table th {
733  padding: .25em;
734  text-align: left;
735  font-family: var(--heading-table-font-family);
736  font-weight: var(--heading-table-weight);
737}
738
739.docblock table tr th:first-child,
740.docblock table tr td:first-child {
741  padding-left: 0;
742}
743
744.docblock table tr th:last-child,
745.docblock table tr td:last-child {
746  padding-right: 0;
747}
748
749table.enum-members,
750table.results {
751  border-radius: var(--box-radius);
752  border: 1px solid var(--text-color-muted);
753  border-spacing: 0 0 !important;
754  font-size: 80%;
755}
756
757table.enum-members tr th,
758table.results tr th {
759  border-top-color: var(--body-bg);
760  background-color: var(--box-bg);
761  border-bottom: 1px solid var(--text-color-muted);
762}
763
764table.enum-members tr th:first-child,
765table.enum-members tr td:first-child {
766  min-width: 25em;
767  padding-left: .5em;
768}
769
770table.results tr th:first-child,
771table.results tr td:first-child {
772  padding-left: .5em;
773}
774
775table.enum-members tr th:last-child,
776table.enum-members tr td:last-child,
777table.results tr th:last-child,
778table.results tr td:last-child {
779  max-width: 35em;
780  padding-right: .5em;
781}
782
783table.results tr td code {
784  font-size: 100%;
785}
786
787table.arguments tr td,
788table.returns tr td {
789  color: var(--text-color-muted);
790}
791
792table.arguments tr td:first-child,
793table.returns tr td:first-child {
794  min-width: 12em;
795}
796
797table.arguments tr.arg-name td,
798table.arguments tr.arg-description td,
799table.returns tr.arg-name td,
800table.returns tr.arg-description td {
801  color: var(--text-color);
802}
803
804.docblock ul li,
805.docblock ol li {
806  padding-top: 0.15rem;
807  padding-bottom: 0.15rem;
808}
809
810.docblock ul.type {
811  list-style: none;
812}
813
814.docblock ul.type li::before {
815  content: "»";
816  color: var(--text-color);
817  display: inline-block;
818  width: 1em;
819  margin-left: -1em;
820}
821
822.docblock .codehilite {
823  position: relative;
824}
825.docblock .codehilite > .copy-button {
826  position: absolute;
827  top: 0;
828  right: 0;
829
830  border: none;
831  background: none;
832
833  margin: var(--box-padding);
834  cursor: pointer;
835}
836
837.docblock .codehilite > .copy-button {
838  transition: background-color 150ms ease;
839  color: var(--primary);
840  border-radius: var(--box-radius);
841  padding: 0.2rem 0.5rem;
842  margin: var(--box-padding);
843}
844
845.docblock .codehilite > .copy-button:hover {
846  background-color: var(--sidebar-hover-bg);
847  color: var(--text-color);
848}
849
850.docblock .codehilite > .copy-button:active {
851  background-color: var(--primary);
852}
853
854
855/*************************************************************
856 SYMBOLS
857**************************************************************/
858.symbol,
859.constructors h6,
860.methods h6,
861.signals h6,
862.properties h6,
863.type-funcs h6,
864.implements a,
865.ancestors a,
866.descendants a,
867.implementations a,
868.sidebar .links a
869.toc a
870{
871  font-family: var(--symbol-font-family);
872  font-size: calc(1em * var(--symbol-font-scale));
873  font-weight: var(--symbol-font-weight);
874}
875
876/**************************
877 RESPONSIVENESS
878**************************/
879@media (max-width: 700px) {
880  body {
881    padding-top: 0px;
882  }
883
884  #body-wrapper {
885    flex-direction: column;
886    overflow: hidden;
887  }
888
889  #main {
890    width: 100%;
891    padding: 2rem;
892  }
893
894  .sidebar {
895    position: static;
896    height: initial;
897    order: 1;
898  }
899
900  .toc {
901    display: hidden;
902  }
903}
904