]> Git — Sourcephile - doclang.git/blob - style/dtc-html5.css
DTC: add <page-ref> draft
[doclang.git] / style / dtc-html5.css
1 /* body */
2 body {
3 color:black;
4 font-family:sans-serif;
5 font-size:9pt;
6 /* font-size:0.750em; */
7 line-height:1.4;
8 margin:2ex auto;
9 width:650px;
10 }
11 /* break */
12 .np {
13 page-break-before:always;
14 }
15 .avoid-break-inside {
16 page-break-inside:avoid;
17 }
18 .avoid-break-after {
19 page-break-after:avoid;
20 }
21 .print-only {
22 display:none;
23 }
24 @media print {
25 .no-print {
26 display:none;
27 }
28 span.print-only {
29 display:inline !important;
30 }
31 div.print-only {
32 display:block !important;
33 }
34 }
35 @page:first {
36 @top-center {
37 content:normal;
38 }
39 @top-left {
40 content:normal;
41 }
42 @top-right {
43 content:normal;
44 }
45 }
46
47 /* a */
48 a {
49 color:#C4451D;
50 text-decoration:none;
51 }
52 a:active {
53 color:red !important;
54 text-decoration:underline;
55 }
56 a:empty {
57 margin:0 0 0 0 !important;
58 padding:0 0 0 0 !important;
59 }
60 @media screen {
61 a:hover {
62 background-color:#F4F2E2 !important;
63 color:#C4451D !important;
64 text-decoration:underline !important;
65 }
66 a:visited {
67 color:rgb(171,105,84);
68 }
69 a:hover[href^="git:"],
70 a:hover[href^="http:"],
71 a:hover[href^="https:"],
72 a:hover[href^="mailto:"],
73 a.eref:hover {
74 color:blue !important;
75 text-decoration:underline;
76 }
77 a:visited[href^="git:"],
78 a:visited[href^="http:"],
79 a:visited[href^="https:"],
80 a:visited[href^="mailto:"],
81 a.eref:visited {
82 color:purple !important;
83 }
84 }
85 .para a, dt a, dd a, li a {
86 color:#C4451D;
87 }
88 a.smpl {
89 color:black;
90 }
91 a[href^="git:"],
92 a[href^="http:"],
93 a[href^="https:"],
94 a[href^="mailto:"],
95 a.eref {
96 border-bottom:none;
97 color:blue;
98 text-decoration:none;
99 }
100 /* .bcp14 */
101 .bcp14 {
102 font-style:normal;
103 font-variant:small-caps;
104 text-transform:lowercase;
105 }
106 blockquote > * .bcp14 {
107 font-style:italic;
108 }
109 /* hi */
110 span.hi {
111 background-color:yellow;
112 }
113 /* i */
114 /* XXX: toggle() somehow included in CSS3,
115 but not supported so far by Mozilla/Firefox
116 em {
117 font-style:toggle(italic, normal);
118 }
119 */
120 em.odd {
121 font-style:italic;
122 }
123 em.even {
124 font-style:normal;
125 }
126 /* pre */
127 pre.inline {
128 background-color:white;
129 padding:0em;
130 page-break-inside:auto;
131 }
132 pre.text {
133 background-color:#f8f8f8;
134 border-style:dotted;
135 border-width:1px;
136 }
137 pre.drawing {
138 background-color:#f8f8f8;
139 border-style:solid;
140 border-width:1px;
141 padding:2em;
142 }
143 code, pre, samp, tt {
144 background-color:#F4F2E2;
145 font-family:monospace;
146 font-size:90%;
147 margin:0 0 0 0;
148 /* page-break-inside:avoid; */
149 white-space:pre-line;
150 }
151 pre {
152 white-space:pre;
153 }
154 @media print {
155 pre {
156 white-space:pre-wrap;
157 }
158 }
159 /* q */
160 q:after,
161 q:before {
162 content:"";
163 }
164 /* cite */
165 cite {
166 font-style:normal;
167 }
168 /* .ref-needed */
169 .ref-needed {
170 font-size:50%;
171 color:red;
172 }
173 /* .sc */
174 span.sc {
175 font-variant:small-caps;
176 }
177 /* sub/sup */
178 sup {
179 font-size:80%;
180 }
181 sub {
182 font-size:80%;
183 }
184 /* .tt */
185 span.tt {
186 font-family:monospace;
187 /* font-size:95%; */
188 font-size:1.3em;
189 }
190 /* .section */
191 .section {
192 clear:both;
193 margin-top:2ex;
194 page-break-after:auto;
195 page-break-before:auto;
196 page-break-inside:avoid;
197 }
198 .section > section,
199 .section > *:first-child {
200 margin-left:0em;
201 }
202 .section > * {
203 margin-left:2em;
204 }
205 .section-header {
206 border-spacing:0;
207 margin:0 0 1ex 0;
208 padding:0 0 0 0;
209 page-break-after:avoid;
210 }
211 .section-header .section-number {
212 font-weight:bold;
213 padding-right:1ex;
214 }
215 .section-title {
216 font-family:sans-serif;
217 }
218 .section-header > tbody > tr > td {
219 vertical-align:top;
220 }
221 .alias:target ~ .section-header .section-number,
222 .section:target > .section-header .section-number,
223 .section > .section-header:target .section-number {
224 background-color:#BFEFFF;
225 }
226 .section-judgment {
227 }
228 .section.page-break {
229 page-break-before:always;
230 }
231 .section.multi-pages {
232 page-break-inside:auto;
233 }
234 .section.single-page {
235 page-break-inside:avoid;
236 }
237 hr.section {
238 clear:left;
239 }
240 hr.pagebreak {
241 page-break-before:always;
242 }
243 div.title {
244 margin-bottom:2ex;
245 margin-top:2ex;
246 }
247 div.title > h1 {
248 font-size:100%;
249 margin:0.1ex 0 0 0;
250 padding:0 0 0 0;
251 text-align:center;
252 }
253 div.title > h1:first-child {
254 color:white;
255 background-color:black;
256 font-size:150%;
257 font-weight:bold;
258 line-height:18pt;
259 }
260 div.title > h1:target {
261 background-color:#BFEFFF;
262 }
263 .section .section-header {
264 font-size:130%;
265 line-height:21pt;
266 }
267 .section .section .section-header {
268 font-size:120%;
269 line-height:15pt;
270 }
271 .section .section .section .section-header {
272 font-size:115%;
273 }
274 .figure-content > .section {
275 margin-top:0 !important;
276 }
277 .figure-content > .section + .section {
278 margin-top:2ex !important;
279 }
280 h2, h3, h4, h5, h6 {
281 font-size:inherit;
282 line-height:inherit;
283 margin:0 0 0 0;
284 padding:0 0 0 0;
285 }
286 /* p */
287 p {
288 margin:0 0 0 0;
289 padding:0 0 0 0;
290 }
291 /* .para */
292 .para {
293 margin-top:2ex;
294 }
295 .para:first-child,
296 a + .para,
297 .section-header + .para {
298 margin-top:0;
299 }
300 .para.center {
301 text-align:center;
302 }
303 .para > p {
304 text-align:justify;
305 }
306 .para > * {
307 margin-top:0;
308 margin-bottom:0;
309 }
310 br.para {
311 line-height:150%;
312 }
313 /* .self */
314 .self {
315 color:#999999;
316 font-style:normal;
317 margin-left:.3em;
318 position:absolute; /* NOTE: avoid bottom margin */
319 text-decoration:none;
320 visibility:hidden;
321 /* XXX: not standard CSS yet */
322 -moz-user-select:none;
323 -ms-user-select:none;
324 -webkit-user-select:none;
325 }
326 .self:hover {
327 text-decoration:none;
328 }
329 .para:hover .self,
330 dt:hover .self {
331 visibility:visible;
332 }
333 /* .figure */
334 .figure {
335 margin-top:1.5ex;
336 margin-bottom:1.5ex;
337 page-break-before:auto;
338 page-break-inside:avoid;
339 page-break-after:auto;
340 }
341 .section-header + .figure,
342 .figure:first-child {
343 margin-top:0;
344 }
345 /*
346 .para + .figure {
347 margin-top:1.5ex;
348 }
349 */
350 .figure:last-child {
351 margin-bottom:0;
352 }
353 .figure table.figure-caption {
354 border-spacing:0;
355 margin-top:0;
356 /*margin-bottom:0.5ex;*/
357 }
358 .figure table.figure-caption > tbody > tr > td {
359 padding:0 0 0 0;
360 }
361 .figure .figure-caption .figure-number {
362 font-weight:bold;
363 vertical-align:top;
364 }
365 .figure .figure-caption .figure-colon {
366 font-weight:bold;
367 vertical-align:top;
368 }
369 .figure .figure-caption .figure-title {
370 padding-left:1ex;
371 text-align:left;
372 vertical-align:middle;
373 }
374 .figure .figure-content {
375 border-left:5px solid black;
376 /* overflow:auto; */
377 padding:0 0 0 1em;
378 }
379 .figure:target > table.figure-caption > tbody > tr > td.figure-number > a {
380 background-color:#BFEFFF;
381 }
382 /* .quote */
383 .quote {
384 border-left: 3px solid blue;
385 padding-left: 1ex;
386 }
387 /* .ul */
388 .ul {
389 padding-left:0;
390 }
391 dl.ul > dt {
392 float:left;
393 }
394 dl.ul > dd {
395 margin-left:1.5em;
396 clear:none;
397 }
398 /* .ol */
399 .ol {
400 padding-left:0;
401 }
402 .ol.la {
403 list-style-type:lower-alpha;
404 }
405 .ol.ua {
406 list-style-type:upper-alpha;
407 }
408 dl.ol > dt {
409 float:left;
410 margin-right:1ex;
411 }
412 dl.ol > dd {
413 margin-left:1.5em;
414 clear:none;
415 }
416 table.ol {
417 border-spacing:1px;
418 }
419 table.ol > tbody > tr > td {
420 padding:0;
421 vertical-align:top;
422 }
423 table.ol > tbody > tr > td.name {
424 text-align:right;
425 }
426 table.ol > tbody > tr > td.value {
427 padding-left:1ex;
428 clear:none;
429 }
430 /* li */
431 ul.ul > li,
432 ol.ol > li {
433 margin-left:2em;
434 text-align:justify;
435 }
436 /* .dl */
437 .dl {
438 }
439 dl.dl > dt {
440 float:left;
441 font-weight:bold;
442 margin-right:1em;
443 }
444 dl.dl.nohang > dt {
445 float:none;
446 }
447 dl.dl > dd {
448 clear:left;
449 margin-bottom:.5em;
450 text-align:justify;
451 }
452 dl.dl.compact > dd {
453 margin-bottom:.0em;
454 }
455 dl.dl > dd > dl.dl {
456 margin-top:0.5em;
457 }
458 /* .notes */
459 .notes > hr {
460 border:none;
461 border-top:1px solid black;
462 color:black;
463 margin-left:0;
464 width:33%;
465 }
466 .notes {
467 margin-left:0;
468 }
469 .notes > table > tbody > tr > td {
470 vertical-align:top;
471 }
472 /* .note-ref */
473 .note-ref {
474 white-space:pre;
475 }
476 /* .note-numbers */
477 sup.note-numbers {
478 font-size:66%;
479 margin-left:2px;
480 }
481 sup.note-numbers > a,
482 .note-ref > a {
483 color:black;
484 font-weight:bold;
485 }
486 @media screen {
487 sup.note-numbers > a:visited,
488 .note-ref > a:visited {
489 color:gray !important;
490 }
491 sup.note-numbers > a:hover,
492 .note-ref > a:hover {
493 color:black !important;
494 }
495 sup.note-numbers > :target {
496 background-color:#BFEFFF;
497 }
498 .notes > table > tbody > tr > td:target .note-number,
499 .notes > table > tbody > tr > td > :target.note-number {
500 background-color:#BFEFFF;
501 }
502 }
503 /* .references */
504 .references {
505 margin-top:1ex;
506 }
507 .references:first-child {
508 margin-top:0;
509 }
510 .references > table {
511 border-collapse:separate;
512 border-spacing:0;
513 }
514 .references > table > tbody > tr + tr > td {
515 padding-top:1ex;
516 }
517 .reference-key {
518 padding-left:0;
519 padding-right:1em;
520 vertical-align:top;
521 }
522 .reference-content {
523 text-align:justify;
524 }
525 .reference-content > .reference-url {
526 }
527 .reference-content > .ref-backs {
528 //margin-left:1ex;
529 }
530 .reference-content > .ref-backs > .ref-back {
531 background-color:#F4F2E2;
532 font-size:70%;
533 line-height:0;
534 position:relative;
535 vertical-align:baseline;
536 }
537 td.reference {
538 vertical-align:top;
539 white-space:nowrap;
540 padding-right:1em;
541 }
542 /* .at */
543 .at:target {
544 background-color:#BFEFFF;
545 }
546 .at-unknown {
547 display:inline-box;
548 text-decoration-line:underline;
549 text-decoration-color:#C4451D;
550 text-decoration-style:solid;
551 }
552 .at-ambiguous {
553 display:inline-box;
554 text-decoration-line:underline overline;
555 text-decoration-color:#C4451D;
556 text-decoration-style:double;
557 }
558 .at-backs > .at-back {
559 background-color:#F4F2E2;
560 font-size:70%;
561 line-height:0;
562 position:relative;
563 vertical-align:baseline;
564 }
565 /* .tag */
566 .tag {
567 color:#326B6B;
568 }
569 .tag:target {
570 background-color:#BFEFFF;
571 }
572 .tag-backs > .tag-back {
573 background-color:#F4F2E2;
574 font-size:70%;
575 line-height:0;
576 position:relative;
577 vertical-align:baseline;
578 }
579 /* .reference */
580 .reference {
581 white-space:pre;
582 }
583 .reference:target {
584 background-color:#BFEFFF;
585 }
586 .reference-unknown {
587 display:inline-box;
588 text-decoration-line:line-through;
589 text-decoration-color:red;
590 text-decoration-style:solid;
591 }
592 .reference-ambiguous {
593 display:inline-box;
594 text-decoration-line:line-through;
595 text-decoration-color:red;
596 text-decoration-style:double;
597 }
598 /* .page-ref */
599 .page-ref > a,
600 .page-ref > sup > a {
601 color:green;
602 }
603 /* .shortcuts */
604 ul.shortcuts {
605 list-style-type:none;
606 margin:0 0 0 0;
607 padding:0 0 0 0;
608 position:fixed;
609 right:0.5ex;
610 top:0.5ex;
611 z-index:9999;
612 }
613 ul.shortcuts > li {
614 text-align:right;
615 line-height:1.2;
616 margin-bottom:0.5ex;
617 }
618 ul.shortcuts > li > a.shortcut {
619 background:white;
620 border:1px solid black;
621 padding:0 1ex 0 1ex;
622 }
623 @media print {
624 ul.shortcuts {
625 display:none;
626 }
627 }
628 /* .toc */
629 .toc {
630 background-color:#FFFFF0;
631 border:1px solid black;
632 /*margin-left:0 !important;*/
633 margin-top:1ex;
634 padding:1ex 2em 1.5ex 2em;
635 }
636 .toc .toc-name {
637 font-size:120%;
638 font-weight:bold;
639 }
640 .toc > ul {
641 margin-top:0;
642 }
643 .toc li:last-child > ul:last-child {
644 padding-bottom:0;
645 }
646 .toc ul {
647 list-style:none;
648 margin-bottom:0;
649 margin-left:1em;
650 padding-bottom:0;
651 padding-left:0em;
652 padding-top:0;
653 }
654 .toc.no-indent ul > li > ul {
655 margin-left:0;
656 }
657 .toc ul > li {
658 line-height:1.3;
659 font-weight:bold;
660 margin-left:0em;
661 margin-top:0;
662 }
663 .toc .toc-entry {
664 border-spacing:0;
665 }
666 .toc .toc-entry > tbody > tr > td {
667 padding:0 0 0 0;
668 vertical-align:top;
669 }
670 .toc .toc-entry .section-number {
671 padding-right:1ex;
672 }
673 .toc ul > li > ul {
674 padding-bottom:1ex;
675 padding-top:1ex;
676 }
677 .toc.no-vspace ul > li > ul {
678 padding-bottom:0;
679 padding-top:0;
680 }
681 .toc ul > li > ul > li {
682 font-weight:normal;
683 line-height:normal;
684 margin-left:0em;
685 }
686 @media print {
687 ul.toc a:last-child::after {
688 content:leader('.') target-counter(attr(href), page);
689 }
690 }
691 /* .tof */
692 .tof {
693 list-style:none;
694 padding-left:0;
695 }
696 .tof .figure-number {
697 vertical-align:top;
698 padding-right:1em;
699 }
700 .tof h2 {
701 margin-bottom:1ex;
702 }
703 .tof .figure-number {
704 font-weight:bold;
705 margin-right:1ex;
706 }
707 .tof .figure-title {
708 }
709 /* .headers */
710 table.headers {
711 border-collapse:collapse;
712 border-spacing:0;
713 border:1px solid black;
714 /* color:white; */
715 line-height:1.4;
716 margin-left:auto;
717 margin-right:auto;
718 width:100%;
719 }
720 table.headers > * > tr:first-child > td,
721 table.headers > * > tr:first-child > th {
722 background-color:#F4F2E2;
723 border:1px solid white;
724 padding:0;
725 /*
726 padding-left:0.5em;
727 padding-right:0.5em;
728 */
729 vertical-align:top;
730 }
731 table.headers td.left {
732 padding:0 0 0 0;
733 text-align:left;
734 }
735 table.headers td.right {
736 padding-left:0;
737 padding-right:0.5em;
738 text-align:right;
739 }
740 /* borders */
741 table.headers > * > tr:first-child > td,
742 table.headers > * > tr:first-child > th {
743 border-top:1px solid black;
744 }
745 table.headers > * > tr:last-child > td,
746 table.headers > * > tr:last-child > th {
747 border-bottom:1px solid black;
748 }
749 table.headers > * > tr > td:first-child,
750 table.headers > * > tr > th:first-child {
751 border-left:1px solid black;
752 }
753 table.headers > * > tr > td:last-child,
754 table.headers > * > tr > th:last-child {
755 border-right:1px solid black;
756 }
757 /* .document-head */
758 .document-head {
759 border:1px solid black;
760 }
761 .document-head > table {
762 border-collapse:collapse;
763 border-spacing:0;
764 border:1px solid white;
765 background-color:#F4F2E2;
766 line-height:1.4;
767 margin-left:auto;
768 margin-right:auto;
769 width:100%;
770 }
771 .document-head > table > tbody > tr > td {
772 border:1px solid white;
773 padding:0;
774 vertical-align:top;
775 width:50%;
776 }
777 .document-head > table > tbody > tr > td.left {
778 }
779 .document-head > table > tbody > tr > td.right {
780 }
781 .document-head > table > tbody > tr > td.full {
782 }
783 .document-head > table div.artwork.artwork-type-image {
784 border:0;
785 display:inline-block;
786 vertical-align:middle;
787 }
788 /* .document-headers */
789 table.document-headers {
790 border-spacing:0;
791 border-collapse:collapse;
792 }
793 table.document-headers > tbody > tr.header {
794 border-bottom:1px solid white;
795 }
796 table.document-authors > tbody > tr.header:last-child {
797 border-top:none;
798 }
799 table.document-headers > tbody > tr.header > td {
800 vertical-align:top;
801 line-height:1.2;
802 }
803 .document-head .header-name,
804 table.document-headers > tbody > tr.header > td.header-name {
805 padding-left:0.5em;
806 font-weight:bold;
807 }
808 table.document-headers > tbody > tr.header > td.header-value {
809 padding-left:1em;
810 width:100%;
811 }
812 /* document-authors */
813 table.document-authors {
814 border-collapse:collapse;
815 border-spacing:0;
816 width:100%;
817 }
818 table.document-authors > tbody > tr {
819 border-bottom:1px solid white;
820 }
821 table.document-authors > tbody > tr:first-child {
822 border-top:none;
823 }
824 table.document-authors > tbody > tr > td.author {
825 line-height:1.2;
826 padding-right:0.5em;
827 text-align:right;
828 vertical-align:top;
829 width:100%;
830 }
831 /* .aside */
832 .aside {
833 background-color:white;
834 border:1px solid black;
835 clear:right;
836 float:right;
837 hyphens:auto;
838 margin:1ex 0 1ex 2em !important;
839 padding: 0.5ex 1ex 0.5ex 1ex;
840 position:relative;
841 width:33%;
842 }
843 .aside .figure-content {
844 border-left:0 !important;
845 padding-left:0 !important;
846 }