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 30audio { 31 height: 34px; 32 width: 400px; 33} 34 35audio::-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 49video::-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 63video:-webkit-full-page-media::-webkit-media-controls-panel { 64 bottom: 0px; 65} 66 67audio::-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 75video::-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 83audio::-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 91video::-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 99audio::-webkit-media-controls-timeline-container { 100 height: 34px; 101} 102 103video::-webkit-media-controls-timeline-container { 104 height: 34px; 105} 106 107audio::-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 125video::-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 143audio::-webkit-media-controls-time-remaining-display { 144 display: none; 145} 146 147video::-webkit-media-controls-time-remaining-display { 148 display: none; 149} 150 151audio::-webkit-media-controls-timeline { 152 height: 12px; 153 padding: 6px 8px; 154 margin: 5px 3px; 155} 156 157video::-webkit-media-controls-timeline { 158 height: 12px; 159 padding: 6px 8px; 160 margin: 5px 3px; 161} 162 163audio::-webkit-media-controls-volume-slider-container { 164 -webkit-appearance: media-volume-slider-container; 165 position: absolute; 166 height: 103px; 167 width: 24px; 168} 169 170video::-webkit-media-controls-volume-slider-container { 171 -webkit-appearance: media-volume-slider-container; 172 position: absolute; 173 height: 103px; 174 width: 24px; 175} 176 177audio::-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 188video::-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 199audio::-webkit-media-controls-seek-back-button { 200 display: none; 201} 202 203video::-webkit-media-controls-seek-back-button { 204 display: none; 205} 206 207audio::-webkit-media-controls-seek-forward-button { 208 display: none; 209} 210 211video::-webkit-media-controls-seek-forward-button { 212 display: none; 213} 214 215audio::-webkit-media-controls-fullscreen-button { 216 display: none; 217} 218 219video::-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 229audio::-webkit-media-controls-rewind-button { 230 display: none; 231} 232 233video::-webkit-media-controls-rewind-button { 234 display: none; 235} 236 237audio::-webkit-media-controls-return-to-realtime-button { 238 display: none; 239} 240 241video::-webkit-media-controls-return-to-realtime-button { 242 display: none; 243} 244 245audio::-webkit-media-controls-toggle-closed-captions-button { 246 display: none; 247} 248 249video::-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