OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved. | 2 * Copyright (C) 2009 Apple Inc. All rights reserved. |
| 3 * Copyright (C) 2009 Google Inc. |
3 * | 4 * |
4 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
6 * are met: | 7 * are met: |
7 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
8 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
9 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
10 * notice, this list of conditions and the following disclaimer in the | 11 * notice, this list of conditions and the following disclaimer in the |
11 * documentation and/or other materials provided with the distribution. | 12 * documentation and/or other materials provided with the distribution. |
12 * | 13 * |
13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | 14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | 16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | 17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | 18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | 19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | 20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
21 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 22 * (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 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
23 */ | 24 */ |
24 | 25 |
25 /* media controls */ | 26 /* Chromium default media controls */ |
26 | 27 |
27 body:-webkit-full-page-media { | 28 body:-webkit-full-page-media { |
28 background-color: rgb(38, 38, 38); | 29 background-color: rgb(0, 0, 0); |
29 } | 30 } |
30 | 31 |
31 audio { | 32 audio { |
32 width: 200px; | 33 width: 300px; |
33 height: 16px; | 34 height: 30px; |
34 } | 35 } |
35 | 36 |
36 ::-webkit-media-controls { | 37 ::-webkit-media-controls { |
37 width: inherit; | 38 width: inherit; |
38 height: inherit; | 39 height: inherit; |
39 position: relative; | 40 position: relative; |
| 41 direction: ltr; |
40 display: -webkit-flex; | 42 display: -webkit-flex; |
41 direction: ltr; | 43 -webkit-flex-direction: column; |
42 -webkit-align-items: flex-start; | |
43 -webkit-justify-content: flex-end; | 44 -webkit-justify-content: flex-end; |
44 -webkit-flex-direction: column; | 45 -webkit-align-items: center; |
| 46 } |
| 47 |
| 48 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ |
| 49 width: 100%; |
| 50 max-width: 800px; |
| 51 height: 30px; |
| 52 -webkit-flex-shrink: 0; |
| 53 bottom: 0; |
| 54 text-indent: 0; |
| 55 padding: 0; |
| 56 box-sizing: border-box; |
| 57 } |
| 58 |
| 59 video::-webkit-media-controls-enclosure { |
| 60 padding: 0px 5px 5px 5px; |
| 61 height: 35px; |
| 62 -webkit-flex-shrink: 0; |
45 } | 63 } |
46 | 64 |
47 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | 65 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
48 display: -webkit-flex; | 66 display: -webkit-flex; |
49 -webkit-flex-direction: row; | 67 -webkit-flex-direction: row; |
50 -webkit-align-items: center; | 68 -webkit-align-items: center; |
| 69 /* We use flex-start here to ensure that the play button is visible even |
| 70 * if we are too small to show all controls. |
| 71 */ |
| 72 -webkit-justify-content: flex-start; |
51 -webkit-user-select: none; | 73 -webkit-user-select: none; |
52 position: relative; | 74 position: relative; |
53 bottom: 0; | |
54 width: 100%; | 75 width: 100%; |
55 z-index: 0; | 76 z-index: 0; |
56 overflow: hidden; | 77 overflow: hidden; |
57 height: 16px; | |
58 text-align: right; | 78 text-align: right; |
| 79 bottom: auto; |
| 80 height: 30px; |
| 81 background-color: rgba(20, 20, 20, 0.8); |
| 82 border-radius: 5px; |
59 } | 83 } |
60 | 84 |
61 video:-webkit-full-page-media { | 85 video:-webkit-full-page-media { |
62 margin: auto; | 86 margin: auto; |
63 position: absolute; | 87 position: absolute; |
64 top: 0; | 88 top: 0; |
65 right: 0; | 89 right: 0; |
66 bottom: 0; | 90 bottom: 0; |
67 left: 0; | 91 left: 0; |
68 } | 92 } |
69 | 93 |
| 94 audio:-webkit-full-page-media, video:-webkit-full-page-media { |
| 95 max-height: 100%; |
| 96 max-width: 100%; |
| 97 } |
| 98 |
| 99 audio:-webkit-full-page-media::-webkit-media-controls-panel, |
70 video:-webkit-full-page-media::-webkit-media-controls-panel { | 100 video:-webkit-full-page-media::-webkit-media-controls-panel { |
71 bottom: 0px; | 101 bottom: 0px; |
72 } | 102 } |
73 | 103 |
74 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | 104 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { |
75 -webkit-appearance: media-mute-button; | 105 -webkit-appearance: media-mute-button; |
76 display: -webkit-flex; | 106 display: -webkit-flex; |
77 width: 16px; | 107 -webkit-flex: none; |
78 height: 16px; | 108 border: none; |
| 109 box-sizing: border-box; |
| 110 width: 35px; |
| 111 height: 30px; |
| 112 line-height: 30px; |
| 113 margin: 0 6px 0 0; |
| 114 padding: 0; |
79 background-color: initial; | 115 background-color: initial; |
80 border: initial; | |
81 color: inherit; | 116 color: inherit; |
82 } | 117 } |
83 | 118 |
84 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls
-overlay-play-button { | 119 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls
-overlay-play-button { |
85 display: none; | 120 display: none; |
86 } | 121 } |
87 | 122 |
88 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | 123 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { |
89 -webkit-appearance: media-play-button; | 124 -webkit-appearance: media-play-button; |
90 display: -webkit-flex; | 125 display: -webkit-flex; |
91 width: 16px; | 126 -webkit-flex: none; |
92 height: 16px; | 127 border: none; |
| 128 box-sizing: border-box; |
| 129 width: 30px; |
| 130 height: 30px; |
| 131 line-height: 30px; |
| 132 margin-left: 9px; |
| 133 margin-right: 9px; |
| 134 padding: 0; |
93 background-color: initial; | 135 background-color: initial; |
94 border: initial; | |
95 color: inherit; | 136 color: inherit; |
96 } | 137 } |
97 | 138 |
98 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | 139 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { |
99 -webkit-appearance: media-controls-background; | 140 -webkit-appearance: media-controls-background; |
100 display: -webkit-flex; | 141 display: -webkit-flex; |
101 -webkit-flex-direction: row; | 142 -webkit-flex-direction: row; |
102 -webkit-align-items: center; | 143 -webkit-align-items: center; |
103 -webkit-justify-content: flex-end; | 144 -webkit-justify-content: flex-end; |
104 -webkit-flex: 1 1; | 145 -webkit-flex: 1 1; |
105 -webkit-user-select: none; | 146 -webkit-user-select: none; |
106 height: 16px; | 147 height: 16px; |
107 min-width: 0; | 148 min-width: 0; |
108 } | 149 } |
109 | 150 |
110 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display { | 151 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, |
111 display: none; | 152 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { |
112 } | 153 -webkit-appearance: media-current-time-display; |
| 154 -webkit-user-select: none; |
| 155 -webkit-flex: none; |
| 156 display: -webkit-flex; |
| 157 border: none; |
| 158 cursor: default; |
113 | 159 |
114 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | 160 height: 30px; |
115 display: none; | 161 margin: 0 9px 0 0; |
| 162 padding: 0; |
| 163 |
| 164 line-height: 30px; |
| 165 font-family: Arial, Helvetica, sans-serif; |
| 166 font-size: 13px; |
| 167 font-weight: bold; |
| 168 font-style: normal; |
| 169 color: white; |
| 170 |
| 171 letter-spacing: normal; |
| 172 word-spacing: normal; |
| 173 text-transform: none; |
| 174 text-indent: 0; |
| 175 text-shadow: none; |
| 176 text-decoration: none; |
116 } | 177 } |
117 | 178 |
118 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | 179 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
119 -webkit-appearance: media-slider; | 180 -webkit-appearance: media-slider; |
120 display: -webkit-flex; | 181 display: -webkit-flex; |
121 -webkit-flex: 1 1; | 182 -webkit-flex: 1 1 auto; |
122 height: 16px; | 183 height: 8px; |
123 padding: 0px 2px; | 184 margin: 0 15px 0 0; |
124 background-color: initial; | 185 padding: 0; |
| 186 background-color: transparent; |
| 187 min-width: 25px; |
125 border: initial; | 188 border: initial; |
126 color: inherit; | 189 color: inherit; |
127 margin: initial; | |
128 min-width: 0; | |
129 } | 190 } |
130 | 191 |
131 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | 192 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { |
132 background-color: initial; | 193 -webkit-appearance: media-volume-slider; |
| 194 display: -webkit-flex; |
| 195 /* The 1.9 value was empirically chosen to match old-flexbox behaviour |
| 196 * and be aesthetically pleasing. |
| 197 */ |
| 198 -webkit-flex: 1 1.9 auto; |
| 199 height: 8px; |
| 200 max-width: 70px; |
| 201 margin: 0 15px 0 0; |
| 202 padding: 0; |
| 203 background-color: transparent; |
| 204 min-width: 15px; |
133 border: initial; | 205 border: initial; |
134 color: inherit; | 206 color: inherit; |
135 margin: initial; | 207 } |
| 208 |
| 209 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. |
| 210 https://code.google.com/p/chromium/issues/detail?id=112508 |
| 211 https://bugs.webkit.org/show_bug.cgi?id=62218 |
| 212 */ |
| 213 input[type="range"]::-webkit-media-slider-container { |
| 214 display: -webkit-flex; |
| 215 -webkit-align-items: center; |
| 216 -webkit-flex-direction: row; /* This property is updated by C++ code. */ |
| 217 box-sizing: border-box; |
| 218 height: 100%; |
| 219 width: 100%; |
| 220 border: 1px solid rgba(230, 230, 230, 0.35); |
| 221 border-radius: 4px; |
| 222 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ |
| 223 } |
| 224 |
| 225 /* The negative right margin causes the track to overflow its container. */ |
| 226 input[type="range"]::-webkit-media-slider-container > div { |
| 227 margin-right: -14px; |
| 228 } |
| 229 |
| 230 input[type="range"]::-webkit-media-slider-thumb { |
| 231 margin-left: -7px; |
| 232 margin-right: -7px; |
136 } | 233 } |
137 | 234 |
138 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se
ek-back-button { | 235 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se
ek-back-button { |
139 -webkit-appearance: media-seek-back-button; | 236 -webkit-appearance: media-seek-back-button; |
140 display: -webkit-flex; | 237 display: -webkit-flex; |
141 width: 16px; | 238 width: 16px; |
142 height: 16px; | 239 height: 16px; |
143 background-color: initial; | 240 background-color: initial; |
144 border: initial; | 241 border: initial; |
145 color: inherit; | 242 color: inherit; |
146 } | 243 } |
147 | 244 |
148 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls
-seek-forward-button { | 245 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls
-seek-forward-button { |
149 -webkit-appearance: media-seek-forward-button; | 246 -webkit-appearance: media-seek-forward-button; |
150 display: -webkit-flex; | 247 display: -webkit-flex; |
151 width: 16px; | 248 width: 16px; |
152 height: 16px; | 249 height: 16px; |
153 background-color: initial; | 250 background-color: initial; |
154 border: initial; | 251 border: initial; |
155 color: inherit; | 252 color: inherit; |
156 } | 253 } |
157 | 254 |
158 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | 255 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { |
159 -webkit-appearance: media-enter-fullscreen-button; | 256 -webkit-appearance: media-enter-fullscreen-button; |
160 display: -webkit-flex; | 257 display: -webkit-flex; |
161 width: 16px; | 258 -webkit-flex: none; |
162 height: 16px; | 259 border: none; |
| 260 box-sizing: border-box; |
| 261 width: 30px; |
| 262 height: 30px; |
| 263 line-height: 30px; |
| 264 margin-left: -5px; |
| 265 margin-right: 9px; |
| 266 padding: 0; |
163 background-color: initial; | 267 background-color: initial; |
164 border: initial; | |
165 color: inherit; | 268 color: inherit; |
166 } | 269 } |
167 | 270 |
168 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin
d-button { | 271 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin
d-button { |
169 display: none; | 272 display: none; |
170 background-color: initial; | 273 background-color: initial; |
171 border: initial; | 274 border: initial; |
172 color: inherit; | 275 color: inherit; |
173 } | 276 } |
174 | 277 |
175 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
ntrols-return-to-realtime-button { | 278 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
ntrols-return-to-realtime-button { |
176 display: none; | 279 display: none; |
177 background-color: initial; | 280 background-color: initial; |
178 border: initial; | 281 border: initial; |
179 color: inherit; | 282 color: inherit; |
180 } | 283 } |
181 | 284 |
182 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { | 285 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { |
183 -webkit-appearance: media-toggle-closed-captions-button; | 286 -webkit-appearance: media-toggle-closed-captions-button; |
184 display: -webkit-flex; | 287 display: -webkit-flex; |
185 width: 16px; | 288 -webkit-flex: none; |
186 height: 16px; | 289 border: none; |
| 290 box-sizing: border-box; |
| 291 width: 30px; |
| 292 height: 30px; |
| 293 line-height: 30px; |
| 294 margin-left: -5px; |
| 295 margin-right: 9px; |
| 296 padding: 0; |
187 background-color: initial; | 297 background-color: initial; |
188 border: initial; | |
189 color: inherit; | 298 color: inherit; |
190 } | 299 } |
191 | 300 |
192 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-co
ntrols-volume-slider-mute-button { | 301 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-co
ntrols-volume-slider-mute-button { |
193 -webkit-appearance: media-volume-slider-mute-button; | 302 -webkit-appearance: media-volume-slider-mute-button; |
194 display: none; | 303 display: none; |
195 background-color: initial; | 304 background-color: initial; |
196 border: initial; | 305 border: initial; |
197 color: inherit; | 306 color: inherit; |
198 } | 307 } |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
278 font-weight: bold; | 387 font-weight: bold; |
279 } | 388 } |
280 | 389 |
281 video::-webkit-media-text-track-container u { | 390 video::-webkit-media-text-track-container u { |
282 text-decoration: underline; | 391 text-decoration: underline; |
283 } | 392 } |
284 | 393 |
285 video::-webkit-media-text-track-container i { | 394 video::-webkit-media-text-track-container i { |
286 font-style: italic; | 395 font-style: italic; |
287 } | 396 } |
OLD | NEW |