1 /* 2 * QtWebKit specific overrides for HTML5 media elements. 3 * 4 * Copyright (C) 2009 Apple Inc. All rights reserved. 5 * Copyright (C) 2008 Nokia Corporation and/or its subsidiary(-ies) 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 /* QtWebKit media controls. Extends mediaControls.css */ 29 30 audio { 31 height: 34px; 32 width: 400px; 33 } 34 35 audio::-webkit-media-controls-panel { 36 display: -webkit-box; 37 -webkit-box-orient: horizontal; 38 -webkit-box-align: end; 39 -webkit-user-select: none; 40 position: absolute; 41 bottom: 0; 42 width: 100%; 43 z-index: 0; 44 overflow: visible; 45 height: 100%; 46 text-align: right; 47 } 48 49 video::-webkit-media-controls-panel { 50 display: -webkit-box; 51 -webkit-box-orient: horizontal; 52 -webkit-box-align: end; 53 -webkit-user-select: none; 54 position: absolute; 55 bottom: 0; 56 width: 100%; 57 z-index: 0; 58 overflow: hidden; 59 height: 100%; 60 text-align: right; 61 } 62 63 video:-webkit-full-page-media::-webkit-media-controls-panel { 64 bottom: 0px; 65 } 66 67 audio::-webkit-media-controls-mute-button { 68 width: 12px; 69 height: 12px; 70 padding: 6px; 71 margin: 5px 5px 5px 3px; 72 border: none !important; 73 } 74 75 video::-webkit-media-controls-mute-button { 76 width: 12px; 77 height: 12px; 78 padding: 6px; 79 margin: 5px 5px 5px 3px; 80 border: none !important; 81 } 82 83 audio::-webkit-media-controls-play-button { 84 width: 9px; 85 height: 12px; 86 padding: 6px 12px 6px 11px; 87 margin: 5px 3px 5px 5px; 88 border: none !important; 89 } 90 91 video::-webkit-media-controls-play-button { 92 width: 9px; 93 height: 12px; 94 padding: 6px 12px 6px 11px; 95 margin: 5px 3px 5px 5px; 96 border: none !important; 97 } 98 99 audio::-webkit-media-controls-timeline-container { 100 height: 34px; 101 } 102 103 video::-webkit-media-controls-timeline-container { 104 height: 34px; 105 } 106 107 audio::-webkit-media-controls-current-time-display { 108 -webkit-appearance: media-current-time-display; 109 -webkit-user-select: none; 110 display: inline-block; 111 height: 12px; 112 padding: 6px; 113 margin: 5px 3px; 114 115 overflow: hidden; 116 cursor: default; 117 118 text-align: center; 119 font-size: 10px; 120 font-family: Verdana; 121 font-weight: bold; 122 color: white; 123 } 124 125 video::-webkit-media-controls-current-time-display { 126 -webkit-appearance: media-current-time-display; 127 -webkit-user-select: none; 128 display: inline-block; 129 height: 12px; 130 padding: 6px; 131 margin: 5px 3px; 132 133 overflow: hidden; 134 cursor: default; 135 136 text-align: center; 137 font-size: 10px; 138 font-family: Verdana; 139 font-weight: bold; 140 color: white; 141 } 142 143 audio::-webkit-media-controls-time-remaining-display { 144 display: none; 145 } 146 147 video::-webkit-media-controls-time-remaining-display { 148 display: none; 149 } 150 151 audio::-webkit-media-controls-timeline { 152 height: 12px; 153 padding: 6px 8px; 154 margin: 5px 3px; 155 } 156 157 video::-webkit-media-controls-timeline { 158 height: 12px; 159 padding: 6px 8px; 160 margin: 5px 3px; 161 } 162 163 audio::-webkit-media-controls-volume-slider-container { 164 -webkit-appearance: media-volume-slider-container; 165 position: absolute; 166 height: 103px; 167 width: 24px; 168 } 169 170 video::-webkit-media-controls-volume-slider-container { 171 -webkit-appearance: media-volume-slider-container; 172 position: absolute; 173 height: 103px; 174 width: 24px; 175 } 176 177 audio::-webkit-media-controls-volume-slider { 178 -webkit-appearance: media-volume-slider; 179 display: inline; 180 position: absolute; 181 182 width: 12px; 183 padding: 6px; 184 height: 88px; 185 margin: 0 0 3px 0; 186 } 187 188 video::-webkit-media-controls-volume-slider { 189 -webkit-appearance: media-volume-slider; 190 display: inline; 191 position: absolute; 192 193 width: 12px; 194 padding: 6px; 195 height: 88px; 196 margin: 0 0 3px 0; 197 } 198 199 audio::-webkit-media-controls-seek-back-button { 200 display: none; 201 } 202 203 video::-webkit-media-controls-seek-back-button { 204 display: none; 205 } 206 207 audio::-webkit-media-controls-seek-forward-button { 208 display: none; 209 } 210 211 video::-webkit-media-controls-seek-forward-button { 212 display: none; 213 } 214 215 audio::-webkit-media-controls-fullscreen-button { 216 display: none; 217 } 218 219 video::-webkit-media-controls-fullscreen-button { 220 top: 0px; 221 right: 0px; 222 width: 12px; 223 height: 12px; 224 padding: 6px; 225 margin: 5px 5px 5px 3px; 226 border: none !important; 227 } 228 229 audio::-webkit-media-controls-rewind-button { 230 display: none; 231 } 232 233 video::-webkit-media-controls-rewind-button { 234 display: none; 235 } 236 237 audio::-webkit-media-controls-return-to-realtime-button { 238 display: none; 239 } 240 241 video::-webkit-media-controls-return-to-realtime-button { 242 display: none; 243 } 244 245 audio::-webkit-media-controls-toggle-closed-captions-button { 246 display: none; 247 } 248 249 video::-webkit-media-controls-toggle-closed-captions-button { 250 display: none; 251 } 252 253 ::-webkit-media-controls-mute-button, 254 ::-webkit-media-controls-play-button, 255 ::-webkit-media-controls-timeline, 256 ::-webkit-media-controls-volume-slider, 257 ::-webkit-media-controls-fullscreen-button 258 { 259 box-sizing: content-box !important; 260 } 261
