Skip to content

Instantly share code, notes, and snippets.

@ambidexterich

ambidexterich/html.css

Last active April 19, 2025 16:41
Show Gist options
  • Save ambidexterich/34828a904dd97dd2a345 to your computer and use it in GitHub Desktop.
Save ambidexterich/34828a904dd97dd2a345 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ambidexterich revised this gist Apr 19, 2025. 1 changed file with 558 additions and 177 deletions.
    735 changes: 558 additions & 177 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -108,7 +108,6 @@ center {
    hr {
    display: block;
    overflow: hidden;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    @@ -156,11 +155,6 @@ video, canvas, img {
    overflow-clip-margin: content-box;
    }

    img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: size !important;
    contain-intrinsic-size: 300px 150px;
    }

    iframe, embed, object, fencedframe {
    overflow: clip !important;
    overflow-clip-margin: content-box !important;
    @@ -334,8 +328,10 @@ ul, menu, dir {
    list-style-type: disc;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    @supports not blink-feature(CorrectStylesForLists) {
    margin-inline-start: 0;
    margin-inline-end: 0;
    }
    padding-inline-start: 40px
    }

    @@ -344,22 +340,60 @@ ol {
    list-style-type: decimal;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    @supports not blink-feature(CorrectStylesForLists) {
    margin-inline-start: 0;
    margin-inline-end: 0;
    }
    padding-inline-start: 40px
    }

    li {
    display: list-item;
    /* TODO(crbug.com/40774317, crbug.com/40787216): We should use
    text-align: match-parent once it is supported. */
    text-align: -webkit-match-parent;
    }

    ul ul, ol ul {
    list-style-type: circle
    @supports not blink-feature(CorrectStylesForLists) {
    ul ul, ol ul {
    list-style-type: circle
    }

    ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
    }

    ol ul, ul ol, ul ul, ol ol {
    margin-block-start: 0;
    margin-block-end: 0
    }
    }

    ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
    @supports blink-feature(CorrectStylesForLists) {
    :is(dir, dl, menu, ol, ul) dir,
    :is(dir, dl, menu, ol, ul) dl,
    :is(dir, dl, menu, ol, ul) menu,
    :is(dir, dl, menu, ol, ul) ol,
    :is(dir, dl, menu, ol, ul) ul {
    margin-block-start: 0;
    margin-block-end: 0;
    }

    :is(dir, menu, ol, ul) dir,
    :is(dir, menu, ol, ul) menu,
    :is(dir, menu, ol, ul) ul {
    list-style-type: circle
    }

    :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) dir,
    :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) menu,
    :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) ul {
    list-style-type: square
    }

    /* TODO(crbug.com/40774317, crbug.com/354025385): We should add rule
    ol, ul, menu { counter-reset: list-item; }
    once it is supported. */
    }

    dd {
    @@ -371,19 +405,16 @@ dl {
    display: block;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    @supports not blink-feature(CorrectStylesForLists) {
    margin-inline-start: 0;
    margin-inline-end: 0;
    }
    }

    dt {
    display: block
    }

    ol ul, ul ol, ul ul, ol ol {
    margin-block-start: 0;
    margin-block-end: 0
    }

    /* form elements */

    form {
    @@ -399,27 +430,35 @@ label {
    cursor: default;
    }

    legend {
    fieldset {
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border: none
    margin-inline: 2px;
    border: groove 2px ThreeDFace;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;
    min-inline-size: min-content;
    }

    fieldset {
    legend {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    border: 2px groove #C0C0C0;
    min-inline-size: min-content;
    padding-inline: 2px;
    }

    legend[align=left i] {
    justify-self: left;
    }

    legend[align=center i] {
    justify-self: center;
    }

    legend[align=right i] {
    justify-self: right;
    }

    button {
    appearance: auto;
    -internal-align-content-block: center;
    }

    input, textarea, select, button {
    @@ -439,7 +478,7 @@ input, textarea, select, button {

    textarea {
    appearance: auto;
    border: 1px solid -internal-light-dark(#767676, #858585);
    border: 1px solid light-dark(#767676, #858585);
    column-count: initial !important;
    -webkit-rtl-ordering: logical;
    resize: -internal-textarea-auto;
    @@ -454,7 +493,7 @@ textarea {
    input {
    appearance: auto;
    padding:1px 0;
    border: 2px inset -internal-light-dark(#767676, #858585);
    border: 2px inset light-dark(#767676, #858585);
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: Field;
    @@ -500,7 +539,7 @@ input[type="search" i]::-webkit-search-cancel-button {
    flex: none;
    -webkit-user-modify: read-only !important;
    margin-inline-start: 1px;
    margin-right: 3px;
    margin-inline-end: 3px;
    opacity: 0;
    pointer-events: none;
    user-select: none !important;
    @@ -601,12 +640,6 @@ input[type="password" i]::-internal-input-suggested.reveal-password {
    -webkit-text-security: none;
    }

    input[type="password" i]::-internal-input-suggested.fade-out-password {
    width: fit-content;
    -webkit-mask: linear-gradient(to right, #000 50%, #0000);
    mask: linear-gradient(to right, #000 50%, #0000);
    }

    input[type="password" i]::-internal-reveal {
    width: 1.3em;
    height: 1.3em;
    @@ -630,12 +663,6 @@ input[type="password" i]::-internal-reveal:focus {
    cursor: pointer;
    }

    input[type="password" i]::-internal-strong {
    color: -internal-light-dark(#0B57D0, #A8C7FA);
    font-family: roboto;
    -webkit-text-security: none;
    }

    input[type="hidden" i], input[type="image" i], input[type="file" i] {
    appearance: none;
    padding: initial;
    @@ -647,7 +674,6 @@ input[type="hidden" i], input[type="image" i], input[type="file" i] {
    input[type="file" i] {
    align-items: baseline;
    color: inherit;
    overflow: hidden !important;
    text-align: start !important;
    text-overflow: ellipsis;
    white-space: pre;
    @@ -657,20 +683,6 @@ input[type="image" i] {
    cursor: pointer;
    }

    /* TODO(crbug.com/880258): Use different styles for
    `-internal-autofill-previewed` and `-internal-autofill-selected`. */
    input:-internal-autofill-previewed,
    input:-internal-autofill-selected,
    textarea:-internal-autofill-previewed,
    textarea:-internal-autofill-selected,
    select:-internal-autofill-previewed,
    select:-internal-autofill-selected {
    appearance: menulist-button;
    background-image:none !important;
    background-color: -internal-light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
    color: FieldText !important;
    }

    input[type="radio" i],
    input[type="checkbox" i] {
    margin:3px 3px 3px 4px;
    @@ -705,7 +717,6 @@ input[type="submit" i],
    input[type="reset" i],
    input[type="file" i]::-webkit-file-upload-button,
    button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    padding-block: 1px;
    @@ -731,7 +742,7 @@ input[type="range" i] {
    border: initial;
    margin: 2px;
    cursor: default;
    color: -internal-light-dark(#101010, #ffffff);
    color: light-dark(#101010, #ffffff);
    }

    input[type="range" i]::-webkit-slider-container,
    @@ -780,16 +791,9 @@ input[type="reset" i]:disabled,
    input[type="color" i]:disabled,
    input[type="file" i]:disabled::-webkit-file-upload-button,
    button:disabled {
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
    color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    }

    select:disabled,
    optgroup:disabled,
    option:disabled,
    select[disabled]>option {
    color: -internal-light-dark(GrayText, #aaa);
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    }

    input[type="button" i]:active, input[type="submit" i]:active, input[type="reset" i]:active, input[type="file" i]:active::-webkit-file-upload-button, button:active {
    @@ -802,21 +806,20 @@ input[type="button" i]:active:disabled, input[type="submit" i]:active:disabled,

    input:disabled, textarea:disabled {
    cursor: default;
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: -internal-light-dark(#545454, #aaaaaa);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
    border-color: rgba(118, 118, 118, 0.3);
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(#545454, #aaaaaa);
    }

    option:-internal-spatial-navigation-focus {
    outline: -internal-light-dark(black, white) dashed 1px;
    outline: light-dark(black, white) dashed 1px;
    outline-offset: -1px;
    }

    input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
    overflow: clip !important;
    overflow-clip-margin: 0px !important;
    }

    /* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements */
    /* TODO(crbug.com/1231263): <area> should be display:none. */
    area {
    @@ -950,7 +953,7 @@ select {
    -webkit-rtl-ordering: logical;
    color: FieldText;
    background-color: Field;
    border: 1px solid -internal-light-dark(#767676, #858585);
    border: 1px solid light-dark(#767676, #858585);
    cursor: default;
    border-radius: 0;
    }
    @@ -966,8 +969,12 @@ select:disabled {
    select:-internal-list-box {
    appearance: auto;
    align-items: flex-start;
    -internal-overflow-inline: hidden;
    -internal-overflow-block: scroll;
    @supports not blink-feature(CSSLogicalOverflow) {
    -internal-overflow-inline: hidden;
    -internal-overflow-block: scroll;
    }
    overflow-inline: hidden;
    overflow-block: scroll;
    vertical-align: text-bottom;
    white-space: nowrap;
    border-radius: 2px;
    @@ -989,32 +996,40 @@ select:-internal-list-box optgroup {
    line-height: initial !important;
    }

    /* option selected, list-box focused */
    /* TODO(crbug.com/1244986): We should be able to remove !important here, but
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked,
    select:-internal-list-box:focus option:checked:disabled,
    select:-internal-list-box:focus option:checked:hover {
    background-color: SelectedItem !important;
    color: SelectedItemText !important;
    background-color: SelectedItem;
    color: SelectedItemText;
    }

    /* TODO(crbug.com/1244986): We should be able to remove !important here, but
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked:disabled {
    background-color: -internal-inactive-list-box-selection !important;
    background-color: -internal-inactive-list-box-selection;
    }

    @supports not blink-feature(SelectColorsRemoveImportant) {
    select:-internal-list-box:focus option:checked,
    select:-internal-list-box:focus option:checked:hover {
    background-color: SelectedItem !important;
    color: SelectedItemText !important;
    }

    select:-internal-list-box:focus option:checked:disabled {
    background-color: -internal-inactive-list-box-selection !important;
    }
    }

    /* option selected, list-box not focused */
    select:-internal-list-box option:checked,
    select:-internal-list-box option:checked:hover {
    background-color: -internal-light-dark(#cecece, #545454);
    color: -internal-light-dark(#101010, #FFFFFF);
    background-color: light-dark(#cecece, #545454);
    color: light-dark(#101010, #FFFFFF);
    }

    select:-internal-list-box:disabled option:checked,
    select:-internal-list-box option:checked:disabled,
    select:-internal-list-box option:checked:disabled:hover {
    color: -internal-light-dark(gray, #aaa);
    color: light-dark(gray, #aaa);
    }

    select:-internal-list-box hr {
    @@ -1037,12 +1052,49 @@ optgroup {
    display: block;
    }

    optgroup::-internal-optgroup-label {
    padding: 0 2px 1px 2px;
    min-height: 1.2em;
    }

    option {
    font-weight: normal;
    display: block;
    padding: 0 2px 1px 2px;
    padding-inline: 2px;
    padding-block-start: 0;
    padding-block-end: 1px;
    white-space: nowrap;
    min-height: 1.2em;
    min-block-size: 1.2em;
    }

    /* The following select style rules have to go after the other
    select styles in order to have higher precedence. */

    /* TODO(crbug.com/880258): Use different styles for
    `-internal-autofill-previewed` and `-internal-autofill-selected`. */
    input:-internal-autofill-previewed,
    input:-internal-autofill-selected,
    textarea:-internal-autofill-previewed,
    textarea:-internal-autofill-selected,
    select:-internal-autofill-previewed,
    select:-internal-autofill-selected {
    appearance: menulist-button;
    background-image:none !important;
    background-color: light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
    color: FieldText !important;
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
    border-color: rgba(118, 118, 118, 0.3);
    }

    select:disabled,
    optgroup:disabled,
    option:disabled,
    select[disabled]>option {
    color: light-dark(GrayText, #aaa);
    }

    output {
    @@ -1052,68 +1104,76 @@ output {
    /* meter */

    meter {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 5em;
    vertical-align: -0.2em;
    -webkit-user-modify: read-only !important;
    -webkit-user-modify: read-only !important;
    appearance: auto;
    block-size: 1em;
    box-sizing: border-box;
    display: inline-block;
    inline-size: 5em;
    vertical-align: -0.2em;
    }

    meter::-webkit-meter-inner-element {
    appearance: inherit;
    box-sizing: inherit;
    display: none;
    -webkit-user-modify: read-only !important;
    block-size: 100%;
    inline-size: 100%;
    -webkit-user-modify: read-only !important;
    appearance: inherit;
    block-size: 100%;
    box-sizing: inherit;
    display: grid;
    grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
    inline-size: 100%;
    position: relative;
    }

    meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
    display: grid;
    grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
    position: relative;
    meter::-webkit-meter-bar {
    -webkit-user-modify: read-only !important;
    align-self: unsafe center;
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    block-size: 100%;
    box-sizing: border-box;
    grid-row-end: line2;
    grid-row-start: line1;
    inline-size: 100%;
    overflow: hidden;
    position: absolute;
    }

    meter::-internal-fallback:-internal-shadow-host-has-appearance {
    display: none;
    meter::-webkit-meter-bar:-internal-shadow-host-has-non-auto-appearance {
    background: light-dark(#efefef, #3B3B3B);
    border-radius: 20px;
    border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585);
    }

    meter::-webkit-meter-bar {
    block-size: 100%;
    inline-size: 100%;
    -webkit-user-modify: read-only !important;
    background: -internal-light-dark(#efefef, #3B3B3B);
    border: thin solid -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
    grid-row-start: line1;
    grid-row-end: line2;
    border-radius: 20px;
    box-sizing: border-box;
    align-self: unsafe center;
    position: absolute;
    overflow: hidden;
    meter::-webkit-meter-optimum-value {
    -webkit-user-modify: read-only !important;
    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    block-size: 100%;
    box-sizing: border-box;
    }

    meter::-webkit-meter-optimum-value {
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#107c10, #74b374)
    meter::-webkit-meter-optimum-value:-internal-shadow-host-has-non-auto-appearance {
    background: light-dark(#107c10, #74b374);
    }

    meter::-webkit-meter-suboptimum-value {
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#ffb900, #f2c812)
    -webkit-user-modify: read-only !important;
    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
    block-size: 100%;
    box-sizing: border-box;
    }

    meter::-webkit-meter-suboptimum-value:-internal-shadow-host-has-non-auto-appearance {
    background: light-dark(#ffb900, #f2c812);
    }

    meter::-webkit-meter-even-less-good-value {
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#d83b01, #e98f6d)
    -webkit-user-modify: read-only !important;
    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
    block-size: 100%;
    box-sizing: border-box;
    }

    meter::-webkit-meter-even-less-good-value:-internal-shadow-host-has-non-auto-appearance {
    background: light-dark(#d83b01, #e98f6d);
    }

    /* progress */
    @@ -1161,7 +1221,12 @@ abbr[title], acronym[title] {
    }

    strong, b {
    font-weight: bold
    @supports blink-feature(StrongBolder) {
    font-weight: bolder;
    }
    @supports not blink-feature(StrongBolder) {
    font-weight: bold;
    }
    }

    i, cite, em, var, address, dfn {
    @@ -1176,7 +1241,13 @@ pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
    @supports not blink-feature(PreLogicalMargin) {
    margin: 1__qem 0;
    }
    @supports blink-feature(PreLogicalMargin) {
    margin-block: 1__qem;
    margin-inline: 0;
    }
    }

    mark {
    @@ -1220,6 +1291,14 @@ nobr {
    outline: auto 1px -webkit-focus-ring-color
    }

    [interesttarget]:focus-visible {
    outline: solid 3px -webkit-focus-ring-color;
    }

    button[interesttarget] {
    user-select: none;
    }

    html:focus-visible, body:focus-visible {
    outline: none
    }
    @@ -1252,7 +1331,7 @@ input[type="date" i]::-webkit-calendar-picker-indicator,
    input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
    input[type="month" i]::-webkit-calendar-picker-indicator,
    input[type="week" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(url(images/calendar_icon.svg), url(images/calendar_icon_white.svg));
    background-image: light-dark(url(images/calendar_icon.svg), url(images/calendar_icon_white.svg));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    @@ -1272,7 +1351,7 @@ input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible {
    }

    input[type="time" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(url(images/time_icon.svg), url(images/time_icon_white.svg));
    background-image: light-dark(url(images/time_icon.svg), url(images/time_icon_white.svg));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    @@ -1304,8 +1383,8 @@ input::-webkit-datetime-edit-month-field:focus,
    input::-webkit-datetime-edit-second-field:focus,
    input::-webkit-datetime-edit-week-field:focus,
    input::-webkit-datetime-edit-year-field:focus {
    background-color: -internal-light-dark(highlight, #99C8FF);
    color: -internal-light-dark(highlighttext, #000000);
    background-color: light-dark(highlight, #99C8FF);
    color: light-dark(highlighttext, #000000);
    outline: none;
    }

    @@ -1318,7 +1397,7 @@ input::-webkit-datetime-edit-hour-field[disabled],
    input::-webkit-datetime-edit-millisecond-field[disabled],
    input::-webkit-datetime-edit-minute-field[disabled],
    input::-webkit-datetime-edit-second-field[disabled] {
    color: -internal-light-dark(GrayText, rgb(165, 165, 165));
    color: light-dark(GrayText, rgb(165, 165, 165));
    }

    a:-webkit-any-link {
    @@ -1345,13 +1424,17 @@ ruby, rt {
    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
    }

    ruby {
    display: ruby;
    }

    rt {
    line-height: normal;
    text-emphasis: none;
    }

    ruby > rt {
    display: block;
    display: ruby-text;
    font-size: 50%;
    text-align: start;
    }
    @@ -1403,15 +1486,21 @@ details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
    }

    bdi, output {
    /* https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering */
    /* This chunk of styles interacts with the `name == html_names::kDirAttr` case
    in HTMLElement::CollectStyleForPresentationAttribute(). Make sure any changes
    here are congruent with changes made there. */
    address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
    legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
    h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
    thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi,
    output, [dir=ltr i], [dir=rtl i], [dir=auto i] {
    unicode-bidi: isolate;
    }

    bdo {
    unicode-bidi: bidi-override;
    bdo, bdo[dir] {
    unicode-bidi: isolate-override;
    }

    textarea[dir=auto i] {
    textarea[dir=auto i], pre[dir=auto i] {
    unicode-bidi: plaintext;
    }

    @@ -1489,10 +1578,12 @@ dialog:popover-open {
    display:block;
    }

    /* Popovers using anchor positioning get their inset properties reset, to make
    * it easier to position them. */
    [popover][anchor] {
    inset:auto;
    @supports blink-feature(HTMLAnchorAttribute) {
    /* Popovers using anchor positioning get their inset properties reset, to make
    * it easier to position them. */
    [popover][anchor] {
    inset:auto;
    }
    }

    /* This rule matches popovers (dialog or not) that are currently open as a
    @@ -1510,20 +1601,81 @@ dialog:popover-open {
    background-color: transparent;
    }

    /* page */
    /* Pagination */

    @page {
    /* FIXME: Define the right default values for page properties. */
    size: auto;
    margin: auto;
    padding: 0px;
    border-width: 0px;
    }

    /* Allows thead sections to print at the top of each page. */
    @media print {
    thead { break-inside:avoid; }
    tfoot { break-inside:avoid; }
    @page {
    /* https://drafts.csswg.org/css-page-3/#margin-text-alignment */
    @top-left-corner {
    text-align: right;
    vertical-align: middle;
    }
    @top-left {
    text-align: left;
    vertical-align: middle;
    }
    @top-center {
    text-align: center;
    vertical-align: middle;
    }
    @top-right {
    text-align: right;
    vertical-align: middle;
    }
    @top-right-corner {
    text-align: left;
    vertical-align: middle;
    }
    @right-top {
    text-align: center;
    vertical-align: top;
    }
    @right-middle {
    text-align: center;
    vertical-align: middle;
    }
    @right-bottom {
    text-align: center;
    vertical-align: bottom;
    }
    @bottom-right-corner {
    text-align: left;
    vertical-align: middle;
    }
    @bottom-right {
    text-align: right;
    vertical-align: middle;
    }
    @bottom-center {
    text-align: center;
    vertical-align: middle;
    }
    @bottom-left {
    text-align: left;
    vertical-align: middle;
    }
    @bottom-left-corner {
    text-align: right;
    vertical-align: middle;
    }
    @left-bottom {
    text-align: center;
    vertical-align: bottom;
    }
    @left-middle {
    text-align: center;
    vertical-align: middle;
    }
    @left-top {
    text-align: center;
    vertical-align: top;
    }
    }

    /* Allows table headers and footers to print at the top / bottom of each
    page. */
    thead { break-inside: avoid; }
    tfoot { break-inside: avoid; }
    }

    /* spelling/grammar error pseudos */
    @@ -1536,4 +1688,233 @@ html::grammar-error {
    text-decoration: -internal-grammar-error-color grammar-error;
    }

    /* noscript is handled internally, as it depends on settings. */
    img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: size !important;
    contain-intrinsic-size: 300px 150px;
    }

    /* https://drafts.csswg.org/css-ui-4/#inertness */
    /* Reducing specificity with :where since [inert] needs to override. Also
    explicitly use 'dialog' to avoid adding universal bucket rule. Separate rule
    added for :fullscreen in fullscreen.css. */
    dialog:where(:modal) {
    interactivity: auto;
    }
    [inert] {
    interactivity: inert;
    }

    /* noscript is handled internally, as it depends on settings. */

    /*
    * The default style sheet used to render <select> when the CustomizableSelect
    * feature is enabled.
    */

    @supports blink-feature(CustomizableSelect) {
    select:not(:-internal-list-box):not([multiple]) {
    font: -internal-auto-base(-webkit-small-control, inherit);
    text-shadow: -internal-auto-base(none, inherit);
    text-transform: -internal-auto-base(none, initial);
    text-rendering: -internal-auto-base(auto, inherit);
    letter-spacing: -internal-auto-base(normal, inherit);
    word-spacing: -internal-auto-base(normal, inherit);
    text-align: -internal-auto-base(start, initial);
    text-indent: -internal-auto-base(0px, initial);
    -webkit-rtl-ordering: -internal-auto-base(logical, inherit);
    cursor: -internal-auto-base(default, inherit);
    white-space: -internal-auto-base(pre, inherit);
    /* This text-autospace rule won't work because it is set with !important
    * earlier in the UA stylesheet. After merging with the rest of the UA
    * style rules when removing the CustomizableSelect flag, it should start
    * to work. */
    text-autospace: -internal-auto-base(no-autospace !important, inherit);
    color: -internal-auto-base(FieldText, inherit);
    background-color: -internal-auto-base(Field, transparent);
    border: 1px solid -internal-auto-base(light-dark(#767676, #858585), currentColor);
    padding-block: -internal-auto-base(0, 0.25em);
    padding-inline: -internal-auto-base(0, 0.5em);

    /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
    * https://github.com/openui/open-ui/issues/1026
    * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    /* TODO(crbug.com/1511354): This might be able to be combined with the
    * default select option rules at some point. This should be re-evaluated
    * before StylableSelect is shipped. */
    min-inline-size: -internal-auto-base(auto, calc-size(auto, max(size, 24px)));
    /* The 1lh here makes sure that options with no text still make the button
    * have the same height as options with text. */
    min-block-size: -internal-auto-base(auto, calc-size(auto, max(size, 24px, 1lh)));

    display: -internal-auto-base(inline-block, inline-flex);
    gap: -internal-auto-base(initial, 0.5em);
    border-radius: -internal-auto-base(0, 0.5em);
    align-items: -internal-auto-base(center, unset);
    /* https://github.com/whatwg/html/issues/10876 */
    user-select: -internal-auto-base(auto, none);
    }

    select:not(:-internal-list-box):not([multiple]) > button:first-child {
    all: unset;
    display: contents;
    interactivity: inert;
    }

    select:not(:-internal-list-box):not([multiple]):enabled:hover {
    background-color: -internal-auto-base(Field, color-mix(in lab, currentColor 10%, transparent));
    }
    select:not(:-internal-list-box):not([multiple]):enabled:active {
    background-color: -internal-auto-base(Field, color-mix(in lab, currentColor 20%, transparent));
    }
    select:not(:-internal-list-box):not([multiple]):disabled {
    opacity: -internal-auto-base(0.7, unset);
    color: -internal-auto-base(light-dark(GrayText, #aaa), color-mix(in srgb, currentColor 50%, transparent));
    border-color: -internal-auto-base(rgba(118, 118, 118, 0.3), inherit);
    }

    /* Undo unwanted styles from select rules */
    select:not(:-internal-list-box):not([multiple]) > button:first-child,
    select::picker(select) {
    white-space: normal;
    }

    select:not(:-internal-list-box):not([multiple])::picker(select) {
    box-sizing: border-box;
    border: 1px solid;
    padding: 0;
    color: -internal-auto-base(inherit, CanvasText);
    background-color: Canvas;
    margin: 0;
    inset: auto;
    min-inline-size: anchor-size(self-inline);
    min-block-size: 1lh;
    /* Go to the edge of the viewport, and add scrollbars if needed. */
    max-block-size: -webkit-fill-available; /* Can be removed when stretch ships */
    max-block-size: stretch;
    overflow: auto;
    /* Below and span-right, by default. */
    position-area: block-end span-inline-end;
    position-try-order: most-block-size;
    position-try-fallbacks:
    /* First try above and span-right. */
    block-start span-inline-end,
    /* Then below but span-left. */
    block-end span-inline-start,
    /* Then above and span-left. */
    block-start span-inline-start;
    }

    select:not(:-internal-list-box):not([multiple]) option {
    /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
    * https://github.com/openui/open-ui/issues/1026
    * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    /* TODO(crbug.com/1511354): This might be able to be combined with the
    * default select option rules at some point. This should be re-evaluted
    * before CustomizableSelect is shipped. */
    min-inline-size: 24px;
    min-block-size: max(24px, 1lh);
    font-weight: -internal-auto-base(normal, inherit);
    padding-inline: -internal-auto-base(2px, 0.5em);
    padding-block-end: -internal-auto-base(1px, 0);
    display: -internal-auto-base(block, flex);
    align-items: center;
    gap: 0.5em;
    }

    select:not(:-internal-list-box):not([multiple]) option:enabled:hover {
    background-color: color-mix(in lab, currentColor 10%, transparent);
    }
    select:not(:-internal-list-box):not([multiple]) option:enabled:active {
    background-color: color-mix(in lab, currentColor 20%, transparent);
    }
    select:not(:-internal-list-box):not([multiple]) option:disabled {
    color: -internal-auto-base(inherit, color-mix(in lab, currentColor 50%, transparent));
    }


    select:not(:-internal-list-box):not([multiple]) option::checkmark {
    content: '\2713';
    }
    select option:not(:checked)::checkmark {
    visibility: hidden;
    }

    select:-internal-autofill-selected,
    select::-internal-select-autofill-preview[popover] {
    background-image: none;
    background-color: light-dark(#E8F0FE, rgba(70, 90, 126, 0.4));
    color: FieldText;
    }
    select::-internal-select-autofill-preview[popover]:popover-open {
    display: grid;
    align-items: center;
    position-area: center;
    height: calc(anchor-size(height) - 2px);
    width: calc(anchor-size(width) - 2px);
    margin: 0;
    padding: 0;
    border: 1px solid black;
    }
    select::-internal-select-autofill-preview-text {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    }

    select:not(:-internal-list-box):not([multiple])::picker-icon {
    content: -internal-auto-base(none, counter(fake-counter-name, disclosure-open));
    /* We don't have to use -internal-auto-base() here because
    * the pseudo-element won't get generated unless the content property is set. */
    display: block;
    margin-inline-start: auto;
    }

    /* This can be merged with the :-internal-list-box rule in html.css */
    select:not(:-internal-list-box):not([multiple]) optgroup option {
    padding-inline-start: -internal-auto-base(20px, 0.5em);
    font-weight: normal;
    }

    select:not(:-internal-list-box):not([multiple]) optgroup::-internal-optgroup-label {
    padding-inline: -internal-auto-base(2px, 0.5em);
    padding-block: -internal-auto-base(0 1px, 0);
    min-height: -internal-auto-base(1.2em, 0);
    }

    select:not(:-internal-list-box):not([multiple]) optgroup legend {
    padding-inline: -internal-auto-base(2px, 0.5em);
    min-block-size: -internal-auto-base(initial, 1lh);
    }

    /* These style rules switch whether <option> elements render their label text
    * via ::-internal-option-label-container or all of their children via a
    * <slot> called ::-internal-option-slot. Using the <slot> for rendering is
    * only supported for customizable select when the option does not have a
    * label attribute. In all other cases, just the label text is rendered via
    * ::-internal-option-label-container. */
    /* TODO(crbug.com/393500003): Some :-internal-list-box and multiple checks
    * here could be removed if we make -internal-auto-base() work better. */
    option::-internal-option-label-container {
    display: contents;
    }
    option::-internal-option-slot {
    display: none;
    }
    select:not(:-internal-list-box):not([multiple]) option::-internal-option-label-container {
    display: none;
    }
    select:not(:-internal-list-box):not([multiple]) option::-internal-option-slot {
    display: contents;
    }
    /* Render the label attribute when it is set. This should be kept in sync
    * with the logic in HTMLOptionElement::DisplayLabel. */
    select:not(:-internal-list-box):not([multiple])
    option[label]:not([label=""])::-internal-option-label-container {
    display: contents;
    }
    select:not(:-internal-list-box):not([multiple])
    option[label]:not([label=""])::-internal-option-slot {
    display: none;
    }
    }
  2. ambidexterich revised this gist Jan 20, 2024. 1 changed file with 78 additions and 8 deletions.
    86 changes: 78 additions & 8 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -54,7 +54,7 @@ div {
    display: block
    }

    article, aside, footer, header, hgroup, main, nav, section {
    article, aside, footer, header, hgroup, main, nav, search, section {
    display: block
    }

    @@ -156,7 +156,12 @@ video, canvas, img {
    overflow-clip-margin: content-box;
    }

    iframe, embed, object, fencedframe, portal {
    img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: size !important;
    contain-intrinsic-size: 300px 150px;
    }

    iframe, embed, object, fencedframe {
    overflow: clip !important;
    overflow-clip-margin: content-box !important;
    }
    @@ -437,7 +442,7 @@ textarea {
    border: 1px solid -internal-light-dark(#767676, #858585);
    column-count: initial !important;
    -webkit-rtl-ordering: logical;
    resize: auto;
    resize: -internal-textarea-auto;
    cursor: text;
    padding: 2px;
    white-space: pre-wrap;
    @@ -522,6 +527,10 @@ input[type="url" i] {
    padding-inline: 2px;
    }

    input[type="tel" i] {
    direction: ltr;
    }

    input::-webkit-inner-spin-button {
    appearance: auto;
    display: inline-block;
    @@ -592,6 +601,12 @@ input[type="password" i]::-internal-input-suggested.reveal-password {
    -webkit-text-security: none;
    }

    input[type="password" i]::-internal-input-suggested.fade-out-password {
    width: fit-content;
    -webkit-mask: linear-gradient(to right, #000 50%, #0000);
    mask: linear-gradient(to right, #000 50%, #0000);
    }

    input[type="password" i]::-internal-reveal {
    width: 1.3em;
    height: 1.3em;
    @@ -615,6 +630,12 @@ input[type="password" i]::-internal-reveal:focus {
    cursor: pointer;
    }

    input[type="password" i]::-internal-strong {
    color: -internal-light-dark(#0B57D0, #A8C7FA);
    font-family: roboto;
    -webkit-text-security: none;
    }

    input[type="hidden" i], input[type="image" i], input[type="file" i] {
    appearance: none;
    padding: initial;
    @@ -913,6 +934,14 @@ input[readonly]::-webkit-calendar-picker-indicator {
    visibility: hidden;
    }

    /* Form controls that measure the inline size without doing actual layout
    need to disable `text-autospace`, if their content can be affected by
    the property. crbug.com/1484863 */
    input[type="date" i], input[type="datetime-local" i], input[type="month" i],
    input[type="week" i], select {
    text-autospace: no-autospace !important;
    }

    select {
    appearance: auto;
    box-sizing: border-box;
    @@ -1187,11 +1216,6 @@ nobr {
    outline: Highlight 3px solid;
    }

    :-internal-spatial-navigation-interest {
    outline: auto 1px -webkit-focus-ring-color !important;
    box-shadow: none !important
    }

    :focus-visible {
    outline: auto 1px -webkit-focus-ring-color
    }
    @@ -1440,6 +1464,52 @@ slot {
    display: contents;
    }

    [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;
    }

    /* This ensures that popovers get display:none when they are not open, and we
    need to be careful not to affect `<dialog popover>` when open as a dialog. */
    [popover]:not(:popover-open):not(dialog[open]) {
    display:none;
    }

    /* The UA stylesheet has a rule like dialog{display:none}, so <dialog popover>
    needs this to be visible when it is open as a popover. */
    dialog:popover-open {
    display:block;
    }

    /* Popovers using anchor positioning get their inset properties reset, to make
    * it easier to position them. */
    [popover][anchor] {
    inset:auto;
    }

    /* This rule matches popovers (dialog or not) that are currently open as a
    popover. */
    [popover]:popover-open:not(dialog), dialog:popover-open:not([open]) {
    overlay: auto !important;
    }

    [popover]:-internal-popover-in-top-layer::backdrop {
    /* From the (modified) fullscreen spec: https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults: */
    position: fixed;
    inset: 0;
    /* Specific to [popover]: */
    pointer-events: none !important;
    background-color: transparent;
    }

    /* page */

    @page {
  3. ambidexterich revised this gist Aug 14, 2023. 1 changed file with 155 additions and 125 deletions.
    280 changes: 155 additions & 125 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -27,11 +27,15 @@ html {
    display: block;
    }

    :root {
    view-transition-name: root;
    }

    /* generic block-level elements */

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

    body:-webkit-full-page-media {
    @@ -50,10 +54,6 @@ div {
    display: block
    }

    layer {
    display: block
    }

    article, aside, footer, header, hgroup, main, nav, section {
    display: block
    }
    @@ -151,6 +151,16 @@ audio {
    height: 54px;
    }

    video, canvas, img {
    overflow: clip;
    overflow-clip-margin: content-box;
    }

    iframe, embed, object, fencedframe, portal {
    overflow: clip !important;
    overflow-clip-margin: content-box !important;
    }

    /* heading elements */

    h1 {
    @@ -292,7 +302,14 @@ tr {

    td, th {
    display: table-cell;
    vertical-align: inherit
    vertical-align: inherit;
    }

    /* When the td/th are inside a table (the normal case), the padding is taken
    care of by HTMLTableCellElement::AdditionalPresentationAttributeStyle(). */
    td:not(table td),
    th:not(table th) {
    padding: 1px;
    }

    th {
    @@ -392,24 +409,19 @@ fieldset {
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    border: 2px groove ThreeDFace;
    border: 2px groove #C0C0C0;
    min-inline-size: min-content;
    }

    button {
    appearance: auto;
    }

    /* Form controls don't go vertical. */
    input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
    }

    input, textarea, select, button {
    margin: 0__qem;
    font: -webkit-small-control;
    text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
    color: -internal-light-dark(black, white);
    color: FieldText;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    @@ -430,7 +442,7 @@ textarea {
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    background-color: Field;
    font-family: monospace;
    }

    @@ -440,7 +452,11 @@ input {
    border: 2px inset -internal-light-dark(#767676, #858585);
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    background-color: Field;
    }

    input:not([type="file" i], [type="image" i], [type="checkbox" i], [type="radio" i]) {
    -internal-align-content-block: center;
    }

    input[type="search" i] {
    @@ -454,7 +470,6 @@ input::-webkit-textfield-decoration-container {
    -webkit-user-modify: read-only !important;
    content: none !important;
    writing-mode: inherit !important;
    -internal-align-self-block: center;
    }

    input::-webkit-clear-button {
    @@ -503,7 +518,8 @@ input[type="search" i],
    input[type="tel" i],
    input[type="text" i],
    input[type="url" i] {
    padding: 1px 2px;
    padding-block: 1px;
    padding-inline: 2px;
    }

    input::-webkit-inner-spin-button {
    @@ -533,7 +549,7 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {

    input::-webkit-input-placeholder {
    text-overflow: inherit;
    line-height: initial;
    line-height: initial !important;
    white-space: pre;
    word-wrap: normal;
    overflow: hidden;
    @@ -549,6 +565,9 @@ input::-internal-input-suggested {
    input::-internal-input-suggested,
    textarea::-internal-input-suggested {
    font: -webkit-small-control !important;
    /* -webkit-small-control does not pin the font-feature-settings and we want
    previews to look consistent. */
    font-feature-settings: normal !important;
    /* Prevent that overflow affects the scrollable area. Without this,
    LayoutBox::*Scroll{Height,Width}() may determine the scroll width/height
    from the scrollable area instead of from the overrides in
    @@ -565,16 +584,20 @@ input[type="password" i] {
    -webkit-text-security: disc !important;
    }

    input[type="password" i]::-internal-input-suggested {
    input[type="password" i]::-internal-input-suggested:not(.reveal-password) {
    -webkit-text-security: disc !important;
    }

    input[type="password" i]::-internal-input-suggested.reveal-password {
    -webkit-text-security: none;
    }

    input[type="password" i]::-internal-reveal {
    width: 1.3em;
    height: 1.3em;
    cursor: default;
    flex: none;
    background-image: -webkit-image-set(url(images/password_reveal_on.svg) 1x);
    background-image: url(images/password_reveal_on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    @@ -583,7 +606,7 @@ input[type="password" i]::-internal-reveal {
    }

    input[type="password" i]::-internal-reveal.reveal {
    background-image: -webkit-image-set(url(images/password_reveal_off.svg) 1x);
    background-image: url(images/password_reveal_off.svg);
    }

    input[type="password" i]::-internal-reveal:hover,
    @@ -624,7 +647,7 @@ select:-internal-autofill-selected {
    appearance: menulist-button;
    background-image:none !important;
    background-color: -internal-light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
    color: -internal-light-dark(black, white) !important;
    color: FieldText !important;
    }

    input[type="radio" i],
    @@ -643,7 +666,7 @@ input[type="radio" i] {
    input[type="button" i], input[type="submit" i], input[type="reset" i] {
    -internal-empty-line-height: fabricated;
    appearance: auto;
    -webkit-user-select: none;
    user-select: none;
    white-space: pre
    }

    @@ -652,7 +675,7 @@ input[type="file" i]::-webkit-file-upload-button {
    -webkit-user-modify: read-only !important;
    white-space: nowrap;
    margin: 0;
    margin-inline-end: 4px;
    margin-inline-end: 4px; /* See FileUploadControlIntrinsicInlineSize() */
    font-size: inherit;
    }

    @@ -664,11 +687,12 @@ button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    padding: 1px 6px;
    border: 2px outset -internal-light-dark(#767676, #858585);
    padding-block: 1px;
    padding-inline: 6px;
    border: 2px outset ButtonBorder;
    box-sizing: border-box;
    background-color: -internal-light-dark(#efefef, #3B3B3B);
    color: -internal-light-dark(black, white);
    background-color: ButtonFace;
    color: ButtonText;
    }

    input[type="checkbox" i]:disabled,
    @@ -710,7 +734,7 @@ input[type="range" i]:-internal-has-datalist::-webkit-slider-container {
    input[type="range" i]::-webkit-slider-runnable-track {
    flex: 1;
    min-inline-size: 0;
    -webkit-align-self: center;
    align-self: center;

    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    @@ -801,19 +825,19 @@ input[type="radio" i] {

    input[type="color" i] {
    appearance: auto;
    width: 50px;
    height: 27px;
    inline-size: 50px;
    block-size: 27px;
    /* Same as native_theme_base. */
    border: 1px solid -internal-light-dark(#767676, #858585);
    border: 1px solid ButtonBorder;
    padding: 1px 2px;
    cursor: default;
    box-sizing: border-box;
    background-color: -internal-light-dark(#efefef, #3B3B3B);
    color: -internal-light-dark(black, white);
    background-color: ButtonFace;
    color: ButtonText;
    }

    input[type="color" i]::-webkit-color-swatch-wrapper {
    display:flex;
    display: flex;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    @@ -822,6 +846,8 @@ input[type="color" i]::-webkit-color-swatch-wrapper {
    }

    input[type="color" i]::-webkit-color-swatch {
    /* The swatch should not be affected by color scheme. */
    color-scheme: only light;
    background-color: #000000;
    border: 1px solid #777777;
    flex: 1;
    @@ -831,8 +857,8 @@ input[type="color" i]::-webkit-color-swatch {

    input[type="color" i][list] {
    appearance: auto;
    width: 94px;
    height: 27px
    inline-size: 94px;
    block-size: 27px
    }

    input[type="color" i][list]::-webkit-color-swatch-wrapper {
    @@ -846,9 +872,10 @@ input[type="color" i][list]::-webkit-color-swatch {

    input::-webkit-calendar-picker-indicator {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    padding: 0.17em 0.34em;
    inline-size: 0.66em;
    block-size: 0.66em;
    padding-block: 0.17em;
    padding-inline: 0.34em;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    cursor: default;
    @@ -892,8 +919,8 @@ select {
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: -internal-light-dark(black, white);
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    color: FieldText;
    background-color: Field;
    border: 1px solid -internal-light-dark(#767676, #858585);
    cursor: default;
    border-radius: 0;
    @@ -910,8 +937,8 @@ select:disabled {
    select:-internal-list-box {
    appearance: auto;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: scroll;
    -internal-overflow-inline: hidden;
    -internal-overflow-block: scroll;
    vertical-align: text-bottom;
    white-space: nowrap;
    border-radius: 2px;
    @@ -921,8 +948,11 @@ select:not(:-internal-list-box) {
    overflow: visible !important;
    }

    select:-internal-list-box optgroup option:before {
    content: "\00a0\00a0\00a0\00a0";;
    /* The padding here should match the value of
    |extraPaddingForOptionInsideOptgroup| in list_picker.js, which is the
    padding for select optgroup option. */
    select:-internal-list-box optgroup option {
    padding-inline-start: 20px;
    }

    select:-internal-list-box option,
    @@ -935,18 +965,14 @@ select:-internal-list-box optgroup {
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked,
    select:-internal-list-box:focus option:checked:hover {
    /* TODO(crbug.com/1129658): The dark mode color here should be handled
    within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
    background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
    color: -internal-light-dark(-internal-active-list-box-selection-text, #3B3B3B) !important;
    background-color: SelectedItem !important;
    color: SelectedItemText !important;
    }

    /* TODO(crbug.com/1244986): We should be able to remove !important here, but
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked:disabled {
    /* TODO(crbug.com/1129658): The dark mode color here should be handled
    within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
    background-color: -internal-light-dark(-internal-inactive-list-box-selection, rgba(59, 59, 59, 0.3)) !important;
    background-color: -internal-inactive-list-box-selection !important;
    }

    /* option selected, list-box not focused */
    @@ -990,23 +1016,6 @@ option {
    min-height: 1.2em;
    }

    /* selectmenu */

    selectmenu {
    display: inline-block;
    }

    /* TODO(crbug.com/1121840) It's deliberate for now that this provides styles
    for <option> but not other element types with part="option". Could this
    be a mechanism for allowing authors to specify their own styles for
    option parts by using e.g. <div part="option">, while authors that
    want the default styles can instead just use <option>? */
    selectmenu option:hover {
    background-color: lightgray;
    cursor: default;
    user-select: none;
    }

    output {
    display: inline;
    }
    @@ -1017,8 +1026,8 @@ meter {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    block-size: 1em;
    inline-size: 5em;
    vertical-align: -0.2em;
    -webkit-user-modify: read-only !important;
    }
    @@ -1028,8 +1037,8 @@ meter::-webkit-meter-inner-element {
    box-sizing: inherit;
    display: none;
    -webkit-user-modify: read-only !important;
    height: 100%;
    width: 100%;
    block-size: 100%;
    inline-size: 100%;
    }

    meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
    @@ -1043,8 +1052,8 @@ meter::-internal-fallback:-internal-shadow-host-has-appearance {
    }

    meter::-webkit-meter-bar {
    height: 100%;
    width: 100%;
    block-size: 100%;
    inline-size: 100%;
    -webkit-user-modify: read-only !important;
    background: -internal-light-dark(#efefef, #3B3B3B);
    border: thin solid -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
    @@ -1058,21 +1067,21 @@ meter::-webkit-meter-bar {
    }

    meter::-webkit-meter-optimum-value {
    height: 100%;
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#107c10, #74b374)
    }

    meter::-webkit-meter-suboptimum-value {
    height: 100%;
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#ffb900, #f2c812)
    }

    meter::-webkit-meter-even-less-good-value {
    height: 100%;
    block-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#d83b01, #e98f6d)
    @@ -1084,30 +1093,30 @@ progress {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    block-size: 1em;
    inline-size: 10em;
    vertical-align: -0.2em;
    }

    progress::-webkit-progress-inner-element {
    box-sizing: inherit;
    -webkit-user-modify: read-only;
    height: 100%;
    width: 100%;
    block-size: 100%;
    inline-size: 100%;
    }

    progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    block-size: 100%;
    inline-size: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    progress::-webkit-progress-value {
    background-color: green;
    height: 100%;
    width: 50%; /* should be removed later */
    block-size: 100%;
    inline-size: 50%; /* should be removed later */
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }
    @@ -1142,8 +1151,8 @@ pre, xmp, plaintext, listing {
    }

    mark {
    background-color: yellow;
    color: black
    background-color: Mark;
    color: MarkText;
    }

    big {
    @@ -1174,6 +1183,10 @@ nobr {

    /* states */

    :-internal-selector-fragment-anchor {
    outline: Highlight 3px solid;
    }

    :-internal-spatial-navigation-interest {
    outline: auto 1px -webkit-focus-ring-color !important;
    box-shadow: none !important
    @@ -1215,19 +1228,15 @@ input[type="date" i]::-webkit-calendar-picker-indicator,
    input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
    input[type="month" i]::-webkit-calendar-picker-indicator,
    input[type="week" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(-webkit-image-set(url(images/calendar_icon.svg) 1x), -webkit-image-set(url(images/calendar_icon_white.svg) 1x));
    background-image: -internal-light-dark(url(images/calendar_icon.svg), url(images/calendar_icon_white.svg));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.2em;
    margin-inline-start: 24px;
    block-size: 1.0em;
    inline-size: 1.0em;
    opacity: 1;
    outline: none;
    padding-bottom: 2px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    padding-top: 2px;
    width: 1.2em;
    padding: 2px;
    }

    input[type="date" i]::-webkit-calendar-picker-indicator:focus-visible,
    @@ -1239,19 +1248,18 @@ input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible {
    }

    input[type="time" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(-webkit-image-set(url(images/time_icon.svg) 1x), -webkit-image-set(url(images/time_icon_white.svg) 1x));
    background-image: -internal-light-dark(url(images/time_icon.svg), url(images/time_icon_white.svg));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.05em;
    margin-inline-start: 8px;
    opacity: 1;
    outline: none;
    padding-bottom: 3px;
    margin-inline-start: 8px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    padding-top: 3px;
    width: 1.05em;
    padding-block: 3px;
    block-size: 1.05em;
    inline-size: 1.05em;
    }

    input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible {
    @@ -1286,7 +1294,7 @@ input::-webkit-datetime-edit-hour-field[disabled],
    input::-webkit-datetime-edit-millisecond-field[disabled],
    input::-webkit-datetime-edit-minute-field[disabled],
    input::-webkit-datetime-edit-second-field[disabled] {
    color: -internal-light-dark(GrayText, #000000);
    color: -internal-light-dark(GrayText, rgb(165, 165, 165));
    }

    a:-webkit-any-link {
    @@ -1315,7 +1323,7 @@ ruby, rt {

    rt {
    line-height: normal;
    -webkit-text-emphasis: none;
    text-emphasis: none;
    }

    ruby > rt {
    @@ -1338,6 +1346,12 @@ iframe {
    border: 2px inset
    }

    fencedframe {
    border: 2px inset;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    }

    details {
    display: block
    }
    @@ -1377,43 +1391,49 @@ textarea[dir=auto i] {
    unicode-bidi: plaintext;
    }

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

    dialog {
    display: block;
    display: none;
    /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
    position: absolute;
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: -internal-light-dark(white, black);
    color: -internal-light-dark(black, white);
    background-color: Canvas;
    color: CanvasText;
    }

    dialog:-internal-modal {
    dialog[open] {
    display: block;
    }

    dialog:-internal-dialog-in-top-layer {
    /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: 0;
    /* 6px + 2em = border + padding, as by default box-sizing is content-box. */
    inset-block-start: 0;
    inset-block-end: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
    /* https://github.com/w3c/csswg-drafts/issues/6939#issuecomment-1016679588 */
    user-select: text;
    visibility: visible;
    }

    dialog:modal {
    overlay: auto !important;
    }

    /* TODO(foolip): In the Fullscreen spec, there's a ::backdrop block with the
    properties shared with :fullscreen::backdrop (see fullscreen.css). */
    dialog::backdrop {
    dialog:-internal-dialog-in-top-layer::backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.1)
    inset: 0;
    /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */
    background: rgba(0,0,0,0.1);
    }

    slot {
    @@ -1436,4 +1456,14 @@ slot {
    tfoot { break-inside:avoid; }
    }

    /* noscript is handled internally, as it depends on settings. */
    /* spelling/grammar error pseudos */

    html::spelling-error {
    text-decoration: -internal-spelling-error-color spelling-error;
    }

    html::grammar-error {
    text-decoration: -internal-grammar-error-color grammar-error;
    }

    /* noscript is handled internally, as it depends on settings. */
  4. ambidexterich revised this gist Oct 15, 2021. 1 changed file with 369 additions and 157 deletions.
    526 changes: 369 additions & 157 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -27,31 +27,6 @@ html {
    display: block;
    }

    /* children of the <head> element all have display:none */
    head {
    display: none
    }

    meta {
    display: none
    }

    title {
    display: none
    }

    link {
    display: none
    }

    style {
    display: none
    }

    script {
    display: none
    }

    /* generic block-level elements */

    body {
    @@ -150,6 +125,32 @@ video {
    object-fit: contain;
    }

    video:-webkit-full-page-media {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 100%;
    max-width: 100%;
    }

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

    /** TODO(crbug.com/985623): Remove these hard-coded audio tag size.
    * This fixed audio tag width/height leads to fail the wpt tests below.
    * crbug.com/955170 external/wpt/css/css-contain/contain-size-replaced-003a.html
    * crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003b.html
    * crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003c.html
    */
    audio {
    width: 300px;
    height: 54px;
    }

    /* heading elements */

    h1 {
    @@ -419,17 +420,27 @@ input, textarea, select, button {
    text-align: start;
    }

    input[type="hidden" i] {
    display: none
    textarea {
    appearance: auto;
    border: 1px solid -internal-light-dark(#767676, #858585);
    column-count: initial !important;
    -webkit-rtl-ordering: logical;
    resize: auto;
    cursor: text;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    font-family: monospace;
    }

    input {
    appearance: auto;
    padding: 1px;
    background-color: -internal-light-dark(white, black);
    border: 2px inset;
    padding:1px 0;
    border: 2px inset -internal-light-dark(#767676, #858585);
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    }

    input[type="search" i] {
    @@ -469,6 +480,7 @@ input[type="search" i]::-webkit-search-cancel-button {
    flex: none;
    -webkit-user-modify: read-only !important;
    margin-inline-start: 1px;
    margin-right: 3px;
    opacity: 0;
    pointer-events: none;
    user-select: none !important;
    @@ -479,6 +491,21 @@ input[type="search" i]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-se
    pointer-events: auto;
    }

    input[type="search" i]::-webkit-search-results-decoration {
    margin: auto 3px auto 2px;
    }

    input,
    input[type="email" i],
    input[type="number" i],
    input[type="password" i],
    input[type="search" i],
    input[type="tel" i],
    input[type="text" i],
    input[type="url" i] {
    padding: 1px 2px;
    }

    input::-webkit-inner-spin-button {
    appearance: auto;
    display: inline-block;
    @@ -495,24 +522,6 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    pointer-events: auto;
    }

    select {
    border-radius: 5px;
    }

    textarea {
    appearance: auto;
    background-color: -internal-light-dark(white, black);
    border: 1px solid;
    column-count: initial !important;
    -webkit-rtl-ordering: logical;
    flex-direction: column;
    resize: auto;
    cursor: text;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    }

    ::-webkit-input-placeholder {
    -webkit-text-security: none;
    color: #757575;
    @@ -548,6 +557,10 @@ textarea::-internal-input-suggested {
    overflow-anchor: none;
    }

    textarea::-internal-input-suggested {
    font-family: monospace !important;
    }

    input[type="password" i] {
    -webkit-text-security: disc !important;
    }
    @@ -556,8 +569,31 @@ input[type="password" i]::-internal-input-suggested {
    -webkit-text-security: disc !important;
    }

    input[type="password" i]::-internal-reveal {
    width: 1.3em;
    height: 1.3em;
    cursor: default;
    flex: none;
    background-image: -webkit-image-set(url(images/password_reveal_on.svg) 1x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 3px;
    margin-right: 3px;
    }

    input[type="password" i]::-internal-reveal.reveal {
    background-image: -webkit-image-set(url(images/password_reveal_off.svg) 1x);
    }

    input[type="password" i]::-internal-reveal:hover,
    input[type="password" i]::-internal-reveal:focus {
    border-radius: 1px;
    cursor: pointer;
    }

    input[type="hidden" i], input[type="image" i], input[type="file" i] {
    -webkit-appearance: initial; /* AutoAppearanceFor() should match to this. */
    appearance: none;
    padding: initial;
    background-color: initial;
    border: initial;
    @@ -580,31 +616,30 @@ input[type="image" i] {
    /* TODO(crbug.com/880258): Use different styles for
    `-internal-autofill-previewed` and `-internal-autofill-selected`. */
    input:-internal-autofill-previewed,
    textarea:-internal-autofill-previewed,
    select:-internal-autofill-previewed {
    -webkit-appearance:menulist-button;
    background-color: #E8F0FE !important;
    background-image:none !important;
    color: -internal-light-dark(black, white) !important;
    }

    input:-internal-autofill-selected,
    textarea:-internal-autofill-previewed,
    textarea:-internal-autofill-selected,
    select:-internal-autofill-previewed,
    select:-internal-autofill-selected {
    -webkit-appearance:menulist-button;
    background-color: #E8F0FE !important;
    appearance: menulist-button;
    background-image:none !important;
    background-color: -internal-light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
    color: -internal-light-dark(black, white) !important;
    }

    input[type="radio" i], input[type="checkbox" i] {
    margin: 3px 0.5ex;
    input[type="radio" i],
    input[type="checkbox" i] {
    margin:3px 3px 3px 4px;
    padding: initial;
    background-color: initial;
    border: initial;
    cursor: default;
    }

    input[type="radio" i] {
    margin:3px 3px 0 5px;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i] {
    -internal-empty-line-height: fabricated;
    appearance: auto;
    @@ -621,27 +656,41 @@ input[type="file" i]::-webkit-file-upload-button {
    font-size: inherit;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    input[type="button" i],
    input[type="submit" i],
    input[type="reset" i],
    input[type="file" i]::-webkit-file-upload-button,
    button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: -internal-light-dark(ButtonText, #AAAAAA);
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
    padding: 1px 6px;
    border: 2px outset -internal-light-dark(#767676, #858585);
    box-sizing: border-box;
    background-color: -internal-light-dark(#efefef, #3B3B3B);
    color: -internal-light-dark(black, white);
    }

    input[type="checkbox" i]:disabled,
    input[type="file" i]:disabled,
    input[type="hidden" i]:disabled,
    input[type="image" i]:disabled,
    input[type="radio" i]:disabled,
    input[type="range" i]:disabled {
    background-color: initial;
    }

    input[type="range" i] {
    appearance: auto; /* AutoAppearanceFor() should match to this. */
    appearance: auto;
    padding: initial;
    border: initial;
    margin: 2px;
    color: #909090;
    cursor: default;
    color: -internal-light-dark(#101010, #ffffff);
    }

    input[type="range" i]::-webkit-slider-container, input[type="range" i]::-webkit-media-slider-container {
    input[type="range" i]::-webkit-slider-container,
    input[type="range" i]::-webkit-media-slider-container {
    appearance: inherit;
    flex: 1;
    min-inline-size: 0;
    @@ -668,16 +717,32 @@ input[type="range" i]::-webkit-slider-runnable-track {
    display: block;
    }

    input[type="range" i]::-webkit-slider-thumb, input[type="range" i]::-webkit-media-slider-thumb {
    input[type="range" i]::-webkit-slider-thumb,
    input[type="range" i]::-webkit-media-slider-thumb {
    appearance: auto;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
    }

    input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled,
    input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled,
    select:disabled, optgroup:disabled, option:disabled,
    input[type="range" i]:disabled {
    color: #c5c5c5;
    }

    input[type="button" i]:disabled,
    input[type="submit" i]:disabled,
    input[type="reset" i]:disabled,
    input[type="color" i]:disabled,
    input[type="file" i]:disabled::-webkit-file-upload-button,
    button:disabled {
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
    color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    }

    select:disabled,
    optgroup:disabled,
    option:disabled,
    select[disabled]>option {
    color: -internal-light-dark(GrayText, #aaa);
    }
    @@ -691,31 +756,39 @@ input[type="button" i]:active:disabled, input[type="submit" i]:active:disabled,
    }

    input:disabled, textarea:disabled {
    color: -internal-light-dark(#545454, #aaa);
    cursor: default;
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: -internal-light-dark(#545454, #aaaaaa);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
    border-color: rgba(118, 118, 118, 0.3);
    }

    option:-internal-spatial-navigation-focus {
    outline: -internal-light-dark(black, white) dashed 1px;
    outline-offset: -1px;
    }

    datalist {
    display: none
    }

    /* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements */
    /* TODO(crbug.com/1231263): <area> should be display:none. */
    area {
    display: inline;
    display: inline;
    }
    base, basefont, datalist, head, link, meta, noembed,
    noframes, param, rp, script, style, template, title {
    display: none;
    }
    input[type="hidden" i] {
    display: none !important;
    }

    area:-webkit-any-link {
    cursor: pointer;
    }

    param {
    display: none
    }

    input[type="checkbox" i] {
    appearance: auto;
    box-sizing: border-box;
    @@ -728,13 +801,15 @@ input[type="radio" i] {

    input[type="color" i] {
    appearance: auto;
    width: 44px;
    height: 23px;
    background-color: ButtonFace;
    width: 50px;
    height: 27px;
    /* Same as native_theme_base. */
    border: 1px #a9a9a9 solid;
    border: 1px solid -internal-light-dark(#767676, #858585);
    padding: 1px 2px;
    cursor: default;
    box-sizing: border-box;
    background-color: -internal-light-dark(#efefef, #3B3B3B);
    color: -internal-light-dark(black, white);
    }

    input[type="color" i]::-webkit-color-swatch-wrapper {
    @@ -755,9 +830,9 @@ input[type="color" i]::-webkit-color-swatch {
    }

    input[type="color" i][list] {
    -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */
    width: 88px;
    height: 23px
    appearance: auto;
    width: 94px;
    height: 27px
    }

    input[type="color" i][list]::-webkit-color-swatch-wrapper {
    @@ -812,43 +887,38 @@ input[readonly]::-webkit-calendar-picker-indicator {
    }

    select {
    -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */
    appearance: auto;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: -internal-light-dark(black, white);
    background-color: -internal-light-dark(white, black);
    background-color: -internal-light-dark(#ffffff, #3B3B3B);
    border: 1px solid -internal-light-dark(#767676, #858585);
    cursor: default;
    border-radius: 0;
    }

    select:not(:-internal-list-box) {
    overflow: visible !important;
    select:disabled {
    opacity: 0.7;
    }

    /* -internal-list-box is how we specify select[multiple] */
    /* select[multiple] is an exception to the prohibition on sizes here
    because it is one of the few controls with borders that grow on zoom
    (to solve a nasty scrollbar location problem) */
    select:-internal-list-box {
    -webkit-appearance: listbox; /* AutoAppearanceFor() should match to this. */
    appearance: auto;
    align-items: flex-start;
    border: 1px inset gray;
    border-radius: initial;
    overflow-x: hidden;
    overflow-y: scroll;
    vertical-align: text-bottom;
    white-space: nowrap;
    border-radius: 2px;
    }

    optgroup {
    font-weight: bolder;
    display: block;
    }

    option {
    font-weight: normal;
    display: block;
    padding: 0 2px 1px 2px;
    white-space: nowrap;
    min-height: 1.2em;
    select:not(:-internal-list-box) {
    overflow: visible !important;
    }

    select:-internal-list-box optgroup option:before {
    @@ -860,23 +930,36 @@ select:-internal-list-box optgroup {
    line-height: initial !important;
    }

    select:-internal-list-box:focus option:checked {
    background-color: -internal-active-list-box-selection !important;
    color: -internal-active-list-box-selection-text !important;
    /* option selected, list-box focused */
    /* TODO(crbug.com/1244986): We should be able to remove !important here, but
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked,
    select:-internal-list-box:focus option:checked:hover {
    /* TODO(crbug.com/1129658): The dark mode color here should be handled
    within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
    background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
    color: -internal-light-dark(-internal-active-list-box-selection-text, #3B3B3B) !important;
    }

    /* TODO(crbug.com/1244986): We should be able to remove !important here, but
    it breaks some WebUI menus. */
    select:-internal-list-box:focus option:checked:disabled {
    background-color: -internal-inactive-list-box-selection !important;
    /* TODO(crbug.com/1129658): The dark mode color here should be handled
    within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
    background-color: -internal-light-dark(-internal-inactive-list-box-selection, rgba(59, 59, 59, 0.3)) !important;
    }

    select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection !important;
    color: -internal-inactive-list-box-selection-text !important;
    /* option selected, list-box not focused */
    select:-internal-list-box option:checked,
    select:-internal-list-box option:checked:hover {
    background-color: -internal-light-dark(#cecece, #545454);
    color: -internal-light-dark(#101010, #FFFFFF);
    }

    select:-internal-list-box:disabled option:checked,
    select:-internal-list-box option:checked:disabled {
    color: gray !important;
    select:-internal-list-box option:checked:disabled,
    select:-internal-list-box option:checked:disabled:hover {
    color: -internal-light-dark(gray, #aaa);
    }

    select:-internal-list-box hr {
    @@ -885,11 +968,45 @@ select:-internal-list-box hr {
    margin-block-end: 0;
    }

    select:-internal-list-box:focus option:-internal-multi-select-focus {
    select:-internal-list-box:focus-visible option:-internal-multi-select-focus {
    outline: auto 1px -webkit-focus-ring-color;
    outline-offset: -1px;
    }

    select:-internal-list-box option:hover {
    background-color: initial;
    }

    optgroup {
    font-weight: bolder;
    display: block;
    }

    option {
    font-weight: normal;
    display: block;
    padding: 0 2px 1px 2px;
    white-space: nowrap;
    min-height: 1.2em;
    }

    /* selectmenu */

    selectmenu {
    display: inline-block;
    }

    /* TODO(crbug.com/1121840) It's deliberate for now that this provides styles
    for <option> but not other element types with part="option". Could this
    be a mechanism for allowing authors to specify their own styles for
    option parts by using e.g. <div part="option">, while authors that
    want the default styles can instead just use <option>? */
    selectmenu option:hover {
    background-color: lightgray;
    cursor: default;
    user-select: none;
    }

    output {
    display: inline;
    }
    @@ -916,40 +1033,49 @@ meter::-webkit-meter-inner-element {
    }

    meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
    display: block;
    display: grid;
    grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
    position: relative;
    }

    meter::-internal-fallback:-internal-shadow-host-has-appearance {
    display: none;
    }

    meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    height: 100%;
    width: 100%;
    -webkit-user-modify: read-only !important;
    background: -internal-light-dark(#efefef, #3B3B3B);
    border: thin solid -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
    grid-row-start: line1;
    grid-row-end: line2;
    border-radius: 20px;
    box-sizing: border-box;
    align-self: unsafe center;
    position: absolute;
    overflow: hidden;
    }

    meter::-webkit-meter-optimum-value {
    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#107c10, #74b374)
    }

    meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#ffb900, #f2c812)
    }

    meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    background: -internal-light-dark(#d83b01, #e98f6d)
    }

    /* progress */
    @@ -1053,34 +1179,116 @@ nobr {
    box-shadow: none !important
    }

    :focus {
    :focus-visible {
    outline: auto 1px -webkit-focus-ring-color
    }

    html:focus, body:focus {
    html:focus-visible, body:focus-visible {
    outline: none
    }

    embed:focus, iframe:focus, object:focus {
    embed:focus-visible, iframe:focus-visible, object:focus-visible {
    outline: none
    }

    input:focus, textarea:focus, select:focus {
    outline-offset: -2px
    input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline-offset: 0;
    }

    input[type="button" i]:focus,
    input[type="checkbox" i]:focus,
    input[type="file" i]:focus,
    input[type="hidden" i]:focus,
    input[type="image" i]:focus,
    input[type="radio" i]:focus,
    input[type="reset" i]:focus,
    input[type="submit" i]:focus,
    input[type="file" i]:focus::-webkit-file-upload-button {
    input[type="button" i]:focus-visible,
    input[type="file" i]:focus-visible,
    input[type="hidden" i]:focus-visible,
    input[type="image" i]:focus-visible,
    input[type="reset" i]:focus-visible,
    input[type="submit" i]:focus-visible,
    input[type="file" i]:focus-visible::-webkit-file-upload-button {
    outline-offset: 0
    }

    input[type="checkbox" i]:focus-visible,
    input[type="radio" i]:focus-visible {
    outline-offset: 2px;
    }


    input[type="date" i]::-webkit-calendar-picker-indicator,
    input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
    input[type="month" i]::-webkit-calendar-picker-indicator,
    input[type="week" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(-webkit-image-set(url(images/calendar_icon.svg) 1x), -webkit-image-set(url(images/calendar_icon_white.svg) 1x));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.2em;
    margin-inline-start: 24px;
    opacity: 1;
    outline: none;
    padding-bottom: 2px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    padding-top: 2px;
    width: 1.2em;
    }

    input[type="date" i]::-webkit-calendar-picker-indicator:focus-visible,
    input[type="datetime-local" i]::-webkit-calendar-picker-indicator:focus-visible,
    input[type="month" i]::-webkit-calendar-picker-indicator:focus-visible,
    input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible {
    outline: solid 2px -webkit-focus-ring-color;
    outline-offset: -2px;
    }

    input[type="time" i]::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(-webkit-image-set(url(images/time_icon.svg) 1x), -webkit-image-set(url(images/time_icon_white.svg) 1x));
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.05em;
    margin-inline-start: 8px;
    opacity: 1;
    outline: none;
    padding-bottom: 3px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    padding-top: 3px;
    width: 1.05em;
    }

    input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible {
    outline: solid 2px -webkit-focus-ring-color;
    outline-offset: -2px;
    }

    input::-webkit-calendar-picker-indicator:hover {
    background-color: initial;
    }

    input::-webkit-datetime-edit-ampm-field:focus,
    input::-webkit-datetime-edit-day-field:focus,
    input::-webkit-datetime-edit-hour-field:focus,
    input::-webkit-datetime-edit-millisecond-field:focus,
    input::-webkit-datetime-edit-minute-field:focus,
    input::-webkit-datetime-edit-month-field:focus,
    input::-webkit-datetime-edit-second-field:focus,
    input::-webkit-datetime-edit-week-field:focus,
    input::-webkit-datetime-edit-year-field:focus {
    background-color: -internal-light-dark(highlight, #99C8FF);
    color: -internal-light-dark(highlighttext, #000000);
    outline: none;
    }

    input::-webkit-datetime-edit-year-field[disabled],
    input::-webkit-datetime-edit-month-field[disabled],
    input::-webkit-datetime-edit-week-field[disabled],
    input::-webkit-datetime-edit-day-field[disabled],
    input::-webkit-datetime-edit-ampm-field[disabled],
    input::-webkit-datetime-edit-hour-field[disabled],
    input::-webkit-datetime-edit-millisecond-field[disabled],
    input::-webkit-datetime-edit-minute-field[disabled],
    input::-webkit-datetime-edit-second-field[disabled] {
    color: -internal-light-dark(GrayText, #000000);
    }

    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    @@ -1095,6 +1303,10 @@ a:-webkit-any-link:read-write {
    cursor: text;
    }

    a:-webkit-any-link:focus-visible {
    outline-offset: 1px;
    }

    /* HTML5 ruby elements */

    ruby, rt {
    @@ -1112,16 +1324,8 @@ ruby > rt {
    text-align: start;
    }

    rp {
    display: none;
    }

    /* other elements */

    noframes {
    display: none
    }

    frameset, frame {
    display: block
    }
    @@ -1142,31 +1346,39 @@ summary {
    display: block
    }

    summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    margin-inline-end: 0.4em;
    /*
    * https://html.spec.whatwg.org/C/#the-details-and-summary-elements
    * The specification doesn't have |details >| and |:first-of-type|.
    * We add them because:
    * - We had provided |summary { display: block }| for a long time,
    * there are sites using <summary> without details, and they
    * expect that <summary> is not a list-item.
    * - Firefox does so.
    */
    details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: disclosure-closed inside;
    }

    template {
    display: none
    details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
    }

    bdi, output {
    unicode-bidi: -webkit-isolate;
    unicode-bidi: isolate;
    }

    bdo {
    unicode-bidi: bidi-override;
    }

    textarea[dir=auto i] {
    unicode-bidi: -webkit-plaintext;
    unicode-bidi: plaintext;
    }

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

    dialog {
  5. ambidexterich revised this gist Jan 11, 2021. 1 changed file with 303 additions and 178 deletions.
    481 changes: 303 additions & 178 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    @namespace "http://www.w3.org/1999/xhtml";

    html {
    display: block
    display: block;
    }

    /* children of the <head> element all have display:none */
    @@ -65,10 +65,10 @@ body:-webkit-full-page-media {

    p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 1__qem;
    margin-block-end: 1__qem;
    margin-inline-start: 0;
    margin-inline-end: 0;
    }

    div {
    @@ -85,6 +85,7 @@ article, aside, footer, header, hgroup, main, nav, section {

    marquee {
    display: inline-block;
    width: -webkit-fill-available;
    }

    address {
    @@ -93,10 +94,10 @@ address {

    blockquote {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    }

    figcaption {
    @@ -105,10 +106,10 @@ figcaption {

    figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    }

    q {
    @@ -131,10 +132,12 @@ center {

    hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    border-style: inset;
    border-width: 1px
    }
    @@ -152,89 +155,89 @@ video {
    h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 0.67__qem;
    margin-block-end: 0.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    margin-block-start: 0.83__qem;
    margin-block-end: 0.83em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.00em;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    margin-block-start: 1.33__qem;
    margin-block-end: 1.33em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    margin-block-start: 1.67__qem;
    margin-block-end: 1.67em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    margin-block-start: 2.33__qem;
    margin-block-end: 2.33em;
    }

    h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 0.83__qem;
    margin-block-end: 0.83em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    h4 {
    display: block;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 1.33__qem;
    margin-block-end: 1.33em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    h5 {
    display: block;
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 1.67__qem;
    margin-block-end: 1.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    h6 {
    display: block;
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 2.33__qem;
    margin-block-end: 2.33em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold
    }

    @@ -244,7 +247,9 @@ table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
    border-color: gray;
    box-sizing: border-box;
    text-indent: initial
    }

    thead {
    @@ -290,7 +295,8 @@ td, th {
    }

    th {
    font-weight: bold
    font-weight: bold;
    text-align: -internal-center
    }

    caption {
    @@ -303,21 +309,21 @@ caption {
    ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px
    }

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

    li {
    @@ -335,24 +341,24 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul {

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

    dl {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-block-start: 1__qem;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    }

    dt {
    display: block
    }

    ol ul, ul ol, ul ul, ol ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0
    margin-block-start: 0;
    margin-block-end: 0
    }

    /* form elements */
    @@ -362,42 +368,47 @@ form {
    margin-top: 0__qem;
    }

    :-webkit-any(table, thead, tbody, tfoot, tr) > form:-internal-is-html {
    display: none !important;
    }

    label {
    cursor: default;
    }

    legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border: none
    }

    fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    border: 2px groove ThreeDFace;
    min-width: -webkit-min-content;
    min-inline-size: min-content;
    }

    button {
    -webkit-appearance: button;
    appearance: auto;
    }

    /* Form controls don't go vertical. */
    input, textarea, keygen, select, button, meter, progress {
    input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
    }

    input, textarea, keygen, select, button {
    input, textarea, select, button {
    margin: 0__qem;
    font: -webkit-small-control;
    color: initial;
    text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    @@ -412,40 +423,38 @@ input[type="hidden" i] {
    display: none
    }

    input, input[type="password" i], input[type="search" i] {
    -webkit-appearance: textfield;
    input {
    appearance: auto;
    padding: 1px;
    background-color: white;
    background-color: -internal-light-dark(white, black);
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
    cursor: text;
    }

    input[type="search" i] {
    -webkit-appearance: searchfield;
    appearance: auto;
    box-sizing: border-box;
    }

    input::-webkit-textfield-decoration-container {
    display: flex;
    display: flex !important;
    align-items: center;
    -webkit-user-modify: read-only !important;
    content: none !important;
    }

    input[type="search" i]::-webkit-textfield-decoration-container {
    direction: ltr;
    writing-mode: inherit !important;
    -internal-align-self-block: center;
    }

    input::-webkit-clear-button {
    -webkit-appearance: searchfield-cancel-button;
    appearance: auto;
    display: inline-block;
    cursor: default;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 2px;
    margin-inline-start: 2px;
    opacity: 0;
    pionter-events: none;
    pointer-events: none;
    }

    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
    @@ -454,45 +463,28 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
    }

    input[type="search" i]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    appearance: auto;
    display: block;
    cursor: default;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 1px;
    margin-inline-start: 1px;
    opacity: 0;
    pointer-events: none;
    user-select: none !important;
    }

    input[type="search" i]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: auto;
    }

    input[type="search" i]::-webkit-search-decoration {
    -webkit-appearance: searchfield-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
    }

    input[type="search" i]::-webkit-search-results-decoration {
    -webkit-appearance: searchfield-results-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
    }

    input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    appearance: auto;
    display: inline-block;
    cursor: default;
    flex: none;
    align-self: stretch;
    -webkit-user-select: none;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    pointer-events: none;
    @@ -503,115 +495,172 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    pointer-events: auto;
    }

    keygen, select {
    select {
    border-radius: 5px;
    }

    keygen::-webkit-keygen-select {
    margin: 0px;
    }

    textarea {
    -webkit-appearance: textarea;
    background-color: white;
    appearance: auto;
    background-color: -internal-light-dark(white, black);
    border: 1px solid;
    column-count: initial !important;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    cursor: text;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    }

    ::-webkit-input-placeholder {
    -webkit-text-security: none;
    color: darkGray;
    display: block !important;
    color: #757575;
    direction: inherit !important;
    pointer-events: none !important;
    text-orientation: inherit !important;
    writing-mode: inherit !important;
    }

    input::-webkit-input-placeholder {
    text-overflow: inherit;
    line-height: initial;
    white-space: pre;
    word-wrap: normal;
    overflow: hidden;
    -webkit-user-modify: read-only !important;
    }

    input::-internal-input-suggested {
    text-overflow: inherit;
    white-space: nowrap;
    overflow: hidden;
    }

    input::-internal-input-suggested,
    textarea::-internal-input-suggested {
    font: -webkit-small-control !important;
    /* Prevent that overflow affects the scrollable area. Without this,
    LayoutBox::*Scroll{Height,Width}() may determine the scroll width/height
    from the scrollable area instead of from the overrides in
    LayoutTextControl{Single,Multi}Line::Scroll{Height,Width}(). */
    overflow: hidden !important;
    overflow-anchor: none;
    }

    input[type="password" i] {
    -webkit-text-security: disc !important;
    }

    input[type="password" i]::-internal-input-suggested {
    -webkit-text-security: disc !important;
    }

    input[type="hidden" i], input[type="image" i], input[type="file" i] {
    -webkit-appearance: initial;
    -webkit-appearance: initial; /* AutoAppearanceFor() should match to this. */
    padding: initial;
    background-color: initial;
    border: initial;
    cursor: default;
    }

    input[type="file" i] {
    align-items: baseline;
    color: inherit;
    overflow: hidden !important;
    text-align: start !important;
    text-overflow: ellipsis;
    white-space: pre;
    }

    input[type="image" i] {
    cursor: pointer;
    }

    /* TODO(crbug.com/880258): Use different styles for
    `-internal-autofill-previewed` and `-internal-autofill-selected`. */
    input:-internal-autofill-previewed,
    textarea:-internal-autofill-previewed,
    select:-internal-autofill-previewed {
    -webkit-appearance:menulist-button;
    background-color: #E8F0FE !important;
    background-image:none !important;
    color: -internal-light-dark(black, white) !important;
    }

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FAFFBD !important;
    background-image:none !important;
    color: #000000 !important;
    input:-internal-autofill-selected,
    textarea:-internal-autofill-selected,
    select:-internal-autofill-selected {
    -webkit-appearance:menulist-button;
    background-color: #E8F0FE !important;
    background-image:none !important;
    color: -internal-light-dark(black, white) !important;
    }

    input[type="radio" i], input[type="checkbox" i] {
    margin: 3px 0.5ex;
    padding: initial;
    background-color: initial;
    border: initial;
    cursor: default;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i] {
    -webkit-appearance: push-button;
    -internal-empty-line-height: fabricated;
    appearance: auto;
    -webkit-user-select: none;
    white-space: pre
    }

    input[type="file" i]::-webkit-file-upload-button {
    -webkit-appearance: push-button;
    appearance: auto;
    -webkit-user-modify: read-only !important;
    white-space: nowrap;
    margin: 0;
    margin-inline-end: 4px;
    font-size: inherit;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: ButtonText;
    color: -internal-light-dark(ButtonText, #AAAAAA);
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
    }

    input[type="range" i] {
    -webkit-appearance: slider-horizontal;
    appearance: auto; /* AutoAppearanceFor() should match to this. */
    padding: initial;
    border: initial;
    margin: 2px;
    color: #909090;
    cursor: default;
    }

    input[type="range" i]::-webkit-slider-container, input[type="range" i]::-webkit-media-slider-container {
    appearance: inherit;
    flex: 1;
    min-inline-size: 0;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: flex;
    -webkit-align-contents: center;
    }

    input[type="range" i]:-internal-has-datalist::-webkit-slider-container {
    /*
    * See LayoutThemeDefault. "22px" is
    * 2 * (SliderTickOffsetFromTrackCenter() + SliderTickSize().Height()).
    */
    min-block-size: 22px;
    }

    input[type="range" i]::-webkit-slider-runnable-track {
    flex: 1;
    min-inline-size: 0;
    -webkit-align-self: center;

    box-sizing: border-box;
    @@ -620,17 +669,17 @@ input[type="range" i]::-webkit-slider-runnable-track {
    }

    input[type="range" i]::-webkit-slider-thumb, input[type="range" i]::-webkit-media-slider-thumb {
    -webkit-appearance: sliderthumb-horizontal;
    appearance: auto;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
    }

    input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled,
    input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled,
    select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
    select:disabled, optgroup:disabled, option:disabled,
    select[disabled]>option {
    color: GrayText
    color: -internal-light-dark(GrayText, #aaa);
    }

    input[type="button" i]:active, input[type="submit" i]:active, input[type="reset" i]:active, input[type="file" i]:active::-webkit-file-upload-button, button:active {
    @@ -641,8 +690,13 @@ input[type="button" i]:active:disabled, input[type="submit" i]:active:disabled,
    border-style: outset
    }

    input:disabled, textarea:disabled {
    color: -internal-light-dark(#545454, #aaa);
    cursor: default;
    }

    option:-internal-spatial-navigation-focus {
    outline: black dashed 1px;
    outline: -internal-light-dark(black, white) dashed 1px;
    outline-offset: -1px;
    }

    @@ -651,31 +705,36 @@ datalist {
    }

    area {
    display: inline
    display: inline;
    }

    area:-webkit-any-link {
    cursor: pointer;
    }

    param {
    display: none
    }

    input[type="checkbox" i] {
    -webkit-appearance: checkbox;
    appearance: auto;
    box-sizing: border-box;
    }

    input[type="radio" i] {
    -webkit-appearance: radio;
    appearance: auto;
    box-sizing: border-box;
    }

    input[type="color" i] {
    -webkit-appearance: square-button;
    appearance: auto;
    width: 44px;
    height: 23px;
    background-color: ButtonFace;
    /* Same as native_theme_base. */
    border: 1px #a9a9a9 solid;
    padding: 1px 2px;
    cursor: default;
    }

    input[type="color" i]::-webkit-color-swatch-wrapper {
    @@ -691,18 +750,19 @@ input[type="color" i]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    flex: 1;
    min-width: 0;
    -webkit-user-modify: read-only !important;
    }

    input[type="color" i][list] {
    -webkit-appearance: menulist;
    -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */
    width: 88px;
    height: 23px
    }

    input[type="color" i][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
    padding-inline-start: 8px;
    padding-inline-end: 24px;
    }

    input[type="color" i][list]::-webkit-color-swatch {
    @@ -716,6 +776,7 @@ input::-webkit-calendar-picker-indicator {
    padding: 0.17em 0.34em;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    }

    @@ -751,26 +812,29 @@ input[readonly]::-webkit-calendar-picker-indicator {
    }

    select {
    -webkit-appearance: menulist;
    -webkit-appearance: menulist; /* AutoAppearanceFor() should match to this. */
    box-sizing: border-box;
    align-items: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    color: -internal-light-dark(black, white);
    background-color: -internal-light-dark(white, black);
    cursor: default;
    }

    select:not(:-internal-list-box) {
    overflow: visible !important;
    }

    select:-internal-list-box {
    -webkit-appearance: listbox;
    -webkit-appearance: listbox; /* AutoAppearanceFor() should match to this. */
    align-items: flex-start;
    border: 1px inset gray;
    border-radius: initial;
    overflow-x: hidden;
    overflow-y: scroll;
    vertical-align: text-bottom;
    -webkit-user-select: none;
    white-space: nowrap;
    }

    @@ -783,10 +847,14 @@ option {
    font-weight: normal;
    display: block;
    padding: 0 2px 1px 2px;
    white-space: pre;
    white-space: nowrap;
    min-height: 1.2em;
    }

    select:-internal-list-box optgroup option:before {
    content: "\00a0\00a0\00a0\00a0";;
    }

    select:-internal-list-box option,
    select:-internal-list-box optgroup {
    line-height: initial !important;
    @@ -797,6 +865,10 @@ select:-internal-list-box:focus option:checked {
    color: -internal-active-list-box-selection-text !important;
    }

    select:-internal-list-box:focus option:checked:disabled {
    background-color: -internal-inactive-list-box-selection !important;
    }

    select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection !important;
    color: -internal-inactive-list-box-selection-text !important;
    @@ -807,6 +879,16 @@ select:-internal-list-box option:checked:disabled {
    color: gray !important;
    }

    select:-internal-list-box hr {
    border-style: none;
    margin-block-start: 0.5em;
    margin-block-end: 0;
    }

    select:-internal-list-box:focus option:-internal-multi-select-focus {
    outline: auto 1px -webkit-focus-ring-color;
    outline-offset: -1px;
    }

    output {
    display: inline;
    @@ -815,22 +897,32 @@ output {
    /* meter */

    meter {
    -webkit-appearance: meter;
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
    -webkit-user-modify: read-only !important;
    }

    meter::-webkit-meter-inner-element {
    -webkit-appearance: inherit;
    appearance: inherit;
    box-sizing: inherit;
    display: none;
    -webkit-user-modify: read-only !important;
    height: 100%;
    width: 100%;
    }

    meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
    display: block;
    }

    meter::-internal-fallback:-internal-shadow-host-has-appearance {
    display: none;
    }

    meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    height: 100%;
    @@ -863,7 +955,7 @@ meter::-webkit-meter-even-less-good-value {
    /* progress */

    progress {
    -webkit-appearance: progress-bar;
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    @@ -872,7 +964,6 @@ progress {
    }

    progress::-webkit-progress-inner-element {
    -webkit-appearance: inherit;
    box-sizing: inherit;
    -webkit-user-modify: read-only;
    height: 100%;
    @@ -901,6 +992,10 @@ u, ins {
    text-decoration: underline
    }

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

    strong, b {
    font-weight: bold
    }
    @@ -953,20 +1048,24 @@ nobr {

    /* states */

    :focus {
    outline: auto 5px -webkit-focus-ring-color
    :-internal-spatial-navigation-interest {
    outline: auto 1px -webkit-focus-ring-color !important;
    box-shadow: none !important
    }

    :focus {
    outline: auto 1px -webkit-focus-ring-color
    }

    /* Read-only text fields do not show a focus ring but do still receive focus */
    html:focus, body:focus, input[readonly]:focus {
    html:focus, body:focus {
    outline: none
    }

    applet:focus, embed:focus, iframe:focus, object:focus {
    embed:focus, iframe:focus, object:focus {
    outline: none
    }
    input:focus, textarea:focus, keygen:focus, select:focus {

    input:focus, textarea:focus, select:focus {
    outline-offset: -2px
    }

    @@ -977,22 +1076,25 @@ input[type="hidden" i]:focus,
    input[type="image" i]:focus,
    input[type="radio" i]:focus,
    input[type="reset" i]:focus,
    input[type="search" i]:focus,
    input[type="submit" i]:focus,
    input[type="file" i]:focus::-webkit-file-upload-button {
    outline-offset: 0
    }

    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    cursor: pointer;
    }

    a:-webkit-any-link:active {
    color: -webkit-activelink
    }

    a:-webkit-any-link:read-write {
    cursor: text;
    }

    /* HTML5 ruby elements */

    ruby, rt {
    @@ -1010,7 +1112,7 @@ ruby > rt {
    text-align: start;
    }

    ruby > rp {
    rp {
    display: none;
    }

    @@ -1044,7 +1146,7 @@ summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    -webkit-margin-end: 0.4em;
    margin-inline-end: 0.4em;
    }

    template {
    @@ -1068,18 +1170,31 @@ dialog:not([open]) {
    }

    dialog {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black
    background: -internal-light-dark(white, black);
    color: -internal-light-dark(black, white);
    }

    dialog:-internal-modal {
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: 0;
    /* 6px + 2em = border + padding, as by default box-sizing is content-box. */
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
    }

    /* TODO(foolip): In the Fullscreen spec, there's a ::backdrop block with the
    properties shared with :fullscreen::backdrop (see fullscreen.css). */
    dialog::backdrop {
    position: fixed;
    top: 0;
    @@ -1089,6 +1204,10 @@ dialog::backdrop {
    background: rgba(0,0,0,0.1)
    }

    slot {
    display: contents;
    }

    /* page */

    @page {
    @@ -1099,4 +1218,10 @@ dialog::backdrop {
    border-width: 0px;
    }

    /* noscript is handled internally, as it depends on settings. */
    /* Allows thead sections to print at the top of each page. */
    @media print {
    thead { break-inside:avoid; }
    tfoot { break-inside:avoid; }
    }

    /* noscript is handled internally, as it depends on settings. */
  6. ambidexterich created this gist Nov 7, 2014.
    1,102 changes: 1,102 additions & 0 deletions html.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1102 @@
    /*
    * The default style sheet used to render HTML.
    *
    * Copyright (C) 2000 Lars Knoll ([email protected])
    * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
    *
    * This library is free software; you can redistribute it and/or
    * modify it under the terms of the GNU Library General Public
    * License as published by the Free Software Foundation; either
    * version 2 of the License, or (at your option) any later version.
    *
    * This library is distributed in the hope that it will be useful,
    * but WITHOUT ANY WARRANTY; without even the implied warranty of
    * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    * Library General Public License for more details.
    *
    * You should have received a copy of the GNU Library General Public License
    * along with this library; see the file COPYING.LIB. If not, write to
    * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
    * Boston, MA 02110-1301, USA.
    *
    */

    @namespace "http://www.w3.org/1999/xhtml";

    html {
    display: block
    }

    /* children of the <head> element all have display:none */
    head {
    display: none
    }

    meta {
    display: none
    }

    title {
    display: none
    }

    link {
    display: none
    }

    style {
    display: none
    }

    script {
    display: none
    }

    /* generic block-level elements */

    body {
    display: block;
    margin: 8px
    }

    body:-webkit-full-page-media {
    background-color: rgb(0, 0, 0)
    }

    p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    }

    div {
    display: block
    }

    layer {
    display: block
    }

    article, aside, footer, header, hgroup, main, nav, section {
    display: block
    }

    marquee {
    display: inline-block;
    }

    address {
    display: block
    }

    blockquote {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
    }

    figcaption {
    display: block
    }

    figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
    }

    q {
    display: inline
    }

    q:before {
    content: open-quote;
    }

    q:after {
    content: close-quote;
    }

    center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center
    }

    hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px
    }

    map {
    display: inline
    }

    video {
    object-fit: contain;
    }

    /* heading elements */

    h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.00em;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    }

    :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    }

    h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    h4 {
    display: block;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    h5 {
    display: block;
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    h6 {
    display: block;
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
    }

    /* tables */

    table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
    }

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

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

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

    /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
    table > tr {
    vertical-align: middle;
    }

    col {
    display: table-column
    }

    colgroup {
    display: table-column-group
    }

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

    td, th {
    display: table-cell;
    vertical-align: inherit
    }

    th {
    font-weight: bold
    }

    caption {
    display: table-caption;
    text-align: -webkit-center
    }

    /* lists */

    ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
    }

    ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
    }

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

    ul ul, ol ul {
    list-style-type: circle
    }

    ol ol ul, ol ul ul, ul ol ul, ul ul ul {
    list-style-type: square
    }

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

    dl {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    }

    dt {
    display: block
    }

    ol ul, ul ol, ul ul, ol ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0
    }

    /* form elements */

    form {
    display: block;
    margin-top: 0__qem;
    }

    label {
    cursor: default;
    }

    legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border: none
    }

    fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove ThreeDFace;
    min-width: -webkit-min-content;
    }

    button {
    -webkit-appearance: button;
    }

    /* Form controls don't go vertical. */
    input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
    }

    input, textarea, keygen, select, button {
    margin: 0__qem;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    }

    input[type="hidden" i] {
    display: none
    }

    input, input[type="password" i], input[type="search" i] {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
    }

    input[type="search" i] {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
    }

    input::-webkit-textfield-decoration-container {
    display: flex;
    align-items: center;
    -webkit-user-modify: read-only !important;
    content: none !important;
    }

    input[type="search" i]::-webkit-textfield-decoration-container {
    direction: ltr;
    }

    input::-webkit-clear-button {
    -webkit-appearance: searchfield-cancel-button;
    display: inline-block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 2px;
    opacity: 0;
    pionter-events: none;
    }

    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
    opacity: 1;
    pointer-events: auto;
    }

    input[type="search" i]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 1px;
    opacity: 0;
    pointer-events: none;
    }

    input[type="search" i]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: auto;
    }

    input[type="search" i]::-webkit-search-decoration {
    -webkit-appearance: searchfield-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
    }

    input[type="search" i]::-webkit-search-results-decoration {
    -webkit-appearance: searchfield-results-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
    }

    input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: none;
    align-self: stretch;
    -webkit-user-select: none;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    pointer-events: none;
    }

    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    opacity: 1;
    pointer-events: auto;
    }

    keygen, select {
    border-radius: 5px;
    }

    keygen::-webkit-keygen-select {
    margin: 0px;
    }

    textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    }

    ::-webkit-input-placeholder {
    -webkit-text-security: none;
    color: darkGray;
    display: block !important;
    pointer-events: none !important;
    }

    input::-webkit-input-placeholder {
    white-space: pre;
    word-wrap: normal;
    overflow: hidden;
    -webkit-user-modify: read-only !important;
    }

    input[type="password" i] {
    -webkit-text-security: disc !important;
    }

    input[type="hidden" i], input[type="image" i], input[type="file" i] {
    -webkit-appearance: initial;
    padding: initial;
    background-color: initial;
    border: initial;
    }

    input[type="file" i] {
    align-items: baseline;
    color: inherit;
    text-align: start !important;
    }

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FAFFBD !important;
    background-image:none !important;
    color: #000000 !important;
    }

    input[type="radio" i], input[type="checkbox" i] {
    margin: 3px 0.5ex;
    padding: initial;
    background-color: initial;
    border: initial;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i] {
    -webkit-appearance: push-button;
    -webkit-user-select: none;
    white-space: pre
    }

    input[type="file" i]::-webkit-file-upload-button {
    -webkit-appearance: push-button;
    -webkit-user-modify: read-only !important;
    white-space: nowrap;
    margin: 0;
    font-size: inherit;
    }

    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
    }

    input[type="range" i] {
    -webkit-appearance: slider-horizontal;
    padding: initial;
    border: initial;
    margin: 2px;
    color: #909090;
    }

    input[type="range" i]::-webkit-slider-container, input[type="range" i]::-webkit-media-slider-container {
    flex: 1;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: flex;
    -webkit-align-contents: center;
    }

    input[type="range" i]::-webkit-slider-runnable-track {
    flex: 1;
    -webkit-align-self: center;

    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
    }

    input[type="range" i]::-webkit-slider-thumb, input[type="range" i]::-webkit-media-slider-thumb {
    -webkit-appearance: sliderthumb-horizontal;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
    }

    input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled,
    input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled,
    select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
    select[disabled]>option {
    color: GrayText
    }

    input[type="button" i]:active, input[type="submit" i]:active, input[type="reset" i]:active, input[type="file" i]:active::-webkit-file-upload-button, button:active {
    border-style: inset
    }

    input[type="button" i]:active:disabled, input[type="submit" i]:active:disabled, input[type="reset" i]:active:disabled, input[type="file" i]:active:disabled::-webkit-file-upload-button, button:active:disabled {
    border-style: outset
    }

    option:-internal-spatial-navigation-focus {
    outline: black dashed 1px;
    outline-offset: -1px;
    }

    datalist {
    display: none
    }

    area {
    display: inline
    }

    param {
    display: none
    }

    input[type="checkbox" i] {
    -webkit-appearance: checkbox;
    box-sizing: border-box;
    }

    input[type="radio" i] {
    -webkit-appearance: radio;
    box-sizing: border-box;
    }

    input[type="color" i] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
    background-color: ButtonFace;
    /* Same as native_theme_base. */
    border: 1px #a9a9a9 solid;
    padding: 1px 2px;
    }

    input[type="color" i]::-webkit-color-swatch-wrapper {
    display:flex;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    width: 100%;
    height: 100%
    }

    input[type="color" i]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    flex: 1;
    -webkit-user-modify: read-only !important;
    }

    input[type="color" i][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px
    }

    input[type="color" i][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
    }

    input[type="color" i][list]::-webkit-color-swatch {
    border-color: #000000;
    }

    input::-webkit-calendar-picker-indicator {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    padding: 0.17em 0.34em;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    pointer-events: none;
    }

    input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;
    }

    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-calendar-picker-indicator,
    input::-webkit-calendar-picker-indicator:focus {
    opacity: 1;
    pointer-events: auto;
    }

    input[type="date" i]:disabled::-webkit-clear-button,
    input[type="date" i]:disabled::-webkit-inner-spin-button,
    input[type="datetime-local" i]:disabled::-webkit-clear-button,
    input[type="datetime-local" i]:disabled::-webkit-inner-spin-button,
    input[type="month" i]:disabled::-webkit-clear-button,
    input[type="month" i]:disabled::-webkit-inner-spin-button,
    input[type="week" i]:disabled::-webkit-clear-button,
    input[type="week" i]:disabled::-webkit-inner-spin-button,
    input:disabled::-webkit-calendar-picker-indicator,
    input[type="date" i][readonly]::-webkit-clear-button,
    input[type="date" i][readonly]::-webkit-inner-spin-button,
    input[type="datetime-local" i][readonly]::-webkit-clear-button,
    input[type="datetime-local" i][readonly]::-webkit-inner-spin-button,
    input[type="month" i][readonly]::-webkit-clear-button,
    input[type="month" i][readonly]::-webkit-inner-spin-button,
    input[type="week" i][readonly]::-webkit-clear-button,
    input[type="week" i][readonly]::-webkit-inner-spin-button,
    input[readonly]::-webkit-calendar-picker-indicator {
    visibility: hidden;
    }

    select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
    }

    select:-internal-list-box {
    -webkit-appearance: listbox;
    align-items: flex-start;
    border: 1px inset gray;
    border-radius: initial;
    overflow-x: hidden;
    overflow-y: scroll;
    vertical-align: text-bottom;
    -webkit-user-select: none;
    white-space: nowrap;
    }

    optgroup {
    font-weight: bolder;
    display: block;
    }

    option {
    font-weight: normal;
    display: block;
    padding: 0 2px 1px 2px;
    white-space: pre;
    min-height: 1.2em;
    }

    select:-internal-list-box option,
    select:-internal-list-box optgroup {
    line-height: initial !important;
    }

    select:-internal-list-box:focus option:checked {
    background-color: -internal-active-list-box-selection !important;
    color: -internal-active-list-box-selection-text !important;
    }

    select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection !important;
    color: -internal-inactive-list-box-selection-text !important;
    }

    select:-internal-list-box:disabled option:checked,
    select:-internal-list-box option:checked:disabled {
    color: gray !important;
    }


    output {
    display: inline;
    }

    /* meter */

    meter {
    -webkit-appearance: meter;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
    }

    meter::-webkit-meter-inner-element {
    -webkit-appearance: inherit;
    box-sizing: inherit;
    -webkit-user-modify: read-only !important;
    height: 100%;
    width: 100%;
    }

    meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    height: 100%;
    width: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    meter::-webkit-meter-optimum-value {
    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    /* progress */

    progress {
    -webkit-appearance: progress-bar;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
    }

    progress::-webkit-progress-inner-element {
    -webkit-appearance: inherit;
    box-sizing: inherit;
    -webkit-user-modify: read-only;
    height: 100%;
    width: 100%;
    }

    progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    progress::-webkit-progress-value {
    background-color: green;
    height: 100%;
    width: 50%; /* should be removed later */
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
    }

    /* inline elements */

    u, ins {
    text-decoration: underline
    }

    strong, b {
    font-weight: bold
    }

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

    tt, code, kbd, samp {
    font-family: monospace
    }

    pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
    }

    mark {
    background-color: yellow;
    color: black
    }

    big {
    font-size: larger
    }

    small {
    font-size: smaller
    }

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

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

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

    nobr {
    white-space: nowrap
    }

    /* states */

    :focus {
    outline: auto 5px -webkit-focus-ring-color
    }

    /* Read-only text fields do not show a focus ring but do still receive focus */
    html:focus, body:focus, input[readonly]:focus {
    outline: none
    }

    applet:focus, embed:focus, iframe:focus, object:focus {
    outline: none
    }

    input:focus, textarea:focus, keygen:focus, select:focus {
    outline-offset: -2px
    }

    input[type="button" i]:focus,
    input[type="checkbox" i]:focus,
    input[type="file" i]:focus,
    input[type="hidden" i]:focus,
    input[type="image" i]:focus,
    input[type="radio" i]:focus,
    input[type="reset" i]:focus,
    input[type="search" i]:focus,
    input[type="submit" i]:focus,
    input[type="file" i]:focus::-webkit-file-upload-button {
    outline-offset: 0
    }

    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    }

    a:-webkit-any-link:active {
    color: -webkit-activelink
    }

    /* HTML5 ruby elements */

    ruby, rt {
    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
    }

    rt {
    line-height: normal;
    -webkit-text-emphasis: none;
    }

    ruby > rt {
    display: block;
    font-size: 50%;
    text-align: start;
    }

    ruby > rp {
    display: none;
    }

    /* other elements */

    noframes {
    display: none
    }

    frameset, frame {
    display: block
    }

    frameset {
    border-color: inherit
    }

    iframe {
    border: 2px inset
    }

    details {
    display: block
    }

    summary {
    display: block
    }

    summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    -webkit-margin-end: 0.4em;
    }

    template {
    display: none
    }

    bdi, output {
    unicode-bidi: -webkit-isolate;
    }

    bdo {
    unicode-bidi: bidi-override;
    }

    textarea[dir=auto i] {
    unicode-bidi: -webkit-plaintext;
    }

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

    dialog {
    position: absolute;
    left: 0;
    right: 0;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black
    }

    dialog::backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.1)
    }

    /* page */

    @page {
    /* FIXME: Define the right default values for page properties. */
    size: auto;
    margin: auto;
    padding: 0px;
    border-width: 0px;
    }

    /* noscript is handled internally, as it depends on settings. */