components/layout/stylesheets/servo.css - main - githubmirror/servo

components/layout/stylesheets/servo.css
566 строк12 KB
Tim van der Lippe
layout: Update Stylo to respect color-scheme CSS properties (#47042)
09 авг 2026, 22:48
09 авг 2026, 22:48dfc8ffe
html {
  color: CanvasText;
}

input[type="hidden"] {
  display: none !important;
}

/* Textual inputs */
input:not([type="file"]),
textarea {
  background-color: Field;
  border: solid grey 1px;
  color: FieldText;
}

input[type="radio"] {
  border: none;
}

textarea {
    padding: 2px;
}

input {
    padding: 1px 2px;
}

/* Matches https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#120-132 */
button,
input,
select,
textarea {
  font-family: sans-serif;
  font-size: 0.8333em;
  appearance: auto;
  letter-spacing: initial;
  line-height: initial;
  text-align: initial;
  text-indent: initial;
  text-shadow: initial;
  text-transform: initial;
  word-spacing: initial;
}

input:disabled,
textarea:disabled {
  cursor: unset;
  color: grey;
  border-color: lightgrey;
}

input[type="radio"]:disabled {
  border: none;
}

/* FIXME(#36982): Use `display: block; align-content: center` instead of flex. */
input::-servo-text-control-inner-container {
  display: flex;
  height: stretch;
  pointer-events: none;
  position: relative;
}

input::-servo-text-control-inner-editor,
input::placeholder {
  /* This limits the block size of the inner div to that of the text size so that
     it can be centered in the container. This is only necessary for <input>. */
  block-size: fit-content !important;
  inset-block: 0 !important;
  margin-block: auto !important;
  white-space: pre;
}

input::-servo-text-control-inner-editor,
input::placeholder,
textarea::-servo-text-control-inner-editor,
textarea::placeholder {
  min-width: stretch;
  overflow-wrap: normal;
}

input:not(:placeholder-shown)::placeholder,
textarea:not(:placeholder-shown)::placeholder {
  display: none !important;
}

input:placeholder-shown::-servo-text-control-inner-editor,
textarea:placeholder-shown::-servo-text-control-inner-editor {
  display: none !important;
}

input::placeholder,
textarea::placeholder {
  color: grey;
}

input::-servo-text-control-inner-editor {
  pointer-events: auto !important;
}

input::placeholder {
  pointer-events: none !important;
}

input::selection,
textarea::selection {
  background: rgba(176, 214, 255, 1.0);
  color: black;
}

/* Button type inputs */
button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="color"],
input[type="file"]::file-selector-button {
  cursor: default;
  background: ButtonFace;
  border-radius: 2px;
  border: 1px solid ButtonBorder;
  padding: 4px;
  color: ButtonText;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"] {
  color: FieldText;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::file-selector-button {
  text-align: center;
}

button:hover,
select:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="color"]:hover,
input[type="file"]:hover::file-selector-button {
  background: lightgrey;
}

button:active,
select:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="color"]:active,
input[type="file"]:active::file-selector-button {
  border-color: grey;
  background: gainsboro;
}

button:focus,
select:focus,
input[type="button"]:focus,
input[type="color"]:focus,
input[type="range"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="file"]:focus::file-selector-button,
input[type="radio"]:focus {
  outline: none;
}

button:disabled,
select:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="color"]:disabled,
input[type="file"]:disabled::file-selector-button {
  background: rgb(240, 240, 240);
  border-color: lightgrey;
  color: grey;
}

input[type="file"]::file-selector-button {
  display: inline-block;
  margin-inline-end: 0.25em;
}

input[type="file"] {
  cursor: default;
  display: inline-block;
  padding-inline-end: 0.5em;
}

input[type="color"] {
  width: 64px;
  height: 32px;
}

input::color-swatch {
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 2px;
  display: inline-block;
  height: 100%;
  width: 100%;
}

/* Range inputs */
input[type="range"] {
  margin-inline: 8px;
  width: 100px;
  min-height: 16px;
  padding: 0px;
  position: relative;
  background: initial;
  border: initial;
}

input[type="range"]::slider-track,
input[type="range"]::slider-fill,
input[type="range"]::slider-thumb {
  /* All slider elements are centered vertically and use the default cursor. */
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  cursor: default;
}

input[type="range"]::slider-track,
input[type="range"]::slider-fill {
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
}

input[type="range"]::slider-track {
  width: 100%;
  height: 4px;
  background-color: ButtonFace;
  border-color: ButtonBorder;
}

input[type="range"]:hover::slider-track {
  background: lightgrey;
}

input[type="range"]:active::slider-track {
  border-color: grey;
  background: gainsboro;
}

input[type="range"]::slider-fill {
  height: 4px;
  background-color: #007aff;
  border-color: #007aff;
}

input[type="range"]::slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007aff;

  /* Vertically centered, adjust inline direction by width so thumb
     is centered on range value. */
  transform: translate(-8px, -50%);
}

input[type="range"]:disabled::slider-fill,
input[type="range"]:disabled::slider-thumb {
  background-color: rgba(180, 180, 180);
  border-color: rgba(180, 180, 180);
}

/* Checkbox and radio button inputs */
input[type="checkbox"],
input[type="radio"] {
  margin-inline: 4px 2px;

  /* Offset the outline a bit so that it doesn't just make the rounded border thicker. */
  outline-offset: 0.4px;

  /* Allow for centering the bullet or check. */
  position: relative;
}

input[type="checkbox"] {
  border: 1px solid grey;
}

input[type="checkbox"]:disabled {
  border-color: lightgrey;
}

input[type="checkbox"] {
  display: inline-block;
  position: relative;

  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  min-width: 14px;
  min-height: 14px;

  border-radius: 2px;

  /* This prevents the baseline from escaping and changing the baseline of the containing line. */
  overflow: hidden;
}

input[type="checkbox"]::before {
  content: "";
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:disabled::before {
  color: grey;
}

input[type="checkbox"]:checked::before {
  content: "✔";
}

input[type="checkbox"]:indeterminate::before {
  content: "—";
}

input[type="radio"] {
  display: inline-block;

  /* TODO: According to https://wpt.fyi/results/css/css-grid/stretch-grid-item-radio-input.html,
     radio buttons should be able to grow / shrink depending of the width/height of the input
     element. These values should probably be changed once `aspect-ratio` has been supported
     for non-replaced elements.
  */
  min-height: 14px;
  min-width: 14px;
  height: 14px;
  width: 14px;
}

/* This creates the ring of the radio input. TODO: It might be better to add a UA shadow tree instead of using pseudo elements. */
input[type="radio"]::before {
  content: "";
  background: transparent;

  /* TODO: The ring should be able to grow & shrink according to min(width, height).
    However, this is currently not possible to be implemented as `aspect-ratio` hasn't
    been supported for non-replaced elements.
  */
  width: 10px;
  height: 10px;

  /* Center the bullet in the containing block. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid grey;
  border-radius: 50%;
}

/* This creates the bullet of the radio input. TODO: It might be better to add a UA shadow tree instead of using pseudo elements.*/
input[type="radio"]::after {
  content: "";
  background: transparent;

  /* TODO:  The bullet should be able to grow & shrink according to min(width, height).
  However, this is currently not possible to be implemented as `aspect-ratio` hasn't been supported for non-replaced elements. */
  width: 8px;
  height: 8px;

  /* Center the bullet in the containing block. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

input[type="radio"]:checked::after {
  background: black;
}

input[type="radio"]:checked:disabled::after {
  background: grey;
}

td[align="left"]    { text-align: left; }
td[align="center"]  { text-align: center; }
td[align="right"]   { text-align: right; }

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

label { cursor: default; }

canvas, embed, iframe, img, video {
  overflow: clip !important;
  overflow-clip-margin: 0 !important;
}

input:not([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=file i], [type=range i]) {
  cursor: text;
  overflow: hidden !important;
  white-space: pre;
}

input:is([type=submit i], [type=reset i], [type=button i], [type=checkbox i], [type=radio i], [type=color i]) {
  cursor: default;
}

textarea {
  cursor: text;
  overflow: auto;
}

/* https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements */
details {
  display: block;
}

details::details-content {
  /* TODO: This should be "display: block; content-visibility: hidden;",
  but servo does not support content-visibility yet */
  display: none;
}

details[open]::details-content {
  display: block;
}

/*
 * Until servo supports svg properly, make sure to at least prevent svg
 * children from being layed out and rendered like usual html.
 * https://github.com/servo/servo/issues/10646
 */
svg > * {
  display: none;
}

*|*::-servo-anonymous-box {
  unicode-bidi: inherit;
  direction: inherit;
  writing-mode: inherit;
}

*|*::-servo-anonymous-table {
    display: table;
}

*|*::-servo-anonymous-table-row {
    display: table-row;
}

*|*::-servo-anonymous-table-cell {
    display: table-cell;
}

*|*::-servo-table-grid {
  all: inherit;
  margin: unset;
  float: unset;
  clear: unset;
  position: unset;
  z-index: unset;
  page-break-before: unset;
  page-break-after: unset;
  page-break-inside: unset;
  vertical-align: unset;
  line-height: unset;
  transform: unset;
  transform-origin: unset;
  backface-visibility: unset;
  clip: unset;
  transform-style: unset;
  rotate: unset;
  scale: unset;
  translate: unset;
  align-self: unset;
  justify-self: unset;
  grid-column-start: unset;
  grid-column-end: unset;
  grid-row-start: unset;
  grid-row-end: unset;
  order: unset;
  outline: unset;
  outline-offset: unset;
  column-span: unset;
  contain: unset;
  container: unset;
  scroll-margin: unset;

  /* The grid needs to be block-level, so avoid inheriting `display: inline-table`. */
  display: table;
}

meter {
  display: inline-block;
  width: 100px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
  overflow: clip;
}

/* FIXME: These should use the ::-moz-meter-bar pseudo element */
meter div {
  height: 100%;
}

meter:-moz-meter-optimum div {
  background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
meter:-moz-meter-sub-optimum div {
  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
meter:-moz-meter-sub-sub-optimum div {
  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

/* https://html.spec.whatwg.org/#the-details-and-summary-elements */
details, summary {
  display: block;
}
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;
}

/* Styles for the <progress> element */
progress {
  display: inline-block;
  width: 200px;
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
/* FIXME: This should use ::-moz-progress-bar */
progress #-servo-progress-bar {
  display: block;
  height: 100%;
  background-color: #7a3;
}

slot {
  display: contents;
}

*::selection {
  background: rgba(176, 214, 255, 1.0);
}