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

Side by Side Diff: third_party/WebKit/Source/core/css/mediaControlsNew.css

Issue 1079323002: Support text track selection in video controls (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase and Philip's comments Created 4 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 unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2009 Apple Inc. All rights reserved. 2 * Copyright (C) 2009 Apple Inc. All rights reserved.
3 * Copyright (C) 2015 Google Inc. 3 * Copyright (C) 2015 Google Inc.
4 * 4 *
5 * Redistribution and use in source and binary forms, with or without 5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions 6 * modification, are permitted provided that the following conditions
7 * are met: 7 * are met:
8 * 1. Redistributions of source code must retain the above copyright 8 * 1. Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * 2. Redistributions in binary form must reproduce the above copyright 10 * 2. Redistributions in binary form must reproduce the above copyright
(...skipping 26 matching lines...) Expand all
37 } 37 }
38 38
39 audio::-webkit-media-controls, 39 audio::-webkit-media-controls,
40 video::-webkit-media-controls { 40 video::-webkit-media-controls {
41 width: inherit; 41 width: inherit;
42 height: inherit; 42 height: inherit;
43 position: relative; 43 position: relative;
44 direction: ltr; 44 direction: ltr;
45 display: flex; 45 display: flex;
46 flex-direction: column; 46 flex-direction: column;
47 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif;
47 justify-content: flex-end; 48 justify-content: flex-end;
48 align-items: center; 49 align-items: center;
49 } 50 }
50 51
51 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { 52 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
52 width: 100%; 53 width: 100%;
53 height: 48px; 54 height: 48px;
54 flex-shrink: 0; 55 flex-shrink: 0;
55 bottom: 0; 56 bottom: 0;
56 text-indent: 0; 57 text-indent: 0;
(...skipping 16 matching lines...) Expand all
73 z-index: 0; 74 z-index: 0;
74 overflow: hidden; 75 overflow: hidden;
75 text-align: right; 76 text-align: right;
76 bottom: auto; 77 bottom: auto;
77 height: 48px; 78 height: 48px;
78 min-width: 48px; 79 min-width: 48px;
79 background-color: #fafafa; 80 background-color: #fafafa;
80 /* The duration is also specified in MediaControlElements.cpp and LayoutTest s/media/media-controls.js */ 81 /* The duration is also specified in MediaControlElements.cpp and LayoutTest s/media/media-controls.js */
81 transition: opacity 0.3s; 82 transition: opacity 0.3s;
82 83
83 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif ;
84 font-size: 14px; 84 font-size: 14px;
85 font-weight: normal; /* Make sure that we don't inherit non-defaults. */ 85 font-weight: normal; /* Make sure that we don't inherit non-defaults. */
86 font-style: normal; 86 font-style: normal;
87 } 87 }
88 88
89 audio:-webkit-full-page-media, video:-webkit-full-page-media { 89 audio:-webkit-full-page-media, video:-webkit-full-page-media {
90 max-height: 100%; 90 max-height: 100%;
91 max-width: 100%; 91 max-width: 100%;
92 } 92 }
93 93
(...skipping 258 matching lines...) Expand 10 before | Expand all | Expand 10 after
352 } 352 }
353 353
354 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media -controls-fullscreen-volume-min-button { 354 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media -controls-fullscreen-volume-min-button {
355 display: none; 355 display: none;
356 } 356 }
357 357
358 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media -controls-fullscreen-volume-max-button { 358 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media -controls-fullscreen-volume-max-button {
359 display: none; 359 display: none;
360 } 360 }
361 361
362 video::-internal-media-controls-text-track-list {
363 position: absolute;
364 bottom: 48px;
365 right: 0px;
366 background-color: #fafafa;
367 max-width: 50%;
368 max-height: 250px;
369 min-width: 150px;
370 overflow-x: hidden;
371 overflow-y: auto;
372 white-space: nowrap;
373 font-size: 14px;
374 padding: 8px 0px;
375 }
376
377 video::-internal-media-controls-text-track-list-item {
378 display: block;
379 color: #424242;
380 text-align: start;
381 line-height: 40px;
382 padding-right: 16px;
383 text-overflow: ellipsis;
384 }
385
386 video::-internal-media-controls-text-track-list-item:hover {
387 background-color: #e0e0e0;
388 }
389
390 video::-internal-media-controls-text-track-list-item-input {
391 -webkit-appearance: -internal-media-track-selection-checkmark;
392 visibility: hidden;
393 left: 0;
394 vertical-align: middle;
395 margin: 0 5px 0 0;
396 width: 16px;
397 height: 16px;
398 margin-left: 12px;
399 }
400
401 video::-internal-media-controls-text-track-list-item-input:checked {
402 visibility: visible;
403 }
404
405 video::-internal-media-controls-text-track-list-kind-captions {
406 -webkit-appearance: -internal-media-closed-captions-icon;
407 height: 20px;
408 width: 20px;
409 margin-left: 10px;
410 vertical-align: middle;
411 }
412
413 video::-internal-media-controls-text-track-list-kind-subtitles {
414 -webkit-appearance: -internal-media-subtitles-icon;
415 height: 20px;
416 width: 20px;
417 margin-left: 10px;
418 vertical-align: middle;
419 }
420
362 video::-webkit-media-text-track-container { 421 video::-webkit-media-text-track-container {
363 position: relative; 422 position: relative;
364 width: inherit; 423 width: inherit;
365 height: inherit; 424 height: inherit;
366 overflow: hidden; 425 overflow: hidden;
367 426
368 font: 22px sans-serif; 427 font: 22px sans-serif;
369 text-align: center; 428 text-align: center;
370 color: rgba(255, 255, 255, 1); 429 color: rgba(255, 255, 255, 1);
371 430
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
426 font-weight: bold; 485 font-weight: bold;
427 } 486 }
428 487
429 video::cue(u) { 488 video::cue(u) {
430 text-decoration: underline; 489 text-decoration: underline;
431 } 490 }
432 491
433 video::cue(i) { 492 video::cue(i) {
434 font-style: italic; 493 font-style: italic;
435 } 494 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698