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