1/* 2 * Copyright (C) 2013, 2014 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 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 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 25audio { 26 width: 200px; 27 height: 25px; 28} 29 30body:-webkit-full-page-media { 31 background-color: rgb(38, 38, 38); 32} 33 34video:-webkit-full-page-media { 35 margin: auto; 36 position: absolute; 37 top: 0; 38 right: 0; 39 bottom: 0; 40 left: 0; 41} 42 43video:-webkit-full-page-media::-webkit-media-controls-panel { 44 bottom: 0px; 45} 46 47video:-webkit-full-page-media::-webkit-media-controls-panel.no-video { 48 opacity: 1; 49} 50 51::-webkit-media-controls { 52 width: inherit; 53 height: inherit; 54 position: relative; 55 display: -webkit-flex; 56 -webkit-align-items: stretch; 57 -webkit-justify-content: flex-end; 58 -webkit-flex-direction: column; 59} 60 61video::-webkit-media-text-track-container, 62audio::-webkit-media-text-track-container { 63 position: relative; 64 -webkit-flex: 1 1 auto; 65} 66 67video::-webkit-media-controls-panel-composited-parent { 68 -webkit-transform: translateZ(0); 69 width: 100%; 70} 71 72video::-webkit-media-controls-panel, 73audio::-webkit-media-controls-panel { 74 box-sizing: border-box; 75 position: relative; 76 bottom: 0; 77 width: 100%; 78 padding-top: 1px; 79 min-height: 25px; 80 height: 25px; 81 line-height: 25px; 82 -webkit-user-select: none; 83 -webkit-user-drag: element; 84 background-color: transparent; 85 background-image: -webkit-linear-gradient(top, 86 rgba(0, 0, 0, .92) 0, 87 rgba(0, 0, 0, .92) 1px, 88 rgba(89, 89, 89, .92) 1px, 89 rgba(89, 89, 89, .92) 2px, 90 rgba(60, 60, 60, .92) 2px, 91 rgba(35, 35, 35, .92) 12px, 92 rgba(30, 30, 30, .92) 12px, 93 rgba(30, 30, 30, .92) 13px, 94 rgba(25, 25, 25, .92) 13px, 95 rgba(17, 17, 17, .92) 100% 96 ); 97 98 display: -webkit-flex; 99 -webkit-flex-direction: row; 100 -webkit-align-items: center; 101 -webkit-user-select: none; 102 103 direction: ltr; 104 105 transition: opacity 0.25s linear; 106} 107 108video::-webkit-media-controls-panel { 109 cursor: none; 110 opacity: 0; 111} 112 113video::-webkit-media-controls-panel.show, 114video::-webkit-media-controls-panel.paused, 115video::-webkit-media-controls-panel:hover { 116 cursor: inherit; 117 opacity: 1; 118} 119 120video::-webkit-media-controls-panel button, 121audio::-webkit-media-controls-panel button { 122 -webkit-appearance: none; 123 display: block; 124 padding: 0; 125 border: 0; 126 height: 16px; 127 width: 16px; 128 background-color: transparent; 129 color: white; 130 background-origin: content-box; 131 background-repeat: no-repeat; 132 background-position: center; 133 -webkit-filter: drop-shadow(black 0 1px 1px); 134} 135 136video::-webkit-media-controls-panel button:active, 137audio::-webkit-media-controls-panel button:active { 138 -webkit-filter: drop-shadow(white 0 0 10px); 139} 140 141video::-webkit-media-controls-rewind-button, 142audio::-webkit-media-controls-rewind-button { 143 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493" fill="url(#gradient)"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.681 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.683,0.599" fill="url(#gradient)"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486" fill="url(#gradient)"/></svg>'); 144 width: 16px; 145 height: 18px; 146 margin-bottom: 1px; 147 margin-left: 6px; 148 margin-right: 4px; 149} 150 151video::-webkit-media-controls-play-button, 152audio::-webkit-media-controls-play-button { 153 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/><path d="M 9,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/></svg>'); 154 margin-left: 6px; 155 margin-right: 1px; 156} 157 158video::-webkit-media-controls-play-button.paused, 159audio::-webkit-media-controls-play-button.paused { 160 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 15,7 0,15 z" fill="url(#gradient)"/></svg>'); 161} 162 163video::-webkit-media-controls-panel .mute-box, 164audio::-webkit-media-controls-panel .mute-box { 165 width: 22px; 166 height: 22px; 167 margin-right: 2px; 168 169 position: relative; 170 display: -webkit-flex; 171 -webkit-flex-direction: column; 172 -webkit-justify-content: center; 173 -webkit-align-items: center; 174} 175 176video::-webkit-media-controls-mute-button, 177audio::-webkit-media-controls-mute-button, 178video::-webkit-media-controls-volume-max-button { 179 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 0,9 0,-4 3,0 3,-3 0,10 -3,-3 -3,0 z" style="fill:url(#gradient) "/><path d="m 10.449,1.087 c 1.963,1.055 3.322,3.291 3.322,5.881 0,2.642 -1.402,4.913 -3.424,5.945" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="m 9.13,3.134 c 1.289,0.681 2.181,2.142 2.181,3.835 0,1.743001 -0.939,3.24 -2.285,3.897" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="M 7.794,5.175 C 8.403001,5.491 8.827001,6.167 8.827001,6.971 8.827001,7.818 8.356,8.537001 7.688,8.826" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/></svg>'); 180 width: 14px; 181} 182 183video::-webkit-media-controls-panel .volume-box, 184audio::-webkit-media-controls-panel .volume-box { 185 position: absolute; 186 box-sizing: border-box; 187 height: 22px; 188 bottom: 0; 189 left: 0; 190 191 -webkit-transform: rotate(-90deg); 192 -webkit-transform-origin: 11px 11px; 193 194 background-color: transparent; 195 background-image: -webkit-linear-gradient( 196 left, 197 rgba(17, 17, 17, 0.92), 198 rgba(42, 42, 42, 0.92) 199 ); 200 border: 1px solid rgba(0, 0, 0, 0.95); 201 border-radius: 12px; 202 203 display: -webkit-flex; 204 -webkit-flex-direction: row; 205 -webkit-align-items: center; 206 -webkit-justify-content: flex-end; 207 208 opacity: 0; 209 /* make zero width (rather than display:none) for AX and FKA */ 210 width: 0; /* will become 114px when shown */ 211 212} 213 214/* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */ 215video::-webkit-media-controls-panel .mute-box:hover .volume-box, 216video::-webkit-media-controls-panel .volume-box:hover, 217video::-webkit-media-controls-panel .volume-box:active, 218audio::-webkit-media-controls-panel .mute-box:hover .volume-box, 219audio::-webkit-media-controls-panel .volume-box:hover, 220audio::-webkit-media-controls-panel .volume-box:active { 221 opacity: 1; 222 /* resize to usable amount (rather than display:none) for AX and FKA */ 223 width: 114px; 224} 225 226audio::-webkit-media-controls-volume-slider, 227video::-webkit-media-controls-volume-slider { 228 -webkit-appearance: none; 229 box-sizing: border-box; 230 height: 10px; 231 width: 80px; 232 padding: 0; 233 margin-right: 6px; 234 235 border-radius: 5px; 236 background-color: transparent; 237 background-image: -webkit-linear-gradient( 238 top, 239 rgba(15, 15, 15, .85) 0, 240 rgba(23, 23, 23, .85) 50%, 241 rgba(15, 15, 15, .85) 100% 242 ); 243 border: 1px solid rgba(0, 0, 0, 0.875); 244} 245 246video::-webkit-media-controls-volume-slider::-webkit-slider-thumb, 247audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb { 248 -webkit-appearance: none; 249 width: 8px; 250 height: 8px; 251 border-radius: 4px; 252 background-color: transparent; 253 254 /* rotateZ() forces the layer into compositing mode. 255 Slider thumbs are small, so forcing a compositing layer is inexpensive, 256 and it keeps the slider from having to repaint while sliding. */ 257 -webkit-transform: rotateZ(0); 258 background-image: -webkit-linear-gradient( 259 left, 260 rgba(99, 99, 99, 1), 261 rgba(144, 144, 144, 1) 262 ); 263 box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14); 264} 265video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active, 266video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb, 267audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active, 268audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb { 269 background-image: -webkit-linear-gradient( 270 right top, 271 rgba(160, 160, 160, 1), 272 rgba(221, 221, 221, 1) 273 ); 274} 275 276video::-webkit-media-controls-mute-button.muted, 277audio::-webkit-media-controls-mute-button.muted, 278video::-webkit-media-controls-volume-min-button { 279 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 0,9 0,-4 3,0 3,-3 0,10 -3,-3 -3,0 z" fill="url(#gradient)"/></svg>'); 280} 281 282video::-webkit-media-controls-toggle-closed-captions-button, 283audio::-webkit-media-controls-toggle-closed-captions-button { 284 width: 16px; 285 height: 16px; 286 margin: 0 7px; 287 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z" fill="url(#gradient)"/></svg>'); 288 outline: 0; 289} 290 291video::-webkit-media-controls-closed-captions-container, 292audio::-webkit-media-controls-closed-captions-container { 293 -webkit-appearance: media-closed-captions-container; 294 position: absolute; 295 display: block; 296 right: 38px; 297 bottom: 29px; 298 max-width: calc(100% - 48px); /* right + 10px */ 299 max-height: calc(100% - 39px); /* bottom + 10px */ 300 overflow-x: hidden; 301 overflow-y: scroll; 302 background-color: rgba(0, 0, 0, 0.85); 303 border: 3px solid rgba(128, 128, 128, 0.75); 304 border-radius: 10px; 305 cursor: default; 306 z-index: 2; 307 text-align: initial; 308} 309 310video::-webkit-media-controls-closed-captions-container .list, 311audio::-webkit-media-controls-closed-captions-container .list { 312 display: block; 313 font-family: "Helvetica Bold", Helvetica, sans-serif; 314 font-size: 10pt; 315 -webkit-user-select: none; 316} 317 318video::-webkit-media-controls-closed-captions-container h3, 319audio::-webkit-media-controls-closed-captions-container h3 { 320 margin: 0; 321 color: rgb(117, 117, 117); 322 text-shadow: 0 1px 0 black; 323 -webkit-margin-start: 23px; 324 padding-top: 4px; 325 font-weight: bold; 326 font-size: 10pt; 327} 328 329video::-webkit-media-controls-closed-captions-container ul, 330audio::-webkit-media-controls-closed-captions-container ul { 331 list-style-type: none; 332 margin: 0 0 4px 0; 333 padding: 0; 334 font-weight: bold; 335} 336 337video::-webkit-media-controls-closed-captions-container li, 338audio::-webkit-media-controls-closed-captions-container li { 339 position: relative; 340 color: white; 341 background-image: none; 342 text-shadow: 0 1px 0 black; 343 margin: 0; 344 padding-left: 37px; 345 padding-right: 35px; 346 padding-top: 0.15em; 347 padding-bottom: 0.2em; 348 box-sizing: border-box; 349 overflow: hidden; 350 white-space: nowrap; 351 text-overflow: ellipsis; 352 border-top: 1px solid transparent; 353 border-bottom: 1px solid transparent; 354} 355 356video::-webkit-media-controls-closed-captions-container li:focus, 357audio::-webkit-media-controls-closed-captions-container li:focus { 358 outline: 0; 359 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.3)), color-stop(1, rgba(255, 255, 255, 0.2))); 360} 361 362video::-webkit-media-controls-closed-captions-container li:hover, 363audio::-webkit-media-controls-closed-captions-container li:hover { 364 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 246)), color-stop(1, rgb(26, 68, 243))); 365 border-top: 1px solid rgb(70, 103, 234); 366 border-bottom: 1px solid rgb(3, 54, 229); 367} 368 369video::-webkit-media-controls-closed-captions-container li.selected::before, 370audio::-webkit-media-controls-closed-captions-container li.selected::before { 371 display: block; 372 content: ""; 373 position: absolute; 374 top: 0.25em; 375 width: 1.1em; 376 height: 1.1em; 377 -webkit-margin-start: -20px; 378 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>'); 379 background-repeat: no-repeat; 380} 381 382video::-webkit-media-controls-closed-captions-container li.selected:hover::before, 383audio::-webkit-media-controls-closed-captions-container li.selected:hover::before { 384 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>'); 385} 386 387video::-webkit-media-controls-fullscreen-button, 388audio::-webkit-media-controls-fullscreen-button { 389 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 14,1 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 1,14 m 0,-6 2,2 2,-2 c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>'); 390 margin: 0 7px; 391} 392video::-webkit-media-controls-fullscreen-button.exit, 393audio::-webkit-media-controls-fullscreen-button.exit { 394 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 7,8 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 8,7 m 0,-6 2,2 2,-2 c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>'); 395} 396video::-webkit-media-controls-status-display, 397audio::-webkit-media-controls-status-display { 398 cursor: default; 399 font: -webkit-small-control; 400 font-size: 9px; 401 overflow: hidden; 402 color: white; 403 text-shadow: black 0px 1px 1px; 404 405 letter-spacing: normal; 406 word-spacing: normal; 407 line-height: 25px; 408 text-transform: none; 409 text-indent: 0; 410 text-decoration: none; 411 text-align: left; 412 413 padding: 0 12px; 414 415 -webkit-flex: 1 1 0; 416} 417video::-webkit-media-controls-timeline, 418audio::-webkit-media-controls-timeline { 419 -webkit-appearance: none; 420 -webkit-flex: 1 1 0; 421 height: 9px; 422 margin: 0; 423 424 border-radius: 4.5px; 425 background-color: rgb(74, 74, 74); 426 box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08); 427} 428video::-webkit-media-controls-timeline::-webkit-slider-thumb, 429audio::-webkit-media-controls-timeline::-webkit-slider-thumb { 430 -webkit-appearance: none; 431 width:6px; 432 height: 6px; 433 background-color: white; 434 435 /* rotateZ() forces the layer into compositing mode. 436 Slider thumbs are small, so forcing a compositing layer is inexpensive, 437 and it keeps the slider from having to repaint while sliding. */ 438 -webkit-transform: translateY(1px) rotateZ(-45deg); 439 440 background-image: -webkit-gradient( 441 linear, 442 left bottom, 443 right top, 444 color-stop(0, rgba(99, 99, 99, 1)), 445 color-stop(1, rgba(144, 144, 144, 1)) 446 ); 447} 448video::-webkit-media-controls-timeline::-webkit-slider-thumb:active, 449video::-webkit-media-controls-timeline:active::-webkit-slider-thumb, 450audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active, 451audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb, 452 { 453 background-image: -webkit-gradient( 454 linear, 455 left bottom, 456 right top, 457 color-stop(0, rgba(160, 160, 160, 1)), 458 color-stop(1, rgba(221, 221, 221, 1)) 459 ); 460} 461video::-webkit-media-controls-current-time-display, 462video::-webkit-media-controls-time-remaining-display, 463audio::-webkit-media-controls-current-time-display, 464audio::-webkit-media-controls-time-remaining-display { 465 -webkit-user-select: none; 466 -webkit-flex: 0 0 0; 467 display: -webkit-flex; 468 -webkit-justify-content: center; 469 -webkit-align-items: center; 470 cursor: default; 471 font: -webkit-small-control; 472 font-size: 9px; 473 overflow-y: hidden; 474 overflow-x: hidden; 475 width: 45px; 476 min-width: 45px; 477 color: white; 478 text-shadow: black 0px 1px 1px; 479 letter-spacing: normal; 480 word-spacing: normal; 481 line-height: normal; 482 text-transform: none; 483 text-indent: 0px; 484 text-decoration: none; 485} 486 487video::-webkit-media-controls-timeline-container .hour-long-time, 488audio::-webkit-media-controls-timeline-container .hour-long-time { 489 min-width: 67px; 490} 491 492video::-webkit-media-controls-timeline-container, 493audio::-webkit-media-controls-timeline-container { 494 display: -webkit-flex; 495 -webkit-flex-direction: row; 496 -webkit-align-items: center; 497 -webkit-user-select: none; 498 -webkit-flex: 1 1 0; 499 position: relative; 500 padding: 0; 501} 502 503video::-webkit-media-controls-panel .thumbnail-track, 504audio::-webkit-media-controls-panel .thumbnail-track { 505 position: relative; 506 -webkit-flex: 1 1 0; 507 height: 9px; 508 margin: 0 2px; 509 display: -webkit-flex; 510 -webkit-align-items: stretch; 511 -webkit-flex-direction: column; 512} 513 514video::-webkit-media-controls-panel .thumbnail, 515audio::-webkit-media-controls-panel .thumbnail { 516 position: absolute; 517 opacity: 0; 518 transition: opacity 0.25s linear; 519 bottom: 15px; 520 width: 100px; 521 height: 58px; 522 margin-left: -50px; 523 border: 5px solid black; 524 box-shadow: 0 0 3px white; 525 border-radius: 3px; 526} 527 528video::-webkit-media-controls-panel .thumbnail-image, 529audio::-webkit-media-controls-panel .thumbnail-image { 530 width: 100%; 531 height: 100%; 532} 533 534video::-webkit-media-controls-panel .thumbnail.show, 535audio::-webkit-media-controls-panel .thumbnail.show { 536 opacity: 1; 537} 538 539video::-webkit-media-controls-panel .hidden, 540audio::-webkit-media-controls-panel .hidden { 541 display: none; 542} 543 544/* Full Screen */ 545 546/* 547 Page stylesheets are not allowed to override the style of media 548 controls while in full screen mode, so many if not all the rules 549 defined in this section will be marked as !important to enforce 550 this restriction 551*/ 552 553video:-webkit-full-screen::-webkit-media-controls-panel { 554 -webkit-align-items: flex-start !important; 555 -webkit-justify-content: flex-end !important; 556 557 width: 440px !important; 558 height: 60px !important; 559 margin: 0 auto 50px auto !important; 560 padding-top: 10px !important; 561 562 background: -webkit-linear-gradient(top, 563 rgba(45, 45, 45, .97) 0, 564 rgba(30, 30, 30, .97) 19px, 565 rgba(25, 25, 25, .97) 19px, 566 rgba(25, 25, 25, .97) 20px, 567 rgba(19, 19, 19, .97) 20px, 568 rgba(12, 12, 12, .97) 100% 569 ) !important; 570 571 box-shadow: 572 inset 0 -1px 1px rgba(0, 0, 0, 0.5), 573 inset 0 1px 0 0px rgba(255, 255, 255, 0.15), 574 inset 0 -1px 0 0px rgba(202, 202, 202, 0.09), 575 0 0 0 1px rgba(0, 0, 0, 0.5); 576 border-radius: 8px !important; 577 578 transition: opacity 0.3s linear !important; 579} 580 581video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel { 582 opacity: 0 ! important; 583 transition: opacity 0 ! important; 584} 585 586video:-webkit-full-screen::-webkit-media-controls-panel .volume-box { 587 -webkit-transform: none; 588 opacity: 1; 589 left: 11px; 590 top: 13px; 591 width: 90px; 592 height: 14px; 593 display: -webkit-flex; 594 -webkit-flex-direction: row; 595 -webkit-align-items: center; 596 background-image: none; 597 border: none; 598} 599 600video:-webkit-full-screen::-webkit-media-controls-volume-slider { 601 height: 6px; 602 border-radius: 3px; 603 background-image: -webkit-linear-gradient(top, 604 rgba(16, 16, 16, .300) 0, 605 rgba(9, 9, 9, .629) 100% 606 ); 607 box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08); 608} 609 610video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb { 611 width: 10px; 612 height: 10px; 613 border-radius: 5px; 614 615 /* rotateZ() forces the layer into compositing mode. 616 Slider thumbs are small, so forcing a compositing layer is inexpensive, 617 and it keeps the slider from having to repaint while sliding. */ 618 -webkit-transform: rotateZ(270deg); 619} 620 621video:-webkit-full-screen::-webkit-media-controls-play-button { 622 position: absolute; 623 624 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 22"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 0,22 8,22 8,0 z" fill="url(#gradient)"/><path d="M 13,0 13,22 21,22 21,0 z" fill="url(#gradient)"/></svg>'); 625 626 width: 22px; 627 height: 23px; 628 left: 209px; 629 top: 9px; 630 margin: 0; 631 padding: 0; 632} 633 634video:-webkit-full-screen::-webkit-media-controls-play-button.paused { 635 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 22"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 21,11 0,22 z" fill="url(#gradient)"/></svg>'); 636} 637 638video:-webkit-full-screen::-webkit-media-controls-rewind-button { 639 position: absolute; 640 left: 162px; 641 top: 13px; 642 width: 18px; 643 height: 18px; 644} 645 646video:-webkit-full-screen::-webkit-media-controls-seek-back-button { 647 position: absolute; 648 649 650 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 22,0 11,7 22,15 z" fill="url(#gradient)"/><path d="M 11,0 0,7 11,15 z" fill="url(#gradient)"/></svg>'); 651 652 width: 23px; 653 height: 16px; 654 left: 156px; 655 top: 13px; 656} 657 658video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button { 659 position: absolute; 660 display: -webkit-flex; 661 width: 29px; 662 height: 16px; 663 left: 262px; 664 top: 13px; 665} 666 667video:-webkit-full-screen::-webkit-media-controls-seek-forward-button { 668 position: absolute; 669 670 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 15"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 11,7 0,15 z" fill="url(#gradient)"/><path d="M 11,0 22,7 11,15 z" fill="url(#gradient)"/></svg>'); 671 672 width: 23px; 673 height: 16px; 674 left: 256px; 675 top: 13px; 676} 677 678video:-webkit-full-screen::-webkit-media-controls-timeline-container { 679 height: auto; 680 width: 420px; 681 position: absolute; 682 bottom: 9px; 683 left: 8px; 684 right: 8px; 685} 686 687video:-webkit-full-screen::-webkit-media-controls-status-display { 688 width: 420px; 689 position: absolute; 690 bottom: 7px; 691 left: 8px; 692 right: 8px; 693} 694 695video:-webkit-full-screen::-webkit-media-controls-closed-captions-container { 696 bottom: 114px; 697 right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */ 698 max-width: calc(50% + 173px); /* right + 10px */ 699 max-height: calc(100% - 124px); /* bottom + 10px */ 700} 701 702video::-webkit-media-text-track-container { 703 position: relative; 704 width: 100%; 705 overflow: hidden; 706 padding-bottom: 5px; 707 708 text-align: center; 709 color: rgba(255, 255, 255, 1); 710 711 letter-spacing: normal; 712 word-spacing: normal; 713 text-transform: none; 714 text-indent: 0; 715 text-decoration: none; 716 pointer-events: none; 717 -webkit-user-select: none; 718 719 -webkit-flex: 1 1; 720 721 -webkit-line-box-contain: block inline-box replaced; 722} 723 724video::cue { 725 background-color: rgba(0, 0, 0, 0.8); 726} 727 728video::-webkit-media-text-track-display { 729 position: absolute; 730 overflow: hidden; 731 white-space: pre-wrap; 732 -webkit-box-sizing: border-box; 733 font: 22px sans-serif; 734} 735 736video::-webkit-media-text-track-display-backdrop { 737 display: inline-block; 738} 739 740video::cue(:future) { 741 color: gray; 742} 743 744video::-webkit-media-text-track-container b { 745 font-weight: bold; 746} 747 748video::-webkit-media-text-track-container u { 749 text-decoration: underline; 750} 751 752video::-webkit-media-text-track-container i { 753 font-style: italic; 754} 755 756video::-webkit-media-text-track-container .hidden, 757audio::-webkit-media-text-track-container .hidden { 758 display: none; 759} 760