1 /* 2 * Copyright (C) 2009 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Google Inc. 4 * 5 * Redistribution and use in source and binary forms, with or without 6 * modification, are permitted provided that the following conditions 7 * are met: 8 * 1. Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * 2. Redistributions in binary form must reproduce the above copyright 11 * notice, this list of conditions and the following disclaimer in the 12 * documentation and/or other materials provided with the distribution. 13 * 14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY 15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR 18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26 /* Chromium default media controls */ 27 28 /* WARNING: This css file can only style <audio> and <video> elements */ 29 30 audio { 31 width: 300px; 32 height: 30px; 33 } 34 35 audio::-webkit-media-controls, 36 video::-webkit-media-controls { 37 width: inherit; 38 height: inherit; 39 position: relative; 40 direction: ltr; 41 display: -webkit-flex; 42 -webkit-flex-direction: column; 43 -webkit-justify-content: flex-end; 44 -webkit-align-items: center; 45 } 46 47 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { 48 width: 100%; 49 max-width: 800px; 50 height: 30px; 51 -webkit-flex-shrink: 0; 52 bottom: 0; 53 text-indent: 0; 54 padding: 0; 55 box-sizing: border-box; 56 } 57 58 video::-webkit-media-controls-enclosure { 59 padding: 0px 5px 5px 5px; 60 height: 35px; 61 -webkit-flex-shrink: 0; 62 } 63 64 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 65 display: -webkit-flex; 66 -webkit-flex-direction: row; 67 -webkit-align-items: center; 68 /* We use flex-start here to ensure that the play button is visible even 69 * if we are too small to show all controls. 70 */ 71 -webkit-justify-content: flex-start; 72 -webkit-user-select: none; 73 position: relative; 74 width: 100%; 75 z-index: 0; 76 overflow: hidden; 77 text-align: right; 78 bottom: auto; 79 height: 30px; 80 background-color: rgba(20, 20, 20, 0.8); 81 border-radius: 5px; 82 } 83 84 video:-webkit-full-page-media { 85 margin: auto; 86 position: absolute; 87 top: 0; 88 right: 0; 89 bottom: 0; 90 left: 0; 91 } 92 93 audio:-webkit-full-page-media, video:-webkit-full-page-media { 94 max-height: 100%; 95 max-width: 100%; 96 } 97 98 audio:-webkit-full-page-media::-webkit-media-controls-panel, 99 video:-webkit-full-page-media::-webkit-media-controls-panel { 100 bottom: 0px; 101 } 102 103 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 104 -webkit-appearance: media-mute-button; 105 display: -webkit-flex; 106 -webkit-flex: none; 107 border: none; 108 box-sizing: border-box; 109 width: 35px; 110 height: 30px; 111 line-height: 30px; 112 margin: 0 6px 0 0; 113 padding: 0; 114 background-color: initial; 115 color: inherit; 116 } 117 118 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button { 119 display: none; 120 } 121 122 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 123 -webkit-appearance: media-play-button; 124 display: -webkit-flex; 125 -webkit-flex: none; 126 border: none; 127 box-sizing: border-box; 128 width: 30px; 129 height: 30px; 130 line-height: 30px; 131 margin-left: 9px; 132 margin-right: 9px; 133 padding: 0; 134 background-color: initial; 135 color: inherit; 136 } 137 138 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 139 -webkit-appearance: media-controls-background; 140 display: -webkit-flex; 141 -webkit-flex-direction: row; 142 -webkit-align-items: center; 143 -webkit-justify-content: flex-end; 144 -webkit-flex: 1 1; 145 -webkit-user-select: none; 146 height: 16px; 147 min-width: 0; 148 } 149 150 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 151 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 152 -webkit-appearance: media-current-time-display; 153 -webkit-user-select: none; 154 -webkit-flex: none; 155 display: -webkit-flex; 156 border: none; 157 cursor: default; 158 159 height: 30px; 160 margin: 0 9px 0 0; 161 padding: 0; 162 163 line-height: 30px; 164 font-family: Arial, Helvetica, sans-serif; 165 font-size: 13px; 166 font-weight: bold; 167 font-style: normal; 168 color: white; 169 170 letter-spacing: normal; 171 word-spacing: normal; 172 text-transform: none; 173 text-indent: 0; 174 text-shadow: none; 175 text-decoration: none; 176 } 177 178 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 179 -webkit-appearance: media-slider; 180 display: -webkit-flex; 181 -webkit-flex: 1 1 auto; 182 height: 8px; 183 margin: 0 15px 0 0; 184 padding: 0; 185 background-color: transparent; 186 min-width: 25px; 187 border: initial; 188 color: inherit; 189 } 190 191 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 192 -webkit-appearance: media-volume-slider; 193 display: -webkit-flex; 194 /* The 1.9 value was empirically chosen to match old-flexbox behaviour 195 * and be aesthetically pleasing. 196 */ 197 -webkit-flex: 1 1.9 auto; 198 height: 8px; 199 max-width: 70px; 200 margin: 0 15px 0 0; 201 padding: 0; 202 background-color: transparent; 203 min-width: 15px; 204 border: initial; 205 color: inherit; 206 } 207 208 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. 209 https://code.google.com/p/chromium/issues/detail?id=112508 210 https://bugs.webkit.org/show_bug.cgi?id=62218 211 */ 212 input[type="range"]::-webkit-media-slider-container { 213 display: -webkit-flex; 214 -webkit-align-items: center; 215 -webkit-flex-direction: row; /* This property is updated by C++ code. */ 216 box-sizing: border-box; 217 height: 100%; 218 width: 100%; 219 border: 1px solid rgba(230, 230, 230, 0.35); 220 border-radius: 4px; 221 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */ 222 } 223 224 /* The negative right margin causes the track to overflow its container. */ 225 input[type="range"]::-webkit-media-slider-container > div { 226 margin-right: -14px; 227 } 228 229 input[type="range"]::-webkit-media-slider-thumb { 230 margin-left: -7px; 231 margin-right: -7px; 232 } 233 234 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 235 -webkit-appearance: media-seek-back-button; 236 display: -webkit-flex; 237 width: 16px; 238 height: 16px; 239 background-color: initial; 240 border: initial; 241 color: inherit; 242 } 243 244 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 245 -webkit-appearance: media-seek-forward-button; 246 display: -webkit-flex; 247 width: 16px; 248 height: 16px; 249 background-color: initial; 250 border: initial; 251 color: inherit; 252 } 253 254 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 255 -webkit-appearance: media-enter-fullscreen-button; 256 display: -webkit-flex; 257 -webkit-flex: none; 258 border: none; 259 box-sizing: border-box; 260 width: 30px; 261 height: 30px; 262 line-height: 30px; 263 margin-left: -5px; 264 margin-right: 9px; 265 padding: 0; 266 background-color: initial; 267 color: inherit; 268 } 269 270 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 271 display: none; 272 background-color: initial; 273 border: initial; 274 color: inherit; 275 } 276 277 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 278 display: none; 279 background-color: initial; 280 border: initial; 281 color: inherit; 282 } 283 284 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 285 -webkit-appearance: media-toggle-closed-captions-button; 286 display: -webkit-flex; 287 -webkit-flex: none; 288 border: none; 289 box-sizing: border-box; 290 width: 30px; 291 height: 30px; 292 line-height: 30px; 293 margin-left: -5px; 294 margin-right: 9px; 295 padding: 0; 296 background-color: initial; 297 color: inherit; 298 } 299 300 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 301 -webkit-appearance: media-volume-slider-mute-button; 302 display: none; 303 background-color: initial; 304 border: initial; 305 color: inherit; 306 } 307 308 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider { 309 display: none; 310 } 311 312 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button { 313 display: none; 314 } 315 316 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button { 317 display: none; 318 } 319 320 video::-webkit-media-text-track-container { 321 position: relative; 322 width: 100%; 323 overflow: hidden; 324 padding-bottom: 5px; 325 326 font: 22px sans-serif; 327 text-align: center; 328 color: rgba(255, 255, 255, 1); 329 330 letter-spacing: normal; 331 word-spacing: normal; 332 text-transform: none; 333 text-indent: 0; 334 text-decoration: none; 335 pointer-events: none; 336 -webkit-user-select: none; 337 word-break: break-word; 338 339 -webkit-flex: 1 1; 340 } 341 342 video::cue { 343 display: inline; 344 345 background-color: rgba(0, 0, 0, 0.8); 346 padding: 2px 2px; 347 } 348 349 video::-webkit-media-text-track-region { 350 position: absolute; 351 line-height: 5.33vh; 352 writing-mode: horizontal-tb; 353 background: rgba(0, 0, 0, 0.8); 354 color: rgba(255, 255, 255, 1); 355 word-wrap: break-word; 356 overflow-wrap: break-word; 357 overflow: hidden; 358 } 359 360 video::-webkit-media-text-track-region-container { 361 position: relative; 362 363 display: -webkit-flex; 364 -webkit-flex-flow: column; 365 -webkit-flex-direction: column; 366 } 367 368 video::-webkit-media-text-track-region-container.scrolling { 369 transition: top 433ms linear; 370 } 371 372 373 video::-webkit-media-text-track-display { 374 position: absolute; 375 overflow: hidden; 376 white-space: pre-wrap; 377 -webkit-box-sizing: border-box; 378 -webkit-flex: 0 0 auto; 379 } 380 381 video::cue(:future) { 382 color: gray; 383 } 384 385 video::-webkit-media-text-track-container b { 386 font-weight: bold; 387 } 388 389 video::-webkit-media-text-track-container u { 390 text-decoration: underline; 391 } 392 393 video::-webkit-media-text-track-container i { 394 font-style: italic; 395 } 396
