1/* 2 * Copyright (C) 2012 Google Inc. 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 for Chromium on Android */ 26 27/* WARNING: This css file can only style <audio> and <video> elements */ 28 29audio { 30 height: 35px; 31} 32 33audio::-webkit-media-controls-enclosure { 34 height: 35px; 35} 36 37video::-webkit-media-controls-enclosure { 38 height: 40px; 39} 40 41audio::-webkit-media-controls-overlay-enclosure { 42 display: none; 43} 44 45video::-webkit-media-controls-overlay-enclosure { 46 display: flex; 47 position: relative; 48 flex-direction: column; 49 justify-content: flex-end; 50 align-items: center; 51 flex: 1 1; 52 width: 100%; 53 max-width: 800px; 54 text-indent: 0; 55 box-sizing: border-box; 56 overflow: hidden; 57} 58 59audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 60 height: 35px; 61} 62 63audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 64 display: none; 65} 66 67video::-webkit-media-controls-overlay-play-button { 68 -webkit-appearance: media-overlay-play-button; 69 display: flex; 70 position: absolute; 71 top: 50%; 72 left: 50%; 73 margin-left: -40px; 74 margin-top: -40px; 75 border: none; 76 box-sizing: border-box; 77 background-color: transparent; 78 width: 80px; 79 height: 80px; 80 padding: 0; 81} 82 83audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 84 width: 35px; 85 height: 35px; 86 line-height: 35px; 87} 88 89audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, 90audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 91 height: 35px; 92 line-height: 35px; 93 font-size: 18px; 94} 95 96audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { 97 display: none; 98} 99 100video::-webkit-media-controls-fullscreen-button { 101 width: 35px; 102 height: 35px; 103 line-height: 35px; 104} 105 106audio::-webkit-media-controls-fullscreen-button { 107 display: none; 108} 109 110video::-webkit-media-controls-toggle-closed-captions-button { 111 width: 35px; 112 height: 35px; 113 line-height: 35px; 114} 115