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
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    height: 25px;
36}
37
38video:-webkit-full-page-media::-webkit-media-controls-panel {
39    bottom: -25px;
40}
41
42audio::-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
50audio::-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
57audio::-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
67audio::-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
89audio::-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
111audio::-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
120audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
121    display: none;
122    width: 0px;
123}
124
125audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
126    display: none;
127    width: 0px;
128}
129
130audio::-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
138audio::-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
148audio::-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
157audio::-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
179audio::-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