1/* 2 * Copyright (C) 2009, 2010, 2011, 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 25/* media controls */ 26 27body:-webkit-full-page-media { 28 background-color: rgb(38, 38, 38); 29} 30 31audio { 32 width: 200px; 33 height: 16px; 34} 35 36::-webkit-media-controls { 37 width: inherit; 38 height: inherit; 39 position: relative; 40 display: -webkit-flex; 41 -webkit-align-items: flex-start; 42 -webkit-justify-content: flex-end; 43 -webkit-flex-direction: column; 44} 45 46audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 47 display: -webkit-flex; 48 direction: ltr; 49 -webkit-flex-direction: row; 50 -webkit-align-items: center; 51 -webkit-user-select: none; 52 position: relative; 53 bottom: 0; 54 width: 100%; 55 z-index: 0; 56 overflow: hidden; 57 height: 16px; 58 text-align: right; 59} 60 61video:-webkit-full-page-media { 62 margin: auto; 63 position: absolute; 64 top: 0; 65 right: 0; 66 bottom: 0; 67 left: 0; 68} 69 70video:-webkit-full-page-media::-webkit-media-controls-panel { 71 bottom: 0px; 72} 73 74audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 75 -webkit-appearance: media-mute-button; 76 display: -webkit-flex; 77 width: 16px; 78 height: 16px; 79 background-color: initial; 80 border: initial; 81 color: inherit; 82} 83 84audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button { 85 display: none; 86} 87 88audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 89 -webkit-appearance: media-play-button; 90 display: -webkit-flex; 91 width: 16px; 92 height: 16px; 93 background-color: initial; 94 border: initial; 95 color: inherit; 96} 97 98audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 99 -webkit-appearance: media-controls-background; 100 display: -webkit-flex; 101 -webkit-flex-direction: row; 102 -webkit-align-items: center; 103 -webkit-justify-content: flex-end; 104 -webkit-flex: 1 1; 105 -webkit-user-select: none; 106 height: 16px; 107 min-width: 0; 108} 109 110audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 111 display: none; 112} 113 114audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 115 display: none; 116} 117 118audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 119 -webkit-appearance: media-slider; 120 display: -webkit-flex; 121 -webkit-flex: 1 1; 122 height: 16px; 123 padding: 0px 2px; 124 background-color: initial; 125 border: initial; 126 color: inherit; 127 margin: initial; 128 min-width: 0; 129} 130 131audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 132 background-color: initial; 133 border: initial; 134 color: inherit; 135 margin: initial; 136} 137 138audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 139 -webkit-appearance: media-seek-back-button; 140 display: -webkit-flex; 141 width: 16px; 142 height: 16px; 143 background-color: initial; 144 border: initial; 145 color: inherit; 146} 147 148audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 149 -webkit-appearance: media-seek-forward-button; 150 display: -webkit-flex; 151 width: 16px; 152 height: 16px; 153 background-color: initial; 154 border: initial; 155 color: inherit; 156} 157 158audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 159 -webkit-appearance: media-enter-fullscreen-button; 160 display: -webkit-flex; 161 width: 16px; 162 height: 16px; 163 background-color: initial; 164 border: initial; 165 color: inherit; 166} 167 168audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 169 display: none; 170 background-color: initial; 171 border: initial; 172 color: inherit; 173} 174 175audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 176 display: none; 177 background-color: initial; 178 border: initial; 179 color: inherit; 180} 181 182audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 183 -webkit-appearance: media-toggle-closed-captions-button; 184 display: -webkit-flex; 185 width: 16px; 186 height: 16px; 187 background-color: initial; 188 border: initial; 189 color: inherit; 190} 191 192audio::-webkit-media-controls-closed-captions-container, video::-webkit-media-controls-closed-captions-container { 193 display: none; 194} 195 196audio::-webkit-media-controls-closed-captions-track-list, video::-webkit-media-controls-closed-captions-track-list { 197 display: none; 198} 199 200audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 201 -webkit-appearance: media-volume-slider-mute-button; 202 display: none; 203 background-color: initial; 204 border: initial; 205 color: inherit; 206} 207 208audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider { 209 display: none; 210} 211 212audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button { 213 display: none; 214} 215 216audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button { 217 display: none; 218} 219 220video::-webkit-media-text-track-container { 221 position: relative; 222 width: 100%; 223 overflow: hidden; 224 padding-bottom: 5px; 225 226 text-align: center; 227 color: rgba(255, 255, 255, 1); 228 229 letter-spacing: normal; 230 word-spacing: normal; 231 text-transform: none; 232 text-indent: 0; 233 text-decoration: none; 234 pointer-events: none; 235 -webkit-user-select: none; 236 word-break: break-word; 237 238 -webkit-flex: 1 1; 239 240 -webkit-line-box-contain: block inline-box replaced; 241} 242 243video::cue { 244 background-color: rgba(0, 0, 0, 0.8); 245} 246 247video::-webkit-media-text-track-region { 248 position: absolute; 249 line-height: 5.33vh; 250 writing-mode: horizontal-tb; 251 background: rgba(0, 0, 0, 0.8); 252 color: rgba(255, 255, 255, 1); 253 word-wrap: break-word; 254 overflow-wrap: break-word; 255 overflow: hidden; 256} 257 258video::-webkit-media-text-track-region-container { 259 position: relative; 260 261 display: -webkit-flex; 262 -webkit-flex-flow: column; 263 -webkit-flex-direction: column; 264} 265 266video::-webkit-media-text-track-region-container.scrolling { 267 -webkit-transition: top 433ms linear; 268} 269 270video::-webkit-media-text-track-display { 271 position: absolute; 272 overflow: hidden; 273 white-space: pre-wrap; 274 -webkit-box-sizing: border-box; 275 font: 22px sans-serif; 276 -webkit-flex: 0 0 auto; 277} 278 279video::cue(:future) { 280 color: gray; 281} 282 283video::-webkit-media-text-track-container b { 284 font-weight: bold; 285} 286 287video::-webkit-media-text-track-container u { 288 text-decoration: underline; 289} 290 291video::-webkit-media-text-track-container i { 292 font-style: italic; 293} 294