1/* 2 * Copyright (C) 2009 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Google Inc. 4 * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com> 5 * Copyright (C) 2012 Igalia S.L. 6 * 7 * Redistribution and use in source and binary forms, with or without 8 * modification, are permitted provided that the following conditions 9 * are met: 10 * 1. Redistributions of source code must retain the above copyright 11 * notice, this list of conditions and the following disclaimer. 12 * 2. Redistributions in binary form must reproduce the above copyright 13 * notice, this list of conditions and the following disclaimer in the 14 * documentation and/or other materials provided with the distribution. 15 * 16 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY 17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 19 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR 20 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 21 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 */ 27 28/* These are based on the Chromium media controls */ 29 30.hidden { 31 display: none !important; 32} 33 34video::-webkit-media-controls-panel *:active, 35video::-webkit-media-controls-panel *:focus, 36audio::-webkit-media-controls-panel *:active, 37audio::-webkit-media-controls-panel *:focus { 38 background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) !important; 39} 40 41audio::-webkit-media-controls-panel.down *:active, 42audio::-webkit-media-controls-panel.down *:focus { 43 background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important; 44} 45 46body:-webkit-full-page-media { 47 background-color: rgb(0, 0, 0); 48} 49 50audio { 51 width: 300px; 52 height: 30px; 53} 54 55audio:-webkit-full-page-media, video:-webkit-full-page-media { 56 max-height: 100%; 57 max-width: 100%; 58} 59 60audio:-webkit-full-page-media::-webkit-media-controls-panel, 61video:-webkit-full-page-media::-webkit-media-controls-panel { 62 bottom: 0px; 63} 64 65::-webkit-media-controls { 66 display: -webkit-flex; 67 -webkit-flex-direction: column; 68 -webkit-justify-content: flex-end; 69 -webkit-align-items: center; 70} 71 72audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { 73 width: 100%; 74 max-width: 800px; 75 height: 30px; 76 bottom: 0; 77 text-indent: 0; 78 padding: 0; 79 box-sizing: border-box; 80 overflow: visible; 81} 82 83video::-webkit-media-controls-enclosure { 84 padding: 5px; 85 height: 40px; 86} 87 88audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 89 display: -webkit-flex; 90 -webkit-flex-direction: row; 91 -webkit-align-items: center; 92 -webkit-justify-content: flex-start; 93 bottom: auto; 94 height: 30px; 95 background-color: rgba(20, 20, 20, 0.8); 96 border-radius: 5px; 97 overflow: visible; 98 transition: opacity 0.25s linear; 99} 100 101video::-webkit-media-controls-panel { 102 opacity: 0; 103} 104 105audio::-webkit-media-controls-panel, 106video:-webkit-full-page-media::-webkit-media-controls-panel.no-video, 107video::-webkit-media-controls-panel:hover, 108video::-webkit-media-controls-panel.show, 109video::-webkit-media-controls-panel.paused { 110 opacity: 1; 111} 112 113video::-webkit-media-controls-panel div.mute-box, 114audio::-webkit-media-controls-panel div.mute-box { 115 display: -webkit-flex; 116 -webkit-flex: none; 117 box-sizing: border-box; 118 width: 30px; 119 height: 30px; 120 margin: 0 9px 0 -7px; 121} 122 123audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 124 -webkit-appearance: media-mute-button; 125 display: -webkit-flex; 126 -webkit-flex: none; 127 border: none; 128 box-sizing: border-box; 129 width: 30px; 130 height: 30px; 131 line-height: 30px; 132 outline: none; 133} 134 135audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 136 -webkit-appearance: media-play-button; 137 display: -webkit-flex; 138 -webkit-flex: none; 139 border: none; 140 box-sizing: border-box; 141 width: 30px; 142 height: 30px; 143 line-height: 30px; 144 margin: 0 9px; 145 outline: none; 146} 147 148audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 149audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 150 -webkit-appearance: media-current-time-display; 151 -webkit-user-select: none; 152 -webkit-flex: none; 153 display: block; 154 border: none; 155 cursor: default; 156 157 height: 30px; 158 margin: 0 15px 0 0; 159 160 line-height: 30px; 161 font-family: -webkit-small-control; 162 font-size: 13px; 163 font-weight: normal; 164 font-style: normal; 165 color: white; 166 167 letter-spacing: normal; 168 word-spacing: normal; 169 text-transform: none; 170 text-indent: 0; 171 text-shadow: none; 172 text-decoration: none; 173} 174 175audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 176 -webkit-appearance: media-slider; 177 display: -webkit-flex; 178 -webkit-flex: 1 1 auto; 179 height: 8px; 180 margin: 0 15px 0 1px; 181 padding: 0; 182 background-color: transparent; 183 min-width: 25px; 184 border-radius: 4px; 185 color: rgba(230, 230, 230, 0.35); 186 outline: none; 187} 188 189audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled] { 190 opacity: 0.3; 191} 192 193audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 194 -webkit-appearance: media-volume-slider-container; 195 display: -webkit-flex; 196 overflow: hidden; 197 position: absolute; 198 padding: 0; 199 height: 100px; 200 width: 30px; 201 bottom: 30px; 202 z-index: 2; 203 background-color: rgba(20, 20, 20, 0.8); 204 right: 9px; 205 border-radius: 5px 5px 0px 0px; 206 transition: height 0.10s linear; 207} 208 209audio::-webkit-media-controls-volume-slider-container.hiding, 210video::-webkit-media-controls-volume-slider-container.hiding { 211 height: 0; 212} 213 214audio::-webkit-media-controls-volume-slider-container.down, 215video::-webkit-media-controls-volume-slider-container.down { 216 bottom: -100px; 217 border-radius: 0px 0px 5px 5px; 218 transition: height 0.10s linear, bottom 0.10s linear; 219} 220 221audio::-webkit-media-controls-panel .hiding.down, 222video::-webkit-media-controls-panel .hiding.down { 223 bottom: 0; 224} 225 226audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 227 -webkit-appearance: media-volume-slider; 228 display: -webkit-flex; 229 -webkit-align-items: center; 230 -webkit-flex-direction: column; 231 box-sizing: border-box; 232 height: 80px; 233 width: 8px; 234 margin: 10px auto; 235 border-radius: 4px; 236 background-color: transparent; 237 color: rgba(230, 230, 230, 0.35); 238 outline: none; 239} 240 241audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div { 242 margin: -7px 0; 243} 244 245audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb { 246 -webkit-appearance: media-volume-sliderthumb; 247 width: 12px; 248 height: 12px; 249 border-radius: 3px; 250 color: white; 251 margin: 0; 252} 253 254input[type="range"]::-webkit-media-slider-container { 255 display: -webkit-flex; 256 -webkit-align-items: center; 257 -webkit-flex-direction: row; /* This property is updated by C++ code. */ 258 box-sizing: border-box; 259 height: 100%; 260 width: 100%; 261 border: 1px solid rgba(230, 230, 230, 0.35); 262 border-radius: 4px; 263 background-color: transparent; 264} 265 266/* The negative right margin causes the track to overflow its container. */ 267input[type="range"]::-webkit-media-slider-container > div { 268 margin-right: -14px; 269} 270 271input[type="range"]::-webkit-media-slider-thumb { 272 -webkit-appearance: media-sliderthumb; 273 width: 12px; 274 height: 12px; 275 border-radius: 3px; 276 color: white; 277 margin-left: -7px; 278 margin-right: -7px; 279} 280 281audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 282 -webkit-appearance: media-toggle-closed-captions-button; 283 display: -webkit-flex; 284 -webkit-flex: none; 285 border: none; 286 box-sizing: border-box; 287 width: 30px; 288 height: 30px; 289 line-height: 30px; 290 margin: 0 9px 0 -7px; 291 outline: none; 292} 293 294video::-webkit-media-controls-closed-captions-container { 295 -webkit-appearance: media-closed-captions-container; 296 display: -webkit-flex; 297 position: absolute; 298 bottom: 35px; 299 z-index: 2; 300 background-color: rgba(20, 20, 20, 0.8); 301 border-radius: 5px 5px 0px 0px; 302 overflow: hidden; 303 max-width: -webkit-calc(100% - 48px); /* right + 10px */ 304 max-height: -webkit-calc(100% - 35px); /* bottom + 10px */ 305 cursor: default; 306 font-family: -webkit-small-control; 307 font-size: 10pt; 308 font-weight: normal; 309 font-style: normal; 310 color: white; 311 -webkit-user-select: none; 312 transition: height 0.10s linear; 313} 314 315video::-webkit-media-controls-closed-captions-container.out { 316 border-radius: 5px; 317} 318 319video::-webkit-media-controls-closed-captions-container h3 { 320 padding-top: 8px; 321 margin: 0; 322 padding-left: 17px; 323 padding-right: 15px; 324 font-size: 10pt; 325 font-weight: bold; 326 font-style: normal; 327} 328 329video::-webkit-media-controls-closed-captions-container ul { 330 list-style-type: none; 331 margin: 0 0 4px 0; 332 padding: 4px 0 0 0; 333} 334 335video::-webkit-media-controls-closed-captions-container li { 336 position: relative; 337 color: white; 338 margin: 0; 339 padding-left: 17px; 340 padding-right: 15px; 341 padding-top: 0.15em; 342 padding-bottom: 0.2em; 343 box-sizing: border-box; 344 overflow: hidden; 345 white-space: nowrap; 346 text-overflow: ellipsis; 347 outline: none; 348} 349video::-webkit-media-controls-closed-captions-container li.selected { 350 background-color: rgba(230, 230, 230, 0.15); 351} 352 353audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 354 -webkit-appearance: media-enter-fullscreen-button; 355 display: -webkit-flex; 356 -webkit-flex: none; 357 border: none; 358 box-sizing: border-box; 359 width: 30px; 360 height: 30px; 361 line-height: 30px; 362 margin: 0 9px 0 -7px; 363 outline: none; 364} 365