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 /* The duration is also specified in MediaControlElements.cpp and LayoutTests/media/media-controls.js */ 83 transition: opacity 0.3s; 84} 85 86video:-webkit-full-page-media { 87 margin: auto; 88 position: absolute; 89 top: 0; 90 right: 0; 91 bottom: 0; 92 left: 0; 93} 94 95audio:-webkit-full-page-media, video:-webkit-full-page-media { 96 max-height: 100%; 97 max-width: 100%; 98} 99 100audio:-webkit-full-page-media::-webkit-media-controls-panel, 101video:-webkit-full-page-media::-webkit-media-controls-panel { 102 bottom: 0px; 103} 104 105audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 106 -webkit-appearance: media-mute-button; 107 display: flex; 108 flex: none; 109 border: none; 110 box-sizing: border-box; 111 width: 35px; 112 height: 30px; 113 line-height: 30px; 114 margin: 0 6px 0 0; 115 padding: 0; 116 background-color: initial; 117 color: inherit; 118} 119 120audio::-webkit-media-controls-overlay-enclosure { 121 display: none; 122} 123 124video::-webkit-media-controls-overlay-enclosure { 125 display: flex; 126 position: relative; 127 flex-direction: column; 128 justify-content: flex-end; 129 align-items: center; 130 flex: 1 1; 131 width: 100%; 132 max-width: 800px; 133 text-indent: 0; 134 box-sizing: border-box; 135 overflow: hidden; 136} 137 138video::-webkit-media-controls-overlay-play-button { 139 -webkit-appearance: media-overlay-play-button; 140 display: flex; 141 position: absolute; 142 top: 50%; 143 left: 50%; 144 margin-left: -40px; 145 margin-top: -40px; 146 border: none; 147 box-sizing: border-box; 148 background-color: transparent; 149 width: 80px; 150 height: 80px; 151 padding: 0; 152} 153 154video::-internal-media-controls-overlay-cast-button { 155 -webkit-appearance: -internal-media-overlay-cast-off-button; 156 display: flex; 157 position: absolute; 158 top: 5%; 159 left: 5%; 160 margin-left: 0px; 161 margin-top: 0px; 162 border: none; 163 box-sizing: border-box; 164 background-color: transparent; 165 width: 30px; 166 height: 30px; 167 padding: 0; 168} 169 170audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 171 -webkit-appearance: media-play-button; 172 display: flex; 173 flex: none; 174 border: none; 175 box-sizing: border-box; 176 width: 30px; 177 height: 30px; 178 line-height: 30px; 179 margin-left: 9px; 180 margin-right: 9px; 181 padding: 0; 182 background-color: initial; 183 color: inherit; 184} 185 186audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 187 -webkit-appearance: media-controls-background; 188 display: flex; 189 flex-direction: row; 190 align-items: center; 191 justify-content: flex-end; 192 flex: 1 1; 193 -webkit-user-select: none; 194 height: 16px; 195 min-width: 0; 196} 197 198audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 199audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 200 -webkit-appearance: media-current-time-display; 201 -webkit-user-select: none; 202 flex: none; 203 display: flex; 204 border: none; 205 cursor: default; 206 207 height: 30px; 208 margin: 0 9px 0 0; 209 padding: 0; 210 211 line-height: 30px; 212 font-family: Arial, Helvetica, sans-serif; 213 font-size: 13px; 214 font-weight: bold; 215 font-style: normal; 216 color: white; 217 218 letter-spacing: normal; 219 word-spacing: normal; 220 text-transform: none; 221 text-indent: 0; 222 text-shadow: none; 223 text-decoration: none; 224} 225 226audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 227 -webkit-appearance: media-slider; 228 display: flex; 229 flex: 1 1 auto; 230 height: 8px; 231 margin: 0 15px 0 0; 232 padding: 0; 233 background-color: transparent; 234 min-width: 25px; 235 border: initial; 236 color: inherit; 237} 238 239audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 240 -webkit-appearance: media-volume-slider; 241 display: flex; 242 /* The 1.9 value was empirically chosen to match old-flexbox behaviour 243 * and be aesthetically pleasing. 244 */ 245 flex: 1 1.9 auto; 246 height: 8px; 247 max-width: 70px; 248 margin: 0 15px 0 0; 249 padding: 0; 250 background-color: transparent; 251 min-width: 15px; 252 border: initial; 253 color: inherit; 254} 255 256/* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. 257 https://code.google.com/p/chromium/issues/detail?id=112508 258 https://bugs.webkit.org/show_bug.cgi?id=62218 259*/ 260input[type="range" i]::-webkit-media-slider-container { 261 display: flex; 262 align-items: center; 263 flex-direction: row; /* This property is updated by C++ code. */ 264 box-sizing: border-box; 265 height: 100%; 266 width: 100%; 267 border: 1px solid rgba(230, 230, 230, 0.35); 268 border-radius: 4px; 269 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */ 270} 271 272/* The negative right margin causes the track to overflow its container. */ 273input[type="range" i]::-webkit-media-slider-container > div { 274 margin-right: -14px; 275} 276 277input[type="range" i]::-webkit-media-slider-thumb { 278 margin-left: -7px; 279 margin-right: -7px; 280} 281 282audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 283 -webkit-appearance: media-enter-fullscreen-button; 284 display: flex; 285 flex: none; 286 border: none; 287 box-sizing: border-box; 288 width: 30px; 289 height: 30px; 290 line-height: 30px; 291 margin-left: -5px; 292 margin-right: 9px; 293 padding: 0; 294 background-color: initial; 295 color: inherit; 296} 297 298audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button { 299 -webkit-appearance: -internal-media-cast-off-button; 300 display: flex; 301 flex: none; 302 border: none; 303 box-sizing: border-box; 304 width: 30px; 305 height: 30px; 306 line-height: 30px; 307 margin-left: -5px; 308 margin-right: 9px; 309 padding: 0; 310 background-color: initial; 311 color: inherit; 312} 313 314audio::-webkit-media-controls-toggle-closed-captions-button { 315 display: none; 316} 317 318video::-webkit-media-controls-toggle-closed-captions-button { 319 -webkit-appearance: media-toggle-closed-captions-button; 320 display: flex; 321 flex: none; 322 border: none; 323 box-sizing: border-box; 324 width: 30px; 325 height: 30px; 326 line-height: 30px; 327 margin-left: -5px; 328 margin-right: 9px; 329 padding: 0; 330 background-color: initial; 331 color: inherit; 332} 333 334audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider { 335 display: none; 336} 337 338audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button { 339 display: none; 340} 341 342audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button { 343 display: none; 344} 345 346video::-webkit-media-text-track-container { 347 position: relative; 348 width: 100%; 349 overflow: hidden; 350 padding-bottom: 5px; 351 352 font: 22px sans-serif; 353 text-align: center; 354 color: rgba(255, 255, 255, 1); 355 356 letter-spacing: normal; 357 word-spacing: normal; 358 text-transform: none; 359 text-indent: 0; 360 text-decoration: none; 361 pointer-events: none; 362 -webkit-user-select: none; 363 word-break: break-word; 364 365 flex: 1 1; 366} 367 368video::cue { 369 display: inline; 370 371 background-color: rgba(0, 0, 0, 0.8); 372 padding: 2px 2px; 373} 374 375video::-webkit-media-text-track-region { 376 position: absolute; 377 line-height: 5.33vh; 378 writing-mode: horizontal-tb; 379 background: rgba(0, 0, 0, 0.8); 380 color: rgba(255, 255, 255, 1); 381 word-wrap: break-word; 382 overflow-wrap: break-word; 383 overflow: hidden; 384} 385 386video::-webkit-media-text-track-region-container { 387 position: relative; 388 389 display: flex; 390 flex-flow: column; 391 flex-direction: column; 392} 393 394video::-webkit-media-text-track-region-container.scrolling { 395 transition: top 433ms linear; 396} 397 398 399video::-webkit-media-text-track-display { 400 position: absolute; 401 overflow: hidden; 402 white-space: pre-wrap; 403 -webkit-box-sizing: border-box; 404 flex: 0 0 auto; 405} 406 407video::cue(:future) { 408 color: gray; 409} 410 411video::-webkit-media-text-track-container b { 412 font-weight: bold; 413} 414 415video::-webkit-media-text-track-container u { 416 text-decoration: underline; 417} 418 419video::-webkit-media-text-track-container i { 420 font-style: italic; 421} 422