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 30audio { 31 width: 300px; 32 height: 30px; 33} 34 35audio::-webkit-media-controls, 36video::-webkit-media-controls { 37 width: inherit; 38 height: inherit; 39 position: relative; 40 direction: ltr; 41 display: flex; 42 flex-direction: column; 43 justify-content: flex-end; 44 align-items: center; 45} 46 47audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { 48 width: 100%; 49 max-width: 800px; 50 height: 30px; 51 flex-shrink: 0; 52 bottom: 0; 53 text-indent: 0; 54 padding: 0; 55 box-sizing: border-box; 56} 57 58video::-webkit-media-controls-enclosure { 59 padding: 0px 5px 5px 5px; 60 height: 35px; 61 flex-shrink: 0; 62} 63 64audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 65 display: flex; 66 flex-direction: row; 67 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 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 84video:-webkit-full-page-media { 85 margin: auto; 86 position: absolute; 87 top: 0; 88 right: 0; 89 bottom: 0; 90 left: 0; 91} 92 93audio:-webkit-full-page-media, video:-webkit-full-page-media { 94 max-height: 100%; 95 max-width: 100%; 96} 97 98audio:-webkit-full-page-media::-webkit-media-controls-panel, 99video:-webkit-full-page-media::-webkit-media-controls-panel { 100 bottom: 0px; 101} 102 103audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 104 -webkit-appearance: media-mute-button; 105 display: flex; 106 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 118audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button { 119 display: none; 120} 121 122audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 123 -webkit-appearance: media-play-button; 124 display: flex; 125 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 138audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 139 -webkit-appearance: media-controls-background; 140 display: flex; 141 flex-direction: row; 142 align-items: center; 143 justify-content: flex-end; 144 flex: 1 1; 145 -webkit-user-select: none; 146 height: 16px; 147 min-width: 0; 148} 149 150audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 151audio::-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 flex: none; 155 display: 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 178audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 179 -webkit-appearance: media-slider; 180 display: flex; 181 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 191audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 192 -webkit-appearance: media-volume-slider; 193 display: flex; 194 /* The 1.9 value was empirically chosen to match old-flexbox behaviour 195 * and be aesthetically pleasing. 196 */ 197 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*/ 212input[type="range"]::-webkit-media-slider-container { 213 display: flex; 214 align-items: center; 215 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. */ 225input[type="range"]::-webkit-media-slider-container > div { 226 margin-right: -14px; 227} 228 229input[type="range"]::-webkit-media-slider-thumb { 230 margin-left: -7px; 231 margin-right: -7px; 232} 233 234audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 235 -webkit-appearance: media-seek-back-button; 236 display: flex; 237 width: 16px; 238 height: 16px; 239 background-color: initial; 240 border: initial; 241 color: inherit; 242} 243 244audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 245 -webkit-appearance: media-seek-forward-button; 246 display: flex; 247 width: 16px; 248 height: 16px; 249 background-color: initial; 250 border: initial; 251 color: inherit; 252} 253 254audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 255 -webkit-appearance: media-enter-fullscreen-button; 256 display: flex; 257 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 270audio::-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 277audio::-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 284audio::-webkit-media-controls-toggle-closed-captions-button { 285 display: none; 286} 287 288video::-webkit-media-controls-toggle-closed-captions-button { 289 -webkit-appearance: media-toggle-closed-captions-button; 290 display: flex; 291 flex: none; 292 border: none; 293 box-sizing: border-box; 294 width: 30px; 295 height: 30px; 296 line-height: 30px; 297 margin-left: -5px; 298 margin-right: 9px; 299 padding: 0; 300 background-color: initial; 301 color: inherit; 302} 303 304audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 305 -webkit-appearance: media-volume-slider-mute-button; 306 display: none; 307 background-color: initial; 308 border: initial; 309 color: inherit; 310} 311 312audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider { 313 display: none; 314} 315 316audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button { 317 display: none; 318} 319 320audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button { 321 display: none; 322} 323 324video::-webkit-media-text-track-container { 325 position: relative; 326 width: 100%; 327 overflow: hidden; 328 padding-bottom: 5px; 329 330 font: 22px sans-serif; 331 text-align: center; 332 color: rgba(255, 255, 255, 1); 333 334 letter-spacing: normal; 335 word-spacing: normal; 336 text-transform: none; 337 text-indent: 0; 338 text-decoration: none; 339 pointer-events: none; 340 -webkit-user-select: none; 341 word-break: break-word; 342 343 flex: 1 1; 344} 345 346video::cue { 347 display: inline; 348 349 background-color: rgba(0, 0, 0, 0.8); 350 padding: 2px 2px; 351} 352 353video::-webkit-media-text-track-region { 354 position: absolute; 355 line-height: 5.33vh; 356 writing-mode: horizontal-tb; 357 background: rgba(0, 0, 0, 0.8); 358 color: rgba(255, 255, 255, 1); 359 word-wrap: break-word; 360 overflow-wrap: break-word; 361 overflow: hidden; 362} 363 364video::-webkit-media-text-track-region-container { 365 position: relative; 366 367 display: flex; 368 flex-flow: column; 369 flex-direction: column; 370} 371 372video::-webkit-media-text-track-region-container.scrolling { 373 transition: top 433ms linear; 374} 375 376 377video::-webkit-media-text-track-display { 378 position: absolute; 379 overflow: hidden; 380 white-space: pre-wrap; 381 -webkit-box-sizing: border-box; 382 flex: 0 0 auto; 383} 384 385video::cue(:future) { 386 color: gray; 387} 388 389video::-webkit-media-text-track-container b { 390 font-weight: bold; 391} 392 393video::-webkit-media-text-track-container u { 394 text-decoration: underline; 395} 396 397video::-webkit-media-text-track-container i { 398 font-style: italic; 399} 400