mirror of
https://github.com/servo/servo
synced 2026-05-10 17:12:23 +02:00
aad7424150
Update details to support `::details-content` pseudo element. This is currently not element-backed but will support the basic styling. This replaces the existing `::-servo-details-content` styling. Testing: WPTs and manually using https://demo.lukewarlow.dev/css-forms.html <img width="159" height="66" alt="image" src="https://github.com/user-attachments/assets/8e72e7f3-2b49-43c6-9a4e-dbea0586739e" /> Stylo PR: https://github.com/servo/stylo/pull/292 Signed-off-by: Luke Warlow <lwarlow@igalia.com>
439 lines
8.8 KiB
CSS
439 lines
8.8 KiB
CSS
input[type="hidden"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Textual inputs */
|
|
input,
|
|
textarea {
|
|
background: white;
|
|
border: solid grey 1px;
|
|
color: black;
|
|
}
|
|
|
|
/* 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::-servo-text-control-inner-editor {
|
|
overflow-wrap: normal;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 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:not(:placeholder-shown)::placeholder {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
input::-servo-text-control-inner-editor, input::placeholder {
|
|
block-size: fit-content !important;
|
|
inset-block: 0 !important;
|
|
margin-block: auto !important;
|
|
min-width: stretch;
|
|
white-space: pre;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: grey;
|
|
overflow: hidden;
|
|
pointer-events: none !important;
|
|
position: absolute !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"]::before {
|
|
cursor: default;
|
|
background: gainsboro;
|
|
border-radius: 2px;
|
|
border: 1px solid darkgrey;
|
|
padding: 4px;
|
|
color: black;
|
|
}
|
|
|
|
button,
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
input[type="file"]::before {
|
|
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::before {
|
|
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::before {
|
|
border-color: grey;
|
|
background: gainsboro;
|
|
}
|
|
|
|
button:focus,
|
|
select:focus,
|
|
input[type="button"]:focus,
|
|
input[type="submit"]:focus,
|
|
input[type="reset"]:focus,
|
|
input[type="color"]:focus,
|
|
input[type="file"]:focus::before {
|
|
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::before {
|
|
background: rgb(240, 240, 240);
|
|
border-color: lightgrey;
|
|
color: grey;
|
|
}
|
|
|
|
input[type="file"]::before {
|
|
content: "Choose File";
|
|
display: inline-block;
|
|
margin-inline-end: 0.25em;
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: inline-block;
|
|
border: none;
|
|
background: transparent;
|
|
color: initial;
|
|
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%;
|
|
}
|
|
|
|
/* Checkbox and radio button inputs */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
border: 1px solid grey;
|
|
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"]:disabled,
|
|
input[type="radio"]: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;
|
|
border-radius: 50%;
|
|
|
|
/* Radio buttons do not grow or shrink with their surrounding font size. */
|
|
min-height: 14px;
|
|
min-width: 14px;
|
|
max-height: 14px;
|
|
max-width: 14px;
|
|
height: 14px;
|
|
width: 14px;
|
|
|
|
/* Offset the outline a bit so that it doesn't just make the rounded border thicker. */
|
|
outline-offset: 0.4px;
|
|
}
|
|
|
|
input[type="radio"]::before {
|
|
content: "";
|
|
background: transparent;
|
|
|
|
/* Bullets have a fixed size regardless of the text surrounding them. */
|
|
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::before {
|
|
background: black;
|
|
}
|
|
|
|
input[type="radio"]:checked:disabled::before {
|
|
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]) {
|
|
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::-servo-details-summary {
|
|
margin-left: 40px;
|
|
display: list-item;
|
|
list-style: disclosure-closed;
|
|
}
|
|
|
|
details[open]::-servo-details-summary {
|
|
list-style: disclosure-open;
|
|
}
|
|
|
|
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;
|
|
}
|