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} 38 39video:-webkit-full-page-media::-webkit-media-controls-panel { 40 bottom: 0px; 41} 42 43audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 44 -webkit-box-ordinal-group: 2; /* Before the fullscreen button */ 45 46 width: 14px; 47 height: 12px; 48 margin-left: 2px; 49 margin-right: 9px; 50 border: none !important; 51} 52 53audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 54 width: 16px; 55 height: 16px; 56 margin-left: 6px; 57 margin-right: 1px; 58 border: none !important; 59} 60 61audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 62 -webkit-appearance: none; 63 -webkit-box-orient: horizontal; 64 -webkit-box-align: center; 65 -webkit-box-pack: center; 66 -webkit-box-flex: 1; 67 text-align: right; 68 height: auto; 69} 70 71audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 72 -webkit-user-select: none; 73 display: -webkit-box; 74 -webkit-box-flex: 0; 75 -webkit-box-pack: center; 76 -webkit-box-align: center; 77 cursor: default; 78 font: -webkit-small-control; 79 font-size: 9px; 80 overflow: hidden; 81 width: 45px; 82 color: white; 83 text-shadow: black 0px 1px 1px; 84 85 letter-spacing: normal; 86 word-spacing: normal; 87 line-height: normal; 88 text-transform: none; 89 text-indent: 0; 90 text-decoration: none; 91} 92 93audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 94 -webkit-user-select: none; 95 display: -webkit-box; 96 -webkit-box-flex: 0; 97 -webkit-box-pack: center; 98 -webkit-box-align: center; 99 cursor: default; 100 font: -webkit-small-control; 101 font-size: 9px; 102 overflow: hidden; 103 width: 45px; 104 color: white; 105 text-shadow: black 0px 1px 1px; 106 107 letter-spacing: normal; 108 word-spacing: normal; 109 line-height: normal; 110 text-transform: none; 111 text-indent: 0; 112 text-decoration: none; 113} 114 115audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 116 display: -webkit-box; 117 -webkit-box-flex: 1; 118 height: 13px; 119 padding: 0px; 120 margin: 0px; 121 margin-top: 2px; 122} 123 124audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 125 display: none; 126 width: 0px; 127 border: none !important; 128} 129 130audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 131 display: none; 132 width: 0px; 133 border: none !important; 134} 135 136audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 137 width: 16px; 138 height: 16px; 139 margin-left: 7px; 140 margin-right: 7px; 141 -webkit-box-ordinal-group: 4; /* At the very end */ 142 border: none !important; 143} 144 145audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 146 display: -webkit-box; 147 -webkit-appearance: media-rewind-button; 148 width: 18px; 149 height: 18px; 150 margin-bottom: 1px; 151 margin-left: 6px; 152 margin-right: 2px; 153 border: none !important; 154} 155 156audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 157 display: none; 158 -webkit-appearance: media-return-to-realtime-button; 159 width: 16px; 160 height: 11px; 161 margin-left: 6px; 162 margin-right: 2px; 163 border: none !important; 164} 165 166audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display { 167 -webkit-user-select: none; 168 cursor: default; 169 display: -webkit-box; 170 -webkit-box-flex: 1; 171 font: -webkit-small-control; 172 color: white; 173 font-size: 10px; 174 line-height: 13px; 175 overflow: hidden; 176 text-shadow: black 0px 1px 1px; 177 margin-left: 10px; 178 margin-right: 10px; 179 180 letter-spacing: normal; 181 word-spacing: normal; 182 line-height: normal; 183 text-transform: none; 184 text-indent: 0; 185 text-decoration: none; 186} 187 188audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 189 -webkit-appearance: media-toggle-closed-captions-button; 190 display: -webkit-box; 191 width: 16px; 192 height: 16px; 193 margin-left: 7px; 194 margin-right: 7px; 195 -webkit-box-ordinal-group: 3; /* between mute and fullscreen */ 196 border: none !important; 197} 198 199audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 200 -webkit-appearance: media-volume-slider-container; 201 position: absolute; 202 203 top: 0; 204 left: 0; 205 206 width: 22px; 207 height: 114px; 208} 209 210audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 211 -webkit-appearance: media-volume-slider; 212 display: inline; 213 position: absolute; 214 215 top: 7px; 216 left: 6px; 217 218 width: 10px; 219 height: 80px; 220} 221 222audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 223 -webkit-appearance: media-volume-slider-mute-button; 224 display: inline; 225 position: absolute; 226 227 bottom: 5px; 228 left: 4px; 229 230 width: 14px; 231 height: 12px; 232 border: none !important; 233} 234