1 /* 2 * Copyright (C) 2009 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 mediaControls.css */ 26 27 audio { 28 width: 200px; 29 height: 25px; 30 } 31 32 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { 33 /* In mediaControls.css */ 34 -webkit-appearance: media-controls-background; 35 height: 25px; 36 } 37 38 video:-webkit-full-page-media::-webkit-media-controls-panel { 39 bottom: -25px; 40 } 41 42 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { 43 -webkit-box-ordinal-group: 2; /* Before the fullscreen button */ 44 width: 15px; 45 height: 14px; 46 margin-left: 2px; 47 margin-right: 8px; 48 } 49 50 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { 51 width: 16px; 52 height: 16px; 53 margin-left: 6px; 54 margin-right: 1px; 55 } 56 57 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { 58 -webkit-appearance: none; 59 -webkit-box-orient: horizontal; 60 -webkit-box-align: center; 61 -webkit-box-pack: center; 62 -webkit-box-flex: 1; 63 text-align: right; 64 height: auto; 65 } 66 67 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { 68 -webkit-user-select: none; 69 display: -webkit-box; 70 -webkit-box-flex: 0; 71 -webkit-box-pack: center; 72 -webkit-box-align: center; 73 cursor: default; 74 font: -webkit-small-control; 75 font-size: 9px; 76 overflow: hidden; 77 width: 45px; 78 color: white; 79 text-shadow: black 0px 1px 1px; 80 81 letter-spacing: normal; 82 word-spacing: normal; 83 line-height: normal; 84 text-transform: none; 85 text-indent: 0; 86 text-decoration: none; 87 } 88 89 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { 90 -webkit-user-select: none; 91 display: -webkit-box; 92 -webkit-box-flex: 0; 93 -webkit-box-pack: center; 94 -webkit-box-align: center; 95 cursor: default; 96 font: -webkit-small-control; 97 font-size: 9px; 98 overflow: hidden; 99 width: 45px; 100 color: white; 101 text-shadow: black 0px 1px 1px; 102 103 letter-spacing: normal; 104 word-spacing: normal; 105 line-height: normal; 106 text-transform: none; 107 text-indent: 0; 108 text-decoration: none; 109 } 110 111 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { 112 display: -webkit-box; 113 -webkit-box-flex: 1; 114 height: 13px; 115 padding: 0px; 116 margin: 0px; 117 margin-top: 2px; 118 } 119 120 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { 121 display: none; 122 width: 0px; 123 } 124 125 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { 126 display: none; 127 width: 0px; 128 } 129 130 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { 131 width: 16px; 132 height: 16px; 133 margin-left: 7px; 134 margin-right: 7px; 135 -webkit-box-ordinal-group: 4; /* At the very end */ 136 } 137 138 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { 139 display: -webkit-box; 140 -webkit-appearance: media-rewind-button; 141 width: 18px; 142 height: 18px; 143 margin-bottom: 1px; 144 margin-left: 6px; 145 margin-right: 2px; 146 } 147 148 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { 149 display: none; 150 -webkit-appearance: media-return-to-realtime-button; 151 width: 16px; 152 height: 11px; 153 margin-left: 6px; 154 margin-right: 2px; 155 } 156 157 audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display { 158 -webkit-user-select: none; 159 cursor: default; 160 display: -webkit-box; 161 -webkit-box-flex: 1; 162 font: -webkit-small-control; 163 color: white; 164 font-size: 10px; 165 line-height: 13px; 166 overflow: hidden; 167 text-shadow: black 0px 1px 1px; 168 margin-left: 10px; 169 margin-right: 10px; 170 171 letter-spacing: normal; 172 word-spacing: normal; 173 line-height: normal; 174 text-transform: none; 175 text-indent: 0; 176 text-decoration: none; 177 } 178 179 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { 180 -webkit-appearance: media-toggle-closed-captions-button; 181 display: -webkit-box; 182 width: 16px; 183 height: 16px; 184 margin-left: 7px; 185 margin-right: 7px; 186 -webkit-box-ordinal-group: 3; /* between mute and fullscreen */ 187 } 188
