1/*
2 * Copyright (C) 2009 Apple Inc.  All rights reserved.
3 * Copyright (C) 2009 Google Inc.
4 * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
5 * Copyright (C) 2012 Igalia S.L.
6 *
7 * Redistribution and use in source and binary forms, with or without
8 * modification, are permitted provided that the following conditions
9 * are met:
10 * 1. Redistributions of source code must retain the above copyright
11 *    notice, this list of conditions and the following disclaimer.
12 * 2. Redistributions in binary form must reproduce the above copyright
13 *    notice, this list of conditions and the following disclaimer in the
14 *    documentation and/or other materials provided with the distribution.
15 *
16 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
19 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
20 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
21 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 */
27
28/* These are based on the Chromium media controls */
29
30body:-webkit-full-page-media {
31    background-color: rgb(0, 0, 0);
32}
33
34audio {
35    width: 300px;
36    height: 30px;
37}
38
39audio:-webkit-full-page-media, video:-webkit-full-page-media {
40    max-height: 100%;
41    max-width: 100%;
42}
43
44audio:-webkit-full-page-media::-webkit-media-controls-panel,
45video:-webkit-full-page-media::-webkit-media-controls-panel {
46    bottom: 0px;
47}
48
49::-webkit-media-controls {
50    display: -webkit-flex;
51    -webkit-flex-direction: column;
52    -webkit-justify-content: flex-end;
53    -webkit-align-items: center;
54}
55
56audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
57    width: 100%;
58    max-width: 800px;
59    height: 30px;
60    bottom: 0;
61    text-indent: 0;
62    padding: 0;
63    box-sizing: border-box;
64    overflow: visible;
65}
66
67video::-webkit-media-controls-enclosure {
68    padding: 5px;
69    height: 40px;
70}
71
72audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
73    display: -webkit-flex;
74    -webkit-flex-direction: row;
75    -webkit-align-items: center;
76    -webkit-justify-content: flex-start;
77    bottom: auto;
78    height: 30px;
79    background-color: rgba(20, 20, 20, 0.8);
80    border-radius: 5px;
81    overflow: visible;
82}
83
84audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
85    -webkit-appearance: media-mute-button;
86    display: -webkit-flex;
87    -webkit-flex: none;
88    border: none;
89    box-sizing: border-box;
90    width: 30px;
91    height: 30px;
92    line-height: 30px;
93    margin: 0 9px 0 -7px;
94}
95
96audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
97    -webkit-appearance: media-play-button;
98    display: -webkit-flex;
99    -webkit-flex: none;
100    border: none;
101    box-sizing: border-box;
102    width: 30px;
103    height: 30px;
104    line-height: 30px;
105    margin: 0 9px;
106}
107
108audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
109audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
110    -webkit-appearance: media-current-time-display;
111    -webkit-user-select: none;
112    -webkit-flex: none;
113    display: block;
114    border: none;
115    cursor: default;
116
117    height: 30px;
118    margin: 0 15px 0 0;
119
120    line-height: 30px;
121    font-family: -webkit-small-control;
122    font-size: 13px;
123    font-weight: normal;
124    font-style: normal;
125    color: white;
126
127    letter-spacing: normal;
128    word-spacing: normal;
129    text-transform: none;
130    text-indent: 0;
131    text-shadow: none;
132    text-decoration: none;
133}
134
135audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
136    -webkit-appearance: media-slider;
137    display: -webkit-flex;
138    -webkit-flex: 1 1 auto;
139    height: 8px;
140    margin: 0 15px 0 1px;
141    padding: 0;
142    background-color: transparent;
143    min-width: 25px;
144    border-radius: 4px;
145    color: rgba(230, 230, 230, 0.35);
146}
147
148audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
149    -webkit-appearance: media-volume-slider-container;
150    position: absolute;
151    padding: 0;
152    height: 100px;
153    width: 30px;
154    bottom: 30px;
155    z-index: 2;
156    background-color: rgba(20, 20, 20, 0.8);
157    right: 9px;
158    border-radius: 5px 5px 0px 0px;
159}
160
161audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
162    -webkit-appearance: media-volume-slider;
163    display: -webkit-flex;
164    -webkit-align-items: center;
165    -webkit-flex-direction: column;
166    box-sizing: border-box;
167    height: 80px;
168    width: 8px;
169    margin: 10px auto;
170    border-radius: 4px;
171    background-color: transparent;
172    color: rgba(230, 230, 230, 0.35);
173}
174
175audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
176    margin: -7px 0;
177}
178
179audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb {
180    -webkit-appearance: media-volume-sliderthumb;
181    width: 12px;
182    height: 12px;
183    border-radius: 3px;
184    color: white;
185    margin: 0;
186}
187
188input[type="range"]::-webkit-media-slider-container {
189    display: -webkit-flex;
190    -webkit-align-items: center;
191    -webkit-flex-direction: row; /* This property is updated by C++ code. */
192    box-sizing: border-box;
193    height: 100%;
194    width: 100%;
195    border: 1px solid rgba(230, 230, 230, 0.35);
196    border-radius: 4px;
197    background-color: transparent;
198}
199
200/* The negative right margin causes the track to overflow its container. */
201input[type="range"]::-webkit-media-slider-container > div {
202    margin-right: -14px;
203}
204
205input[type="range"]::-webkit-media-slider-thumb {
206    -webkit-appearance: media-sliderthumb;
207    width: 12px;
208    height: 12px;
209    border-radius: 3px;
210    color: white;
211    margin-left: -7px;
212    margin-right: -7px;
213}
214
215audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
216    -webkit-appearance: media-toggle-closed-captions-button;
217    display: -webkit-flex;
218    -webkit-flex: none;
219    border: none;
220    box-sizing: border-box;
221    width: 30px;
222    height: 30px;
223    line-height: 30px;
224    margin: 0 9px 0 -7px;
225}
226
227audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
228    -webkit-appearance: media-enter-fullscreen-button;
229    display: -webkit-flex;
230    -webkit-flex: none;
231    border: none;
232    box-sizing: border-box;
233    width: 30px;
234    height: 30px;
235    line-height: 30px;
236    margin: 0 9px 0 -7px;
237}
238