1/* 2 * Copyright 2010, The Android Open Source Project 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 * * Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * * 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 THE COPYRIGHT HOLDERS ``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 THE COPYRIGHT OWNER OR 17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 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/* media controls */ 27 28audio { 29 width: 200px; 30 height: 48px; 31} 32 33audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 34 display: -webkit-box; 35 -webkit-box-orient: horizontal; 36 -webkit-box-align: center; 37 -webkit-user-select: none; 38 position: absolute; 39 bottom: 0; 40 width: 100%; 41 z-index: 0; 42 overflow: hidden; 43 height: 48px; 44 text-align: right; 45} 46 47video:-webkit-full-page-media::-webkit-media-controls-panel { 48 bottom: -48px; 49} 50 51audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 52 -webkit-appearance: media-mute-button; 53 display: -webkit-box; 54 width: 48px; 55 height: 48px; 56} 57 58audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 59 -webkit-appearance: media-play-button; 60 display: -webkit-box; 61 width: 48px; 62 height: 48px; 63} 64 65audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 66 -webkit-appearance: media-controls-background; 67 display: -webkit-box; 68 -webkit-box-orient: horizontal; 69 -webkit-box-align: center; 70 -webkit-box-pack: end; 71 -webkit-box-flex: 1; 72 -webkit-user-select: none; 73 height: 48px; 74} 75 76audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 77 display: none; 78} 79 80audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 81 display: none; 82} 83 84audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 85 -webkit-appearance: media-slider; 86 display: -webkit-box; 87 -webkit-box-flex: 1; 88 height: 48px; 89 padding: 0px 0px; 90} 91 92audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { 93 display: none; 94} 95 96audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 97 display: none; 98} 99 100audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 101 -webkit-appearance: media-seek-back-button; 102 display: -webkit-box; 103 width: 48px; 104 height: 48px; 105} 106 107audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 108 -webkit-appearance: media-seek-forward-button; 109 display: -webkit-box; 110 width: 48px; 111 height: 48px; 112} 113 114audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 115 -webkit-appearance: media-fullscreen-button; 116 display: -webkit-box; 117 width: 48px; 118 height: 48px; 119} 120 121audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 122 display: none; 123} 124 125audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 126 display: none; 127} 128 129audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 130 -webkit-appearance: media-toggle-closed-captions-button; 131 display: -webkit-box; 132 width: 48px; 133 height: 48px 134} 135