Skip to content

GitLab

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

[Controls Refresh] Updates Dark Mode Styling for Audio and Video 

Controls

This adds slight opacity to the dark mode audio control default
background, and addresses some background color bugs for the dark mode
video control overlay menu.

Bug: 1111887
Change-Id: Ie677110b32b4588459038f820db713924f2e8e4e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2486033Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#819227}
parent afa62bad
Hide whitespace changes
Inline Side-by-side
Showing with 29 additions and 2 deletions
third_party/blink/renderer/modules/media_controls/resources/mediaControls.css
View file @ 9418d411
......@@ -898,6 +898,7 @@ video::-internal-media-controls-overflow-menu-list-item {
font-family: Roboto-Regular, Roboto, sans-serif;
font-size: 12px;
background-color: -internal-light-dark(#FFFFFF, #3B3B3B);
color: -internal-light-dark(rgba(0,0,0,0.87), rgba(255,255,255,0.87));
letter-spacing: 0;
......@@ -1019,11 +1020,16 @@ audio::-internal-media-controls-overflow-menu-list-item:focus,
video::-internal-media-controls-overflow-menu-list-item:focus,
audio::-internal-media-controls-text-track-list-item:focus,
video::-internal-media-controls-text-track-list-item:focus {
background-color: -internal-light-dark(#e0e0e0, #3b3b3b);
background-color: -internal-light-dark(#e0e0e0, #545454);
color: -internal-light-dark(rgba(0,0,0,0.87), rgba(255,255,255,0.87));
outline: none;
}
audio::-internal-media-controls-overflow-menu-list-item:active,
video::-internal-media-controls-overflow-menu-list-item:active {
background-color: -internal-light-dark(#e0e0e0, #454545);
}
audio::-internal-media-controls-text-track-list-header,
video::-internal-media-controls-text-track-list-header,
audio::-internal-media-controls-text-track-list-item,
......@@ -1090,7 +1096,7 @@ audio::-webkit-media-controls-enclosure,
video::-webkit-media-controls.audio-only [pseudo="-webkit-media-controls-enclosure"] {
max-height: 54px;
flex-direction: row;
background: -internal-light-dark(#F1F3F4, #3B3B3B);
background: -internal-light-dark(#F1F3F4, rgba(59, 59, 59, .9));
border-radius: 100px;
overflow: hidden;
}
......
third_party/blink/web_tests/fast/forms/color-scheme/media/video-overlay-menu.html 0 → 100644
View file @ 9418d411
<!DOCTYPE html>
<script src="../../../../media/media-file.js"></script>
<script src="../../../../media/video-paint-test.js"></script>
<script src="../../../../media/media-controls.js"></script>
<script src="../../../../media/overflow-menu.js"></script>
<meta name="color-scheme" content="light dark">
<body style="padding-top: 200px; padding-left: 100px">
<video controls></video>
<script>
var video = document.querySelector("video");
video.src = "../../../../media/content/test.ogv";
enableTestMode(video);
init();
video.onloadeddata = function () {
var overflowMenu = getOverflowMenuButton(video);
var coords = elementCoordinates(overflowMenu);
clickAtCoordinates(coords[0], coords[1]);
};
</script>
</body>
\ 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