]> git.ipfire.org Git - thirdparty/cups.git/blob - doc/cups.css
Merge pull request #1312 from weblate/weblate-cups-cups
[thirdparty/cups.git] / 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 }