OLD | NEW |
1 /**/ | 1 /* |
| 2 * Copyright (C) 2009 Apple Inc. All rights reserved. |
| 3 * Copyright (C) 2015 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:not([controls]) { |
| 31 display: none !important; |
| 32 } |
| 33 |
| 34 audio { |
| 35 width: 300px; |
| 36 height: 48px; |
| 37 } |
| 38 |
| 39 audio::-webkit-media-controls, |
| 40 video::-webkit-media-controls { |
| 41 width: inherit; |
| 42 height: inherit; |
| 43 position: relative; |
| 44 direction: ltr; |
| 45 display: flex; |
| 46 flex-direction: column; |
| 47 justify-content: flex-end; |
| 48 align-items: center; |
| 49 } |
| 50 |
| 51 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ |
| 52 width: 100%; |
| 53 height: 48px; |
| 54 flex-shrink: 0; |
| 55 bottom: 0; |
| 56 text-indent: 0; |
| 57 padding: 0; |
| 58 margin: 0; |
| 59 box-sizing: border-box; |
| 60 } |
| 61 |
| 62 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
| 63 display: flex; |
| 64 flex-direction: row; |
| 65 align-items: center; |
| 66 /* We use flex-start here to ensure that the play button is visible even |
| 67 * if we are too small to show all controls. |
| 68 */ |
| 69 justify-content: flex-start; |
| 70 -webkit-user-select: none; |
| 71 position: relative; |
| 72 width: 100%; |
| 73 z-index: 0; |
| 74 overflow: hidden; |
| 75 text-align: right; |
| 76 bottom: auto; |
| 77 height: 48px; |
| 78 min-width: 48px; |
| 79 background-color: #fafafa; |
| 80 /* The duration is also specified in MediaControlElements.cpp and LayoutTest
s/media/media-controls.js */ |
| 81 transition: opacity 0.3s; |
| 82 |
| 83 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif ; |
| 84 font-size: 14px; |
| 85 font-weight: normal; /* Make sure that we don't inherit non-defaults. */ |
| 86 font-style: normal; |
| 87 } |
| 88 |
| 89 video:-webkit-full-page-media { |
| 90 margin: auto; |
| 91 position: absolute; |
| 92 top: 0; |
| 93 right: 0; |
| 94 bottom: 0; |
| 95 left: 0; |
| 96 } |
| 97 |
| 98 audio:-webkit-full-page-media, video:-webkit-full-page-media { |
| 99 max-height: 100%; |
| 100 max-width: 100%; |
| 101 } |
| 102 |
| 103 audio:-webkit-full-page-media::-webkit-media-controls-panel, |
| 104 video:-webkit-full-page-media::-webkit-media-controls-panel { |
| 105 bottom: 0px; |
| 106 } |
| 107 |
| 108 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { |
| 109 -webkit-appearance: media-mute-button; |
| 110 display: flex; |
| 111 flex: none; |
| 112 border: none; |
| 113 box-sizing: border-box; |
| 114 width: 48px; |
| 115 height: 48px; |
| 116 line-height: 48px; |
| 117 padding: 12px; |
| 118 background-color: initial; |
| 119 color: inherit; |
| 120 } |
| 121 |
| 122 audio::-webkit-media-controls-overlay-enclosure { |
| 123 display: none; |
| 124 } |
| 125 |
| 126 video::-webkit-media-controls-overlay-enclosure { |
| 127 display: flex; |
| 128 position: relative; |
| 129 flex-direction: column; |
| 130 justify-content: flex-end; |
| 131 align-items: center; |
| 132 flex: 1 1; |
| 133 min-height: 0; |
| 134 width: 100%; |
| 135 margin-bottom: 10px; |
| 136 text-indent: 0; |
| 137 box-sizing: border-box; |
| 138 overflow: hidden; |
| 139 } |
| 140 |
| 141 video::-webkit-media-controls-overlay-play-button { |
| 142 -webkit-appearance: media-overlay-play-button; |
| 143 display: flex; |
| 144 position: absolute; |
| 145 top: 0; |
| 146 left: 0; |
| 147 margin: 0; |
| 148 border: none; |
| 149 box-sizing: border-box; |
| 150 background-color: transparent; |
| 151 width: 100%; |
| 152 height: 100%; |
| 153 padding: 0; |
| 154 } |
| 155 |
| 156 video::-internal-media-controls-overlay-cast-button { |
| 157 -webkit-appearance: -internal-media-overlay-cast-off-button; |
| 158 display: flex; |
| 159 position: absolute; |
| 160 top: 5%; |
| 161 left: 5%; |
| 162 margin-left: 0px; |
| 163 margin-top: 0px; |
| 164 border: none; |
| 165 box-sizing: border-box; |
| 166 background-color: transparent; |
| 167 width: 30px; |
| 168 height: 30px; |
| 169 padding: 0; |
| 170 } |
| 171 |
| 172 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { |
| 173 -webkit-appearance: media-play-button; |
| 174 display: flex; |
| 175 flex: none; |
| 176 border-sizing: border-box; |
| 177 width: 48px; |
| 178 height: 48px; |
| 179 line-height: 48px; |
| 180 padding: 12px; |
| 181 background-color: initial; |
| 182 color: inherit; |
| 183 } |
| 184 |
| 185 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { |
| 186 -webkit-appearance: media-controls-background; |
| 187 display: flex; |
| 188 flex-direction: row; |
| 189 align-items: center; |
| 190 justify-content: flex-end; |
| 191 flex: 1 1; |
| 192 -webkit-user-select: none; |
| 193 height: 48px; |
| 194 padding: 0; |
| 195 min-width: 0; |
| 196 } |
| 197 |
| 198 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display { |
| 199 -webkit-appearance: media-current-time-display; |
| 200 -webkit-user-select: none; |
| 201 flex: none; |
| 202 display: flex; |
| 203 border: none; |
| 204 cursor: default; |
| 205 |
| 206 height: 48px; |
| 207 |
| 208 /* text runs right to the edge of the container */ |
| 209 padding: 0; |
| 210 |
| 211 line-height: 48px; |
| 212 color: #5a5a5a; |
| 213 |
| 214 letter-spacing: normal; |
| 215 word-spacing: normal; |
| 216 text-transform: none; |
| 217 text-indent: 0; |
| 218 text-shadow: none; |
| 219 text-decoration: none; |
| 220 } |
| 221 |
| 222 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { |
| 223 -webkit-appearance: media-current-time-display; |
| 224 -webkit-user-select: none; |
| 225 flex: none; |
| 226 display: flex; |
| 227 border: none; |
| 228 cursor: default; |
| 229 |
| 230 height: 48px; |
| 231 |
| 232 /* text runs right to the edge of the container, plus a little on |
| 233 * the left to pad the leading "/" */ |
| 234 padding: 0 0 0 4px; |
| 235 |
| 236 line-height: 48px; |
| 237 color: #5a5a5a; |
| 238 |
| 239 letter-spacing: normal; |
| 240 word-spacing: normal; |
| 241 text-transform: none; |
| 242 text-indent: 0; |
| 243 text-shadow: none; |
| 244 text-decoration: none; |
| 245 } |
| 246 |
| 247 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
| 248 -webkit-appearance: media-slider; |
| 249 display: flex; |
| 250 flex: 1 1 auto; |
| 251 height: 48px; |
| 252 |
| 253 /* Leave 6px on either side for the thumb. Use margin so that |
| 254 * the slider doesn't extend into it. We also add 12px border. |
| 255 */ |
| 256 padding: 0; |
| 257 margin: 0 18px 0 18px; |
| 258 background-color: transparent; |
| 259 min-width: 25px; |
| 260 border: initial; |
| 261 color: inherit; |
| 262 } |
| 263 |
| 264 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { |
| 265 -webkit-appearance: media-volume-slider; |
| 266 display: flex; |
| 267 /* The 1.9 value was empirically chosen to match old-flexbox behaviour |
| 268 * and be aesthetically pleasing. |
| 269 */ |
| 270 flex: 1 1.9 auto; |
| 271 height: 48px; |
| 272 max-width: 70px; |
| 273 /* Leave room for the thumb, which has 6px radius. Use margin rather |
| 274 * than padding so that the slider doesn't extend into it. We also |
| 275 * leave an addition 12px margin. |
| 276 */ |
| 277 padding: 0; |
| 278 margin: 0 18px 0 18px; |
| 279 background-color: transparent; |
| 280 min-width: 25px; |
| 281 border: initial; |
| 282 color: inherit; |
| 283 } |
| 284 |
| 285 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. |
| 286 https://code.google.com/p/chromium/issues/detail?id=112508 |
| 287 https://bugs.webkit.org/show_bug.cgi?id=62218 |
| 288 */ |
| 289 input[type="range" i]::-webkit-media-slider-container { |
| 290 display: flex; |
| 291 align-items: center; |
| 292 flex-direction: row; /* This property is updated by C++ code. */ |
| 293 box-sizing: border-box; |
| 294 /** this positions the slider thumb for both time and volume. */ |
| 295 height: 48px; |
| 296 width: 100%; |
| 297 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ |
| 298 } |
| 299 |
| 300 /* The negative right margin causes the track to overflow its container. */ |
| 301 input[type="range" i]::-webkit-media-slider-container > div { |
| 302 margin-right: -18px; /* box is 36px wide, get to the middle */ |
| 303 margin-left: -18px; |
| 304 } |
| 305 |
| 306 input[type="range" i]::-webkit-media-slider-thumb { |
| 307 box-sizing: border-box; |
| 308 width: 48px; |
| 309 height: 48px; |
| 310 padding: 0px; |
| 311 } |
| 312 |
| 313 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { |
| 314 -webkit-appearance: media-enter-fullscreen-button; |
| 315 display: flex; |
| 316 flex: none; |
| 317 overflow: hidden; |
| 318 border: none; |
| 319 box-sizing: border-box; |
| 320 width: 48px; |
| 321 height: 48px; |
| 322 line-height: 48px; |
| 323 background-color: initial; |
| 324 color: inherit; |
| 325 } |
| 326 |
| 327 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
t-button { |
| 328 -webkit-appearance: -internal-media-cast-off-button; |
| 329 display: flex; |
| 330 flex: none; |
| 331 border: none; |
| 332 box-sizing: border-box; |
| 333 width: 48px; |
| 334 height: 48px; |
| 335 line-height: 48px; |
| 336 margin-left: 0px; |
| 337 margin-right: 0px; |
| 338 padding: 12px; |
| 339 background-color: initial; |
| 340 color: inherit; |
| 341 } |
| 342 |
| 343 audio::-webkit-media-controls-toggle-closed-captions-button { |
| 344 display: none; |
| 345 } |
| 346 |
| 347 video::-webkit-media-controls-toggle-closed-captions-button { |
| 348 -webkit-appearance: media-toggle-closed-captions-button; |
| 349 display: flex; |
| 350 flex: none; |
| 351 border: none; |
| 352 box-sizing: border-box; |
| 353 width: 48px; |
| 354 height: 48px; |
| 355 line-height: 48px; |
| 356 margin-left: 0px; |
| 357 margin-right: 0px; |
| 358 padding: 12px; |
| 359 background-color: initial; |
| 360 color: inherit; |
| 361 } |
| 362 |
| 363 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con
trols-fullscreen-volume-slider { |
| 364 display: none; |
| 365 } |
| 366 |
| 367 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media
-controls-fullscreen-volume-min-button { |
| 368 display: none; |
| 369 } |
| 370 |
| 371 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media
-controls-fullscreen-volume-max-button { |
| 372 display: none; |
| 373 } |
| 374 |
| 375 video::-webkit-media-text-track-container { |
| 376 position: relative; |
| 377 width: inherit; |
| 378 height: inherit; |
| 379 overflow: hidden; |
| 380 |
| 381 font: 22px sans-serif; |
| 382 text-align: center; |
| 383 color: rgba(255, 255, 255, 1); |
| 384 |
| 385 letter-spacing: normal; |
| 386 word-spacing: normal; |
| 387 text-transform: none; |
| 388 text-indent: 0; |
| 389 text-decoration: none; |
| 390 pointer-events: none; |
| 391 -webkit-user-select: none; |
| 392 word-break: break-word; |
| 393 } |
| 394 |
| 395 video::cue { |
| 396 display: inline; |
| 397 |
| 398 background-color: rgba(0, 0, 0, 0.8); |
| 399 padding: 2px 2px; |
| 400 } |
| 401 |
| 402 video::-webkit-media-text-track-region { |
| 403 position: absolute; |
| 404 line-height: 5.33vh; |
| 405 writing-mode: horizontal-tb; |
| 406 background: rgba(0, 0, 0, 0.8); |
| 407 color: rgba(255, 255, 255, 1); |
| 408 word-wrap: break-word; |
| 409 overflow-wrap: break-word; |
| 410 overflow: hidden; |
| 411 } |
| 412 |
| 413 video::-webkit-media-text-track-region-container { |
| 414 position: relative; |
| 415 |
| 416 display: flex; |
| 417 flex-flow: column; |
| 418 flex-direction: column; |
| 419 } |
| 420 |
| 421 video::-webkit-media-text-track-region-container.scrolling { |
| 422 transition: top 433ms linear; |
| 423 } |
| 424 |
| 425 |
| 426 video::-webkit-media-text-track-display { |
| 427 position: absolute; |
| 428 overflow: hidden; |
| 429 white-space: pre-wrap; |
| 430 -webkit-box-sizing: border-box; |
| 431 flex: 0 0 auto; |
| 432 } |
| 433 |
| 434 video::cue(:future) { |
| 435 color: gray; |
| 436 } |
| 437 |
| 438 video::-webkit-media-text-track-container b { |
| 439 font-weight: bold; |
| 440 } |
| 441 |
| 442 video::-webkit-media-text-track-container u { |
| 443 text-decoration: underline; |
| 444 } |
| 445 |
| 446 video::-webkit-media-text-track-container i { |
| 447 font-style: italic; |
| 448 } |
OLD | NEW |