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-align-items: flex-start !important; 29 -webkit-justify-content: flex-end !important; 30 -webkit-appearance: none !important; 31 32 padding: 12px 0 0 10px !important; 33 width: 430px !important; 34 height: 48px !important; 35 margin: 0 auto 50px auto !important; 36 37 background-image: -webkit-gradient( 38 linear, 39 left top, 40 left bottom, 41 color-stop(0, rgba(30, 30, 30, .97)), 42 color-stop(0.333, rgba(45, 45, 45, .97)), 43 color-stop(0.35, rgba(25, 25, 25, .97)), 44 color-stop(0.366, rgba(25, 25, 25, .97)), 45 color-stop(0.366, rgba(12, 12, 12, .97)), 46 color-stop(1, rgba(19, 19, 19, .97)) 47 ) !important; 48 49 -webkit-box-shadow: 50 inset 0 -1px 1px rgba(0, 0, 0, 0.5), 51 inset 0 1px 0 0px rgba(255, 255, 255, 0.15), 52 inset 0 -1px 0 0px rgba(202, 202, 202, 0.09), 53 0 0 0 1px rgba(0, 0, 0, 0.5); 54 border-radius: 8px !important; 55 56 -webkit-transition: opacity 0.3s linear !important; 57} 58 59video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel { 60 opacity: 0 ! important; 61 -webkit-transition: opacity 0 ! important; 62} 63 64video:-webkit-full-screen::-webkit-media-controls-mute-button { 65 display: none; 66} 67 68video:-webkit-full-screen::-webkit-media-controls-volume-slider-container { 69 display: none; 70} 71 72video:-webkit-full-screen::-webkit-media-controls-volume-slider { 73 display: none; 74} 75 76video:-webkit-full-screen::-webkit-media-controls-volume-slider-mute-button { 77 display: none; 78} 79 80video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-min-button { 81 -webkit-appearance: media-mute-button; 82 display: block; 83 position: absolute; 84 left: 11px; 85 top: 15px; 86 width: 17px; 87 height: 14px; 88} 89 90video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-slider { 91 -webkit-appearance: media-fullscreen-volume-slider; 92 display: block; 93 position: absolute; 94 left: 28px; 95 top: 14px; 96 height: 11px; 97 width: 50px; 98} 99 100video:-webkit-full-screen::-webkit-media-controls-fullscreen-volume-max-button { 101 -webkit-appearance: media-mute-button; 102 display: block; 103 position: absolute; 104 left: 84px; 105 top: 15px; 106 width: 17px; 107 height: 14px; 108} 109 110video:-webkit-full-screen::-webkit-media-controls-play-button { 111 position: absolute; 112 width: 22px; 113 height: 23px; 114 left: 209px; 115 top: 9px; 116} 117 118video:-webkit-full-screen::-webkit-media-controls-rewind-button { 119 position: absolute; 120 left: 162px; 121 top: 13px; 122 width: 18px; 123 height: 18px; 124} 125 126video:-webkit-full-screen::-webkit-media-controls-seek-back-button { 127 position: absolute; 128 display: -webkit-flex; 129 width: 23px; 130 height: 16px; 131 left: 162px; 132 top: 13px; 133} 134 135video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button { 136 position: absolute; 137 display: -webkit-flex; 138 width: 29px; 139 height: 16px; 140 left: 262px; 141 top: 13px; 142} 143 144video:-webkit-full-screen::-webkit-media-controls-seek-forward-button { 145 position: absolute; 146 display: -webkit-flex; 147 width: 23px; 148 height: 16px; 149 left: 262px; 150 top: 13px; 151} 152 153video:-webkit-full-screen::-webkit-media-controls-timeline-container { 154 height: auto; 155 width: 420px; 156 position: absolute; 157 bottom: 9px; 158 left: 8px; 159 right: 8px; 160} 161 162video:-webkit-full-screen::-webkit-media-controls-status-display { 163 width: 420px; 164 position: absolute; 165 bottom: 9px; 166 left: 8px; 167 right: 8px; 168} 169 170video:-webkit-full-screen::-webkit-media-controls-closed-captions-container { 171 bottom: 114px; 172 right: -webkit-calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */ 173 max-width: -webkit-calc(50% + 173px); /* right + 10px */ 174 max-height: -webkit-calc(100% - 124px); /* bottom + 10px */ 175} 176