| /* Copyright 2019 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| /* These styles adjust the default styling for HTML elements as defined in |
| * core/html/resources/html.css in order to provide an updated style when |
| * using the refreshed controls UI. |
| */ |
| |
| /* This sheet is appended to html.css before parsing which means the selectors |
| below are in the default html namespace: |
| |
| @namespace "http://www.w3.org/1999/xhtml" |
| */ |
| |
| select, |
| select:-internal-list-box, |
| input, |
| textarea { |
| background-color: -internal-light-dark(#ffffff, #3B3B3B); |
| border-color: -internal-light-dark(#767676, #858585); |
| } |
| |
| a:-webkit-any-link:focus-visible { |
| outline-offset: 1px; |
| } |
| |
| input:focus-visible, textarea:focus-visible, select:focus-visible { |
| outline-offset: 0; |
| } |
| |
| input[type="checkbox" i]:focus-visible, |
| input[type="radio" i]:focus-visible { |
| outline-offset: 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:disabled, |
| select:disabled, |
| textarea:disabled { |
| border-color: rgba(118, 118, 118, 0.3); |
| } |
| |
| input:disabled, |
| textarea:disabled { |
| background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); |
| color: -internal-light-dark(default, rgba(255, 255, 255, 0.6)); |
| } |
| |
| select:disabled { |
| opacity: 0.7; |
| } |
| |
| input[type="button" i], |
| input[type="submit" i], |
| input[type="reset" i], |
| input[type="color" i], |
| input[type="file" i]::-webkit-file-upload-button, |
| button { |
| background-color: -internal-light-dark(#efefef, #3B3B3B); |
| border-color: -internal-light-dark(#767676, #858585); |
| color: -internal-light-dark(black, white); |
| } |
| |
| 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)); |
| } |
| |
| 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="range" i] { |
| color: -internal-light-dark(#101010, #ffffff); |
| } |
| |
| input[type="range" i]:disabled { |
| color: #c5c5c5; |
| } |
| |
| meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance { |
| display: grid; |
| grid-template-rows: 1fr [line1] 2fr [line2] 1fr; |
| } |
| |
| meter::-webkit-meter-bar { |
| background: -internal-light-dark(#efefef, #3B3B3B); |
| border-width: thin; |
| grid-row-start: line1; |
| grid-row-end: line2; |
| border-style: solid; |
| border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), #858585); |
| border-radius: 20px; |
| box-sizing: border-box; |
| overflow: hidden; |
| } |
| |
| meter::-webkit-meter-optimum-value { |
| background: -internal-light-dark(#107c10, #74b374) |
| } |
| |
| meter::-webkit-meter-suboptimum-value { |
| background: -internal-light-dark(#ffb900, #f2c812) |
| } |
| |
| meter::-webkit-meter-even-less-good-value { |
| background: -internal-light-dark(#d83b01, #e98f6d) |
| } |
| |
| 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; |
| } |
| |
| /* -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 { |
| border-radius: 2px; |
| } |
| |
| select:-internal-list-box option:hover { |
| background-color: initial; |
| } |
| |
| /* 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) !important; |
| color: -internal-light-dark(#101010, #FFFFFF) !important; |
| } |
| |
| /* option selected, list-box focused */ |
| 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; |
| } |
| |
| 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; |
| } |
| |
| 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) !important; |
| } |
| |
| input::-webkit-datetime-edit-ampm-field:focus-visible, |
| input::-webkit-datetime-edit-day-field:focus-visible, |
| input::-webkit-datetime-edit-hour-field:focus-visible, |
| input::-webkit-datetime-edit-millisecond-field:focus-visible, |
| input::-webkit-datetime-edit-minute-field:focus-visible, |
| input::-webkit-datetime-edit-month-field:focus-visible, |
| input::-webkit-datetime-edit-second-field:focus-visible, |
| input::-webkit-datetime-edit-week-field:focus-visible, |
| input::-webkit-datetime-edit-year-field:focus-visible { |
| 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); |
| } |