1/* 2 * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved. 3 * Copyright (C) 2011 Samsung Electronics 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/* EFLWebKit media controls. Extends mediaControls.css */ 27 28audio { 29 width: 300px; 30 height: 20px; 31} 32 33audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 34 display: -webkit-flex; 35 -webkit-flex-direction: row; 36 -webkit-align-items: center; 37 -webkit-user-select: none; 38 position: relative; 39 bottom: 0; 40 width: 100%; 41 z-index: 0; 42 overflow: hidden; 43 height: 20px; 44 text-align: right; 45} 46 47video:-webkit-full-page-media::-webkit-media-controls-panel { 48 bottom: 0px; 49} 50 51audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 52 -webkit-appearance: media-mute-button; 53 display: -webkit-flex; 54 width: 20px; 55 height: 20px; 56 position: relative; 57 z-index: 2; 58 background-color: initial; 59 border: initial; 60 color: inherit; 61} 62 63audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 64 -webkit-appearance: media-play-button; 65 display: -webkit-flex; 66 width: 20px; 67 height: 20px; 68 background-color: initial; 69 border: initial; 70 color: inherit; 71} 72 73audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 74 -webkit-appearance: media-controls-background; 75 display: -webkit-flex; 76 -webkit-flex-direction: row; 77 -webkit-align-items: center; 78 -webkit-justify-content: flex-end; 79 -webkit-flex: 1 1; 80 -webkit-user-select: none; 81 height: 20px; 82} 83 84audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 85 -webkit-appearance: media-current-time-display; 86 -webkit-user-select: none; 87 display: -webkit-flex; 88 height: 10px; 89 90 padding: 5px; 91 92 text-align: center; 93 font-size: 10px; 94 95 color: black; 96 letter-spacing: normal; 97 word-spacing: normal; 98 line-height: normal; 99 text-transform: none; 100 text-indent: 0; 101 text-shadow: none; 102 text-decoration: none; 103 font-style: normal; 104 font-weight: normal; 105 font-family: serif; 106} 107 108audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 109 display: none; 110} 111 112audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 113 -webkit-appearance: media-slider; 114 display: -webkit-flex; 115 -webkit-flex: 1 1; 116 height: 20px; 117 padding: 0px 2px; 118 background-color: initial; 119 border: initial; 120 color: inherit; 121 margin: initial; 122} 123 124audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 125 -webkit-appearance: media-volume-slider-container; 126 position: absolute; 127 height: 100px; 128 width: 20px; 129 bottom: 20px; 130 z-index: 1; 131} 132 133audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 134 -webkit-appearance: media-volume-slider; 135 display: none; 136 background-color: initial; 137 border: initial; 138 color: inherit; 139 margin: initial; 140} 141 142audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 143 -webkit-appearance: media-seek-back-button; 144 display: -webkit-flex; 145 width: 20px; 146 height: 20px; 147 background-color: initial; 148 border: initial; 149 color: inherit; 150} 151 152audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 153 -webkit-appearance: media-seek-forward-button; 154 display: -webkit-flex; 155 width: 20px; 156 height: 20px; 157 background-color: initial; 158 border: initial; 159 color: inherit; 160} 161 162audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 163 -webkit-appearance: media-fullscreen-button; 164 display: -webkit-flex; 165 width: 20px; 166 height: 20px; 167 background-color: initial; 168 border: initial; 169 color: inherit; 170} 171 172audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 173 display: none; 174 background-color: initial; 175 border: initial; 176 color: inherit; 177} 178 179audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 180 display: none; 181 background-color: initial; 182 border: initial; 183 color: inherit; 184} 185 186audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 187 -webkit-appearance: media-toggle-closed-captions-button; 188 display: -webkit-flex; 189 width: 20px; 190 height: 20px; 191 background-color: initial; 192 border: initial; 193 color: inherit; 194} 195 196audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { 197 -webkit-appearance: media-volume-slider-mute-button; 198 display: none; 199 background-color: initial; 200 border: initial; 201 color: inherit; 202} 203