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