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