path: root/layout/style/res/html.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@font-face {
  font-family: -moz-bullet-font;
  src: url("data:font/woff2;base64,d09GMgABAAAAAARYAAwAAAAACqAAAAQFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAgwIRCAqKDIcYATYCJAMsCxgABCAFg2AHIBtDCFGUrM0MyM/DGJyndUclpZwnU8QPQ6wsFOHO+/yHNvV9IEqSQgsVJW2p+uZkohKbVExPEz/JUW7zk6rzYH9723UJ/4DzBII8CSzwgFMOOE4KW2rjAmh4qQWSiid60f7Y9FsXScfUpeluagFqTTQYyoQaQSubXil0lHRsBehAI9KofG/6ogF9/Hl6lBd920LmeTxj8JXBfFWKwYAY3QsAAXD17ZAB4M6Ocv/nsZlkaTl0gLipewIQEMB2d9lKDAT1ZjP/F7jmWsQ3wn8AZvZFgIIC7ESh4AP1iFb4nPnfWyJgcQArpUWqW9W96j71kHr/L9a/dNRbj+8/ujXLWCMMFYVYiXoEaZQ4YOC/E7Dkz3JEjaokxAP6i3hIUjv9fwYyE6I3yIozKkaGN63fP36aeLJmxlRZwZiFziPrMVvOlnCF98SQJfGO/Xllv/FnWAcEjrMqaMCPwVmktCDO5zzxcXqeKS+QFxYnvJLFVzKZAFcKnlZRwHEPVM3mXxNt2gdZEpkKaIAG9gbgDTU5SOYDcmX7Rr61evEA1U+1/3SMb6FFtUqh55nYleE95j2zPNxzdlnGoR5xu/PxQKzb7bFaFLvl79Z54Lx9OH+g0/PPYlcsNo/nwP2V2vsHUHsV4KqEsd+e2r6Fu2v7abkfvsb65b41uwvRvqewH25kTntqolbYsEr5DAqrX97a0jrBLjFRExVHR2dH1Za6unyZfCVZHqQP0BtYjuUYlg9J6SurcrTEiOr26m5xcuTW4Sp3ljkUYWJ9+/iVmzbzPpcuXnGeqU3U7IKjz/qeKSSCltyhuSoxkqqTZX+DXt/OMmAikC8SzVD0jg3dbhIE0eUqc04UFFrxCSXzFxgHclzRMPe0ocOjiKRoSZISE0OtpkBjECdxkkRM1KiaJV0ed0V5umBP1wyUPL2ZBGLSDh5itIHahHRF0CY5nZMGib6T3cOmDvcTSZKuPiFJFpPRGNTIOq7jl5OjDiGIoo6qEE0QtfQJ3VYUD2RZvbm5uWWCWOgR4HXAk5GxLEO0izhLdvPTfpTV3xeOnOfT96uR53CdPrPq+P9HZvzO4QCMmDr7lTcNZorT6iMOYgI+IxClMzeCspeoLt5ABGSpta6gRZmQSnzk9e9jmOAYKC7RsyGMYaB6MpbNKMiRq2U6vI0yPZuTMiODFytMrGEBi7pjGgkAMoaNLGOFSoYceaZMx1+XTC/UNpmRzY1nmwT7AIcK+fK5lYNjz893lwMTuXlD2AKl8Md+24AxitRaLH/MUMqd9z862owy/bZTuZUqs1iRQop0KdLgZwPc9JS0lprnkef1gitBCRhjgV+vjGK8BfIV8CrlVghj1vIyZfyC/AJvqbsQYAEA/v+IAQA=");
}

/* bidi */

:-moz-has-dir-attr {
  unicode-bidi: isolate;
}
:-moz-dir-attr-rtl {
  direction: rtl;
}
:-moz-dir-attr-ltr {
  direction: ltr;
}

:-moz-dir-attr-like-auto:dir(ltr) { direction: ltr; }
:-moz-dir-attr-like-auto:dir(rtl) { direction: rtl; }

/* https://html.spec.whatwg.org/#bidi-rendering */
input[type=tel]:dir(ltr) {
  direction: ltr;
}

/* To ensure http://www.w3.org/TR/REC-html40/struct/dirlang.html#style-bidi:
 *
 * "When a block element that does not have a dir attribute is transformed to
 * the style of an inline element by a style sheet, the resulting presentation
 * should be equivalent, in terms of bidirectional formatting, to the
 * formatting obtained by explicitly adding a dir attribute (assigned the
 * inherited value) to the transformed element."
 *
 * and the rules in http://dev.w3.org/html5/spec/rendering.html#rendering
 */

address,
article,
aside,
blockquote,
body,
caption,
center,
col,
colgroup,
dd,
dir,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
legend,
li,
listing,
main,
marquee,
menu,
nav,
noframes,
ol,
p,
plaintext,
pre,
section,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul,
xmp {
  unicode-bidi: isolate;
}

bdi, output {
  unicode-bidi: isolate;
}
/* We need the "bdo:-moz-has-dir-attr" bit because "bdo" has lower
   specificity than the ":-moz-has-dir-attr" selector above. */
bdo, bdo:-moz-has-dir-attr {
  unicode-bidi: isolate-override;
}
textarea:-moz-dir-attr-like-auto,
pre:-moz-dir-attr-like-auto {
    unicode-bidi: plaintext;
}

/* blocks */

article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
section,
summary {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

dd {
  display: block;
  margin-inline-start: 40px;
}

blockquote, figure {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

h2,
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

h3,
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

h4,
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.00em;
  font-weight: bold;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

h5,
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

h6,
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}

listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}


/* border collapse rules */

  /* Set hidden if we have 'frame' or 'rules' attribute.
     Set it on all sides when we do so there's more consistency
     in what authors should expect */

  /* Put this first so 'border' and 'frame' rules can override it. */
table[rules] {
  border-width: thin;
  border-style: hidden;
}

  /* 'border' before 'frame' so 'frame' overrides
      A border with a given value should, of course, pass that value
      as the border-width in pixels -> attr mapping */

  /* :-moz-table-border-nonzero is like [border]:not([border="0"]) except it
     also checks for other zero-like values according to HTML attribute
     parsing rules */
table:-moz-table-border-nonzero {
  border-width: thin;
  border-style: outset;
}

table[frame] {
  border: thin hidden;
}

/* specificity must beat table:-moz-table-border-nonzero rule above */
table[frame="void"]   { border-style: hidden; }
table[frame="above"]  { border-style: outset hidden hidden hidden; }
table[frame="below"]  { border-style: hidden hidden outset hidden; }
table[frame="lhs"]    { border-style: hidden hidden hidden outset; }
table[frame="rhs"]    { border-style: hidden outset hidden hidden; }
table[frame="hsides"] { border-style: outset hidden; }
table[frame="vsides"] { border-style: hidden outset; }
table[frame="box"],
table[frame="border"] { border-style: outset; }


/* Internal Table Borders */

  /* 'border' cell borders first */

table:-moz-table-border-nonzero > * > tr > td,
table:-moz-table-border-nonzero > * > tr > th,
table:-moz-table-border-nonzero > * > td,
table:-moz-table-border-nonzero > * > th,
table:-moz-table-border-nonzero > td,
table:-moz-table-border-nonzero > th
{
  border-width: thin;
  border-style: inset;
}

/* collapse only if rules are really specified */
table[rules]:not([rules="none"], [rules=""]) {
  border-collapse: collapse;
}

/* only specified rules override 'border' settings
  (increased specificity to achieve this) */
table[rules]:not([rules=""])> tr > td,
table[rules]:not([rules=""])> * > tr > td,
table[rules]:not([rules=""])> tr > th,
table[rules]:not([rules=""])> * > tr > th,
table[rules]:not([rules=""])> td,
table[rules]:not([rules=""])> th
{
  border-width: thin;
  border-style: none;
}


table[rules][rules="none"]  > tr > td,
table[rules][rules="none"] > * > tr > td,
table[rules][rules="none"] > tr > th,
table[rules][rules="none"] > * > tr > th,
table[rules][rules="none"] > td,
table[rules][rules="none"] > th
{
  border-width: thin;
  border-style: none;
}

table[rules][rules="all"] > tr > td,
table[rules][rules="all"] > * > tr > td,
table[rules][rules="all"] > tr > th,
table[rules][rules="all"] > * > tr > th,
table[rules][rules="all"] > td,
table[rules][rules="all"] > th
{
  border-width: thin;
  border-style: solid;
}

table[rules][rules="rows"] > tr,
table[rules][rules="rows"] > * > tr {
  border-block-start-width: thin;
  border-block-end-width: thin;
  border-block-start-style: solid;
  border-block-end-style: solid;
}


table[rules][rules="cols"] > tr > td,
table[rules][rules="cols"] > * > tr > td,
table[rules][rules="cols"] > tr > th,
table[rules][rules="cols"] > * > tr > th {
  border-inline-start-width: thin;
  border-inline-end-width: thin;
  border-inline-start-style: solid;
  border-inline-end-style: solid;
}

table[rules][rules="groups"] > colgroup {
  border-inline-start-width: thin;
  border-inline-end-width: thin;
  border-inline-start-style: solid;
  border-inline-end-style: solid;
}
table[rules][rules="groups"] > tfoot,
table[rules][rules="groups"] > thead,
table[rules][rules="groups"] > tbody {
  border-block-start-width: thin;
  border-block-end-width: thin;
  border-block-start-style: solid;
  border-block-end-style: solid;
}


/* caption inherits from table not table-outer */
caption {
  display: table-caption;
  text-align: center;
}

table[align="center"] > caption {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

table[align="center"] > caption[align="left"]:dir(ltr) {
  margin-inline-end: 0;
}
table[align="center"] > caption[align="left"]:dir(rtl) {
  margin-inline-start: 0;
}

table[align="center"] > caption[align="right"]:dir(ltr) {
  margin-inline-start: 0;
}
table[align="center"] > caption[align="right"]:dir(rtl) {
  margin-inline-end: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: unset;
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
  text-align: -moz-center-or-inherit;
}

tr > form:-moz-is-html, tbody > form:-moz-is-html,
thead > form:-moz-is-html, tfoot > form:-moz-is-html,
table > form:-moz-is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

table[bordercolor] > tbody,
table[bordercolor] > thead,
table[bordercolor] > tfoot,
table[bordercolor] > col,
table[bordercolor] > colgroup,
table[bordercolor] > tr,
table[bordercolor] > * > tr,
table[bordercolor]  > tr > td,
table[bordercolor] > * > tr > td,
table[bordercolor]  > tr > th,
table[bordercolor] > * > tr > th {
  border-color: inherit;
}

/* inlines */

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b, strong {
  font-weight: bolder;
}

i, cite, em, var, dfn {
  font-style: italic;
}

tt, code, kbd, samp {
  font-family: -moz-fixed;
}

u, ins {
  text-decoration: underline;
}

s, strike, del {
  text-decoration: line-through;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

nobr {
  white-space: nowrap;
}

mark {
  background: Mark;
  color: MarkText;
}

/* titles */
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* lists */

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

ul, ol, menu {
  counter-reset: list-item;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

li {
  display: list-item;
  text-align: match-parent;
}

/* nested lists have no top/bottom margins */
:is(ul, ol, dir, menu, dl) ul,
:is(ul, ol, dir, menu, dl) ol,
:is(ul, ol, dir, menu, dl) dir,
:is(ul, ol, dir, menu, dl) menu,
:is(ul, ol, dir, menu, dl) dl {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 2 deep unordered lists use a circle */
:is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}


/* leafs */

/* <hr> noshade and color attributes are handled completely by
 * HTMLHRElement::MapAttributesIntoRule.
 * https://html.spec.whatwg.org/#the-hr-element-2
 */
hr {
  color: gray;
  border-width: 1px;
  border-style: inset;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;

  /* FIXME: This is not really per spec */
  display: block;
}

hr[size="1"] {
  border-style: solid none none none;
}

/* Note that we only intend for the alt content to show up if the image is
 * broken. But non-broken images/inputs will have a replaced box, and thus we
 * won't we don't generate the pseudo-element anyways. This prevents
 * unnecessary reframing when images become broken / non-broken. */
input[type=image]::before,
img::before {
  content: -moz-alt-content !important;
  unicode-bidi: isolate;
}

object:-moz-broken > *|* {
  /*
    Inherit in the object's alignment so that if we aren't aligned explicitly
    we'll end up in the right place vertically.  See bug 36997.  Note that this
    is not !important because we _might_ be aligned explicitly.
  */
  vertical-align: inherit;
}

img[usemap], object[usemap] {
  color: blue;
}

frameset {
  display: block ! important;
  overflow: clip;
  position: static ! important;
  float: none ! important;
  border: none ! important;
}

frame {
  border-radius: 0 ! important;
}

iframe {
  border: 2px inset;
}

spacer {
  position: static ! important;
  float: none ! important;
}

canvas {
  user-select: none;
}

iframe:focus-visible,
body:focus-visible,
html:focus-visible {
  /* These elements historically don't show outlines when focused by default.
   * We could consider changing that if needed. */
  outline-style: none;
}

/* hidden elements: https://html.spec.whatwg.org/#hidden-elements
 *
 * Exceptions:
 *
 *  * area declaration needs to be !important, see below / bug 135040.  That's
 *    hacky and broken.
 *
 *  * [hidden] is implemented as a presentation attribute to avoid a global
 *    selector in a UA sheet.
 */
base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
   display: none;
}

area {
  /* Don't give it frames other than its imageframe */
  display: none ! important;
}

iframe:fullscreen {
  /* iframes in full-screen mode don't show a border. */
  border: none !important;
  padding: unset !important;
}

/* Details and summary
 * https://html.spec.whatwg.org/#the-details-and-summary-elements
 *
 * Note that these rules need to be duplicated in details.css for the anonymous
 * summary, which wouldn't match otherwise.
 *
 * The spec here says something different, see
 * https://github.com/whatwg/html/issues/8610
 */
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

/* media elements */
video {
  object-fit: contain;
}

video > img:-moz-native-anonymous {
  /* Video poster images should render with the video element's "object-fit" &
     "object-position" properties */
  object-fit: inherit !important;
  object-position: inherit !important;
}

audio:not([controls]) {
  display: none !important;
}

audio[controls] {
  /* This ensures that intrinsic sizing can reliably shrinkwrap our
      controls (which are also always horizontal) and produce a
      reasonable intrinsic size from them. */
  writing-mode: horizontal-tb !important;
}

*|*::-moz-html-canvas-content {
  display: block !important;
  /* we want to be an absolute and fixed container */
  transform: translate(0) !important;
}

video > .caption-box {
  width: 100%;
  height: 100%;
  position: relative;
}

/**
 * The pseudo element won't inherit CSS styles from its direct parent, `::cue`
 * would actually inherit styles from video because it's video's pseudo element.
 * Therefore, we have to explicitly set some styles which are already defined
 * in its parent element in vtt.jsm.
 */
::cue {
  color: rgba(255, 255, 255, 1);
  white-space: pre-line;
  background-color: rgba(0, 0, 0, 0.8);
  font: 10px sans-serif;
  font-size: var(--cue-font-size);
  writing-mode: var(--cue-writing-mode, inherit);
  overflow-wrap: break-word;
  /* TODO : enable unicode-bidi, right now enable it would cause incorrect
            display direction, maybe related with bug 1558431. */
}

/* <dialog> element styles */

dialog {
  position: absolute;
  display: block;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
  width: -moz-fit-content;
  height: -moz-fit-content;
}

dialog:not([open]) {
  display: none;
}

dialog:modal {
  -moz-top-layer: top !important;
  position: fixed;
  overflow: auto;
  visibility: visible;
  inset-block-start: 0;
  inset-block-end: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

/* https://html.spec.whatwg.org/#flow-content-3 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

marquee {
  inline-size: -moz-available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;
}

marquee:is([direction="up"], [direction="down"]) {
  block-size: 200px;
}

/* Ruby */

ruby {
  display: ruby;
}
rb {
  display: ruby-base;
  white-space: nowrap;
}
rt {
  display: ruby-text;
}
rtc {
  display: ruby-text-container;
}
rtc, rt {
  white-space: nowrap;
  font-size: 50%;
  -moz-min-font-size-ratio: 50%;
  line-height: 1;
}
@media not (-moz-platform: windows) {
  rtc, rt {
    /* The widely-used Windows font Meiryo doesn't work fine with this
    * setting, so disable this on Windows. We should re-enable it once
    * Microsoft fixes this issue. See bug 1164279. */
    font-variant-east-asian: ruby;
  }
}
rtc, rt {
  text-emphasis: none;
}
rtc:lang(zh), rt:lang(zh) {
  ruby-align: center;
}
rtc:lang(zh-TW), rt:lang(zh-TW) {
  font-size: 30%; /* bopomofo */
  -moz-min-font-size-ratio: 30%;
}
rtc > rt {
  font-size: unset;
}
ruby, rb, rt, rtc {
  unicode-bidi: isolate;
}

/* Shadow DOM v1
 * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
slot {
  display: contents;
}

/* Un-invert images and videos for users using inverted colors.
 * "User agents must add the following rule to their UA style sheet"
 * https://www.w3.org/TR/mediaqueries-5/#inverted
 */
@media (inverted-colors) {
  img:not(picture > img), picture, video {
    filter: invert(100%);
  }
}

/* Hide noscript elements if scripting is enabled */
@media (scripting) {
  noscript {
    display: none !important;
  }
}

/* Popover UA style, https://html.spec.whatwg.org/#flow-content-3 */
@media (-moz-popover-enabled) {
  [popover]:not(:popover-open):not(dialog[open]) {
    display:none;
  }

  dialog:popover-open {
    display:block;
  }

  [popover] {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 0.25em;
    overflow: auto;
    color: CanvasText;
    background-color: Canvas;
  }

  :popover-open {
    -moz-top-layer: top;
  }

  :popover-open::backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none !important;
    background-color: transparent;
  }
}