1/* 2 * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY 14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR 17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 21 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 22 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 23 */ 24 25/* media controls */ 26 27body:-webkit-full-page-media { 28 background-color: rgb(38, 38, 38); 29} 30 31audio { 32 width: 200px; 33 height: 16px; 34} 35 36::-webkit-media-controls { 37 width: inherit; 38 height: inherit; 39 position: relative; 40 display: -webkit-flex; 41 -webkit-align-items: flex-start; 42 -webkit-justify-content: flex-end; 43 -webkit-flex-direction: column; 44} 45 46audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 47 display: -webkit-flex; 48 direction: ltr; 49 -webkit-flex-direction: row; 50 -webkit-align-items: center; 51 -webkit-user-select: none; 52 position: relative; 53 bottom: 0; 54 width: 100%; 55 z-index: 0; 56 overflow: hidden; 57 height: 16px; 58 text-align: right; 59} 60 61video:-webkit-full-page-media { 62 margin: auto; 63 position: absolute; 64 top: 0; 65 right: 0; 66 bottom: 0; 67 left: 0; 68} 69 70video:-webkit-full-page-media::-webkit-media-controls-panel { 71 bottom: 0px; 72} 73 74audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 75 -webkit-appearance: media-mute-button; 76 display: -webkit-flex; 77 width: 16px; 78 height: 16px; 79 background-color: initial; 80 border: initial; 81 color: inherit; 82} 83 84audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button { 85 display: none; 86} 87 88audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 89 -webkit-appearance: media-play-button; 90 display: -webkit-flex; 91 width: 16px; 92 height: 16px; 93 background-color: initial; 94 border: initial; 95 color: inherit; 96} 97 98audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 99 -webkit-appearance: media-controls-background; 100 display: -webkit-flex; 101 -webkit-flex-direction: row; 102 -webkit-align-items: center; 103 -webkit-justify-content: flex-end; 104 -webkit-flex: 1 1; 105 -webkit-user-select: none; 106 height: 16px; 107 min-width: 0; 108} 109 110audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 111 display: none; 112} 113 114audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 115 display: none; 116} 117 118audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 119 -webkit-appearance: media-slider; 120 display: -webkit-flex; 121 -webkit-flex: 1 1; 122 height: 16px; 123 padding: 0px 2px; 124 background-color: initial; 125 border: initial; 126 color: inherit; 127 margin: initial; 128 min-width: 0; 129} 130 131audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 132 background-color: initial; 133 border: initial; 134 color: inherit; 135 margin: initial; 136} 137 138audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 139 -webkit-appearance: media-seek-back-button; 140 display: -webkit-flex; 141 width: 16px; 142 height: 16px; 143 background-color: initial; 144 border: initial; 145 color: inherit; 146} 147 148audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 149 -webkit-appearance: media-seek-forward-button; 150 display: -webkit-flex; 151 width: 16px; 152 height: 16px; 153 background-color: initial; 154 border: initial; 155 color: inherit; 156} 157 158audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 159 -webkit-appearance: media-enter-fullscreen-button; 160 display: -webkit-flex; 161 width: 16px; 162 height: 16px; 163 background-color: initial; 164 border: initial; 165 color: inherit; 166} 167 168audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 169 display: none; 170 background-color: initial; 171 border: initial; 172 color: inherit; 173} 174 175audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 176 display: none; 177 background-color: initial; 178 border: initial; 179 color: inherit; 180} 181 182audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 183 -webkit-appearance: media-toggle-closed-captions-button; 184 display: -webkit-flex; 185 width: 16px; 186 height: 16px; 187 background-color: initial; 188 border: initial; 189 color: inherit; 190} 191 192audio::-webkit-media-controls-closed-captions-container, video::-webkit-media-controls-closed-captions-container { 193 display: none; 194} 195 196audio::-webkit-media-controls-closed-captions-track-list, video::-webkit-media-controls-closed-captions-track-list { 197 display: none; 198} 199 200audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 201 -webkit-appearance: media-volume-slider-mute-button; 202 display: none; 203 background-color: initial; 204 border: initial; 205 color: inherit; 206} 207 208audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider { 209 display: none; 210} 211 212audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button { 213 display: none; 214} 215 216audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button { 217 display: none; 218} 219 220video::-webkit-media-text-track-container { 221 position: relative; 222 width: 100%; 223 overflow: hidden; 224 padding-bottom: 5px; 225 226 text-align: center; 227 color: rgba(255, 255, 255, 1); 228 229 letter-spacing: normal; 230 word-spacing: normal; 231 text-transform: none; 232 text-indent: 0; 233 text-decoration: none; 234 pointer-events: none; 235 -webkit-user-select: none; 236 word-break: break-word; 237 238 -webkit-flex: 1 1; 239 240 -webkit-line-box-contain: block inline-box replaced; 241} 242 243video::cue { 244 background-color: rgba(0, 0, 0, 0.8); 245} 246 247video::-webkit-media-text-track-display { 248 position: absolute; 249 overflow: hidden; 250 white-space: pre-wrap; 251 -webkit-box-sizing: border-box; 252 font: 22px sans-serif; 253} 254 255video::cue(:future) { 256 color: gray; 257} 258 259video::-webkit-media-text-track-container b { 260 font-weight: bold; 261} 262 263video::-webkit-media-text-track-container u { 264 text-decoration: underline; 265} 266 267video::-webkit-media-text-track-container i { 268 font-style: italic; 269} 270