1 /* 2 * Copyright (C) 2009 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Google Inc. 4 * 5 * Redistribution and use in source and binary forms, with or without 6 * modification, are permitted provided that the following conditions 7 * are met: 8 * 1. Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * 2. Redistributions in binary form must reproduce the above copyright 11 * notice, this list of conditions and the following disclaimer in the 12 * documentation and/or other materials provided with the distribution. 13 * 14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY 15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR 18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26 /* Chromium default media controls */ 27 28 audio { 29 width: 300px; 30 height: 32px; 31 } 32 33 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 34 -webkit-user-select: none; 35 position: absolute; 36 overflow: visible; 37 bottom: 0; 38 width: 100%; 39 height: 32px; 40 z-index: 0; 41 background-color: rgba(0, 0, 0, 0.6); 42 } 43 44 video:-webkit-full-page-media::-webkit-media-controls-panel { 45 bottom: 0px; 46 } 47 48 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 49 -webkit-appearance: media-mute-button; 50 position: absolute; 51 top: auto; 52 bottom: 0; 53 right: 0; 54 left: auto; 55 56 width: 34px; 57 height: 32px; 58 } 59 60 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 61 -webkit-appearance: media-play-button; 62 63 position: absolute; 64 top: auto; 65 bottom: 7px; 66 left: 7px; 67 right: 6px; 68 69 width: 18px; 70 height: 19px; 71 } 72 73 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 74 -webkit-appearance: media-timeline-container; 75 -webkit-user-select: none; 76 -webkit-box-orient: horizontal; 77 -webkit-box-align: center; 78 -webkit-box-pack: center; 79 -webkit-box-direction: reverse; 80 -webkit-box-flex: 1; 81 82 position: absolute; 83 top: auto; 84 bottom: 0; 85 left: 30px; 86 right: 34px; 87 88 width: auto; 89 height: 32px; 90 91 border-left: 1px solid rgba(255, 255, 255, 0.2); 92 border-right: 1px solid rgba(255, 255, 255, 0.2); 93 } 94 95 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 96 -webkit-appearance: media-current-time-display; 97 -webkit-user-select: none; 98 display: -webkit-box; 99 -webkit-box-flex: 0; 100 -webkit-box-pack: center; 101 -webkit-box-align: center; 102 103 overflow: hidden; 104 cursor: default; 105 106 position: absolute; 107 top: 6px; 108 right: 0; 109 110 line-height: 21px; 111 height: 20px; 112 width: 58px; 113 114 text-align: center; 115 font-family: Arial; 116 font-size: 16px; 117 font-weight: bold; 118 color: white; 119 120 letter-spacing: normal; 121 word-spacing: normal; 122 text-transform: none; 123 text-indent: 0; 124 text-shadow: none; 125 text-decoration: none; 126 } 127 128 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 129 -webkit-appearance: media-time-remaining-display; 130 -webkit-user-select: none; 131 display: none; 132 -webkit-box-flex: 0; 133 -webkit-box-pack: center; 134 -webkit-box-align: center; 135 136 overflow: hidden; 137 cursor: default; 138 139 line-height: 21px; 140 height: 20px; 141 width: 58px; 142 143 text-align: center; 144 font-family: Arial; 145 font-size: 16px; 146 font-weight: bold; 147 color: white; 148 149 letter-spacing: normal; 150 word-spacing: normal; 151 text-transform: none; 152 text-indent: 0; 153 text-shadow: none; 154 text-decoration: none; 155 } 156 157 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 158 -webkit-appearance: media-slider; 159 display: -webkit-box; 160 box-sizing: border-box; 161 -webkit-box-flex: 1; 162 163 position: absolute; 164 top: 7px; 165 left: 6px; 166 right: 64px; 167 168 padding: 0px; 169 margin: 0px; 170 height: 18px; 171 172 border-color: rgba(255, 255, 255, 0.2); 173 border-style: solid; 174 border-width: 1px; 175 border-radius: 2px; 176 background-color: rgba(255, 255, 255, 0.08); 177 color: rgb(50, 140, 223); 178 } 179 180 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 181 -webkit-appearance: media-seek-back-button; 182 display: none; 183 } 184 185 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 186 -webkit-appearance: media-seek-forward-button; 187 display: none; 188 } 189 190 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 191 -webkit-appearance: media-fullscreen-button; 192 display: none; 193 } 194 195 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 196 -webkit-appearance: media-volume-slider-container; 197 position: absolute; 198 199 width: 34px; 200 height: 100px; 201 202 background-color: rgba(0, 0, 0, 0.6); 203 } 204 205 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 206 -webkit-appearance: media-volume-slider; 207 display: inline; 208 position: absolute; 209 210 top: 10px; 211 left: 12px; 212 213 width: 10px; 214 height: 80px; 215 } 216
