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: -32px; 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 77 position: absolute; 78 top: auto; 79 bottom: 0; 80 left: 30px; 81 right: 34px; 82 83 width: auto; 84 height: 32px; 85 86 border-left: 1px solid rgba(255, 255, 255, 0.2); 87 border-right: 1px solid rgba(255, 255, 255, 0.2); 88 } 89 90 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 91 -webkit-appearance: media-current-time-display; 92 -webkit-user-select: none; 93 display: inline-block; 94 95 overflow: hidden; 96 cursor: default; 97 98 position: absolute; 99 line-height: 21px; 100 top: auto; 101 bottom: 6px; 102 left: auto; 103 right: 0px; 104 105 height: 20px; 106 width: 58px; 107 108 text-align: center; 109 font-family: Arial; 110 font-size: 16px; 111 font-weight: bold; 112 color: white; 113 } 114 115 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 116 -webkit-appearance: media-time-remaining-display; 117 -webkit-user-select: none; 118 display: none; 119 120 overflow: hidden; 121 cursor: default; 122 123 position: absolute; 124 line-height: 21px; 125 top: auto; 126 bottom: 6px; 127 left: auto; 128 right: 0px; 129 130 height: 20px; 131 width: 58px; 132 133 text-align: center; 134 font-family: Arial; 135 font-size: 16px; 136 font-weight: bold; 137 color: white; 138 } 139 140 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 141 -webkit-appearance: media-slider; 142 position: absolute; 143 top: auto; 144 bottom: 7px; 145 left: 6px; 146 right: 65px; 147 height: 16px; 148 149 border-color: rgba(255, 255, 255, 0.2); 150 border-style: solid; 151 border-width: 1px; 152 border-radius: 2px; 153 background-color: rgba(255, 255, 255, 0.08); 154 color: rgb(50, 140, 223); 155 } 156 157 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 158 -webkit-appearance: media-seek-back-button; 159 display: none; 160 } 161 162 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 163 -webkit-appearance: media-seek-forward-button; 164 display: none; 165 } 166 167 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 168 -webkit-appearance: media-fullscreen-button; 169 display: none; 170 } 171 172 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 173 -webkit-appearance: media-volume-slider-container; 174 position: absolute; 175 176 width: 34px; 177 height: 100px; 178 179 background-color: rgba(0, 0, 0, 0.6); 180 } 181 182 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 183 -webkit-appearance: media-volume-slider; 184 display: inline; 185 position: absolute; 186 187 top: 10px; 188 left: 12px; 189 190 width: 10px; 191 height: 80px; 192 } 193
