 |
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
6 @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
7
8 /* bidi */
9
10 [dir] {
11 unicode-bidi: -moz-isolate;
12 }
13 [dir="rtl"] {
14 direction: rtl;
15 }
16 [dir="ltr"] {
17 direction: ltr;
18 }
19
20 bdi:-moz-dir(ltr), [dir="auto"]:-moz-dir(ltr) { direction: ltr; }
21 bdi:-moz-dir(rtl), [dir="auto"]:-moz-dir(rtl) { direction: rtl; }
22
23 /* To ensure http://www.w3.org/TR/REC-html40/struct/dirlang.html#style-bidi:
24 *
25 * "When a block element that does not have a dir attribute is transformed to
26 * the style of an inline element by a style sheet, the resulting presentation
27 * should be equivalent, in terms of bidirectional formatting, to the
28 * formatting obtained by explicitly adding a dir attribute (assigned the
29 * inherited value) to the transformed element."
30 *
31 * and the rules in http://dev.w3.org/html5/spec/rendering.html#rendering
32 */
33
34 address,
35 article,
36 aside,
37 blockquote,
38 body,
39 caption,
40 center,
41 col,
42 colgroup,
43 dd,
44 dir,
45 div,
46 dl,
47 dt,
48 fieldset,
49 figcaption,
50 figure,
51 footer,
52 form,
53 h1,
54 h2,
55 h3,
56 h4,
57 h5,
58 h6,
59 header,
60 hgroup,
61 hr,
62 html,
63 legend,
64 li,
65 listing,
66 main,
67 marquee,
68 menu,
69 nav,
70 noframes,
71 ol,
72 p,
73 plaintext,
74 pre,
75 section,
76 summary,
77 table,
78 tbody,
79 td,
80 tfoot,
81 th,
82 thead,
83 tr,
84 ul,
85 xmp {
86 unicode-bidi: -moz-isolate;
87 }
88
89 bdi, output {
90 unicode-bidi: -moz-isolate;
91 }
92 bdo, bdo[dir] {
93 unicode-bidi: bidi-override;
94 }
95 bdo[dir="auto"] {
96 unicode-bidi: -moz-isolate-override;
97 }
98 textarea[dir="auto"], pre[dir="auto"] { unicode-bidi: -moz-plaintext; }
99
100 /* blocks */
101
102 article,
103 aside,
104 details,
105 div,
106 dt,
107 figcaption,
108 footer,
109 form,
110 header,
111 hgroup,
112 html,
113 main,
114 nav,
115 section,
116 summary {
117 display: block;
118 }
119
120 body {
121 display: block;
122 margin: 8px;
123 }
124
125 p, dl, multicol {
126 display: block;
127 margin-block-start: 1em;
128 margin-block-end: 1em;
129 }
130
131 dd {
132 display: block;
133 -moz-margin-start: 40px;
134 }
135
136 blockquote, figure {
137 display: block;
138 margin-block-start: 1em;
139 margin-block-end: 1em;
140 -moz-margin-start: 40px;
141 -moz-margin-end: 40px;
142 }
143
144 address {
145 display: block;
146 font-style: italic;
147 }
148
149 center {
150 display: block;
151 text-align: -moz-center;
152 }
153
154 blockquote[type=cite] {
155 display: block;
156 margin-block-start: 1em;
157 margin-block-end: 1em;
158 -moz-margin-start: 0;
159 -moz-margin-end: 0;
160 -moz-padding-start: 1em;
161 -moz-border-start: solid;
162 border-color: blue;
163 border-width: thin;
164 }
165
166 span[_moz_quote=true] {
167 color: blue;
168 }
169
170 pre[_moz_quote=true] {
171 color: blue;
172 }
173
174 h1 {
175 display: block;
176 font-size: 2em;
177 font-weight: bold;
178 margin-block-start: .67em;
179 margin-block-end: .67em;
180 }
181
182 h2,
183 :-moz-any(article, aside, nav, section)
184 h1 {
185 display: block;
186 font-size: 1.5em;
187 font-weight: bold;
188 margin-block-start: .83em;
189 margin-block-end: .83em;
190 }
191
192 h3,
193 :-moz-any(article, aside, nav, section)
194 :-moz-any(article, aside, nav, section)
195 h1 {
196 display: block;
197 font-size: 1.17em;
198 font-weight: bold;
199 margin-block-start: 1em;
200 margin-block-end: 1em;
201 }
202
203 h4,
204 :-moz-any(article, aside, nav, section)
205 :-moz-any(article, aside, nav, section)
206 :-moz-any(article, aside, nav, section)
207 h1 {
208 display: block;
209 font-size: 1.00em;
210 font-weight: bold;
211 margin-block-start: 1.33em;
212 margin-block-end: 1.33em;
213 }
214
215 h5,
216 :-moz-any(article, aside, nav, section)
217 :-moz-any(article, aside, nav, section)
218 :-moz-any(article, aside, nav, section)
219 :-moz-any(article, aside, nav, section)
220 h1 {
221 display: block;
222 font-size: 0.83em;
223 font-weight: bold;
224 margin-block-start: 1.67em;
225 margin-block-end: 1.67em;
226 }
227
228 h6,
229 :-moz-any(article, aside, nav, section)
230 :-moz-any(article, aside, nav, section)
231 :-moz-any(article, aside, nav, section)
232 :-moz-any(article, aside, nav, section)
233 :-moz-any(article, aside, nav, section)
234 h1 {
235 display: block;
236 font-size: 0.67em;
237 font-weight: bold;
238 margin-block-start: 2.33em;
239 margin-block-end: 2.33em;
240 }
241
242 listing {
243 display: block;
244 font-family: -moz-fixed;
245 font-size: medium;
246 white-space: pre;
247 margin-block-start: 1em;
248 margin-block-end: 1em;
249 }
250
251 xmp, pre, plaintext {
252 display: block;
253 font-family: -moz-fixed;
254 white-space: pre;
255 margin-block-start: 1em;
256 margin-block-end: 1em;
257 }
258
259 /* tables */
260
261 table {
262 display: table;
263 border-spacing: 2px;
264 border-collapse: separate;
265 /* XXXldb do we want this if we're border-collapse:collapse ? */
266 box-sizing: border-box;
267 text-indent: 0;
268 }
269
270 table[align="left"] {
271 float: left;
272 }
273
274 table[align="right"] {
275 float: right;
276 text-align: start;
277 }
278
279
280 /* border collapse rules */
281
282 /* Set hidden if we have 'frame' or 'rules' attribute.
283 Set it on all sides when we do so there's more consistency
284 in what authors should expect */
285
286 /* Put this first so 'border' and 'frame' rules can override it. */
287 table[rules] {
288 border-width: thin;
289 border-style: hidden;
290 }
291
292 /* 'border' before 'frame' so 'frame' overrides
293 A border with a given value should, of course, pass that value
294 as the border-width in pixels -> attr mapping */
295
296 /* :-moz-table-border-nonzero is like [border]:not([border="0"]) except it
297 also checks for other zero-like values according to HTML attribute
298 parsing rules */
299 table:-moz-table-border-nonzero {
300 border-width: thin;
301 border-style: outset;
302 }
303
304 table[frame] {
305 border: thin hidden;
306 }
307
308 /* specificity must beat table:-moz-table-border-nonzero rule above */
309 table[frame="void"] { border-style: hidden; }
310 table[frame="above"] { border-style: outset hidden hidden hidden; }
311 table[frame="below"] { border-style: hidden hidden outset hidden; }
312 table[frame="lhs"] { border-style: hidden hidden hidden outset; }
313 table[frame="rhs"] { border-style: hidden outset hidden hidden; }
314 table[frame="hsides"] { border-style: outset hidden; }
315 table[frame="vsides"] { border-style: hidden outset; }
316 table[frame="box"],
317 table[frame="border"] { border-style: outset; }
318
319
320 /* Internal Table Borders */
321
322 /* 'border' cell borders first */
323
324 table:-moz-table-border-nonzero > * > tr > td,
325 table:-moz-table-border-nonzero > * > tr > th,
326 table:-moz-table-border-nonzero > * > td,
327 table:-moz-table-border-nonzero > * > th,
328 table:-moz-table-border-nonzero > td,
329 table:-moz-table-border-nonzero > th
330 {
331 border-width: thin;
332 border-style: inset;
333 }
334
335 /* collapse only if rules are really specified */
336 table[rules]:not([rules="none"]):not([rules=""]) {
337 border-collapse: collapse;
338 }
339
340 /* only specified rules override 'border' settings
341 (increased specificity to achieve this) */
342 table[rules]:not([rules=""])> tr > td,
343 table[rules]:not([rules=""])> * > tr > td,
344 table[rules]:not([rules=""])> tr > th,
345 table[rules]:not([rules=""])> * > tr > th,
346 table[rules]:not([rules=""])> td,
347 table[rules]:not([rules=""])> th
348 {
349 border-width: thin;
350 border-style: none;
351 }
352
353
354 table[rules][rules="none"] > tr > td,
355 table[rules][rules="none"] > * > tr > td,
356 table[rules][rules="none"] > tr > th,
357 table[rules][rules="none"] > * > tr > th,
358 table[rules][rules="none"] > td,
359 table[rules][rules="none"] > th
360 {
361 border-width: thin;
362 border-style: none;
363 }
364
365 table[rules][rules="all"] > tr > td,
366 table[rules][rules="all"] > * > tr > td,
367 table[rules][rules="all"] > tr > th,
368 table[rules][rules="all"] > * > tr > th,
369 table[rules][rules="all"] > td,
370 table[rules][rules="all"] > th
371 {
372 border-width: thin;
373 border-style: solid;
374 }
375
376 table[rules][rules="rows"] > tr,
377 table[rules][rules="rows"] > * > tr {
378 border-block-start-width: thin;
379 border-block-end-width: thin;
380 border-block-start-style: solid;
381 border-block-end-style: solid;
382 }
383
384
385 table[rules][rules="cols"] > tr > td,
386 table[rules][rules="cols"] > * > tr > td,
387 table[rules][rules="cols"] > tr > th,
388 table[rules][rules="cols"] > * > tr > th {
389 -moz-border-start-width: thin;
390 -moz-border-end-width: thin;
391 -moz-border-start-style: solid;
392 -moz-border-end-style: solid;
393 }
394
395 table[rules][rules="groups"] > colgroup {
396 -moz-border-start-width: thin;
397 -moz-border-end-width: thin;
398 -moz-border-start-style: solid;
399 -moz-border-end-style: solid;
400 }
401 table[rules][rules="groups"] > tfoot,
402 table[rules][rules="groups"] > thead,
403 table[rules][rules="groups"] > tbody {
404 border-block-start-width: thin;
405 border-block-end-width: thin;
406 border-block-start-style: solid;
407 border-block-start-style: solid;
408 }
409
410
411 /* caption inherits from table not table-outer */
412 caption {
413 display: table-caption;
414 text-align: center;
415 }
416
417 table[align="center"] > caption {
418 -moz-margin-start: auto;
419 -moz-margin-end: auto;
420 }
421
422 table[align="center"] > caption[align="left"]:-moz-dir(ltr) {
423 -moz-margin-end: 0;
424 }
425 table[align="center"] > caption[align="left"]:-moz-dir(rtl) {
426 -moz-margin-start: 0;
427 }
428
429 table[align="center"] > caption[align="right"]:-moz-dir(ltr) {
430 -moz-margin-start: 0;
431 }
432 table[align="center"] > caption[align="right"]:-moz-dir(rtl) {
433 -moz-margin-end: 0;
434 }
435
436 tr {
437 display: table-row;
438 vertical-align: inherit;
439 }
440
441 col {
442 display: table-column;
443 }
444
445 colgroup {
446 display: table-column-group;
447 }
448
449 tbody {
450 display: table-row-group;
451 vertical-align: middle;
452 }
453
454 thead {
455 display: table-header-group;
456 vertical-align: middle;
457 }
458
459 tfoot {
460 display: table-footer-group;
461 vertical-align: middle;
462 }
463
464 /* for XHTML tables without tbody */
465 table > tr {
466 vertical-align: middle;
467 }
468
469 td {
470 display: table-cell;
471 vertical-align: inherit;
472 text-align: inherit;
473 padding: 1px;
474 }
475
476 th {
477 display: table-cell;
478 vertical-align: inherit;
479 font-weight: bold;
480 padding: 1px;
481 }
482
483 tr > form:-moz-is-html, tbody > form:-moz-is-html,
484 thead > form:-moz-is-html, tfoot > form:-moz-is-html,
485 table > form:-moz-is-html {
486 /* Important: don't show these forms in HTML */
487 display: none !important;
488 }
489
490 table[bordercolor] > tbody,
491 table[bordercolor] > thead,
492 table[bordercolor] > tfoot,
493 table[bordercolor] > col,
494 table[bordercolor] > colgroup,
495 table[bordercolor] > tr,
496 table[bordercolor] > * > tr,
497 table[bordercolor] > tr > td,
498 table[bordercolor] > * > tr > td,
499 table[bordercolor] > tr > th,
500 table[bordercolor] > * > tr > th {
501 border-color: inherit;
502 }
503
504 /* inlines */
505
506 q:before {
507 content: open-quote;
508 }
509
510 q:after {
511 content: close-quote;
512 }
513
514 b, strong {
515 font-weight: bolder;
516 }
517
518 i, cite, em, var, dfn {
519 font-style: italic;
520 }
521
522 tt, code, kbd, samp {
523 font-family: -moz-fixed;
524 }
525
526 u, ins {
527 text-decoration: underline;
528 }
529
530 s, strike, del {
531 text-decoration: line-through;
532 }
533
534 big {
535 font-size: larger;
536 }
537
538 small {
539 font-size: smaller;
540 }
541
542 sub {
543 vertical-align: sub;
544 font-size: smaller;
545 line-height: normal;
546 }
547
548 sup {
549 vertical-align: super;
550 font-size: smaller;
551 line-height: normal;
552 }
553
554 nobr {
555 white-space: nowrap;
556 }
557
558 mark {
559 background: yellow;
560 color: black;
561 }
562
563 /* titles */
564 abbr[title], acronym[title] {
565 text-decoration: dotted underline;
566 }
567
568 /* lists */
569
570 ul, menu, dir {
571 display: block;
572 list-style-type: disc;
573 margin-block-start: 1em;
574 margin-block-end: 1em;
575 -moz-padding-start: 40px;
576 }
577
578 menu[type="context"] {
579 display: none !important;
580 }
581
582 ol {
583 display: block;
584 list-style-type: decimal;
585 margin-block-start: 1em;
586 margin-block-end: 1em;
587 -moz-padding-start: 40px;
588 }
589
590 li {
591 display: list-item;
592 text-align: match-parent;
593 }
594
595 /* nested lists have no top/bottom margins */
596 :-moz-any(ul, ol, dir, menu, dl) ul,
597 :-moz-any(ul, ol, dir, menu, dl) ol,
598 :-moz-any(ul, ol, dir, menu, dl) dir,
599 :-moz-any(ul, ol, dir, menu, dl) menu,
600 :-moz-any(ul, ol, dir, menu, dl) dl {
601 margin-block-start: 0;
602 margin-block-end: 0;
603 }
604
605 /* 2 deep unordered lists use a circle */
606 :-moz-any(ol, ul, menu, dir) ul,
607 :-moz-any(ol, ul, menu, dir) menu,
608 :-moz-any(ol, ul, menu, dir) dir {
609 list-style-type: circle;
610 }
611
612 /* 3 deep (or more) unordered lists use a square */
613 :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
614 :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
615 :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
616 list-style-type: square;
617 }
618
619
620 /* leafs */
621
622 /* <hr> noshade and color attributes are handled completely by
623 * the nsHTMLHRElement attribute mapping code
624 */
625 hr {
626 display: block;
627 border: 1px inset;
628 margin-block-start: 0.5em;
629 margin-block-end: 0.5em;
630 -moz-margin-start: auto;
631 -moz-margin-end: auto;
632 color: gray;
633 -moz-float-edge: margin-box;
634 box-sizing: border-box;
635 }
636
637 hr[size="1"] {
638 border-style: solid none none none;
639 }
640
641 img:-moz-broken::before, input:-moz-broken::before,
642 img:-moz-user-disabled::before, input:-moz-user-disabled::before,
643 img:-moz-loading::before, input:-moz-loading::before,
644 applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
645 applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
646 content: -moz-alt-content !important;
647 unicode-bidi: -moz-isolate;
648 }
649
650 :-moz-any(object,applet):-moz-any(:-moz-broken,:-moz-user-disabled) > *|* {
651 /*
652 Inherit in the object's alignment so that if we aren't aligned explicitly
653 we'll end up in the right place vertically. See bug 36997. Note that this
654 is not !important because we _might_ be aligned explicitly.
655 */
656 vertical-align: inherit;
657 }
658
659 img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
660 embed:-moz-suppressed, applet:-moz-suppressed {
661 /*
662 Set visibility too in case the page changes display. Note that we _may_
663 want to just set visibility and not display, in general, if we find that
664 display:none breaks too many layouts. And if we decide we really do want
665 people to be able to right-click blocked images, etc, we need to set
666 neither one, and hack the painting code.... :(
667 */
668 display: none !important;
669 visibility: hidden !important;
670 }
671
672 img[usemap], object[usemap] {
673 color: blue;
674 }
675
676 frameset {
677 display: block ! important;
678 overflow: -moz-hidden-unscrollable;
679 position: static ! important;
680 float: none ! important;
681 border: none ! important;
682 }
683
684 link {
685 display: none;
686 }
687
688 frame {
689 border-radius: 0 ! important;
690 }
691
692 iframe {
693 border: 2px inset;
694 }
695
696 noframes {
697 display: none;
698 }
699
700 spacer {
701 position: static ! important;
702 float: none ! important;
703 }
704
705 canvas {
706 -moz-user-select: none;
707 }
708
709 /* focusable content: anything w/ tabindex >=0 is focusable, but we
710 skip drawing a focus outline on a few things that handle it
711 themselves. */
712 :-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) {
713 /* Don't specify the outline-color, we should always use initial value. */
714 outline: 1px dotted;
715 }
716
717 /* hidden elements */
718 base, basefont, datalist, head, meta, script, style, title,
719 noembed, param, template {
720 display: none;
721 }
722
723 area {
724 /* Don't give it frames other than its imageframe */
725 display: none ! important;
726 }
727
728 iframe:fullscreen {
729 /* iframes in full-screen mode don't show a border. */
730 border: none !important;
731 padding: 0 !important;
732 }
733
734 /* media elements */
735 video > xul|videocontrols, audio > xul|videocontrols {
736 display: -moz-box;
737 -moz-box-orient: vertical;
738 -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls");
739 }
740
741 video:not([controls]) > xul|videocontrols,
742 audio:not([controls]) > xul|videocontrols {
743 visibility: hidden;
744 -moz-binding: none;
745 }
746
747 video {
748 object-fit: contain;
749 }
750
751 video > img:-moz-native-anonymous {
752 /* Video poster images should render with the video element's "object-fit" &
753 "object-position" properties */
754 object-fit: inherit !important;
755 object-position: inherit !important;
756 }
757
758 audio:not([controls]) {
759 display: none;
760 }
761
762 *|*::-moz-html-canvas-content {
763 display: block !important;
764 /* we want to be an absolute and fixed container */
765 transform: translate(0) !important;
766 }
767
768 video > .caption-box {
769 position: relative;
770 overflow: hidden;
771 }
772
773 /* details & summary */
774
775 details > summary::-moz-list-bullet {
776 list-style-type: disclosure-closed;
777 /* Prevent elements in summary being selected when clicking on the triangle. */
778 -moz-user-select: none;
779 }
780
781 details[open] > summary::-moz-list-bullet {
782 list-style-type: disclosure-open;
783 }
784
785 /* emulation of non-standard HTML <marquee> tag */
786 marquee {
787 inline-size: -moz-available;
788 display: inline-block;
789 vertical-align: text-bottom;
790 text-align: start;
791 -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
792 }
793
794 marquee[direction="up"], marquee[direction="down"] {
795 -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
796 block-size: 200px;
797 }
798
799 /* PRINT ONLY rules follow */
800 @media print {
801
802 marquee { -moz-binding: none; }
803
804 }
805
806 /* Ruby */
807
808 ruby {
809 display: ruby;
810 }
811 rb {
812 display: ruby-base;
813 white-space: nowrap;
814 }
815 rp {
816 display: none;
817 }
818 rt {
819 display: ruby-text;
820 }
821 rtc {
822 display: ruby-text-container;
823 }
824 rtc, rt {
825 white-space: nowrap;
826 font-size: 50%;
827 -moz-min-font-size-ratio: 50%;
828 line-height: 1;
829 %ifndef XP_WIN
830 /* The widely-used Windows font Meiryo doesn't work fine with this
831 * setting, so disable this on Windows. We should re-enable it once
832 * Microsoft fixes this issue. See bug 1164279. */
833 font-variant-east-asian: ruby;
834 %endif
835 }
836 rtc, rt {
837 text-emphasis: none;
838 }
839 rtc:lang(zh), rt:lang(zh) {
840 ruby-align: center;
841 }
842 rtc:lang(zh-TW), rt:lang(zh-TW) {
843 font-size: 30%; /* bopomofo */
844 -moz-min-font-size-ratio: 30%;
845 }
846 rtc > rt {
847 font-size: inherit;
848 }
849 ruby, rb, rt, rtc {
850 unicode-bidi: -moz-isolate;
851 }
