| /* |
| * Copyright (C) 2009 Apple Inc. All rights reserved. |
| * Copyright (C) 2015 Google Inc. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
| * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
| * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
| * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
| * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
| * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| /* Chromium default media controls */ |
| |
| /* WARNING: This css file can only style <audio> and <video> elements */ |
| |
| audio:not([controls]) { |
| display: none !important; |
| } |
| |
| audio { |
| width: 300px; |
| height: 32px; |
| } |
| |
| audio::-webkit-media-controls, |
| video::-webkit-media-controls { |
| writing-mode: horizontal-tb; |
| width: inherit; |
| height: inherit; |
| position: relative; |
| direction: ltr; |
| display: flex; |
| flex-direction: column; |
| font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif; |
| justify-content: flex-end; |
| align-items: center; |
| } |
| |
| audio::-webkit-media-controls-panel.transparent, |
| video::-webkit-media-controls-panel.transparent { |
| opacity: 0; |
| } |
| |
| audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { |
| width: 100%; |
| height: 32px; |
| flex-shrink: 0; |
| bottom: 0; |
| text-indent: 0; |
| padding: 0; |
| margin: 0; |
| box-sizing: border-box; |
| } |
| |
| audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| /* We use flex-start here to ensure that the play button is visible even |
| * if we are too small to show all controls. |
| */ |
| justify-content: flex-start; |
| -webkit-user-select: none; |
| position: relative; |
| width: 100%; |
| z-index: 0; |
| overflow: hidden; |
| text-align: right; |
| bottom: auto; |
| height: 32px; |
| min-width: 48px; |
| line-height: 32px; |
| background-color: #fafafa; |
| /* The duration is also specified in media_control_elements.cc and web_tests/media/media-controls.js */ |
| transition: opacity 0.3s; |
| |
| font-size: 12px; |
| font-weight: normal; /* Make sure that we don't inherit non-defaults. */ |
| font-style: normal; |
| } |
| |
| video:-webkit-full-page-media { |
| margin: auto; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| audio:-webkit-full-page-media, video:-webkit-full-page-media { |
| max-height: 100%; |
| max-width: 100%; |
| } |
| |
| audio:-webkit-full-page-media::-webkit-media-controls-panel, |
| video:-webkit-full-page-media::-webkit-media-controls-panel { |
| bottom: 0px; |
| } |
| |
| audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_sound_not_muted.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| audio::-webkit-media-controls-mute-button.muted, |
| video::-webkit-media-controls-mute-button.muted { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_sound_muted.png) 1x); |
| } |
| |
| audio::-webkit-media-controls-overlay-enclosure { |
| display: none; |
| } |
| |
| video::-webkit-media-controls-overlay-enclosure { |
| display: flex; |
| position: relative; |
| flex-direction: column; |
| justify-content: flex-end; |
| align-items: center; |
| flex: 1 1; |
| min-height: 0; |
| width: 100%; |
| /* Prevent disambiguation zooms with the panel. If this changes, it must |
| * also be changed in core/html/shadow/MediaControls.cpp. */ |
| margin-bottom: 10px; |
| text-indent: 0; |
| box-sizing: border-box; |
| overflow: hidden; |
| } |
| |
| video::-webkit-media-controls-overlay-play-button { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_overlay_play.png) 1x); |
| background-size: 48px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| position: absolute; |
| top: 0; |
| left: 0; |
| margin: 0; |
| border-width: 0px; |
| background-color: transparent; |
| width: 100%; |
| height: 100%; |
| padding: 0; |
| } |
| |
| video::-internal-media-controls-overlay-cast-button { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_overlay_cast_off.png) 1x); |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| position: absolute; |
| top: 8px; |
| left: 8px; |
| margin-left: 0px; |
| margin-top: 0px; |
| border-width: 0px; |
| background-color: transparent; |
| width: 32px; |
| height: 32px; |
| padding: 0; |
| transition: opacity 0.3s; |
| } |
| |
| video::-internal-media-controls-overlay-cast-button.on { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_overlay_cast_on.png) 1x); |
| } |
| |
| video::-internal-media-controls-picture-in-picture-button, audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_pause.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| audio::-webkit-media-controls-play-button.pause, |
| video::-webkit-media-controls-play-button.pause { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_play.png) 1x); |
| } |
| |
| video::-internal-media-controls-picture-in-picture-button { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_pictureinpicture.png) 1x); |
| } |
| |
| audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { |
| -webkit-appearance: media-controls-background; |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| justify-content: flex-end; |
| flex: 1 1; |
| -webkit-user-select: none; |
| height: 48px; |
| padding: 0; |
| min-width: 0; |
| } |
| |
| audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { |
| -webkit-appearance: media-current-time-display; |
| -webkit-user-select: none; |
| flex: none; |
| display: flex; |
| border: none; |
| cursor: default; |
| |
| height: 32px; |
| |
| /* text runs right to the edge of the container */ |
| padding: 0; |
| |
| color: #5a5a5a; |
| |
| letter-spacing: normal; |
| word-spacing: normal; |
| text-transform: none; |
| text-indent: 0; |
| text-shadow: none; |
| text-decoration: none; |
| } |
| |
| audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { |
| -webkit-appearance: media-current-time-display; |
| -webkit-user-select: none; |
| flex: none; |
| display: flex; |
| border: none; |
| cursor: default; |
| |
| height: 32px; |
| |
| /* text runs right to the edge of the container, plus a little on |
| * the left to pad the leading "/" */ |
| padding: 0 0 0 4px; |
| |
| color: #5a5a5a; |
| |
| letter-spacing: normal; |
| word-spacing: normal; |
| text-transform: none; |
| text-indent: 0; |
| text-shadow: none; |
| text-decoration: none; |
| } |
| |
| audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
| -webkit-appearance: -internal-media-control; |
| display: flex; |
| flex: 1 1 auto; |
| height: 2px; |
| |
| /* Leave 6px on either side for the thumb. Use margin so that |
| * the slider doesn't extend into it. We also add 12px border. |
| */ |
| padding: 14px 0; |
| margin: 0 18px 0 18px; |
| background-color: transparent; |
| min-width: 25px; |
| border: initial; |
| color: inherit; |
| } |
| |
| audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { |
| -webkit-appearance: -internal-media-control; |
| display: flex; |
| /* The 1.9 value was empirically chosen to match old-flexbox behaviour |
| * and be aesthetically pleasing. |
| */ |
| flex: 1 1.9 auto; |
| height: 2px; |
| max-width: 70px; |
| /* Leave room for the thumb, which has 6px radius. Use margin rather |
| * than padding so that the slider doesn't extend into it. We also |
| * leave an addition 12px margin. |
| */ |
| padding: 14px 0; |
| margin: 0 18px 0 18px; |
| background-color: transparent; |
| min-width: 25px; |
| border: initial; |
| color: inherit; |
| } |
| |
| /** |
| * Segmented Track |
| */ |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-media-controls-segmented-track, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-media-controls-segmented-track { |
| margin: 0 -18px; |
| position: relative; |
| |
| flex: 1 1 0%; |
| min-width: 0; |
| align-self: center; |
| box-sizing: border-box; |
| } |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-background, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-track-segment-background { |
| width: auto; |
| position: absolute; |
| background: #dadada; |
| height: 2px; |
| margin-top: -1px; |
| left: 18px; |
| right: 18px; |
| top: 50%; |
| overflow: hidden; |
| } |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-track-segment-highlight-after, |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-track-segment-highlight-before { |
| height: auto; |
| position: absolute; |
| top: 50%; |
| bottom: 0; |
| z-index: 1; |
| height: 2px; |
| margin-top: -1px; |
| } |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-track-segment-highlight-after { |
| background-color: #4285f4; |
| } |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-internal-track-segment-highlight-before { |
| background-color: #5a5a5a; |
| } |
| |
| /** |
| * Track Thumb |
| */ |
| |
| input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb, |
| input[pseudo="-webkit-media-controls-volume-slider" i]::-webkit-slider-thumb { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_slider_thumb.png) 1x); |
| background-size: 12px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| |
| height: 48px; |
| z-index: 2; |
| width: 36px; |
| margin: 0; |
| padding: 0; |
| top: -24px; |
| position: absolute; |
| } |
| |
| audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_enter_fullscreen.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| overflow: hidden; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| audio::-webkit-media-controls-fullscreen-button.fullscreen, |
| video::-webkit-media-controls-fullscreen-button.fullscreen { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_exit_fullscreen.png) 1x); |
| } |
| |
| audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_cast_off.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| margin-left: 0px; |
| margin-right: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| audio::-internal-media-controls-cast-button.on, |
| video::-internal-media-controls-cast-button.on { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_cast_on.png) 1x); |
| } |
| |
| audio::-webkit-media-controls-toggle-closed-captions-button { |
| display: none; |
| } |
| |
| video::-webkit-media-controls-toggle-closed-captions-button { |
| -webkit-appearance: -internal-media-control; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_closedcaption_disabled.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| margin-left: 0px; |
| margin-right: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| video::-webkit-media-controls-toggle-closed-captions-button.visible { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_closedcaption.png) 1x); |
| } |
| |
| video::-internal-media-controls-text-track-list, video::-internal-media-controls-overflow-menu-list, audio::-internal-media-controls-overflow-menu-list { |
| position: fixed; |
| background-color: #fafafa; |
| max-width: 50%; |
| max-height: 250px; |
| min-width: 150px; |
| overflow-x: hidden; |
| overflow-y: auto; |
| white-space: nowrap; |
| font-size: 14px; |
| border-radius: 1px; |
| box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.14), |
| 0 3px 28px 2px rgba(0, 0, 0, 0.12), |
| 0 5px 10px -3px rgba(0, 0, 0, 0.4); |
| } |
| |
| video::-internal-media-controls-text-track-list-item { |
| display: block; |
| color: #424242; |
| text-align: start; |
| line-height: 40px; |
| padding-right: 16px; |
| text-overflow: ellipsis; |
| } |
| |
| video::-internal-media-controls-text-track-list-item:hover, video::-internal-media-controls-overflow-menu-list-item:hover, audio::-internal-media-controls-overflow-menu-list-item:hover { |
| background-color: #e0e0e0; |
| } |
| |
| video::-internal-media-controls-text-track-list-item-input { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_trackselection_checkmark.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| visibility: hidden; |
| left: 0; |
| vertical-align: middle; |
| margin: 0 5px 0 0; |
| width: 16px; |
| height: 16px; |
| margin-left: 12px; |
| } |
| |
| video::-internal-media-controls-text-track-list-item-input:checked { |
| visibility: visible; |
| } |
| |
| video::-internal-media-controls-text-track-list-kind-captions { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_closedcaptions_icon.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| height: 20px; |
| width: 20px; |
| margin-left: 10px; |
| vertical-align: middle; |
| } |
| |
| video::-internal-media-controls-text-track-list-kind-subtitles { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_subtitles_icon.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| height: 20px; |
| width: 20px; |
| margin-left: 10px; |
| vertical-align: middle; |
| } |
| |
| video::-internal-media-controls-overflow-button, audio::-internal-media-controls-overflow-button { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_overflow_menu.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| margin-left: 0px; |
| margin-right: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| video::-internal-media-controls-download-button, audio::-internal-media-controls-download-button { |
| -webkit-appearance: none; |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_download.png) 1x); |
| background-size: 32px; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| flex: none; |
| box-sizing: border-box; |
| width: 32px; |
| height: 32px; |
| padding: 0px; |
| border-width: 0px; |
| margin-left: 0px; |
| margin-right: 0px; |
| background-color: initial; |
| color: inherit; |
| } |
| |
| video::-internal-media-controls-overflow-menu-list-item, audio::-internal-media-controls-overflow-menu-list-item { |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| |
| color: #424242; |
| line-height: 40px; |
| padding-left: 28px; |
| padding-right: 28px; |
| user-select: none; |
| } |
| |
| label[pseudo="-internal-media-controls-overflow-menu-list-item"] input { |
| margin-left: -22px; |
| margin-right: 6px; |
| } |
| |
| video::-webkit-media-text-track-container { |
| position: relative; |
| width: inherit; |
| height: inherit; |
| overflow: hidden; |
| |
| font: 22px sans-serif; |
| text-align: center; |
| color: rgba(255, 255, 255, 1); |
| |
| letter-spacing: normal; |
| word-spacing: normal; |
| text-transform: none; |
| text-indent: 0; |
| text-decoration: none; |
| pointer-events: none; |
| -webkit-user-select: none; |
| word-break: break-word; |
| } |
| |
| video::cue { |
| display: inline; |
| |
| background-color: rgba(0, 0, 0, 0.8); |
| padding: 2px 2px; |
| } |
| |
| video::-webkit-media-text-track-region { |
| position: absolute; |
| line-height: 5.33vh; |
| writing-mode: horizontal-tb; |
| background: rgba(0, 0, 0, 0.8); |
| color: rgba(255, 255, 255, 1); |
| word-wrap: break-word; |
| overflow-wrap: break-word; |
| overflow: hidden; |
| } |
| |
| video::-webkit-media-text-track-region-container { |
| position: relative; |
| |
| display: flex; |
| flex-flow: column; |
| flex-direction: column; |
| } |
| |
| video::-webkit-media-text-track-region-container.scrolling { |
| transition: top 433ms linear; |
| } |
| |
| |
| video::-webkit-media-text-track-display { |
| position: absolute; |
| overflow: hidden; |
| white-space: pre-wrap; |
| -webkit-box-sizing: border-box; |
| flex: 0 0 auto; |
| } |
| |
| video::cue(:future) { |
| color: gray; |
| } |
| |
| video::cue(b) { |
| font-weight: bold; |
| } |
| |
| video::cue(u) { |
| text-decoration: underline; |
| } |
| |
| video::cue(i) { |
| font-style: italic; |
| } |
| |
| .state-no-source input[pseudo="-webkit-media-controls-play-button"], |
| .state-no-source input[pseudo="-webkit-media-controls-mute-button"], |
| .state-no-source input[pseudo="-webkit-media-controls-overlay-play-button"], |
| .state-no-source input[pseudo="-webkit-media-controls-fullscreen-button"], |
| .state-no-source input[pseudo="-internal-media-controls-download-button"], |
| .state-no-source input[pseudo="-webkit-media-controls-timeline"], |
| .state-no-source input[pseudo="-webkit-media-controls-volume-slider"] { |
| opacity: 0.4; |
| } |
| |
| .state-no-source input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb, |
| .state-no-source input[pseudo="-webkit-media-controls-volume-slider" i]::-webkit-slider-thumb { |
| display: none; |
| } |
| |
| .state-no-metadata input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb { |
| background-image: -webkit-image-set( |
| url(default_100_percent/legacy/mediaplayer_slider_thumb_grey.png) 1x); |
| } |