16ff0e44d86a49a34155fb8064c0fba169268a75
[WebKit.git] / WebCore / css / mediaControlsChromium.css
1 /*
2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Google Inc.
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 /* Chromium default media controls */
27
28 audio {
29     width: 300px;
30     height: 32px;
31 }
32
33 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
34     -webkit-user-select: none;
35     position: absolute;
36     overflow: visible;
37     bottom: 0;
38     width: 100%;
39     height: 32px;
40     z-index: 0;
41     background-color: rgba(0, 0, 0, 0.6);
42 }
43
44 video:-webkit-full-page-media::-webkit-media-controls-panel {
45     bottom: -32px;
46 }
47
48 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
49     -webkit-appearance: media-mute-button;
50     position: absolute;
51     top: auto;
52     bottom: 0;
53     right: 0;
54     left: auto;
55
56     width: 34px;
57     height: 32px;
58 }
59
60 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
61     -webkit-appearance: media-play-button;
62
63     position: absolute;
64     top: auto;
65     bottom: 7px;
66     left: 7px;
67     right: 6px;
68
69     width: 18px;
70     height: 19px;
71 }
72
73 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
74     -webkit-appearance: media-timeline-container;
75     -webkit-user-select: none;
76
77     position: absolute;
78     top: auto;
79     bottom: 0;
80     left: 30px;
81     right: 34px;
82
83     width: auto;
84     height: 32px;
85
86     border-left-color: rgba(255, 255, 255, 0.2);
87     border-right-color: rgba(255, 255, 255, 0.2);
88 }
89
90 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
91     -webkit-appearance: media-current-time-display;
92     -webkit-user-select: none;
93     display: inline-block;
94
95     overflow: hidden;
96     cursor: default;
97
98     position: absolute;
99     line-height: 21px;
100     top: auto;
101     bottom: 6px;
102     left: auto;
103     right: 0px;
104
105     height: 20px;
106     width: 58px;
107
108     text-align: center;
109     font-family: Arial;
110     font-size: 16px;
111     font-weight: bold;
112     color: white;
113 }
114
115 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
116     -webkit-appearance: media-time-remaining-display;
117     -webkit-user-select: none;
118     display: none;
119
120     overflow: hidden;
121     cursor: default;
122
123     position: absolute;
124     line-height: 21px;
125     top: auto;
126     bottom: 6px;
127     left: auto;
128     right: 0px;
129
130     height: 20px;
131     width: 58px;
132
133     text-align: center;
134     font-family: Arial;
135     font-size: 16px;
136     font-weight: bold;
137     color: white;
138 }
139
140 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
141     -webkit-appearance: media-slider;
142     position: absolute;
143     top: auto;
144     bottom: 8px;
145     left: 6px;
146     right: 65px;
147     height: 16px;
148
149     border-color: rgba(255, 255, 255, 0.2);
150     border-style: solid;
151     border-width: 1px;
152     border-radius: 2px;
153     background-color: rgba(255, 255, 255, 0.08);
154     color: rgb(50, 140, 223);
155 }
156
157 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
158     -webkit-appearance: media-seek-back-button;
159     display: none;
160 }
161
162 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
163     -webkit-appearance: media-seek-forward-button;
164     display: none;
165 }
166
167 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
168     -webkit-appearance: media-fullscreen-button;
169     display: none;
170 }
171
172 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
173     -webkit-appearance: media-volume-slider-container;
174     position: absolute;
175
176     width: 34px;
177     height: 100px;
178
179     background-color: rgba(0, 0, 0, 0.6);
180 }
181
182 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
183     -webkit-appearance: media-volume-slider;
184     display: inline;
185     position: absolute;
186
187     top: 10px;
188     left: 12px;
189
190     width: 10px;
191     height: 80px;
192 }