Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(442)

Unified Diff: Source/core/css/mediaControls.css

Issue 1082533002: Support text track selection in video controls (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Addressed comments from fs Created 5 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: Source/core/css/mediaControls.css
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControls.css
index af63bdeb438449e226219451f6bce73362d03926..e2aef52952adbaf16d1c225a2e3b5c40010889cf 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControls.css
@@ -330,6 +330,84 @@ video::-webkit-media-controls-toggle-closed-captions-button {
color: inherit;
}
+video::-webkit-media-controls-text-track-list-container {
+ position: absolute;
+ display: block;
+ bottom: 30px;
+ background: rgba(20, 20, 20, 0.8);
+ max-width: 50%;
+ max-height: 250px;
+ right: 0;
+ border-radius: 5px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ text-overflow: ellipsis;
+ bottom: 100%;
+ margin-bottom: 5px;
+ font-family: Arial, Helvetica, sans-serif;
+ white-space: nowrap;
+}
+
+video::-webkit-scrollbar {
+ width: 12px;
+}
+
+video::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
+ border-radius: 10px;
+}
+
+video::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: rgba(80, 80, 80, 0.8);
+ box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.5);
+}
+
+video::-webkit-media-controls-text-track-list {
+ display: block;
+ padding: 10px;
+ font-weight: bold;
+ font-size: 16px;
+}
+
+video::-webkit-media-controls-text-track-list-header {
+ margin: 0;
+ text-shadow: 0 1px 0 black;
+ text-align: center;
+ color: gray;
+ padding: 4px 0 4px 4px;
+ border-bottom: 1px solid #555;
+}
+
+video::-webkit-media-controls-text-track-list-item {
+ display: block;
+ color: white;
+ padding: 4px 30px 4px 30px;
+ border-bottom: 1px solid #555;
+ text-align: left;
+ position: relative;
+ line-height: 25px;
+}
+
+video::-webkit-media-controls-text-track-list-item:hover {
+ background-color: rgba(105, 105, 105, 0.8);
+}
+
+video::-webkit-media-controls-text-track-list-item-input {
+ -webkit-appearance: media-track-selection-checkmark;
+ position: absolute;
+ visibility: hidden;
+ top: 4px;
+ left: 0;
+ margin: 0;
+ width: 25px;
+ height: 25px;
+}
+
+video::-webkit-media-controls-text-track-list-item-input:checked {
+ visibility: visible;
+}
+
audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
display: none;
}

Powered by Google App Engine
This is Rietveld 408576698