9f6eb6ad7f2c19bca817c90d66448f569c104e7c
[WebKit-https.git] / Source / WebCore / css / mediaControls.css
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 /* media controls */
26
27 audio {
28     width: 200px;
29     height: 16px;
30 }
31
32 ::-webkit-media-controls {
33     width: inherit;
34     height: inherit;
35     position: relative;
36     display: block;
37     direction: ltr;
38 }
39
40 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
41     display: -webkit-box;
42     -webkit-box-orient: horizontal;
43     -webkit-box-align: center;
44     -webkit-user-select: none;
45     position: absolute;
46     bottom: 0;
47     width: 100%;
48     z-index: 0;
49     overflow: hidden;
50     height: 16px;
51     text-align: right;
52 }
53
54 video:-webkit-full-page-media::-webkit-media-controls-panel {
55     bottom: 0px;
56 }
57
58 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
59     -webkit-appearance: media-mute-button;
60     display: -webkit-box;
61     width: 16px;
62     height: 16px;
63     background-color: initial;
64     border: initial;
65     color: inherit;
66 }
67
68 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
69     -webkit-appearance: media-play-button;
70     display: -webkit-box;
71     width: 16px;
72     height: 16px;
73     background-color: initial;
74     border: initial;
75     color: inherit;
76 }
77
78 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
79     -webkit-appearance: media-controls-background;
80     display: -webkit-box;
81     -webkit-box-orient: horizontal;
82     -webkit-box-align: center;
83     -webkit-box-pack: end;
84     -webkit-box-flex: 1;
85     -webkit-user-select: none;
86     height: 16px;
87 }
88
89 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
90     display: none;
91 }
92
93 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
94     display: none;
95 }
96
97 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
98     -webkit-appearance: media-slider;
99     display: -webkit-box;
100     -webkit-box-flex: 1;
101     height: 16px;
102     padding: 0px 2px;
103     background-color: initial;
104     border: initial;
105     color: inherit;
106     margin: initial;
107 }
108
109 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
110     background-color: initial;
111     border: initial;
112     color: inherit;
113     margin: initial;
114 }
115
116 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
117     -webkit-appearance: media-seek-back-button;
118     display: -webkit-box;
119     width: 16px;
120     height: 16px;
121     background-color: initial;
122     border: initial;
123     color: inherit;
124 }
125
126 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
127     -webkit-appearance: media-seek-forward-button;
128     display: -webkit-box;
129     width: 16px;
130     height: 16px;
131     background-color: initial;
132     border: initial;
133     color: inherit;
134 }
135
136 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
137     -webkit-appearance: media-fullscreen-button;
138     display: -webkit-box;
139     width: 16px;
140     height: 16px;
141     background-color: initial;
142     border: initial;
143     color: inherit;
144 }
145
146 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
147     display: none;
148     background-color: initial;
149     border: initial;
150     color: inherit;
151 }
152
153 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
154     display: none;
155     background-color: initial;
156     border: initial;
157     color: inherit;
158 }
159
160 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
161     -webkit-appearance: media-toggle-closed-captions-button;
162     display: -webkit-box;
163     width: 16px;
164     height: 16px;
165     background-color: initial;
166     border: initial;
167     color: inherit;
168 }
169
170 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
171     -webkit-appearance: media-volume-slider-mute-button;
172     display: none;
173     background-color: initial;
174     border: initial;
175     color: inherit;
176 }
177
178 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
179     display: none;
180 }
181
182 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
183     display: none;
184 }
185
186 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
187     display: none;
188 }