Skip to content

GitLab

T
tangled
Commit e1c3050e authored by Sam Sebree's avatar Sam Sebree Committed by Commit Bot
Browse files
Options

[Controls Refresh] Adds dark mode styling for the date time local native controls 

This change uses the calendar_picker_refresh.css
to set correct dark mode styling for date time local native controls.

Bug: 929098
Change-Id: I6daa542ed1148c782815eb392d6f65d58c3d1366
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209406Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarYu Han <yuzhehan@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#775809}
parent 85511ccf
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 1 deletion
third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css
View file @ e1c3050e
...@@ -383,3 +383,128 @@ body { ...@@ -383,3 +383,128 @@ body {
forced-color-adjust: none; forced-color-adjust: none;
} }
} }
@media (prefers-color-scheme: dark) {
.calendar-picker {
background-color: #4a4a4a;
color:#ffffff;
}
.calendar-table-header-view {
background-color: #4a4a4a;
}
.calendar-navigation-button {
background-color: #4a4a4a;
color: #ffffff;
}
.calendar-navigation-button:hover {
background-color: rgba(195, 195, 195, 0.3);
}
.calendar-navigation-button:disabled {
background-color: #4a4a4a;
}
.month-popup-button:disabled {
background-color: #4a4a4a;
color: rgba(255, 255, 255, 0.3);
}
.day-cell {
background-color: #4a4a4a;
color: rgba(255, 255, 255, 0.6);
}
.day-cell.current-month {
color: #ffffff;
}
.month-button:hover {
background-color: rgba(195, 195, 195, 0.3);
}
:not(.week-picker) > .calendar-table-view > .scroll-view > .scroll-view-content
> .calendar-row-cell > .day-cell:not(.selected):hover {
background-color: rgba(195, 195, 195, 0.3);
}
.week-picker .calendar-row-cell:hover
.day-cell:not(.selected):not(.disabled):not(:nth-child(2)),
.week-picker .calendar-row-cell:hover + .calendar-row-cell
.day-cell:not(.selected):not(.disabled):nth-child(2),
.calendar-row-cell:hover .week-number-cell:not(.selected):not(.disabled) {
background-color: rgba(195, 195, 195, 0.3);
}
.day-cell.selected,
.month-button.selected,
.week-number-cell.selected {
background-color: rgba(195, 195, 195, 0.5);
color: #FFFFFF;
}
.day-cell.disabled,
.day-cell.disabled.today,
.month-button[aria-disabled="true"],
.week-number-cell.disabled {
background-color: #4a4a4a;
color: rgba(255, 255, 255, 0.3);
}
.today-button-refresh:hover {
background-color: rgba(195, 195, 195, 0.3);
}
.today-button-refresh:disabled {
background-color: #4a4a4a;
color: rgba(255, 255, 255, 0.3);
}
.year-list-cell .label {
background-color: #4a4a4a;
color: #ffffff;
}
body {
background-color: #4a4a4a;
}
.month-popup-button,
.month-popup-button:hover,
.month-popup-button:disabled {
color: #ffffff;
}
.scrubby-scroll-bar {
background-color: #4a4a4a;
border-left: 1px solid #4a4a4a;
}
.scrubby-scroll-thumb {
background-color: #d8d8d8;
}
.calendar-navigation-button path {
fill: #ffffff;
}
.month-popup-button polygon {
fill: #ffffff;
}
.month-popup-button:disabled polygon {
fill: #ffffff;
}
.year-list-cell .month-chooser {
background-color: #4a4a4a;
}
.month-button {
background-color: #4a4a4a;
color: #ffffff;
}
}
third_party/blink/renderer/core/html/forms/resources/time_picker.css
View file @ e1c3050e
...@@ -82,3 +82,23 @@ ...@@ -82,3 +82,23 @@
border-color: WindowText; border-color: WindowText;
} }
} }
@media (prefers-color-scheme: dark) {
.time-picker {
background: #4a4a4a;
border: 1px solid #bfbfbf;
}
.time-cell {
color: #ffffff;
}
.time-cell:hover {
background-color: rgba(195, 195, 195, 0.3);
}
.time-cell.selected {
background-color: rgba(195, 195, 195, 0.5);
color: #FFFFFF;
}
}
third_party/blink/renderer/core/html/resources/controls_refresh.css
View file @ e1c3050e
...@@ -146,7 +146,7 @@ input[type="date" i]::-webkit-calendar-picker-indicator, ...@@ -146,7 +146,7 @@ input[type="date" i]::-webkit-calendar-picker-indicator,
input[type="datetime-local" i]::-webkit-calendar-picker-indicator, input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
input[type="month" i]::-webkit-calendar-picker-indicator, input[type="month" i]::-webkit-calendar-picker-indicator,
input[type="week" i]::-webkit-calendar-picker-indicator { input[type="week" i]::-webkit-calendar-picker-indicator {
background-image: -webkit-image-set(url(images/calendar_icon.svg) 1x); 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-origin: content-box;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
......
third_party/blink/renderer/core/html/resources/images/calendar_icon_white.svg 0 → 100644
View file @ e1c3050e
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="#ffffff" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-basic.html 0 → 100644
View file @ e1c3050e
<html>
<meta name="color-scheme" content="dark">
<body>
<input type=date id=date value="2019-07-31">
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-month-year-selector.html 0 → 100644
View file @ e1c3050e
<!DOCTYPE html>
<head>
<meta name="color-scheme" content="dark">
</head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../fast/forms/resources/common.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<script
src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
<input type=date id=date value="2019-07-31">
<script>
openPicker(document.getElementById('date'), function () {
clickMonthPopupButton();
popupWindow.global.picker.monthPopupView.yearListView.element.addEventListener('webkitTransitionEnd', function () {
testRunner.notifyDone();
})
});
</script>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-open.html 0 → 100644
View file @ e1c3050e
<!DOCTYPE html>
<html>
<head>
<meta name="color-scheme" content="dark">
<script src="../../../fast/forms/resources/common.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<script
src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
</head>
<body>
<input type="date" id="date" value="2019-07-31">
<script>
openPicker(document.getElementById('date'));
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic.html 0 → 100644
View file @ e1c3050e
<html>
<meta name="color-scheme" content="dark">
<body>
<input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector.html 0 → 100644
View file @ e1c3050e
<!DOCTYPE html>
<head>
<meta name="color-scheme" content="dark">
</head>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../fast/forms/resources/common.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<script
src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
<input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
<script>
openPicker(document.getElementById('datetime-local'), function () {
clickMonthPopupButton();
testRunner.notifyDone();
});
</script>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open.html 0 → 100644
View file @ e1c3050e
<!DOCTYPE html>
<html>
<head>
<meta name="color-scheme" content="dark">
<script src="../../../fast/forms/resources/common.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<script
src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
</head>
<body>
<input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
<script>
openPicker(document.getElementById('datetime-local'));
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment