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

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

Issue 9958101: [WebUI] Fix rest of CSS style nits in misc. dirs so I can turn on CSS checker. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: estade review Created 8 years, 8 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 /* 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
3 * 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
4 * found in the LICENSE file. 3 * found in the LICENSE file. */
5 */
6 4
7 body { 5 body {
8 padding: 0;
9 -webkit-user-select: none; 6 -webkit-user-select: none;
10 overflow: hidden; 7 overflow: hidden;
8 padding: 0;
11 } 9 }
12 10
13 .audio-player { 11 .audio-player {
12 background-color: #1d1d1d;
13 bottom: 0;
14 color: white;
15 cursor: default;
16 font-family: Open Sans, Droid Sans Fallback, sans-serif;
17 font-size: 10pt;
18 left: 0;
14 position: absolute; 19 position: absolute;
15 left: 0;
16 right: 0; 20 right: 0;
17 top: 0; 21 top: 0;
18 bottom: 0;
19
20 color: white;
21 background-color: #1d1d1d;
22
23 font-family: Open Sans,Droid Sans Fallback,sans-serif;
24 font-size: 10pt;
25
26 cursor: default;
27 } 22 }
28 23
29 /* Title buttons. 24 /* Title buttons.
30 In the collapsed/single-track mode they overlap the first track. */ 25 * In the collapsed/single-track mode they overlap the first track. */
31 26
32 .title-button { 27 .title-button {
28 background-position: center center;
29 background-repeat: no-repeat;
30 cursor: pointer;
31 height: 29px;
32 opacity: 0.4;
33 position: absolute; 33 position: absolute;
34 top: 0;
34 width: 29px; 35 width: 29px;
35 height: 29px;
36 top: 0;
37 opacity: 0.4;
38 cursor: pointer;
39 background-repeat: no-repeat;
40 background-position: center center;
41 z-index: 2; 36 z-index: 2;
42 } 37 }
43 38
44 .title-button:hover { 39 .title-button:hover {
45 background-color: #3c7eff !important; 40 background-color: rgb(60, 126, 255) !important;
46 opacity: 1; 41 opacity: 1;
47 } 42 }
48 43
49 .audio-player:not(.collapsed):not(.single-track) > .title-button { 44 .audio-player:not(.collapsed):not(.single-track) > .title-button {
50 background-color: #1f1f1f; 45 background-color: #1f1f1f;
51 } 46 }
52 47
53 /* TODO(kaznacheev): Remove display: none when the audio player is title-less */ 48 /* TODO(kaznacheev): Remove display: none when the audio player is title-less */
54 .title-button.close { 49 .title-button.close {
50 background-image: url(../images/media/media_close.png);
55 display: none; 51 display: none;
56 right: 0; 52 right: 0;
57 background-image: url(../images/media/media_close.png);
58 } 53 }
59 54
60 /* TODO(kaznacheev): Set right: 29px when the audio player is title-less */ 55 /* TODO(kaznacheev): Set right: 29px when the audio player is title-less */
61 .title-button.collapse { 56 .title-button.collapse {
57 background-image: url(../images/media/media_collapse.png);
62 right: 0; 58 right: 0;
63 background-image: url(../images/media/media_collapse.png);
64 } 59 }
65 60
66 .collapsed .title-button.collapse { 61 .collapsed .title-button.collapse {
67 background-image: url(../images/media/media_expand.png); 62 background-image: url(../images/media/media_expand.png);
68 } 63 }
69 64
70 .single-track .title-button.collapse { 65 .single-track .title-button.collapse {
71 display: none; 66 display: none;
72 } 67 }
73 68
74 /* Common properties for track containers. */ 69 /* Common properties for track containers. */
75 .audio-player > .track-list, 70 .audio-player > .track-list,
76 .audio-player > .track-stack { 71 .audio-player > .track-stack {
72 bottom: 35px; /* Room for the controls bar. */
73 left: 0;
77 position: absolute; 74 position: absolute;
78 left: 0;
79 right: 0; 75 right: 0;
80 bottom: 35px; /* Room for the controls bar. */
81 } 76 }
82 77
83 /* Scrollable list of tracks. 78 /* Scrollable list of tracks.
84 Displayed in expanded mode if there is more than one track. */ 79 * Displayed in expanded mode if there is more than one track. */
85 .audio-player > .track-list { 80 .audio-player > .track-list {
81 -webkit-box-align: center;
82 -webkit-box-orient: vertical;
83 -webkit-box-pack: start;
86 border-top: 1px solid rgba(255, 255, 255, 0.1); 84 border-top: 1px solid rgba(255, 255, 255, 0.1);
87
88 display: -webkit-box; 85 display: -webkit-box;
89 -webkit-box-orient: vertical;
90 -webkit-box-align: center;
91 -webkit-box-pack: start;
92
93 overflow-x: hidden; 86 overflow-x: hidden;
94 overflow-y: auto; 87 overflow-y: auto;
95 } 88 }
96 89
97 /* A single track container. 90 /* A single track container.
98 Displayed in the compact mode or when there is only one track. */ 91 * Displayed in the compact mode or when there is only one track. */
99 .audio-player > .track-stack { 92 .audio-player > .track-stack {
100 height: 58px; 93 height: 58px;
101 } 94 }
102 95
103 .audio-player.collapsed > .track-list, 96 .audio-player.collapsed > .track-list,
104 .audio-player.single_track > .track-list, 97 .audio-player.single_track > .track-list,
105 .audio-player:not(.collapsed):not(.single-track) > .track-stack { 98 .audio-player:not(.collapsed):not(.single-track) > .track-stack {
106 opacity: 0; 99 opacity: 0;
107 pointer-events: none; 100 pointer-events: none;
108 } 101 }
109 102
110 /* Track item. */ 103 /* Track item. */
111 .track { 104 .track {
105 -webkit-box-align: center;
106 -webkit-box-orient: horizontal;
107 -webkit-box-pack: start;
108 display: -webkit-box;
109 height: 58px;
112 width: 100%; 110 width: 100%;
113 height: 58px;
114
115 display: -webkit-box;
116 -webkit-box-orient: horizontal;
117 -webkit-box-align: center;
118 -webkit-box-pack: start;
119 } 111 }
120 112
121 /* In the expanded mode the selected track is highlighted. */ 113 /* In the expanded mode the selected track is highlighted. */
122 .track-list .track.selected { 114 .track-list .track.selected {
123 background-color: #2d2d2d; 115 background-color: #2d2d2d;
124 } 116 }
125 117
126 .track-list .track:hover { 118 .track-list .track:hover {
127 background-color: #272727 !important; 119 background-color: #272727 !important;
128 } 120 }
129 121
130 .track-list .track:not(.selected) .data { 122 .track-list .track:not(.selected) .data {
131 opacity: 0.7; 123 opacity: 0.7;
132 } 124 }
133 125
134 /* In the compact mode all tracks are in the same position, only the selected 126 /* In the compact mode all tracks are in the same position, only the selected
135 is visible.*/ 127 is visible.*/
136 .track-stack > .track { 128 .track-stack > .track {
137 position: absolute; 129 position: absolute;
138 top: 0; 130 top: 0;
139 } 131 }
140 132
141 .track-stack > .track.selected { 133 .track-stack > .track.selected {
142 z-index: 1; 134 z-index: 1;
143 } 135 }
144 136
145 /* Opacity transition is controlled differently for the text and the artwork. 137 /* Opacity transition is controlled differently for the text and the artwork.
146 Text transition looks better if fade-in and fade-out go in parallel. 138 * Text transition looks better if fade-in and fade-out go in parallel.
147 For the artwork we start fading out the old icon only after the new one 139 * For the artwork we start fading out the old icon only after the new one
148 is completely opaque (otherwise when transitioning between identical icons 140 * is completely opaque (otherwise when transitioning between identical icons
149 we see some fading because the background transpires). */ 141 * we see some fading because the background transpires). */
150 .track-stack > .track:not(.selected) .data, 142 .track-stack > .track:not(.selected) .data,
151 .track-stack > .track:not(.visible) .art { 143 .track-stack > .track:not(.visible) .art {
152 -webkit-transition: opacity 220ms ease-out; 144 -webkit-transition: opacity 220ms ease-out;
153 opacity: 0; 145 opacity: 0;
154 } 146 }
155 147
156 /* Track data. */ 148 /* Track data. */
157 149
158 .track .art { 150 .track .art {
151 -webkit-box-sizing: border-box;
152 height: 48px;
153 margin: 4px 0 6px 4px;
159 position: relative; 154 position: relative;
160 width: 48px; 155 width: 48px;
161 height: 48px;
162 margin: 4px 0px 6px 4px;
163 -webkit-box-sizing: border-box;
164 } 156 }
165 157
166 .track .art.blank { 158 .track .art.blank {
159 background-color: #111;
167 border: 1px solid #333; 160 border: 1px solid #333;
168 background-color: #111;
169 } 161 }
170 162
171 .track .art img { 163 .track .art img {
164 height: 100%;
172 width: 100%; 165 width: 100%;
173 height: 100%;
174 } 166 }
175 167
176 .track .art.blank img { 168 .track .art.blank img {
177 display: none; 169 display: none;
178 } 170 }
179 171
180 .track .art.error { 172 .track .art.error {
181 background-image: url(../images/media/error.png); 173 background-image: url(../images/media/error.png);
174 background-position: center center;
182 background-repeat: no-repeat; 175 background-repeat: no-repeat;
183 background-position: center center;
184 } 176 }
185 177
186 .noart .track .art { 178 .noart .track .art {
187 display: none; 179 display: none;
188 } 180 }
189 181
190 .track .data { 182 .track .data {
191 margin-right: 4px; 183 -webkit-box-flex: 1;
192 margin-left: 8px;
193
194 display: -webkit-box;
195 -webkit-box-orient: vertical; 184 -webkit-box-orient: vertical;
196 -webkit-box-pack: center; 185 -webkit-box-pack: center;
197 -webkit-box-flex: 1; 186 display: -webkit-box;
187 margin-left: 8px;
188 margin-right: 4px;
198 } 189 }
199 190
200 .track .data .data-title, 191 .track .data .data-title,
201 .track .data .data-artist { 192 .track .data .data-artist {
202 white-space: nowrap;
203 overflow: hidden; 193 overflow: hidden;
204 text-overflow: ellipsis; 194 text-overflow: ellipsis;
195 white-space: nowrap;
205 } 196 }
206 197
207 .track .data .data-title { 198 .track .data .data-title {
208 font-weight: bold; 199 font-weight: bold;
209 } 200 }
210 201
211 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */ 202 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */
212 .single-track .data-title { 203 .single-track .data-title {
213 padding-right: 0; 204 padding-right: 0;
214 } 205 }
215 206
216 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */ 207 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */
217 .collapsed:not(.single-track) .data-title { 208 .collapsed:not(.single-track) .data-title {
218 padding-right: 20px; 209 padding-right: 20px;
219 } 210 }
220 211
221 /* Controls bar. */ 212 /* Controls bar. */
222 213
223 .audio-controls { 214 .audio-controls {
215 -webkit-box-align: center;
216 -webkit-box-orient: horizontal;
217 -webkit-box-pack: center;
218 background-color: #2D2D2D;
219 border-top: 1px solid rgba(255, 255, 255, 0.1);
220 bottom: 0;
221 display: -webkit-box;
222 height: 30px;
223 left: 0;
224 padding: 0 0 4px 13px;
224 position: absolute; 225 position: absolute;
225
226 border-top: 1px solid rgba(255, 255, 255, 0.1);
227
228 left: 0;
229 right: 0; 226 right: 0;
230 bottom: 0;
231 height: 30px;
232 padding: 0 0 4px 13px;
233
234 background-color: #2D2D2D;
235
236 display: -webkit-box;
237 -webkit-box-orient: horizontal;
238 -webkit-box-align: center;
239 -webkit-box-pack: center;
240 } 227 }
241 228
242 .audio-controls .media-button { 229 .audio-controls .media-button {
243 width: 29px;
244 height: 29px; 230 height: 29px;
245 margin-top: 1px; 231 margin-top: 1px;
232 width: 29px;
246 } 233 }
247 234
248 .audio-controls .media-button.play { 235 .audio-controls .media-button.play {
249 margin-left: -10px; 236 margin-left: -10px;
250 margin-right: -8px; 237 margin-right: -8px;
251 } 238 }
252 239
253 .audio-controls .media-button.play > .state0.normal{ 240 .audio-controls .media-button.play > .state0.normal {
254 background-image: url(../images/media/media_play_audio.png); 241 background-image: url(../images/media/media_play_audio.png);
255 } 242 }
256 243
257 .audio-controls .media-button.play > .state0.hover { 244 .audio-controls .media-button.play > .state0.hover {
258 background-image: url(../images/media/media_play_audio_hover.png); 245 background-image: url(../images/media/media_play_audio_hover.png);
259 } 246 }
260 247
261 .audio-controls .media-button.play > .state0.active { 248 .audio-controls .media-button.play > .state0.active {
262 background-image: url(../images/media/media_play_audio_down.png); 249 background-image: url(../images/media/media_play_audio_down.png);
263 } 250 }
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
316 } 303 }
317 304
318 .single-track .media-button.next, 305 .single-track .media-button.next,
319 .single-track .media-button.previous { 306 .single-track .media-button.previous {
320 display: none; 307 display: none;
321 } 308 }
322 309
323 /* Customized scrollbar for the playlist. */ 310 /* Customized scrollbar for the playlist. */
324 311
325 ::-webkit-scrollbar { 312 ::-webkit-scrollbar {
313 height: 16px;
326 width: 16px; 314 width: 16px;
327 height: 16px;
328 } 315 }
329 316
330 ::-webkit-scrollbar-button { 317 ::-webkit-scrollbar-button {
331 height: 0px; 318 height: 0;
332 width: 0px; 319 width: 0;
333 } 320 }
334 321
335 ::-webkit-scrollbar-thumb { 322 ::-webkit-scrollbar-thumb {
323 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
324 inset 0 -1px 0 rgba(0, 0, 0, 0.07);
325 background-clip: padding-box;
326 background-color: rgba(255, 255, 255, 0.15);
336 min-height: 28px; 327 min-height: 28px;
337 padding-top: 100px; 328 padding-top: 100px;
338 background-clip: padding-box;
339 background-color: rgba(255,255,255,0.15);
340 -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10),
341 inset 0px -1px 0px rgba(0,0,0,0.07);
342 } 329 }
343 330
344 ::-webkit-scrollbar-thumb:hover { 331 ::-webkit-scrollbar-thumb:hover {
332 -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
345 background-color: rgba(255,255,255,0.20); 333 background-color: rgba(255,255,255,0.20);
346 -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
347 } 334 }
348 335
349 ::-webkit-scrollbar-thumb:active { 336 ::-webkit-scrollbar-thumb:active {
350 background-color: rgba(255,255,255,0.25); 337 -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
351 -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); 338 background-color: rgba(255, 255, 255, 0.25);
352 } 339 }
353 340
354 ::-webkit-scrollbar-thumb:vertical { 341 ::-webkit-scrollbar-thumb:vertical {
355 border-top: 0px solid transparent; 342 border-bottom: 0 solid transparent;
356 border-bottom: 0px solid transparent;
357 border-right: 0px solid transparent;
358 border-left: 5px solid transparent; 343 border-left: 5px solid transparent;
344 border-right: 0 solid transparent;
345 border-top: 0 solid transparent;
359 } 346 }
360 347
361 ::-webkit-scrollbar-track:hover { 348 ::-webkit-scrollbar-track:hover {
362 background-color: rgba(0,0,0,0.05); 349 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
363 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.10); 350 background-color: rgba(0, 0, 0, 0.05);
364 } 351 }
365 352
366 ::-webkit-scrollbar-track:active { 353 ::-webkit-scrollbar-track:active {
367 background-color: rgba(0,0,0,0.05); 354 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
368 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.14), 355 inset -1px -1px 0 rgba(0, 0, 0, 0.07);
369 inset -1px -1px 0px rgba(0,0,0,0.07); 356 background-color: rgba(0, 0, 0, 0.05);
370 } 357 }
371 358
372 ::-webkit-scrollbar-track:vertical { 359 ::-webkit-scrollbar-track:vertical {
373 border-right: 0px solid transparent;
374 border-left: 5px solid transparent;
375 background-clip: padding-box; 360 background-clip: padding-box;
376 background-color: transparent; 361 background-color: transparent;
362 border-left: 5px solid transparent;
363 border-right: 0 solid transparent;
377 } 364 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698