1/* 2 * Copyright (C) 2009, 2010, 2011 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 COMPUTER, 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 COMPUTER, 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 25/* alternate media controls - Extend mediaControls.css */ 26 27audio { 28 width: 200px; 29 height: 25px; 30} 31 32audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 33 /* In mediaControls.css */ 34 -webkit-appearance: media-controls-background; 35 overflow: visible; 36 height: 25px; 37 -webkit-flex-shrink: 0; 38} 39 40video:-webkit-full-page-media::-webkit-media-controls-panel { 41 bottom: 0px; 42} 43 44audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 45 -webkit-order: 2; /* Before the fullscreen button */ 46 47 width: 14px; 48 height: 12px; 49 margin-left: 2px; 50 margin-right: 9px; 51 border: none !important; 52 53 position: relative; 54 z-index: 1; 55} 56 57audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 58 width: 16px; 59 height: 16px; 60 margin-left: 6px; 61 margin-right: 1px; 62 border: none !important; 63} 64 65audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 66 -webkit-appearance: none; 67 -webkit-flex-direction: row; 68 -webkit-align-items: center; 69 -webkit-justify-content: flex-start; 70 -webkit-flex: 1 1; 71 text-align: right; 72 height: auto; 73} 74 75audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 76 -webkit-user-select: none; 77 display: -webkit-flex; 78 -webkit-flex: 0 0; 79 -webkit-justify-content: center; 80 -webkit-align-items: center; 81 cursor: default; 82 font: -webkit-small-control; 83 font-size: 9px; 84 overflow: hidden; 85 width: 45px; 86 min-width: 45px; 87 color: white; 88 text-shadow: black 0px 1px 1px; 89 90 letter-spacing: normal; 91 word-spacing: normal; 92 line-height: normal; 93 text-transform: none; 94 text-indent: 0; 95 text-decoration: none; 96} 97 98audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 99 -webkit-user-select: none; 100 display: -webkit-flex; 101 -webkit-flex: 0 0; 102 -webkit-justify-content: center; 103 -webkit-align-items: center; 104 cursor: default; 105 font: -webkit-small-control; 106 font-size: 9px; 107 overflow: hidden; 108 width: 45px; 109 min-width: 45px; 110 color: white; 111 text-shadow: black 0px 1px 1px; 112 113 letter-spacing: normal; 114 word-spacing: normal; 115 line-height: normal; 116 text-transform: none; 117 text-indent: 0; 118 text-decoration: none; 119} 120 121audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 122 display: -webkit-flex; 123 -webkit-flex: 1 1; 124 height: 13px; 125 padding: 0px; 126 margin: 0px; 127 margin-top: 2px; 128} 129 130audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 131 display: none; 132 width: 0px; 133 border: none !important; 134} 135 136audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 137 display: none; 138 width: 0px; 139 border: none !important; 140} 141 142audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 143 width: 16px; 144 height: 16px; 145 margin-left: 7px; 146 margin-right: 7px; 147 -webkit-order: 4; /* At the very end */ 148 border: none !important; 149} 150 151audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 152 display: -webkit-flex; 153 -webkit-appearance: media-rewind-button; 154 width: 18px; 155 height: 18px; 156 margin-bottom: 1px; 157 margin-left: 6px; 158 margin-right: 2px; 159 border: none !important; 160} 161 162audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 163 display: none; 164 -webkit-appearance: media-return-to-realtime-button; 165 width: 16px; 166 height: 11px; 167 margin-left: 6px; 168 margin-right: 2px; 169 border: none !important; 170} 171 172audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display { 173 -webkit-user-select: none; 174 cursor: default; 175 display: -webkit-flex; 176 -webkit-flex: 1 1; 177 font: -webkit-small-control; 178 color: white; 179 font-size: 10px; 180 line-height: 13px; 181 overflow: hidden; 182 text-shadow: black 0px 1px 1px; 183 margin-left: 10px; 184 margin-right: 10px; 185 186 letter-spacing: normal; 187 word-spacing: normal; 188 line-height: normal; 189 text-transform: none; 190 text-indent: 0; 191 text-decoration: none; 192} 193 194audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 195 -webkit-appearance: media-volume-slider-container; 196 position: absolute; 197 198 bottom: 0px; 199 z-index: 2; 200 201 width: 22px; 202 height: 114px; 203} 204 205audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 206 -webkit-appearance: media-volume-slider; 207 display: inline; 208 position: absolute; 209 210 top: 7px; 211 left: 6px; 212 213 width: 10px; 214 height: 80px; 215} 216 217audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 218 -webkit-appearance: media-volume-slider-mute-button; 219 display: inline; 220 221 position: absolute; 222 223 bottom: 7px; 224 left: 0px; 225 226 width: 14px; 227 height: 12px; 228 229 margin-left: 2px; 230 margin-right: 9px; 231 232 border: none !important; 233} 234 235video::-webkit-media-controls-toggle-closed-captions-button { 236 -webkit-appearance: media-toggle-closed-captions-button; 237 display: -webkit-flex; 238 width: 16px; 239 height: 16px; 240 margin-left: 7px; 241 margin-right: 7px; 242 -webkit-order: 3; /* between mute and fullscreen */ 243 border: none !important; 244 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><path fill="rgb(224,224,224)" 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"/></svg>'); 245 background-repeat: no-repeat; 246 background-size: 16px 16px; 247} 248 249video::-webkit-media-controls-closed-captions-container { 250 -webkit-appearance: media-closed-captions-container; 251 position: absolute; 252 display: block; 253 right: 38px; 254 bottom: 29px; 255 max-width: -webkit-calc(100% - 48px); /* right + 10px */ 256 max-height: -webkit-calc(100% - 39px); /* bottom + 10px */ 257 overflow-x: hidden; 258 overflow-y: scroll; 259 background-color: rgba(0, 0, 0, 0.85); 260 border: 3px solid rgba(128, 128, 128, 0.75); 261 border-radius: 10px; 262 cursor: default; 263 z-index: 2; 264 text-align: initial; 265} 266 267video::-webkit-media-controls-closed-captions-track-list { 268 display: block; 269 font-family: "Helvetica Bold", Helvetica; 270 font-size: 10pt; 271 -webkit-user-select: none; 272} 273 274video::-webkit-media-controls-closed-captions-track-list h3 { 275 margin: 0; 276 color: #757575; 277 text-shadow: 0 1px 0 black; 278 -webkit-margin-start: 23px; 279 padding-top: 4px; 280 font-weight: bold; 281 font-size: 10pt; 282} 283 284video::-webkit-media-controls-closed-captions-track-list ul { 285 list-style-type: none; 286 margin: 0 0 4px 0; 287 padding: 0; 288 font-weight: bold; 289} 290 291video::-webkit-media-controls-closed-captions-track-list li { 292 position: relative; 293 color: white; 294 background-image: none; 295 text-shadow: 0 1px 0 black; 296 margin: 0; 297 padding-left: 37px; 298 padding-right: 35px; 299 padding-top: 0.15em; 300 padding-bottom: 0.2em; 301 box-sizing: border-box; 302 overflow: hidden; 303 white-space: nowrap; 304 text-overflow: ellipsis; 305 border-top: 1px solid rgba(0, 0, 0, 0); 306 border-bottom: 1px solid rgba(0, 0, 0, 0); 307} 308 309video::-webkit-media-controls-closed-captions-track-list li:hover { 310 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f70f6), color-stop(1, #1a44f3)); 311 border-top: 1px solid #4667ea; 312 border-bottom: 1px solid #0336e5; 313} 314 315video::-webkit-media-controls-closed-captions-track-list li.selected::before { 316 display: block; 317 content: ""; 318 position: absolute; 319 top: 0.25em; 320 width: 1.1em; 321 height: 1.1em; 322 -webkit-margin-start: -20px; 323 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="#a3a3a3" 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>'); 324 background-repeat: no-repeat; 325} 326 327video::-webkit-media-controls-closed-captions-track-list li.selected:hover::before { 328 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>'); 329} 330