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 COMPUTER, 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 COMPUTER, 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 30body:-webkit-full-page-media { 31 background-color: rgb(0, 0, 0); 32} 33 34audio { 35 width: 300px; 36 height: 30px; 37} 38 39audio:-webkit-full-page-media, video:-webkit-full-page-media { 40 max-height: 100%; 41 max-width: 100%; 42} 43 44audio:-webkit-full-page-media::-webkit-media-controls-panel, 45video:-webkit-full-page-media::-webkit-media-controls-panel { 46 bottom: 0px; 47} 48 49::-webkit-media-controls { 50 display: -webkit-flex; 51 -webkit-flex-direction: column; 52 -webkit-justify-content: flex-end; 53 -webkit-align-items: center; 54} 55 56audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { 57 width: 100%; 58 max-width: 800px; 59 height: 30px; 60 bottom: 0; 61 text-indent: 0; 62 padding: 0; 63 box-sizing: border-box; 64 overflow: visible; 65} 66 67video::-webkit-media-controls-enclosure { 68 padding: 5px; 69 height: 40px; 70} 71 72audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 73 display: -webkit-flex; 74 -webkit-flex-direction: row; 75 -webkit-align-items: center; 76 -webkit-justify-content: flex-start; 77 bottom: auto; 78 height: 30px; 79 background-color: rgba(20, 20, 20, 0.8); 80 border-radius: 5px; 81 overflow: visible; 82} 83 84audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 85 -webkit-appearance: media-mute-button; 86 display: -webkit-flex; 87 -webkit-flex: none; 88 border: none; 89 box-sizing: border-box; 90 width: 30px; 91 height: 30px; 92 line-height: 30px; 93 margin: 0 9px 0 -7px; 94} 95 96audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 97 -webkit-appearance: media-play-button; 98 display: -webkit-flex; 99 -webkit-flex: none; 100 border: none; 101 box-sizing: border-box; 102 width: 30px; 103 height: 30px; 104 line-height: 30px; 105 margin: 0 9px; 106} 107 108audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 109audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 110 -webkit-appearance: media-current-time-display; 111 -webkit-user-select: none; 112 -webkit-flex: none; 113 display: block; 114 border: none; 115 cursor: default; 116 117 height: 30px; 118 margin: 0 15px 0 0; 119 120 line-height: 30px; 121 font-family: -webkit-small-control; 122 font-size: 13px; 123 font-weight: normal; 124 font-style: normal; 125 color: white; 126 127 letter-spacing: normal; 128 word-spacing: normal; 129 text-transform: none; 130 text-indent: 0; 131 text-shadow: none; 132 text-decoration: none; 133} 134 135audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 136 -webkit-appearance: media-slider; 137 display: -webkit-flex; 138 -webkit-flex: 1 1 auto; 139 height: 8px; 140 margin: 0 15px 0 1px; 141 padding: 0; 142 background-color: transparent; 143 min-width: 25px; 144 border-radius: 4px; 145 color: rgba(230, 230, 230, 0.35); 146} 147 148audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 149 -webkit-appearance: media-volume-slider-container; 150 position: absolute; 151 padding: 0; 152 height: 100px; 153 width: 30px; 154 bottom: 30px; 155 z-index: 2; 156 background-color: rgba(20, 20, 20, 0.8); 157 right: 9px; 158 border-radius: 5px 5px 0px 0px; 159} 160 161audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 162 -webkit-appearance: media-volume-slider; 163 display: -webkit-flex; 164 -webkit-align-items: center; 165 -webkit-flex-direction: column; 166 box-sizing: border-box; 167 height: 80px; 168 width: 8px; 169 margin: 10px auto; 170 border-radius: 4px; 171 background-color: transparent; 172 color: rgba(230, 230, 230, 0.35); 173} 174 175audio::-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 { 176 margin: -7px 0; 177} 178 179audio::-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 { 180 -webkit-appearance: media-volume-sliderthumb; 181 width: 12px; 182 height: 12px; 183 border-radius: 3px; 184 color: white; 185 margin: 0; 186} 187 188input[type="range"]::-webkit-media-slider-container { 189 display: -webkit-flex; 190 -webkit-align-items: center; 191 -webkit-flex-direction: row; /* This property is updated by C++ code. */ 192 box-sizing: border-box; 193 height: 100%; 194 width: 100%; 195 border: 1px solid rgba(230, 230, 230, 0.35); 196 border-radius: 4px; 197 background-color: transparent; 198} 199 200/* The negative right margin causes the track to overflow its container. */ 201input[type="range"]::-webkit-media-slider-container > div { 202 margin-right: -14px; 203} 204 205input[type="range"]::-webkit-media-slider-thumb { 206 -webkit-appearance: media-sliderthumb; 207 width: 12px; 208 height: 12px; 209 border-radius: 3px; 210 color: white; 211 margin-left: -7px; 212 margin-right: -7px; 213} 214 215audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 216 -webkit-appearance: media-toggle-closed-captions-button; 217 display: -webkit-flex; 218 -webkit-flex: none; 219 border: none; 220 box-sizing: border-box; 221 width: 30px; 222 height: 30px; 223 line-height: 30px; 224 margin: 0 9px 0 -7px; 225} 226 227audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 228 -webkit-appearance: media-enter-fullscreen-button; 229 display: -webkit-flex; 230 -webkit-flex: none; 231 border: none; 232 box-sizing: border-box; 233 width: 30px; 234 height: 30px; 235 line-height: 30px; 236 margin: 0 9px 0 -7px; 237} 238