/* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003-2025 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; color: CanvasText; } /* children of the
element all have display:none as below */ area, base, basefont, datalist, head, link, meta, noembed, noframes, param, rp, script, style, template, title { display: none; } /* generic block-level elements */ body { display: block; margin: 8px; } p { display: block; margin-block: 1__qem; margin-inline: 0; } address, article, aside, div, footer, header, hgroup, main, nav, search, section { display: block; } marquee { display: inline-block; text-align: initial; overflow: hidden !important; } blockquote { display: block; margin-block: 1__qem 1em; margin-inline: 40px; } figcaption { display: block; } figure { display: block; margin-block: 1em; margin-inline: 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; overflow: hidden; color: gray; margin-block: 0.5em; margin-inline: auto; border-style: inset; border-width: 1px; } abbr[title], acronym[title] { text-decoration: dotted underline; } /* ::backdrop */ ::backdrop { display: block; position: fixed; inset: 0; } /* dialog */ dialog { position: absolute; inset-inline: 0; width: fit-content; height: fit-content; margin: auto; border: solid; padding: 1em; background-color: Canvas; color: CanvasText; display: none; } dialog[open] { display: block; } dialog:modal { position: fixed; overflow: auto; inset-block: 0; max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em); visibility: visible; } dialog::backdrop { background: rgba(0, 0, 0, 0.1); } /* media elements */ body:-internal-media-document { background-color: rgb(38, 38, 38); } video { object-fit: contain; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY -webkit-tap-highlight-color: transparent; #endif content: normal !important; } /* As discussed in rdar://177547927, use standard by default as we iterate on the overall physically based rendering appearance */ #if defined(ENABLE_GPU_PROCESS_MODEL) && ENABLE_GPU_PROCESS_MODEL model { dynamic-range-limit: standard; } #endif audio { width: 200px; height: 25px; } audio:not([controls]) { display: none !important; } /* heading elements */ :heading { display: block; font-weight: bold; } :heading(1) { font-size: 2em; margin-block: 0.67__qem 0.67em; margin-inline: 0; } :heading(2) { font-size: 1.5em; margin-block: 0.83__qem 0.83em; margin-inline: 0; } :heading(3) { font-size: 1.17em; margin-block: 1__qem 1em; margin-inline: 0; } :heading(4) { margin-block: 1.33__qem 1.33em; margin-inline: 0; } :heading(5) { font-size: .83em; margin-block: 1.67__qem 1.67em; margin-inline: 0; } :heading(6, 7, 8, 9) { font-size: .67em; margin-block: 2.33__qem 2.33em; margin-inline: 0; } /* tables */ table { display: table; border-collapse: separate; border-spacing: 2px; text-indent: initial; box-sizing: border-box; } 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; text-align: -internal-th-center; } caption { display: table-caption; text-align: -webkit-center; } /* for table elements with form inside following rules should apply */ :is(table, thead, tbody, tfoot, tr) > form:-internal-html-document { display: none !important; } /* lists */ ul, menu, dir { display: block; list-style-type: disc; margin-block: 1__qem 1em; padding-inline-start: 40px; } ol { display: block; list-style-type: decimal; margin-block: 1__qem 1em; padding-inline-start: 40px; } li { display: list-item; text-align: match-parent; } /* The rightmost selector is written explicitly rather than with :is() to help with RuleSet bucketing.*/ :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: 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; } dd { display: block; margin-inline-start: 40px; } dl { display: block; margin-block: 1__qem 1em; } dt { display: block; } /* FIXME: this should also match ::before::marker and ::after::marker but we don't support this yet. When we do, we can remove the code specific to ::before and ::after in RenderListItem::computeMarkerStyle(), see bugs.webkit.org/b/218897. */ ::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: pre; text-transform: none; text-indent: 0px !important; } /* form elements */ form { display: block; margin-top: 0__qem; } label { cursor: default; } legend { padding-inline: 2px; border: none; } fieldset { display: block; margin-inline: 2px; padding-block: 0.35em 0.625em; padding-inline: 0.75em; border: 2px groove ThreeDFace; min-inline-size: min-content; } button { appearance: auto; } ::-internal-writing-suggestions { color: color-mix(currentColor 50%, transparent); } input, textarea, select, button { margin: 0__qem; #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) font: -webkit-small-control; #endif 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"] { display: none !important; } #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY textarea, #endif input { appearance: auto; color: CanvasText; background-color: Canvas; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border: 1px solid -apple-system-secondary-label; font: 11px system-ui; padding-block: 0.2em 0.3em; padding-inline: 0.5em; #else border: 2px inset gray; padding: 1px; #endif -webkit-rtl-ordering: logical; -webkit-user-select: text; cursor: auto; } @media (prefers-dark-interface) { input { background-color: transparent; } input::-internal-loading-auto-fill-button { background-image: url('data:image/svg+xml,'); } } input[type="search"] { box-sizing: border-box; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border: 1px solid -webkit-control-background; background-color: -apple-system-opaque-tertiary-fill; #endif } input::-webkit-textfield-decoration-container { display: flex; align-items: center; content: none !important; writing-mode: inherit !important; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-decoration { appearance: auto; display: block; flex: none; align-self: flex-start; margin-block: auto; margin-inline: 0; } input[type="search"]::-webkit-search-results-button { appearance: auto; display: block; flex: none; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY align-self: flex-start; margin-block: auto; margin-inline: 0; #endif } input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) { align-items: center; display: inline-flex; overflow: hidden; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border: 1px solid -webkit-control-background; font-family: system-ui; padding-block: 0.2em; padding-inline: 0.5em; #if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION background-color: rgba(0, 0, 0, 0.04); color: CanvasText; #else background-color: -apple-system-opaque-secondary-fill; color: -apple-system-blue; #endif /*defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */ #else outline: none; font-variant-numeric: tabular-nums; /* FIXME: Font features should be defined in a @font-feature-values rule, so that the feature setting is only applied to the system font. */ /* "ss03" enables the raised colon separator on the system font. */ font-feature-settings: "ss03"; #endif } #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):disabled { background-color: -apple-system-opaque-secondary-fill-disabled; color: -apple-system-tertiary-label; opacity: initial; } #endif input::-webkit-date-and-time-value { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY margin: 0px; text-align: center; inline-size: 100%; #else margin-block: 1px; margin-inline-start: 4px; margin-inline-end: 24px; white-space: pre; #endif } /* FIXME: Styling inner elements of the date control should be specific to input[type="date"]. */ input::-webkit-datetime-edit { display: inline-block; overflow: hidden; padding: 1px; } input::-webkit-datetime-edit-fields-wrapper { display: inline-block; white-space: pre; } input::-webkit-datetime-edit-year-field, input::-webkit-datetime-edit-month-field, input::-webkit-datetime-edit-day-field, input::-webkit-datetime-edit-hour-field, input::-webkit-datetime-edit-minute-field, input::-webkit-datetime-edit-second-field, input::-webkit-datetime-edit-millisecond-field, input::-webkit-datetime-edit-meridiem-field { display: inline-block; font: inherit !important; padding: 1px; text-align: center; } input::-webkit-datetime-edit-year-field:focus, input::-webkit-datetime-edit-month-field:focus, input::-webkit-datetime-edit-day-field:focus, input::-webkit-datetime-edit-hour-field:focus, input::-webkit-datetime-edit-minute-field:focus, input::-webkit-datetime-edit-second-field:focus, input::-webkit-datetime-edit-millisecond-field:focus, input::-webkit-datetime-edit-meridiem-field:focus { #if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA background-color: -apple-system-control-accent; border-radius: 3px; color: white; #else background-color: highlight; color: highlighttext; #endif outline: none; } input[disabled]::-webkit-datetime-edit-year-field, input[disabled]::-webkit-datetime-edit-month-field, input[disabled]::-webkit-datetime-edit-day-field, input[disabled]::-webkit-datetime-edit-hour-field, input[disabled]::-webkit-datetime-edit-minute-field, input[disabled]::-webkit-datetime-edit-second-field, input[disabled]::-webkit-datetime-edit-millisecond-field, input[disabled]::-webkit-datetime-edit-meridiem-field, input[disabled]::-webkit-datetime-edit-text { color: GrayText; } input::-webkit-datetime-edit-text { display: inline; } input::-webkit-inner-spin-button { appearance: auto; display: block; position: relative; cursor: default; /* This height property is ignored for input type "number" and others which * use RenderTextControlSingleLine as renderer which sets height of spin * button in layout(). */ height: 1.5em; flex: none; -webkit-user-select: none; } input::-webkit-strong-password-auto-fill-button { flex-shrink: 1 !important; font-family: -apple-system !important; -webkit-text-security: none !important; -webkit-user-select: none !important; pointer-events: none !important; text-align: right !important; color: rgba(0, 0, 0, 0.8) !important; padding-inline-start: 6px !important; white-space: nowrap !important; } input::-webkit-credentials-auto-fill-button { #if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 26 26"%3E%3Cpath d%3D"m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z" fill%3D"%23e5e5e5" opacity%3D".64"%2F%3E%3Cpath d%3D"m9.838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327z" opacity%3D".78"%2F%3E%3Cpath d%3D"m19.091 15.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073-.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z" opacity%3D".75"%2F%3E%3C%2Fsvg%3E'); width: 24px; height: 24px; margin-inline: 2px 1px; mix-blend-mode: luminosity; #else mask-image: url('data:image/svg+xml,'); mask-size: 22px 12px; width: 22px; height: 12px; margin-inline: 3px 2px; background-color: black; #endif flex: none; -webkit-user-select: none; } input::-webkit-credentials-auto-fill-button:hover { #if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 26 26"%3E%3Cpath d%3D"M8.692 1h8.617c2.675 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.622.801H8.692c-2.675 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978 1.29-1.745 2.268-2.268.978-.523 1.948-.801 4.622-.801V1Z" fill%3D"%23e5e5e5" fill-opacity%3D".7"%2F%3E%3Cpath fill-opacity%3D".15" d%3D"M17.309 1c2.675 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.622.801H8.692c-2.675 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978 1.29-1.745 2.268-2.268.978-.523 1.948-.801 4.622-.801L17.309 1ZM9.692 2l-1 .001c-2.28768403 0-3.2042805.17686116-4.15042927.68282824-.80370939.42979551-1.42794698 1.0540331-1.85774249 1.85774249C2.17772202 5.48797969 2.001 6.40369128 2.001 8.692v8.616c0 2.287684.17686116 3.2042805.68282824 4.1504293.42979551.8037094 1.0540331 1.4279469 1.85774249 1.8577425C5.48797969 23.822278 6.40369128 23.999 8.692 23.999h8.617c2.287684 0 3.2042805-.1768612 4.1504293-.6828282.8037094-.4297956 1.4279469-1.0540331 1.8577425-1.8577425C23.823278 20.5120203 24 19.5963087 24 17.308V8.691c0-2.28768403-.1768612-3.2042805-.6828282-4.15042927-.4297956-.80370939-1.0540331-1.42794698-1.8577425-1.85774249C20.5130203 2.17672202 19.5973087 2 17.309 2H9.692Z" fill%3D"%23e6e6e6"%2F%3E%3Cpath d%3D"M9.838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327zm9.253 11.096c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073-.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z"%2F%3E%3C%2Fsvg%3E'); #else background-color: rgb(0, 122, 255); #endif } input::-webkit-credentials-auto-fill-button:active { #if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20fill%3D%22%23B2B2B2%22%20fill-opacity%3D%22.6%22%20d%3D%22M8.692%201h8.617c2.675%200%203.644.278%204.622.801.978.523%201.745%201.29%202.268%202.268.523.978.801%201.948.801%204.622v8.617c0%202.675-.278%203.644-.801%204.622-.523.978-1.29%201.745-2.268%202.268-.978.523-1.948.801-4.622.801H8.692c-2.675%200-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978%201.29-1.745%202.268-2.268.978-.523%201.948-.801%204.622-.801V1Z%22%2F%3E%3Cpath%20fill%3D%22%23B2B2B2%22%20fill-opacity%3D%22.15%22%20d%3D%22M17.309%201c2.675%200%203.644.278%204.622.801.978.523%201.745%201.29%202.268%202.268.523.978.801%201.948.801%204.622v8.617c0%202.675-.278%203.644-.801%204.622-.523.978-1.29%201.745-2.268%202.268-.978.523-1.948.801-4.622.801H8.692c-2.675%200-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978%201.29-1.745%202.268-2.268.978-.523%201.948-.801%204.622-.801L17.309%201ZM9.692%202l-1%20.001c-2.28768403%200-3.2042805.17686116-4.15042927.68282824-.80370939.42979551-1.42794698%201.0540331-1.85774249%201.85774249C2.17772202%205.48797969%202.001%206.40369128%202.001%208.692v8.616c0%202.287684.17686116%203.2042805.68282824%204.1504293.42979551.8037094%201.0540331%201.4279469%201.85774249%201.8577425C5.48797969%2023.822278%206.40369128%2023.999%208.692%2023.999h8.617c2.287684%200%203.2042805-.1768612%204.1504293-.6828282.8037094-.4297956%201.4279469-1.0540331%201.8577425-1.8577425C23.823278%2020.5120203%2024%2019.5963087%2024%2017.308V8.691c0-2.28768403-.1768612-3.2042805-.6828282-4.15042927-.4297956-.80370939-1.0540331-1.42794698-1.8577425-1.85774249C20.5130203%202.17672202%2019.5973087%202%2017.309%202H9.692Z%22%2F%3E%3Cpath%20d%3D%22M9.838%208.318c-.308%200-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303%200%20.564.109.782.327s.327.48.327.785c0%20.306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59%200-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904%201.341-.326%201.055-.326%201.641c0%20.571.106%201.112.317%201.622s.51.961.896%201.352.841.698%201.366.918v6.082c0%20.101.018.196.054.287s.092.173.167.247l1.122%201.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083%201.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411%201.644-.964%202.142-1.66.499-.696.748-1.472.748-2.329%200-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327zM19.091%2015.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46%200-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187%200-.352.073-.495.22l-2.165%202.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122%200-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34%200%20.09.015.173.046.248s.078.146.14.212l2.467%202.521c.171.171.36.256.565.256z%22%2F%3E%3C%2Fsvg%3E'); #else background-color: rgb(0, 60, 219); #endif } input::-webkit-contacts-auto-fill-button { mask-image: url('data:image/svg+xml,'); mask-size: 22px 12px; width: 22px; height: 12px; margin-inline: 3px 2px; background-color: black; flex: none; -webkit-user-select: none; } input::-webkit-contacts-auto-fill-button:hover { background-color: rgb(0, 122, 255); } input::-webkit-contacts-auto-fill-button:active { background-color: rgb(0, 60, 219); } input::-webkit-credit-card-auto-fill-button { mask-image: url('data:image/svg+xml,'); mask-size: 22px 12px; width: 22px; height: 12px; margin-inline: 3px 2px; background-color: black; flex: none; -webkit-user-select: none; } input::-webkit-credit-card-auto-fill-button:hover { background-color: rgb(0, 122, 255); } input::-webkit-credit-card-auto-fill-button:active { background-color: rgb(0, 60, 219); } input::-internal-loading-auto-fill-button { background-image: url('data:image/svg+xml,'); width: 22px; height: 12px; margin-inline: 3px 2px; flex: none; -webkit-user-select: none; } input::-webkit-caps-lock-indicator { content: url('data:image/svg+xml,'); max-width: 17px; align-self: stretch; flex: none; -webkit-user-select: none; } input::-webkit-list-button { appearance: auto; display: block; position: relative; cursor: default; align-self: stretch; flex: none; -webkit-user-select: none; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY /* Make it easier to hit the button on iOS */ padding: 7px; margin: -7px; #else block-size: 100%; #endif } textarea { appearance: auto; #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) color: CanvasText; background-color: Canvas; border: 1px solid; -webkit-rtl-ordering: logical; -webkit-user-select: text; padding: 2px; #else -webkit-nbsp-mode: space; line-break: after-white-space; /* On iOS we want to inherit the left and right padding for consistency with other form controls (e.g. ). We want to override the top and bottom padding to ensure we have a symmetric look for text areas. */ padding-block: 2px; #endif resize: -internal-textarea-auto; cursor: auto; white-space: pre-wrap; word-wrap: break-word; } ::placeholder { -webkit-text-security: none; color: darkGray; direction: inherit !important; pointer-events: none !important; text-orientation: inherit !important; writing-mode: inherit !important; position: static !important; } input::placeholder { white-space: pre; word-wrap: normal; overflow: hidden; line-height: initial !important; } input:disabled, textarea:disabled { color: color-mix(CanvasText 66%, Canvas); } input:is([type="hidden"], [type="image"], [type="file"]) { appearance: initial; padding: initial; background-color: initial; border: initial; } input[type="file"] { align-items: baseline; color: inherit; text-align: start !important; } input:-webkit-autofill-and-obscured { -webkit-text-security: disc !important; } input:-webkit-autofill-strong-password { -webkit-user-select: none !important; } input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable { input-security: none !important; cursor: default !important; font-family: monospace; } input:-webkit-autofill, input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable, input:-webkit-autofill-and-obscured { background-color: #FAFFBD !important; background-image: none !important; color: #000000 !important; } input:autofill { field-sizing: fixed !important; } input:is([type="radio"], [type="checkbox"]) { margin: 3px 2px; box-sizing: border-box; border: initial; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY width: 16px; height: 16px; padding: 0px; /* We want to be as close to background:transparent as possible without actually being transparent */ background-color: rgba(255, 255, 255, 0.01); #else padding: initial; background-color: initial; #endif } input[type="checkbox"] { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border-radius: 5px; #endif } input[type="radio"] { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border-radius: 50%; #endif } input[type="checkbox"]:indeterminate { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY background: rgba(0, 0, 0, 0.8); #endif } input[type="checkbox"]:indeterminate:disabled { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY opacity: initial; background: rgba(0, 0, 0, 0.8); #endif } input:is([type="checkbox"], [type="radio"]):checked { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border-color: rgba(255, 255, 255, 0.0); #endif } input:is([type="checkbox"], [type="radio"]):disabled { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY opacity: initial; #endif } input:is([type="checkbox"], [type="radio"]):checked:disabled { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY opacity: initial; background: rgba(0, 0, 0, 0.8); #endif } input:is([type="button"], [type="submit"], [type="reset"]) { white-space: pre; } input[type="file"]::file-selector-button { white-space: nowrap; margin: 0; font-size: inherit; } input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, button { text-align: center; cursor: default; padding-inline: 6px; #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) color: ButtonText; padding-block: 2px 3px; border: 2px outset ButtonFace; background-color: ButtonFace; #else padding-block: 0; /* override input padding */ border: 1px solid -webkit-control-background; font: 11px system-ui; color: -apple-system-blue; #if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION background-color: rgba(0, 0, 0, 0.05); #else background-color: -apple-system-opaque-secondary-fill; #endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */ #endif /* (defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) */ box-sizing: border-box; } input:is([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active { #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) color: ActiveButtonText; #else color: -apple-system-blue; #endif } #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY input[type="submit"], input[type="submit"]:active, button[type="submit"], button[type="submit"]:active, button[type="menu"], button[type="menu"]:active { background-color: -apple-system-blue; color: white; } #endif input[type="range"] { padding: initial; border: initial; margin: 2px; color: #909090; } input[type="range"]::-webkit-slider-container { flex: 1; box-sizing: border-box; display: flex; min-width: 0; } input[type="range"]::-webkit-slider-runnable-track { flex: 1; align-self: center; box-sizing: border-box; display: block; } input[type="range"]::-webkit-slider-thumb { appearance: auto; box-sizing: border-box; display: block; } #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb:active { background-color: white; border: initial; box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.2), 0px 0.5px 4px rgba(0, 0, 0, 0.2); } input:disabled, textarea:disabled { opacity: 0.4; } input[readonly], textarea[readonly] { border-color: rgb(188, 188, 188); } #endif #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) input:is([type="button"], [type="submit"], [type="reset"]):disabled, input[type="file"]:disabled::file-selector-button, button:disabled, select:disabled, optgroup:disabled, option:disabled, select[disabled]>option { color: GrayText; } input:is([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]:active::file-selector-button, button:active { border-style: inset; } input:is([type="button"], [type="submit"], [type="reset"]):active:disabled, input[type="file"]:active:disabled::file-selector-button, button:active:disabled { border-style: outset; } #else input[type="file"]:disabled { color: rgba(60, 60, 67, 0.3); opacity: initial; } input:is([type="button"], [type="submit"], [type="reset"]):disabled, input[type="file"]:disabled::file-selector-button, button:disabled, select:-internal-uses-menulist:disabled { background-color: -apple-system-opaque-secondary-fill-disabled; color: -apple-system-tertiary-label; opacity: initial; } #endif input[type="color"] { appearance: auto; box-sizing: border-box; outline: none; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY width: 28px; height: 28px; padding: 3px; border: initial; border-radius: 50%; #else inline-size: 44px; block-size: 23px; #endif } input[type="color"]::-internal-color-swatch-overlay { appearance: auto; } input[type="color"]::-webkit-color-swatch-wrapper { appearance: auto; display: flex; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border-radius: inherit; padding: 2px; #else padding-inline: 2px; padding-block: 4px 5px; #endif box-sizing: border-box; width: 100%; height: 100%; } input[type="color"]::-webkit-color-swatch { appearance: auto; background-color: #000000; #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY border-radius: inherit; #else border-radius: 2px; #endif flex: 1; } select { box-sizing: border-box; appearance: auto; border: 1px solid; -webkit-rtl-ordering: logical; } select:-internal-uses-menulist { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY padding-inline: -internal-auto-base(0.4em, 0.7rem); color: -internal-auto-base(-apple-system-blue, inherit); font: -internal-auto-base(11px system-ui, inherit); border-color: -internal-auto-base(-webkit-control-background, color-mix(currentColor 50%)); border-radius: -internal-auto-base(initial, 4px); #if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION background-color: -internal-auto-base(rgba(0, 0, 0, 0.04), light-dark(transparent, color-mix(currentColor 4%))); #else background-color: -internal-auto-base(-apple-system-opaque-secondary-fill, light-dark(transparent, color-mix(currentColor 4%))); #endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */ #else padding-inline: -internal-auto-base(0, 0.7rem); color: -internal-auto-base(CanvasText, inherit); border-color: -internal-auto-base(revert-rule, color-mix(currentColor 50%)); border-radius: -internal-auto-base(5px, 4px); background-color: -internal-auto-base(Canvas, light-dark(transparent, color-mix(currentColor 4%))); font: -internal-auto-base(-webkit-small-control, inherit); #endif /* defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY */ padding-block: -internal-auto-base(0, 0.5rem); align-items: unsafe center; align-content: unsafe center; white-space: -internal-auto-base(pre, nowrap); cursor: -internal-auto-base(default, pointer); gap: -internal-auto-base(initial, 0.7rem); min-block-size: -internal-auto-base(revert-rule, 24px); min-inline-size: -internal-auto-base(revert-rule, 4em); overflow: -internal-auto-base(revert-rule, clip); text-overflow: -internal-auto-base(revert-rule, ellipsis); -webkit-rtl-ordering: -internal-auto-base(logical, inherit); text-shadow: -internal-auto-base(none, inherit); letter-spacing: -internal-auto-base(normal, inherit); word-spacing: -internal-auto-base(normal, inherit); } select:-internal-uses-menulist:is(:hover, :focus) { border-color: -internal-auto-base(revert-rule, color-mix(currentColor 80%)); } select:-internal-uses-menulist:active { background-color: -internal-auto-base(revert-rule, color-mix(currentColor 8%)); } select:-internal-uses-menulist:user-invalid { border-color: -internal-auto-base(revert-rule, light-dark(oklch(56% 0.2 26), oklch(66% 0.17 24))); } select:-internal-uses-menulist:disabled { #if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY background-color: -internal-auto-base(-apple-system-opaque-secondary-fill-disabled, color-mix(currentColor 6%)); color: -internal-auto-base(-apple-system-tertiary-label, color-mix(currentColor 55%)); #else background-color: -internal-auto-base(revert-rule, color-mix(currentColor 6%)); color: -internal-auto-base(GrayText, color-mix(currentColor 55%)); #endif border-color: -internal-auto-base(revert-rule, color-mix(currentColor 25%)); cursor: -internal-auto-base(revert-rule, not-allowed); } select:-internal-uses-menulist:not([popover]) { display: -internal-auto-base(inline-block, inline-flex); } select:not(:-internal-uses-menulist) { background-color: Canvas; border-style: inset; border-color: gray; } select:not(:-internal-uses-menulist):enabled { color: CanvasText; } select::-internal-select-button-slot { text-overflow: inherit; } select:-internal-uses-menulist > button:first-child { all: unset; display: contents; text-overflow: inherit; } select selectedcontent, select::field-content { overflow: clip; text-overflow: inherit; min-inline-size: 0; flex: 1; } select::picker-icon { content: picker-down / ""; font: 100% system-ui; text-orientation: sideways; transition: transform 150ms ease-out; } select:open::picker-icon { transform: scale(-1); } :-internal-select-popover { box-sizing: border-box; border: -internal-auto-base(none, 1px solid color-mix(currentColor 50%)); border-radius: 4px; padding: 0; color: inherit; background-color: -internal-auto-base(transparent, color-mix(contrast-color(currentColor), white 15%)); margin: 0; margin-block: 4px; inset: auto; min-inline-size: -internal-auto-base(unset, anchor-size(self-inline)); min-block-size: 1lh; max-block-size: calc(100svb - 8px); align-self: safe normal; overflow: auto; overscroll-behavior: contain; box-shadow: 0 4px 6px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.25)); position-area: -internal-auto-base(unset, self-block-end span-self-inline-end); position-try-order: -internal-auto-base(unset, most-block-size); position-try-fallbacks: -internal-auto-base(unset, { flip-block, flip-inline, flip-block flip-inline }); display: -internal-auto-base(contents, none); } :-internal-select-popover:popover-open { display: block; } select:-internal-uses-menulist option { min-inline-size: -internal-auto-base(revert-rule, 24px); min-block-size: -internal-auto-base(revert-rule, max(24px, 1lh)); padding-block: -internal-auto-base(revert-rule, 0.5rem); padding-inline: -internal-auto-base(revert-rule, 0.7rem 1.4rem); display: -internal-auto-base(revert-rule, flex); align-items: center; gap: -internal-auto-base(revert-rule, 0.5rem); } select option { white-space: nowrap; box-sizing: border-box; outline-offset: -internal-auto-base(revert-rule, inset); cursor: -internal-auto-base(revert-rule, pointer); } select option:hover, select option:focus-visible { background-color: -internal-auto-base(revert-rule, color-mix(currentColor 6%)); } select option:active { background-color: -internal-auto-base(revert-rule, color-mix(currentColor 15%)); } select option:disabled { color: -internal-auto-base(revert-rule, color-mix(currentColor 55%)); background: -internal-auto-base(revert-rule, transparent); cursor: -internal-auto-base(revert-rule, not-allowed); } select option::checkmark { content: "\2713" / ""; font: 100% system-ui; } select option:not(:checked)::checkmark { visibility: hidden; } optgroup { display: block; font-weight: bolder; box-sizing: border-box; cursor: -internal-auto-base(revert-rule, default); } select:-internal-uses-menulist :is(optgroup, option) + optgroup, select:-internal-uses-menulist optgroup + option { border-block-start: -internal-auto-base(revert-rule, 1px solid color-mix(currentColor 12%)); } option { display: block; } select optgroup option { font-weight: normal; } select optgroup legend, optgroup::-internal-optgroup-label { box-sizing: border-box; padding-block: 0.6em 0.15em; padding-inline: 0.7rem; min-block-size: 1lh; font-size: 0.85em; font-weight: 400; color: color-mix(currentColor 70%); } @media (prefers-contrast: more) { select:-internal-uses-menulist, :-internal-select-popover { border-color: -internal-auto-base(revert-rule, currentColor); } select:-internal-uses-menulist:disabled { border-color: -internal-auto-base(revert-rule, color-mix(currentColor 40%)); color: -internal-auto-base(revert-rule, color-mix(currentColor 60%)); background-color: -internal-auto-base(revert-rule, color-mix(currentColor 10%)); } } select::-internal-fallback-popup-menu { min-width: 200px; background-color: Canvas; color: CanvasText; border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); border-radius: 6px; box-shadow: 0 4px 12px color-mix(in srgb, CanvasText 15%, transparent); padding-block: 4px; overflow: auto; max-height: 50vh; box-sizing: border-box; z-index: 2147483647; } select::-internal-fallback-popup-menu-item, select::-internal-fallback-popup-menu-item-selected { padding-block: 4px; padding-inline: 12px; cursor: default; border-radius: 4px; margin-inline: 4px; } select::-internal-fallback-popup-menu-item-selected { background-color: color-mix(in srgb, Highlight 25%, Canvas); font-weight: bold; } select::-internal-fallback-popup-menu-item:hover, select::-internal-fallback-popup-menu-item-selected:hover { /* Items can have custom colors set but we want to always overrule them. */ background-color: Highlight !important; color: HighlightText !important; } select::-internal-fallback-popup-menu-group-label { padding-block: 4px; padding-inline: 12px; font-weight: bold; color: color-mix(in srgb, CanvasText 60%, transparent); } select::-internal-fallback-popup-menu-separator { border: none; border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent); margin-block: 4px; margin-inline: 8px; } output { display: inline; } /* form validation message bubble */ ::-webkit-validation-bubble { display: inline-block; z-index: 2147483647; position: absolute; opacity: 0.95; line-height: 0; margin: 0; -webkit-text-security: none; transition: opacity 05.5s ease; } ::-webkit-validation-bubble-message { display: flex; position: relative; top: -4px; font: message-box; color: black; min-width: 50px; max-width: 200px; border: solid 2px #400; background: linear-gradient(#f8ecec, #e8cccc); padding: 8px; border-radius: 8px; box-shadow: 4px 4px 4px rgba(100,100,100,0.6), inset -2px -2px 1px #d0c4c4, inset 2px 2px 1px white; line-height: normal; white-space: normal; z-index: 2147483644; } ::-webkit-validation-bubble-text-block { flex: 1; } ::-webkit-validation-bubble-heading { font-weight: bold; } ::-webkit-validation-bubble-arrow { display: inline-block; position: relative; left: 32px; width: 16px; height: 16px; background-color: #f8ecec; border-width: 2px 0 0 2px; border-style: solid; border-color: #400; box-shadow: inset 2px 2px 1px white; transform-origin: 0 0; transform: rotate(45deg); z-index: 2147483645; } ::-webkit-validation-bubble-arrow-clipper { display: block; overflow: hidden; height: 16px; } /* meter */ meter { appearance: auto; box-sizing: border-box; display: inline-block; block-size: 1em; inline-size: 5em; vertical-align: -0.2em; } /* progress */ progress { appearance: auto; box-sizing: border-box; display: inline-block; block-size: 1em; inline-size: 10em; vertical-align: -0.2em; } progress::-webkit-progress-inner-element { box-sizing: inherit; height: 100%; width: 100%; } progress::-webkit-progress-bar { background-color: gray; height: 100%; width: 100%; box-sizing: border-box; } progress::-webkit-progress-value { background-color: green; block-size: 100%; inline-size: 50%; /* should be removed later */ box-sizing: border-box; } /* inline elements */ u, ins { text-decoration: underline; } strong, b { font-weight: bolder; } 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-block: 1__qem; margin-inline: 0; } mark { background-color: Mark; color: MarkText; } 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 */ :not(html, body, input[readonly], applet, embed, iframe, object):focus-visible { outline-style: auto; } a:any-link { color: -webkit-link; text-decoration: underline; cursor: auto; } a:any-link:active { color: -webkit-activelink; } area:any-link { cursor: pointer; } /* HTML5 ruby elements */ /* Note that text-tracks.css contains a subset of this ruby styling for WebVTT elements. It should be kept in sync. */ ruby { display: ruby; } ruby, rt { text-indent: 0; } ruby > rt { display: ruby-text; font-size: -webkit-ruby-text; text-align: start; line-height: normal; text-emphasis: none; } ruby > rp { display: none; } /* Avoid wrapping children of implicit ruby bases. We don't support