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 28audio { 29 width: 300px; 30 height: 32px; 31} 32 33audio::-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 44video:-webkit-full-page-media::-webkit-media-controls-panel { 45 bottom: 0px; 46} 47 48audio::-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 60audio::-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 73audio::-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-flex: 1; 80 81 position: absolute; 82 top: auto; 83 bottom: 0; 84 left: 30px; 85 right: 34px; 86 87 width: auto; 88 height: 32px; 89 90 border-left: 1px solid rgba(255, 255, 255, 0.2); 91 border-right: 1px solid rgba(255, 255, 255, 0.2); 92} 93 94audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 95 -webkit-appearance: media-current-time-display; 96 -webkit-user-select: none; 97 display: -webkit-box; 98 -webkit-box-flex: 0; 99 -webkit-box-pack: center; 100 -webkit-box-align: center; 101 102 overflow: hidden; 103 cursor: default; 104 105 position: absolute; 106 top: 6px; 107 right: 0; 108 109 line-height: 21px; 110 height: 20px; 111 width: 58px; 112 113 text-align: center; 114 font-family: Arial; 115 font-size: 16px; 116 font-weight: bold; 117 color: white; 118 119 letter-spacing: normal; 120 word-spacing: normal; 121 text-transform: none; 122 text-indent: 0; 123 text-shadow: none; 124 text-decoration: none; 125} 126 127audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 128 -webkit-appearance: media-slider; 129 display: -webkit-box; 130 box-sizing: border-box; 131 -webkit-box-flex: 1; 132 133 position: absolute; 134 top: 7px; 135 left: 6px; 136 right: 64px; 137 138 padding: 0px; 139 margin: 0px; 140 height: 18px; 141 142 border-color: rgba(255, 255, 255, 0.2); 143 border-style: solid; 144 border-width: 1px; 145 border-radius: 2px; 146 background-color: rgba(255, 255, 255, 0.08); 147 color: rgb(50, 140, 223); 148} 149 150audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 151 -webkit-appearance: media-volume-slider-container; 152 position: absolute; 153 154 width: 34px; 155 height: 100px; 156 157 background-color: rgba(0, 0, 0, 0.6); 158} 159 160audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 161 -webkit-appearance: media-volume-slider; 162 display: inline; 163 position: absolute; 164 165 top: 10px; 166 left: 12px; 167 168 width: 10px; 169 height: 80px; 170} 171