Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(846)

Side by Side Diff: chrome/browser/resources/file_manager/css/media_controls.css

Issue 12676002: Added the reply/loop icon to the video player. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Addressed comments. Created 7 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be 2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */ 3 * found in the LICENSE file. */
4 4
5 .media-button { 5 .media-button {
6 height: 28px; 6 height: 28px;
7 position: relative; 7 position: relative;
8 width: 26px; 8 width: 26px;
9 } 9 }
10 10
11 .media-button > div { 11 .media-button > div {
12 -webkit-transition: opacity 100ms linear; 12 -webkit-transition: opacity 100ms linear;
13 height: 100%; 13 height: 100%;
14 opacity: 0; 14 opacity: 0;
15 pointer-events: none; 15 pointer-events: none;
16 position: absolute; 16 position: absolute;
17 width: 100%; 17 width: 100%;
18 } 18 }
19 19
20 .media-button[state='0']:not(.disabled):not(:hover):not(:active) > .state0.norma l, 20 .media-button[state='default']:not(.disabled):not(:hover):not(:active) >
21 .media-button[state='0']:not(.disabled):hover > .state0.hover, 21 .default.normal,
22 .media-button[state='0']:not(.disabled):active > .state0.active, 22 .media-button[state='default']:not(.disabled):hover > .default.hover,
23 .media-button[state='1']:not(.disabled):not(:hover):not(:active) > .state1.norma l, 23 .media-button[state='default']:not(.disabled):active > .default.active,
24 .media-button[state='1']:not(.disabled):hover > .state1.hover, 24 .media-button[state='playing']:not(.disabled):not(:hover):not(:active) >
25 .media-button[state='1']:not(.disabled):active > .state1.active, 25 .playing.normal,
26 .media-button[state='playing']:not(.disabled):hover > .playing.hover,
27 .media-button[state='playing']:not(.disabled):active > .playing.active,
28 .media-button[state='ended']:not(.disabled):not(:hover):not(:active) >
29 .ended.normal,
30 .media-button[state='ended']:not(.disabled):hover > .ended.hover,
31 .media-button[state='ended']:not(.disabled):active > .ended.active,
26 .media-button.disabled > .disabled { 32 .media-button.disabled > .disabled {
27 opacity: 1; 33 opacity: 1;
28 } 34 }
29 35
30 /* Custom sliders for progress and volume. */ 36 /* Custom sliders for progress and volume. */
31 37
32 /* Customize the standard input[type='range']. */ 38 /* Customize the standard input[type='range']. */
33 .custom-slider > input[type='range'] { 39 .custom-slider > input[type='range'] {
34 -webkit-appearance: none !important; /* Hide the default thumb icon. */ 40 -webkit-appearance: none !important; /* Hide the default thumb icon. */
35 background: transparent; /* Hide the standard slider bar */ 41 background: transparent; /* Hide the standard slider bar */
(...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after
177 183
178 /* Media controls in order of appearance. */ 184 /* Media controls in order of appearance. */
179 185
180 /* Play/pause button. */ 186 /* Play/pause button. */
181 187
182 .media-button.play { 188 .media-button.play {
183 margin-left: -7px; 189 margin-left: -7px;
184 margin-right: -7px; 190 margin-right: -7px;
185 } 191 }
186 192
187 .media-button.play > .state0.normal { 193 .media-button.play > .default.normal {
188 background-image: -webkit-image-set( 194 background-image: -webkit-image-set(
189 url('../images/media/media_play.png') 1x, 195 url('../images/media/media_play.png') 1x,
190 url('../images/media/2x/media_play.png') 2x); 196 url('../images/media/2x/media_play.png') 2x);
191 } 197 }
192 198
193 .media-button.play > .state0.hover { 199 .media-button.play > .default.hover {
194 background-image: -webkit-image-set( 200 background-image: -webkit-image-set(
195 url('../images/media/media_play_hover.png') 1x, 201 url('../images/media/media_play_hover.png') 1x,
196 url('../images/media/2x/media_play_hover.png') 2x); 202 url('../images/media/2x/media_play_hover.png') 2x);
197 } 203 }
198 204
199 .media-button.play > .state0.active { 205 .media-button.play > .default.active {
200 background-image: -webkit-image-set( 206 background-image: -webkit-image-set(
201 url('../images/media/media_play_down.png') 1x, 207 url('../images/media/media_play_down.png') 1x,
202 url('../images/media/2x/media_play_down.png') 2x); 208 url('../images/media/2x/media_play_down.png') 2x);
203 } 209 }
204 210
205 .media-button.play > .state1.normal { 211 .media-button.play > .playing.normal {
206 background-image: -webkit-image-set( 212 background-image: -webkit-image-set(
207 url('../images/media/media_pause.png') 1x, 213 url('../images/media/media_pause.png') 1x,
208 url('../images/media/2x/media_pause.png') 2x); 214 url('../images/media/2x/media_pause.png') 2x);
209 } 215 }
210 216
211 .media-button.play > .state1.hover { 217 .media-button.play > .playing.hover {
212 background-image: -webkit-image-set( 218 background-image: -webkit-image-set(
213 url('../images/media/media_pause_hover.png') 1x, 219 url('../images/media/media_pause_hover.png') 1x,
214 url('../images/media/2x/media_pause_hover.png') 2x); 220 url('../images/media/2x/media_pause_hover.png') 2x);
215 } 221 }
216 222
217 .media-button.play > .state1.active { 223 .media-button.play > .playing.active {
218 background-image: -webkit-image-set( 224 background-image: -webkit-image-set(
219 url('../images/media/media_pause_down.png') 1x, 225 url('../images/media/media_pause_down.png') 1x,
220 url('../images/media/2x/media_pause_down.png') 2x); 226 url('../images/media/2x/media_pause_down.png') 2x);
221 } 227 }
222 228
229 .media-button.play > .ended.normal {
230 background-image: -webkit-image-set(
231 url('../images/media/media_loop.png') 1x,
232 url('../images/media/2x/media_loop.png') 2x);
233 }
234
235 .media-button.play > .ended.hover {
236 background-image: -webkit-image-set(
237 url('../images/media/media_loop_hover.png') 1x,
238 url('../images/media/2x/media_loop_hover.png') 2x);
239 }
240
241 .media-button.play > .ended.active {
242 background-image: -webkit-image-set(
243 url('../images/media/media_loop_down.png') 1x,
244 url('../images/media/2x/media_loop_down.png') 2x);
245 }
246
223 .media-button.play > .disabled { 247 .media-button.play > .disabled {
224 background-image: -webkit-image-set( 248 background-image: -webkit-image-set(
225 url('../images/media/media_play_disabled.png') 1x, 249 url('../images/media/media_play_disabled.png') 1x,
226 url('../images/media/2x/media_play_disabled.png') 2x); 250 url('../images/media/2x/media_play_disabled.png') 2x);
227 } 251 }
228 252
229 /* Time controls: a slider and a text time display. */ 253 /* Time controls: a slider and a text time display. */
230 254
231 .time-controls { 255 .time-controls {
232 -webkit-box-align: center; 256 -webkit-box-align: center;
(...skipping 297 matching lines...) Expand 10 before | Expand all | Expand 10 after
530 background-image: -webkit-image-set( 554 background-image: -webkit-image-set(
531 url('../images/media/media_play.png') 1x, 555 url('../images/media/media_play.png') 1x,
532 url('../images/media/2x/media_play.png') 2x); 556 url('../images/media/2x/media_play.png') 2x);
533 } 557 }
534 558
535 .playback-state-icon[state='pause'] { 559 .playback-state-icon[state='pause'] {
536 background-image: -webkit-image-set( 560 background-image: -webkit-image-set(
537 url('../images/media/media_pause.png') 1x, 561 url('../images/media/media_pause.png') 1x,
538 url('../images/media/2x/media_pause.png') 2x); 562 url('../images/media/2x/media_pause.png') 2x);
539 } 563 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698