1/*
2 * Copyright (C) 2009, 2010, 2011 Apple Inc.  All rights reserved.
3 * Copyright (C) 2011 Samsung Electronics
4 *
5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions
7 * are met:
8 * 1. Redistributions of source code must retain the above copyright
9 *    notice, this list of conditions and the following disclaimer.
10 * 2. Redistributions in binary form must reproduce the above copyright
11 *    notice, this list of conditions and the following disclaimer in the
12 *    documentation and/or other materials provided with the distribution.
13 *
14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26/* EFLWebKit media controls. Extends mediaControls.css */
27
28audio {
29    width: 300px;
30    height: 20px;
31}
32
33audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
34    display: -webkit-flex;
35    -webkit-flex-direction: row;
36    -webkit-align-items: center;
37    -webkit-user-select: none;
38    position: relative;
39    bottom: 0;
40    width: 100%;
41    z-index: 0;
42    overflow: hidden;
43    height: 20px;
44    text-align: right;
45}
46
47video:-webkit-full-page-media::-webkit-media-controls-panel {
48    bottom: 0px;
49}
50
51audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
52    -webkit-appearance: media-mute-button;
53    display: -webkit-flex;
54    width: 20px;
55    height: 20px;
56    position: relative;
57    z-index: 2;
58    background-color: initial;
59    border: initial;
60    color: inherit;
61}
62
63audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
64    -webkit-appearance: media-play-button;
65    display: -webkit-flex;
66    width: 20px;
67    height: 20px;
68    background-color: initial;
69    border: initial;
70    color: inherit;
71}
72
73audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
74    -webkit-appearance: media-controls-background;
75    display: -webkit-flex;
76    -webkit-flex-direction: row;
77    -webkit-align-items: center;
78    -webkit-justify-content: flex-end;
79    -webkit-flex: 1 1;
80    -webkit-user-select: none;
81    height: 20px;
82}
83
84audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
85    -webkit-appearance: media-current-time-display;
86    -webkit-user-select: none;
87    display: -webkit-flex;
88    height: 10px;
89
90    padding: 5px;
91
92    text-align: center;
93    font-size: 10px;
94
95    color: black;
96    letter-spacing: normal;
97    word-spacing: normal;
98    line-height: normal;
99    text-transform: none;
100    text-indent: 0;
101    text-shadow: none;
102    text-decoration: none;
103    font-style: normal;
104    font-weight: normal;
105    font-family: serif;
106}
107
108audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
109    display: none;
110}
111
112audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
113    -webkit-appearance: media-slider;
114    display: -webkit-flex;
115    -webkit-flex: 1 1;
116    height: 20px;
117    padding: 0px 2px;
118    background-color: initial;
119    border: initial;
120    color: inherit;
121    margin: initial;
122}
123
124audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
125    -webkit-appearance: media-volume-slider-container;
126    position: absolute;
127    height: 100px;
128    width: 20px;
129    bottom: 20px;
130    z-index: 1;
131}
132
133audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
134    -webkit-appearance: media-volume-slider;
135    display: none;
136    background-color: initial;
137    border: initial;
138    color: inherit;
139    margin: initial;
140}
141
142audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
143    -webkit-appearance: media-seek-back-button;
144    display: -webkit-flex;
145    width: 20px;
146    height: 20px;
147    background-color: initial;
148    border: initial;
149    color: inherit;
150}
151
152audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
153    -webkit-appearance: media-seek-forward-button;
154    display: -webkit-flex;
155    width: 20px;
156    height: 20px;
157    background-color: initial;
158    border: initial;
159    color: inherit;
160}
161
162audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
163    -webkit-appearance: media-fullscreen-button;
164    display: -webkit-flex;
165    width: 20px;
166    height: 20px;
167    background-color: initial;
168    border: initial;
169    color: inherit;
170}
171
172audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
173    display: none;
174    background-color: initial;
175    border: initial;
176    color: inherit;
177}
178
179audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
180    display: none;
181    background-color: initial;
182    border: initial;
183    color: inherit;
184}
185
186audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
187    -webkit-appearance: media-toggle-closed-captions-button;
188    display: -webkit-flex;
189    width: 20px;
190    height: 20px;
191    background-color: initial;
192    border: initial;
193    color: inherit;
194}
195
196audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
197    -webkit-appearance: media-volume-slider-mute-button;
198    display: none;
199    background-color: initial;
200    border: initial;
201    color: inherit;
202}
203