doc/cups.css

   1 /* Base styles */
   2 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro&display=swap');
   3
   4 /* Layout CSS */
   5 .cups-header {
   6   background: rgba(46,46,46,.9);
   7   box-shadow: 0 2px 5px rgba(0,0,0,0.25);
   8   color: white;
   9   left: 0;
  10   margin-bottom: 20px;
  11   padding: 0;
  12   position: fixed;
  13   right: 0;
  14   top: 0;
  15   width: 100%;
  16 }
  17 .cups-header ul {
  18   font-size: 20px;
  19   list-style: none;
  20   margin: 0;
  21   -webkit-margin-before: 0;
  22   -webkit-margin-after: 0;
  23   -webkit-margin-start: 0;
  24   -webkit-margin-end: 5px;
  25   -webkit-padding-start: 0;
  26 }
  27 .cups-header ul li {
  28   float: left;
  29 }
  30 .cups-header ul li.right {
  31   float: right;
  32 }
  33 .cups-header a {
  34   display: block;
  35   padding: 18px 30px !important;
  36 }
  37 .cups-header a.img {
  38   padding: 16px 24px 8px !important;
  39 }
  40 .cups-header a:link, .cups-header a:visited {
  41   color: white !important;
  42   text-decoration: none !important;
  43 }
  44 .cups-header a:hover {
  45   background: #cccccc !important;
  46   color: #333333 !important;
  47   text-decoration: none !important;
  48 }
  49 .cups-header a.active {
  50   background: white !important;
  51   box-shadow: rgba(0,0,0,0.1) 0 0 10px 0 inset;
  52   color: black !important;
  53   text-decoration: none !important;
  54 }
  55 .cups-header form {
  56   display: block;
  57   padding: 15px 15px !important;
  58 }
  59 .cups-header span.label {
  60   color: #ccc;
  61   display: block;
  62   font-style: italic;
  63   padding: 15px 0 !important;
  64 }
  65
  66 .cups-body {
  67   margin-bottom: 20px;
  68   margin-top: 65px;
  69   padding: 20px;
  70 }
  71 .cups-body .row {
  72   padding: 0;
  73 }
  74
  75 .cups-footer {
  76   background: rgba(46,46,46,.9);
  77   bottom: 0;
  78   box-shadow: 0 -2px 5px rgba(0,0,0,0.25);
  79   color: #cccccc;
  80   font-size: 10px;
  81   height: 20px;
  82   left: 0;
  83   padding: 10px 10px 3px;
  84   position: fixed;
  85   width: 100%;
  86 }
  87 .cups-footer a:link, footer a:hover, .cups-footer a:visited {
  88   color: white !important;
  89   text-decoration: none !important;
  90 }
  91
  92 .row {
  93   width: 100%;
  94   *zoom: 1;
  95 }
  96 .row:after {
  97   clear: both;
  98 }
  99
 100 .row .thirds {
 101   float: left;
 102   margin-left: 0.5%;
 103   margin-right: 0;
 104   padding-bottom: 40px;
 105   width: 33%;
 106 }
 107 .row .thirds:first-child {
 108   margin-left: 0;
 109 }
 110
 111 .row .halves {
 112   float: left;
 113   margin-left: 0.5%;
 114   margin-right: 0;
 115   padding-bottom: 40px;
 116   width: 49.75%;
 117 }
 118 .row .halves:first-child {
 119   margin-left: 0;
 120 }
 121
 122 .row .thirds h1, .row .halves h1, .row h1 {
 123   margin-top: 0;
 124 }
 125
 126 .mobile {
 127   display: none;
 128 }
 129 .no-mobile {
 130   display: inherit;
 131 }
 132
 133 /* Appearance CSS */
 134 body {
 135   background: white;
 136   color: black;
 137   font-family: 'Open Sans', sans-serif;
 138   font-size: 16px;
 139   margin: 0;
 140 }
 141
 142 h1, h2, h3, h4, h5, h6, p, td, th {
 143   font-family: 'Open Sans', sans-serif;
 144 }
 145
 146 h1 { font-size: 2em; }
 147 h2 { font-size: 1.75em; }
 148 h3 { font-size: 1.5em; }
 149 h4 { font-size: 1.25em; }
 150
 151 code, kbd, pre, tt, input[type=text], p.command, p.summary, p code, li code, p.code, ul.code li, textarea {
 152   font-family: 'Source Code Pro', monospace;
 153 }
 154
 155 kbd {
 156   color: #006600;
 157   font-weight: bold;
 158 }
 159
 160 pre {
 161   white-space: pre-wrap;
 162 }
 163
 164 blockquote {
 165   background: rgba(191,191,191,0.1);
 166   border-left: solid 2px #777;
 167   margin: 1em 0;
 168   padding: 10px;
 169 }
 170
 171 blockquote ol li {
 172   margin-left: -1em;
 173 }
 174
 175 pre.command, pre.example {
 176   padding: 10px 20px;
 177 }
 178
 179 p.example {
 180   font-style: italic;
 181   margin-left: 36pt;
 182 }
 183
 184 dl.man dd {
 185   margin-left: 5em;
 186 }
 187
 188 DL.man DT {
 189   margin-left: 0;
 190 }
 191
 192 pre.man {
 193   margin: 0;
 194 }
 195
 196 pre.command EM, pre.example EM {
 197   color: #3f0000;
 198 }
 199
 200 p.command {
 201   color: #7f0000;
 202   margin-left: 36pt;
 203 }
 204
 205 p.formula {
 206   font-style: italic;
 207   margin-left: 36pt;
 208 }
 209
 210 a img {
 211   border: none;
 212 }
 213
 214 a:link:hover img {
 215   background: #f0f0f0;
 216   border-radius: 10px;
 217   -moz-border-radius: 10px;
 218 }
 219
 220 a:link, a:visited {
 221   font-weight: inherit;
 222   text-decoration: none;
 223   color: #317BFF;
 224 }
 225
 226 a:link:hover, a:visited:hover, a:active {
 227   text-decoration: underline;
 228   color: #4C80BF;
 229 }
 230
 231 table.page {
 232   border: none;
 233   border-collapse: collapse;
 234   height: 100%;
 235   margin: 0;
 236   padding: 0;
 237   width: 100%;
 238 }
 239
 240 td.cups-body {
 241   height: 100%;
 242   vertical-align: top;
 243 }
 244
 245 td.trailer {
 246   background: #f0f0f0;
 247   border: solid thin #e0e0e0;
 248   color: #666666;
 249   font-size: 80%;
 250   padding: 5px;
 251 }
 252
 253 td.trailer a {
 254   color: #666699;
 255 }
 256
 257 form {
 258   display: inline;
 259 }
 260
 261 button, input[type=button], input[type=submit], select {
 262   border: none;
 263   border-radius: 5px;
 264   cursor: pointer;
 265   font-family: inherit;
 266   font-size: 14px;
 267   font-weight: normal;
 268   padding: 4px 8px;
 269   text-decoration: none;
 270   white-space: nowrap;
 271   -moz-appearance: none;
 272   -webkit-appearance: none;
 273 }
 274 button, input[type=button], input[type=file], input[type=submit] {
 275   background: #317BFF;
 276   color: #FFF;
 277 }
 278 button:hover, input[type=button]:hover, input[type=file]:hover, input[type=submit]:hover {
 279   background: #65ABFF;
 280   color: #FFF;
 281 }
 282 button:active, input[type=button]:active, input[type=file]:active, input[type=submit]:active {
 283   background: #317BFF;
 284   color: #FFF;
 285 }
 286 input[type=search] {
 287   -webkit-appearance: textfield;
 288 }
 289 input[type=search], input[type=text] {
 290   padding: 4px 8px;
 291 }
 292 select {
 293   background: #ccc url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23000000' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
 294   color: black;
 295   padding: 4px 32px 4px 8px;
 296 }
 297 select:hover {
 298   background: #ddd url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23000000' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
 299 }
 300 textarea {
 301   width: 100%;
 302 }
 303
 304 input[type="image"] {
 305   border: none;
 306   padding: 2pt;
 307   vertical-align: bottom;
 308 }
 309
 310 sub, sup {
 311   font-size: 50%;
 312 }
 313
 314 tr.data, td.data, tr.data td {
 315   margin-top: 10pt;
 316   padding: 5pt;
 317   border-bottom: solid 1pt #999999;
 318 }
 319
 320 tr.data th {
 321   border-bottom: solid 1pt #999999;
 322   padding-top: 10pt;
 323   padding-left: 5pt;
 324   text-align: left;
 325 }
 326
 327 div.table table {
 328   border: solid thin rgba(191,191,191,.3);
 329   border-collapse: collapse;
 330   border-spacing: 0;
 331   margin-left: auto;
 332   margin-right: auto;
 333 }
 334
 335 div.table caption {
 336   caption-side: top;
 337   font-size: 120%;
 338   font-style: italic;
 339   font-weight: bold;
 340   margin-left: auto;
 341   margin-right: auto;
 342 }
 343
 344 div.table table td {
 345   background: white;
 346   border: solid thin rgba(191,191,191,.45);
 347   padding: 5pt 10pt 0;
 348 }
 349
 350 div.table table th {
 351   background: rgba(191,191,191,.15);
 352   border: none;
 353   border-bottom: solid thin rgba(191,191,191,.3);
 354 }
 355
 356 div.figure table {
 357   margin-left: auto;
 358   margin-right: auto;
 359 }
 360
 361 div.figure caption {
 362   caption-side: bottom;
 363   font-size: 120%;
 364   font-style: italic;
 365   font-weight: bold;
 366   margin-left: auto;
 367   margin-right: auto;
 368 }
 369
 370 th.label {
 371   text-align: right;
 372   vertical-align: top;
 373 }
 374
 375 th.sublabel {
 376   text-align: right;
 377   font-weight: normal;
 378 }
 379
 380 hr {
 381   border: solid thin;
 382 }
 383
 384 span.info {
 385   background: black;
 386   border: thin solid black;
 387   color: white;
 388   font-size: 80%;
 389   font-style: italic;
 390   font-weight: bold;
 391   white-space: nowrap;
 392 }
 393
 394 h2 span.info, h3 span.info, h4 span.info {
 395   float: right;
 396   font-size: 100%;
 397 }
 398
 399 .conflict {
 400   background: red;
 401   color: white;
 402 }
 403
 404 th.conflict {
 405   text-align: right;
 406 }
 407
 408 h1.title, h2.title, h3.title, .row .cups-body h2, .row .cups-body h3 {
 409   border-bottom: solid 2pt black;
 410 }
 411
 412 table.indent {
 413   margin-top: 2em;
 414   margin-left: auto;
 415   margin-right: auto;
 416   width: 90%;
 417 }
 418
 419 table.indent {
 420   border-collapse: collapse;
 421 }
 422
 423 table.indent td, table.indent th {
 424   padding: 0;
 425 }
 426
 427 table.list {
 428   border-collapse: collapse;
 429   margin-left: auto;
 430   margin-right: auto;
 431   width: 90%;
 432 }
 433
 434 table.list th {
 435   background: white;
 436   border-bottom: solid thin #cccccc;
 437   border-right: 2px solid rgba(191,191,191,.45);
 438   color: #444444;
 439   padding: 5px 10px 5px 12px;
 440   text-align: left;
 441   vertical-align: bottom;
 442   white-space: nowrap;
 443 }
 444
 445 table.list th a {
 446   color: #4444cc;
 447 }
 448
 449 table.list td {
 450   border-bottom: solid thin rgba(191,191,191,.45);
 451   padding: 5px 2px 5px 10px;
 452 }
 453
 454 table.list tr:nth-child(even) {
 455   background: rgba(191,191,191,0.15);
 456 }
 457
 458 table.list tr:nth-child(odd) {
 459   background: rgba(191,191,191,0.3);
 460 }
 461
 462 div.sidebar {
 463   float: right;
 464   min-width: 25%;
 465   margin-left: 10px;
 466   max-width: 33%;
 467 }
 468
 469 div.sidebar p.l0 {
 470   margin-bottom: 0;
 471   margin-left: 0;
 472   margin-right: 0;
 473   margin-top: 12pt;
 474 }
 475
 476 div.sidebar p.l1 {
 477   margin-bottom: 0;
 478   margin-left: 36pt;
 479   margin-right: 0;
 480   margin-top: 0;
 481   text-indent: -18pt;
 482 }
 483
 484 div.sidebar p.l2 {
 485   font-style: italic;
 486   margin-bottom: 0;
 487   margin-left: 54pt;
 488   margin-right: 0;
 489   margin-top: 0;
 490   text-indent: -18pt;
 491 }
 492
 493 table.inset {
 494   background: #f4f4f4;
 495   border: thin solid rgba(191,191,191,0.5);
 496   margin-top: 1em;
 497   padding: 0;
 498   width: 100%;
 499   /* these are not implemented by all browsers, but that's ok */
 500   border-radius: 5px;
 501   -moz-border-radius: 5px;
 502 }
 503
 504 table.inset caption {
 505   caption-side: top;
 506   color: #666666;
 507   font-size: 80%;
 508   margin-left: 10px;
 509   margin-bottom: 2px;
 510   text-align: left;
 511 }
 512
 513 table.inset td {
 514   padding: 2px 5px;
 515 }
 516
 517 dt {
 518   margin-left: 36pt;
 519   margin-top: 12pt;
 520 }
 521
 522 dd {
 523   margin-left: 54pt;
 524 }
 525
 526 dl.category dt {
 527   font-weight: bold;
 528 }
 529
 530 p.summary {
 531   margin-left: 36pt;
 532 }
 533
 534 div.summary table {
 535   border: solid thin #999999;
 536   border-collapse: collapse;
 537   border-spacing: 0;
 538   margin: 10px;
 539 }
 540
 541 div.summary table td, div.summary table th {
 542   background: white;
 543   border: solid thin #999999;
 544   border-spacing: 0;
 545   padding: 5px;
 546   text-align: left;
 547   vertical-align: top;
 548 }
 549
 550 div.summary table thead th {
 551   background: #f0f0f0;
 552 }
 553
 554 div.tabs {
 555   height: 480px;
 556   overflow: hidden;
 557 }
 558
 559 div.tab {
 560   float: left;
 561   height: 100%;
 562   overflow-y: auto;
 563   width: 100%;
 564 }
 565
 566 /* API documentation styles... */
 567 div.cups-body h1 {
 568 }
 569 div.cups-body h2 {
 570 }
 571 div.cups-body h3 {
 572 }
 573 div.cups-body h4 {
 574 }
 575 div.cups-body h5 {
 576 }
 577 div.contents {
 578 }
 579 div.contents h1 {
 580 }
 581 div.contents h2 {
 582 }
 583 div.contents ul.contents {
 584 }
 585 div.contents ul.contents li ul {
 586   display: none;
 587 }
 588
 589 .class {
 590   border-bottom: solid 2px gray;
 591 }
 592 .constants {
 593 }
 594 .description {
 595   margin-top: 0.5em;
 596 }
 597 .discussion {
 598 }
 599 .enumeration {
 600   border-bottom: solid 2px gray;
 601 }
 602 .function {
 603   border-bottom: solid 2px gray;
 604   margin-bottom: 0;
 605 }
 606 .members {
 607 }
 608 .method {
 609 }
 610 .parameters {
 611 }
 612 .returnvalue {
 613 }
 614 .struct {
 615   border-bottom: solid 2px gray;
 616 }
 617 .typedef {
 618   border-bottom: solid 2px gray;
 619 }
 620 .union {
 621   border-bottom: solid 2px gray;
 622 }
 623 .variable {
 624 }
 625 h1, h2, h3, h4, h5, h6 {
 626   page-break-inside: avoid;
 627 }
 628 blockquote {
 629   page-break-inside: avoid;
 630 }
 631 p.code, pre, ul.code li {
 632   border-left: thin dotted gray;
 633   background: rgba(191,191,191,0.1);
 634 }
 635 p code, li code {
 636   background: rgba(191,191,191,0.3);
 637 }
 638 p code, li code, p.code, pre, ul.code li {
 639   hyphens: manual;
 640   margin: 18pt 0;
 641   -webkit-hyphens: manual;
 642   page-break-inside: avoid;
 643 }
 644 p.code, pre, ul.code li {
 645   padding: 10px;
 646 }
 647 p code, li code {
 648   padding: 2px 5px;
 649 }
 650 span.info {
 651   background: black;
 652   border: solid thin black;
 653   color: white;
 654   font-size: 80%;
 655   font-style: italic;
 656   font-weight: bold;
 657   white-space: nowrap;
 658 }
 659 h3 span.info, h4 span.info {
 660   border-top-left-radius: 10px;
 661   border-top-right-radius: 10px;
 662   float: right;
 663   padding: 3px 6px;
 664 }
 665 ul.code, ul.contents, ul.subcontents {
 666   list-style-type: none;
 667   margin: 0;
 668   padding-left: 0;
 669 }
 670 ul.code li {
 671   margin: 0;
 672 }
 673 ul.contents > li {
 674   margin-top: 1em;
 675 }
 676 ul.contents li ul.code, ul.contents li ul.subcontents {
 677   padding-left: 2em;
 678 }
 679
 680 /* iPhone/iPod touch overrides */
 681 @media only screen and (min-device-width: 320px) and (max-device-width: 480px),
 682        only screen and (min-device-width: 320px) and (max-device-width: 568px) {
 683   .mobile {
 684     display: inherit;
 685   }
 686   .no-mobile {
 687     display: none;
 688   }
 689
 690   .cups-header {
 691     margin: 0;
 692     position: relative;
 693   }
 694   .cups-header ul li {
 695     float: none;
 696   }
 697
 698   .cups-body {
 699     padding: 0;
 700   }
 701
 702   .cups-footer {
 703     font-size: 10px;
 704     height: auto;
 705     position: relative;
 706   }
 707
 708   .row .thirds, .row .halves {
 709     float: none;
 710     margin: 0;
 711     width: 100%;
 712   }
 713
 714   div.sidebar {
 715     float: none;
 716     margin-left: 0;
 717     max-width: 100%;
 718     min-width: 100%;
 719     width: 100%;
 720   }
 721
 722   blockquote {
 723     margin: 0;
 724   }
 725
 726   p.example {
 727     margin-left: 0;
 728   }
 729
 730   pre.command, pre.example, pre.man {
 731     margin-left: 0;
 732     white-space: pre-wrap;
 733   }
 734 }
 735
 736 /* iPad overrides */
 737 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 738   .mobile {
 739     display: inherit;
 740   }
 741   .no-mobile {
 742     display: none;
 743   }
 744 }
 745
 746 /* Dark mode overrides */
 747 @media (prefers-color-scheme: dark) {
 748   body {
 749     background: black;
 750     color: #ccc;
 751   }
 752   a:link, a:visited, table.list th a {
 753     color: #4C80BF;
 754   }
 755   a:link:hover, a:visited:hover, a:active, table.list th a {
 756     color: #65ABFF;
 757   }
 758   hr {
 759     color: #666;
 760   }
 761   table.inset {
 762     background: #1d1d1d;
 763   }
 764   h2.title, h3.title, .row .cups-body h2, .row .cups-body h3 {
 765     border-bottom: solid 2pt #ccc;
 766   }
 767   div.table table td, table.list th {
 768     background: black;
 769   }
 770   table.list th {
 771     color: #666;
 772   }
 773   button, input[type=button], input[type=file], input[type=submit] {
 774     background: #255CBF;
 775     color: #DDD;
 776   }
 777   button:hover, input[type=button]:hover, input[type=file]:hover, input[type=submit]:hover {
 778     background: #4C80BF;
 779     color: #EEE;
 780   }
 781   button:active, input[type=button]:active, input[type=file]:active, input[type=submit]:active {
 782     background: #255CBF;
 783     color: #DDD;
 784   }
 785   input[type=search], input[type=text], textarea {
 786     background: #333;
 787     color: #ccc;
 788   }
 789   select {
 790     background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23CCCCCC' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
 791     color: #ccc;
 792     padding: 4px 32px 4px 8px;
 793   }
 794   select:hover {
 795     background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23DDDDDD' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
 796   }
 797 }