OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2012 Google Inc. | 2 * Copyright (C) 2012 Google Inc. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 5 * modification, are permitted provided that the following conditions |
6 * are met: | 6 * are met: |
7 * 1. Redistributions of source code must retain the above copyright | 7 * 1. Redistributions of source code must retain the above copyright |
8 * notice, this list of conditions and the following disclaimer. | 8 * notice, this list of conditions and the following disclaimer. |
9 * 2. Redistributions in binary form must reproduce the above copyright | 9 * 2. Redistributions in binary form must reproduce the above copyright |
10 * notice, this list of conditions and the following disclaimer in the | 10 * notice, this list of conditions and the following disclaimer in the |
11 * documentation and/or other materials provided with the distribution. | 11 * documentation and/or other materials provided with the distribution. |
12 * | 12 * |
13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | 13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | 15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | 17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | 18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | 19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
21 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 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. | 22 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
23 */ | 23 */ |
24 | 24 |
25 /* Media controls for Chromium on Android*/ | 25 /* Media controls for Chromium on Android */ |
26 | |
27 body:-webkit-full-page-media { | |
28 background-color: rgb(0, 0, 0); | |
29 } | |
30 | 26 |
31 audio { | 27 audio { |
32 width: 300px; | |
33 height: 35px; | 28 height: 35px; |
34 } | 29 } |
35 | 30 |
36 audio:-webkit-full-page-media, video:-webkit-full-page-media { | 31 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { |
37 max-height: 100%; | |
38 max-width: 100%; | |
39 } | |
40 | |
41 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
42 display: -webkit-flex; | |
43 -webkit-flex-direction: row; | |
44 -webkit-align-items: center; | |
45 -webkit-justify-content: center; | |
46 bottom: auto; | |
47 height: 35px; | 32 height: 35px; |
48 background-color: rgba(20, 20, 20, 0.8); | 33 -webkit-flex-shrink: initial; |
49 } | |
50 | |
51 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
52 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
53 bottom: 0px; | |
54 } | |
55 | |
56 ::-webkit-media-controls { | |
57 display: -webkit-flex; | |
58 -webkit-flex-direction: column; | |
59 -webkit-justify-content: flex-end; | |
60 -webkit-align-items: center; | |
61 } | |
62 | |
63 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { | |
64 width: 100%; | |
65 max-width: 800px; | |
66 height: 35px; | |
67 bottom: 0; | |
68 text-indent: 0; | |
69 padding: 0; | |
70 box-sizing: border-box; | |
71 } | 34 } |
72 | 35 |
73 video::-webkit-media-controls-enclosure { | 36 video::-webkit-media-controls-enclosure { |
74 padding: 0px 5px 5px 5px; | 37 -webkit-flex-shrink: initial; |
75 height: 35px; | |
76 } | 38 } |
77 | 39 |
78 audio::-webkit-media-controls-overlay-enclosure { | 40 audio::-webkit-media-controls-overlay-enclosure { |
79 display: none; | 41 display: none; |
80 } | 42 } |
81 | 43 |
82 video::-webkit-media-controls-overlay-enclosure { | 44 video::-webkit-media-controls-overlay-enclosure { |
83 display: -webkit-flex; | 45 display: -webkit-flex; |
84 position: relative; | 46 position: relative; |
85 -webkit-flex-direction: column; | 47 -webkit-flex-direction: column; |
86 -webkit-justify-content: flex-end; | 48 -webkit-justify-content: flex-end; |
87 -webkit-align-items: center; | 49 -webkit-align-items: center; |
88 -webkit-flex: 1 1; | 50 -webkit-flex: 1 1; |
89 width: 100%; | 51 width: 100%; |
90 max-width: 800px; | 52 max-width: 800px; |
91 text-indent: 0; | 53 text-indent: 0; |
92 box-sizing: border-box; | 54 box-sizing: border-box; |
93 overflow: hidden; | 55 overflow: hidden; |
94 } | 56 } |
95 | 57 |
58 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
59 -webkit-justify-content: center; | |
60 height: 35px; | |
61 border-radius: initial; | |
62 } | |
63 | |
96 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton { | 64 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton { |
97 display: none; | 65 display: none; |
98 } | 66 } |
99 | 67 |
100 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton { | |
101 -webkit-appearance: media-play-button; | |
102 display: inline; | |
103 border: none; | |
104 box-sizing: border-box; | |
105 width: 35px; | |
106 height: 35px; | |
107 line-height: 35px; | |
108 margin-left: 9px; | |
109 margin-right: 9px; | |
110 padding: 0; | |
111 } | |
112 | |
113 video::-webkit-media-controls-overlay-play-button { | 68 video::-webkit-media-controls-overlay-play-button { |
114 -webkit-appearance: media-overlay-play-button; | 69 -webkit-appearance: media-overlay-play-button; |
115 display: -webkit-flex; | 70 display: -webkit-flex; |
116 position: absolute; | 71 position: absolute; |
117 top: 50%; | 72 top: 50%; |
118 left: 50%; | 73 left: 50%; |
119 margin-left: -40px; | 74 margin-left: -40px; |
120 margin-top: -40px; | 75 margin-top: -40px; |
121 border: none; | 76 border: none; |
122 box-sizing: border-box; | 77 box-sizing: border-box; |
123 background-color: transparent; | 78 background-color: transparent; |
124 width: 80px; | 79 width: 80px; |
125 height: 80px; | 80 height: 80px; |
126 padding: 0; | 81 padding: 0; |
127 } | 82 } |
128 | 83 |
84 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton { | |
85 display: inline; | |
86 -webkit-flex: initial; | |
87 width: 35px; | |
88 height: 35px; | |
89 line-height: 35px; | |
90 } | |
91 | |
129 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display, | 92 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display, |
130 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display { | 93 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display { |
131 -webkit-appearance: media-current-time-display; | 94 -webkit-flex: initial; |
132 -webkit-user-select: none; | |
133 display: block; | 95 display: block; |
134 border: none; | |
135 cursor: default; | |
136 | 96 |
137 height: 35px; | 97 height: 35px; |
138 margin: 0 9px 0 0; | |
139 padding: 0; | |
140 | 98 |
141 line-height: 35px; | 99 line-height: 35px; |
142 font-family: Arial, Helvetica, sans-serif; | |
143 font-size: 18px; | 100 font-size: 18px; |
144 font-weight: bold; | 101 font-style: initial; |
qinmin
2013/07/02 03:15:14
there are lots of initial value in the new css, wh
philipj_slow
2013/07/02 08:16:22
I think that all instances of *: initial can be re
| |
145 color: white; | |
146 | |
147 letter-spacing: normal; | |
148 word-spacing: normal; | |
149 text-transform: none; | |
150 text-indent: 0; | |
151 text-shadow: none; | |
152 text-decoration: none; | |
153 } | 102 } |
154 | 103 |
155 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | 104 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
156 -webkit-appearance: media-slider; | |
157 display: -webkit-flex; | |
158 -webkit-flex: 1 1; | 105 -webkit-flex: 1 1; |
acolwell GONE FROM CHROMIUM
2013/07/03 16:21:55
Isn't this equivalent to 1 1 auto? I think this ca
philipj_slow
2013/07/04 08:40:26
It's actually equivlant to 1 1 0, tested both with
| |
159 height: 8px; | |
160 margin: 0 15px 0 0; | |
161 padding: 0; | |
162 background-color: transparent; | |
163 min-width: 25px; | |
164 } | 106 } |
165 | 107 |
108 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider { | |
109 display: none; | |
110 } | |
166 | 111 |
167 video::-webkit-media-controls-fullscreen-button { | 112 video::-webkit-media-controls-fullscreen-button { |
168 -webkit-appearance: media-enter-fullscreen-button; | 113 -webkit-flex: initial; |
169 display: -webkit-flex; | |
170 border: none; | |
171 box-sizing: border-box; | |
172 width: 35px; | 114 width: 35px; |
173 height: 35px; | 115 height: 35px; |
174 line-height: 35px; | 116 line-height: 35px; |
175 margin-left: -5px; | |
176 margin-right: 9px; | |
177 padding: 0; | |
178 } | |
179 | |
180 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi a-controls-toggle-closed-captions-button { | |
181 -webkit-appearance: media-toggle-closed-captions-button; | |
182 display: -webkit-flex; | |
183 border: none; | |
184 box-sizing: border-box; | |
185 width: 35px; | |
186 height: 35px; | |
187 line-height: 35px; | |
188 margin-left: -5px; | |
189 margin-right: 9px; | |
190 padding: 0; | |
191 } | |
192 | |
193 input[type="range"]::-webkit-media-slider-container { | |
194 display: -webkit-flex; | |
195 -webkit-align-items: center; | |
196 -webkit-flex-direction: row; | |
197 box-sizing: border-box; | |
198 height: 100%; | |
199 width: 100%; | |
200 border: 1px solid rgba(230, 230, 230, 0.35); | |
201 border-radius: 4px; | |
202 background-color: transparent; | |
203 } | |
204 | |
205 /* The negative right margin causes the track to overflow its container. */ | |
206 input[type="range"]::-webkit-media-slider-container > div { | |
207 margin-right: -14px; | |
208 } | |
209 | |
210 input[type="range"]::-webkit-media-slider-thumb { | |
211 margin-left: -7px; | |
212 margin-right: -7px; | |
213 } | 117 } |
214 | 118 |
215 audio::-webkit-media-controls-fullscreen-button { | 119 audio::-webkit-media-controls-fullscreen-button { |
216 display: none; | 120 display: none; |
217 } | 121 } |
218 | 122 |
219 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider { | 123 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi a-controls-toggle-closed-captions-button { |
220 display: none; | 124 -webkit-flex: initial; |
125 width: 35px; | |
126 height: 35px; | |
127 line-height: 35px; | |
221 } | 128 } |
OLD | NEW |