layout/style/html.css

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