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