OLD | NEW |
| (Empty) |
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 body:-webkit-full-page-media { | |
29 background-color: rgb(0, 0, 0); | |
30 } | |
31 | |
32 audio { | |
33 width: 300px; | |
34 height: 30px; | |
35 } | |
36 | |
37 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
38 max-height: 100%; | |
39 max-width: 100%; | |
40 } | |
41 | |
42 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
43 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
44 bottom: 0px; | |
45 } | |
46 | |
47 ::-webkit-media-controls { | |
48 display: -webkit-flex; | |
49 -webkit-flex-direction: column; | |
50 -webkit-justify-content: flex-end; | |
51 -webkit-align-items: center; | |
52 } | |
53 | |
54 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | |
55 width: 100%; | |
56 max-width: 800px; | |
57 height: 30px; | |
58 -webkit-flex-shrink: 0; | |
59 bottom: 0; | |
60 text-indent: 0; | |
61 padding: 0; | |
62 box-sizing: border-box; | |
63 } | |
64 | |
65 video::-webkit-media-controls-enclosure { | |
66 padding: 0px 5px 5px 5px; | |
67 height: 35px; | |
68 -webkit-flex-shrink: 0; | |
69 } | |
70 | |
71 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
72 display: -webkit-flex; | |
73 -webkit-flex-direction: row; | |
74 -webkit-align-items: center; | |
75 /* We use flex-start here to ensure that the play button is visible even | |
76 * if we are too small to show all controls. | |
77 */ | |
78 -webkit-justify-content: flex-start; | |
79 bottom: auto; | |
80 height: 30px; | |
81 background-color: rgba(20, 20, 20, 0.8); | |
82 border-radius: 5px; | |
83 } | |
84 | |
85 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | |
86 -webkit-appearance: media-mute-button; | |
87 display: -webkit-flex; | |
88 -webkit-flex: none; | |
89 border: none; | |
90 box-sizing: border-box; | |
91 width: 35px; | |
92 height: 30px; | |
93 line-height: 30px; | |
94 margin: 0 6px 0 0; | |
95 padding: 0; | |
96 } | |
97 | |
98 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | |
99 -webkit-appearance: media-play-button; | |
100 display: -webkit-flex; | |
101 -webkit-flex: none; | |
102 border: none; | |
103 box-sizing: border-box; | |
104 width: 30px; | |
105 height: 30px; | |
106 line-height: 30px; | |
107 margin-left: 9px; | |
108 margin-right: 9px; | |
109 padding: 0; | |
110 } | |
111 | |
112 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, | |
113 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | |
114 -webkit-appearance: media-current-time-display; | |
115 -webkit-user-select: none; | |
116 -webkit-flex: none; | |
117 display: -webkit-flex; | |
118 border: none; | |
119 cursor: default; | |
120 | |
121 height: 30px; | |
122 margin: 0 9px 0 0; | |
123 padding: 0; | |
124 | |
125 line-height: 30px; | |
126 font-family: Arial, Helvetica, sans-serif; | |
127 font-size: 13px; | |
128 font-weight: bold; | |
129 font-style: normal; | |
130 color: white; | |
131 | |
132 letter-spacing: normal; | |
133 word-spacing: normal; | |
134 text-transform: none; | |
135 text-indent: 0; | |
136 text-shadow: none; | |
137 text-decoration: none; | |
138 } | |
139 | |
140 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
141 -webkit-appearance: media-slider; | |
142 display: -webkit-flex; | |
143 -webkit-flex: 1 1 auto; | |
144 height: 8px; | |
145 margin: 0 15px 0 0; | |
146 padding: 0; | |
147 background-color: transparent; | |
148 min-width: 25px; | |
149 } | |
150 | |
151 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | |
152 -webkit-appearance: media-volume-slider; | |
153 display: -webkit-flex; | |
154 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
155 * and be aesthetically pleasing. | |
156 */ | |
157 -webkit-flex: 1 1.9 auto; | |
158 height: 8px; | |
159 max-width: 70px; | |
160 margin: 0 15px 0 0; | |
161 padding: 0; | |
162 background-color: transparent; | |
163 min-width: 15px; | |
164 } | |
165 | |
166 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
167 https://code.google.com/p/chromium/issues/detail?id=112508 | |
168 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
169 */ | |
170 input[type="range"]::-webkit-media-slider-container { | |
171 display: -webkit-flex; | |
172 -webkit-align-items: center; | |
173 -webkit-flex-direction: row; /* This property is updated by C++ code. */ | |
174 box-sizing: border-box; | |
175 height: 100%; | |
176 width: 100%; | |
177 border: 1px solid rgba(230, 230, 230, 0.35); | |
178 border-radius: 4px; | |
179 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | |
180 } | |
181 | |
182 /* The negative right margin causes the track to overflow its container. */ | |
183 input[type="range"]::-webkit-media-slider-container > div { | |
184 margin-right: -14px; | |
185 } | |
186 | |
187 input[type="range"]::-webkit-media-slider-thumb { | |
188 margin-left: -7px; | |
189 margin-right: -7px; | |
190 } | |
191 | |
192 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { | |
193 -webkit-appearance: media-toggle-closed-captions-button; | |
194 display: -webkit-flex; | |
195 -webkit-flex: none; | |
196 border: none; | |
197 box-sizing: border-box; | |
198 width: 30px; | |
199 height: 30px; | |
200 line-height: 30px; | |
201 margin-left: -5px; | |
202 margin-right: 9px; | |
203 padding: 0; | |
204 } | |
205 | |
206 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | |
207 -webkit-appearance: media-enter-fullscreen-button; | |
208 display: -webkit-flex; | |
209 -webkit-flex: none; | |
210 border: none; | |
211 box-sizing: border-box; | |
212 width: 30px; | |
213 height: 30px; | |
214 line-height: 30px; | |
215 margin-left: -5px; | |
216 margin-right: 9px; | |
217 padding: 0; | |
218 } | |
OLD | NEW |