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