1/* 2 * Copyright (C) 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/* alternate media controls - Extend fullscreen.css */ 26 27video:-webkit-full-screen::-webkit-media-controls-panel { 28 -webkit-box-align: start; 29 -webkit-box-pack: end; 30 -webkit-appearance: none; 31 32 bottom: 50px; 33 left: 50%; 34 margin-left: -220px; 35 padding: 12px 0 0 10px; 36 width: 430px; 37 height: 48px; 38 39 background-image: -webkit-gradient( 40 linear, 41 left top, 42 left bottom, 43 color-stop(0, rgba(30, 30, 30, .97)), 44 color-stop(0.333, rgba(45, 45, 45, .97)), 45 color-stop(0.35, rgba(25, 25, 25, .97)), 46 color-stop(0.366, rgba(25, 25, 25, .97)), 47 color-stop(0.366, rgba(12, 12, 12, .97)), 48 color-stop(1, rgba(19, 19, 19, .97)) 49 ); 50 51 -webkit-box-shadow: 52 inset 0 -1px 1px rgba(0, 0, 0, 0.5), 53 inset 0 1px 0 0px rgba(255, 255, 255, 0.15), 54 inset 0 -1px 0 0px rgba(202, 202, 202, 0.09), 55 0 0 0 1px rgba(0, 0, 0, 0.5); 56 -webkit-border-radius: 8px; 57} 58 59video:-webkit-full-screen::-webkit-media-controls-mute-button { 60 display: none; 61} 62 63video:-webkit-full-screen::-webkit-media-controls-volume-slider-container { 64 display: none; 65} 66 67video:-webkit-full-screen::-webkit-media-controls-volume-slider { 68 display: none; 69} 70 71video:-webkit-full-screen::-webkit-media-controls-volume-slider-mute-button { 72 display: none; 73} 74 75video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-min-button { 76 -webkit-appearance: media-mute-button; 77 display: block; 78 position: absolute; 79 left: 11px; 80 top: 15px; 81 width: 14px; 82 height: 12px; 83} 84 85video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-slider { 86 -webkit-appearance: media-slider; 87 display: block; 88 position: absolute; 89 left: 28px; 90 top: 15px; 91 height: 12px; 92 width: 50px; 93} 94 95video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-max-button { 96 -webkit-appearance: media-mute-button; 97 display: block; 98 position: absolute; 99 left: 84px; 100 top: 15px; 101 width: 14px; 102 height: 12px; 103} 104 105video:-webkit-full-screen::-webkit-media-controls-play-button { 106 position: absolute; 107 width: 22px; 108 height: 23px; 109 left: 209px; 110 top: 9px; 111} 112 113video:-webkit-full-screen::-webkit-media-controls-rewind-button { 114 position: absolute; 115 left: 162px; 116 top: 13px; 117 width: 18px; 118 height: 18px; 119} 120 121video:-webkit-full-screen::-webkit-media-controls-seek-back-button { 122 position: absolute; 123 display: -webkit-box; 124 width: 23px; 125 height: 16px; 126 left: 162px; 127 top: 13px; 128} 129 130video:-webkit-full-screen::-webkit-media-controls-seek-forward-button { 131 position: absolute; 132 display: -webkit-box; 133 width: 23px; 134 height: 16px; 135 left: 262px; 136 top: 13px; 137} 138 139video:-webkit-full-screen::-webkit-media-controls-timeline-container { 140 height: auto; 141 width: 420px; 142 position: absolute; 143 bottom: 9px; 144 left: 8px; 145 right: 8px; 146} 147 148video:-webkit-full-screen::video::-webkit-media-controls-status-display { 149 width: 420px; 150 position: absolute; 151 bottom: 9px; 152 left: 8px; 153 right: 8px; 154} 155