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

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

Issue 9923005: [WebUI] Fix rest of CSS style nits so I can turn on CSS checker. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: serya 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 */ 4 */
6 5
7 body { 6 body {
8 margin: 0;
9 -webkit-user-select: none; 7 -webkit-user-select: none;
10 font-family: Open Sans,Droid Sans Fallback,sans-serif; 8 font-family: Open Sans,Droid Sans Fallback,sans-serif;
11 font-size: 84%; 9 font-size: 84%;
10 margin: 0;
12 } 11 }
13 12
14 .gallery { 13 .gallery {
15 background: black; 14 background: black;
15 bottom: 0;
16 left: 0;
17 overflow: hidden;
16 position: absolute; 18 position: absolute;
17 left: 0;
18 right: 0; 19 right: 0;
19 top: 0; 20 top: 0;
20 bottom: 0;
21 overflow: hidden;
22 } 21 }
23 22
24 /* Close button */ 23 /* Close button */
25 .gallery > .close { 24 .gallery > .close {
25 cursor: pointer;
26 position: absolute; 26 position: absolute;
27 right: 5px; 27 right: 5px;
28 top: 5px; 28 top: 5px;
29 cursor: pointer;
30 z-index: 200; 29 z-index: 200;
31 } 30 }
32 31
33 /* The close icon is in a nested div so that its opacity can be manipulated 32 /* The close icon is in a nested div so that its opacity can be manipulated
34 independently from its parent (which can be dimmed when the crop frame 33 independently from its parent (which can be dimmed when the crop frame
35 overlaps it) */ 34 overlaps it) */
36 .gallery > .close div { 35 .gallery > .close div {
36 background-image: url(../images/gallery/close_x.png);
37 background-position: center center;
38 background-repeat: no-repeat;
39 height: 20px;
37 opacity: 0; 40 opacity: 0;
38 width: 20px; 41 width: 20px;
39 height: 20px;
40 background-image: url(../images/gallery/close_x.png);
41 background-repeat: no-repeat;
42 background-position: center center;
43 } 42 }
44 43
45 .gallery[tools] > .close div { 44 .gallery[tools] > .close div {
46 opacity: 0.5; 45 opacity: 0.5;
47 } 46 }
48 47
49 .gallery[tools] > .close div:hover { 48 .gallery[tools] > .close div:hover {
49 background-color: rgba(81,81,81,1);
50 opacity: 0.7; 50 opacity: 0.7;
51 background-color: rgba(81,81,81,1);
52 } 51 }
53 52
54 /* Image container and canvas elements */ 53 /* Image container and canvas elements */
55 54
56 .gallery > .image-container { 55 .gallery > .image-container {
57 position: absolute;
58 height: 100%;
59 width: 100%;
60 background-color: rgba(0,0,0,1); 56 background-color: rgba(0,0,0,1);
61 cursor: none; /* Only visible when the toolbar is active */ 57 cursor: none; /* Only visible when the toolbar is active */
58 height: 100%;
59 position: absolute;
60 width: 100%;
62 } 61 }
63 62
64 .gallery[tools][locked] *, 63 .gallery[tools][locked] *,
65 .gallery[tools][locked] .image-container[cursor] { 64 .gallery[tools][locked] .image-container[cursor] {
66 cursor: wait; 65 cursor: wait;
67 } 66 }
68 67
69 .gallery[tools] .image-container[cursor='default'] { 68 .gallery[tools] .image-container[cursor='default'] {
70 cursor: default; 69 cursor: default;
71 } 70 }
(...skipping 20 matching lines...) Expand all
92 .gallery[tools] .image-container[cursor='se-resize'] { 91 .gallery[tools] .image-container[cursor='se-resize'] {
93 cursor: url(../images/gallery/cursor_nwse.png) 18 18; 92 cursor: url(../images/gallery/cursor_nwse.png) 18 18;
94 } 93 }
95 94
96 .gallery[tools] .image-container[cursor='ne-resize'], 95 .gallery[tools] .image-container[cursor='ne-resize'],
97 .gallery[tools] .image-container[cursor='sw-resize'] { 96 .gallery[tools] .image-container[cursor='sw-resize'] {
98 cursor: url(../images/gallery/cursor_swne.png) 18 18; 97 cursor: url(../images/gallery/cursor_swne.png) 18 18;
99 } 98 }
100 99
101 .gallery > .image-container > .image { 100 .gallery > .image-container > .image {
102 position: absolute; 101 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/
103 pointer-events: none; 102 -webkit-transition-duration: 180ms;
104
105 -webkit-transition-property: -webkit-transform, opacity; 103 -webkit-transition-property: -webkit-transform, opacity;
106 -webkit-transition-timing-function: ease-in-out; 104 -webkit-transition-timing-function: ease-in-out;
107 105 pointer-events: none;
108 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ 106 position: absolute;
109 -webkit-transition-duration: 180ms;
110 } 107 }
111 108
112 .gallery > .image-container > .image[fade] { 109 .gallery > .image-container > .image[fade] {
113 opacity: 0; 110 opacity: 0;
114 } 111 }
115 112
116 .gallery > .image-container > .image[fade='left'] { 113 .gallery > .image-container > .image[fade='left'] {
117 -webkit-transform: translate(-40px,0); 114 -webkit-transform: translate(-40px,0);
118 } 115 }
119 116
120 .gallery > .image-container > .image[fade='right'] { 117 .gallery > .image-container > .image[fade='right'] {
121 -webkit-transform: translate(40px,0); 118 -webkit-transform: translate(40px,0);
122 } 119 }
123 120
124 /* Toolbar */ 121 /* Toolbar */
125 122
126 .gallery > .toolbar { 123 .gallery > .toolbar {
127 position: absolute; 124 -webkit-box-align: stretch;
128 bottom: 0;
129 width: 100%;
130 height: 55px;
131 display: -webkit-box;
132 -webkit-box-orient: horizontal; 125 -webkit-box-orient: horizontal;
133 -webkit-box-pack: start; 126 -webkit-box-pack: start;
134 -webkit-box-align: stretch; 127 -webkit-transform: translate(0, 0);
128 -webkit-transition-duration: 300ms;
129 -webkit-transition-property: webkit-transform, opacity;
130 -webkit-transition-timing-function: ease;
135 background-color: rgba(18,18,18,0.75); 131 background-color: rgba(18,18,18,0.75);
136 border-top: 1px solid rgba(31,31,31,0.75); 132 border-top: 1px solid rgba(31,31,31,0.75);
137 133 bottom: 0;
134 display: -webkit-box;
135 height: 55px;
136 opacity: 0;
138 pointer-events: none; 137 pointer-events: none;
139 opacity: 0; 138 position: absolute;
140 -webkit-transform: translate(0, 0); 139 width: 100%;
141
142 -webkit-transition-property: webkit-transform, opacity;
143 -webkit-transition-duration: 300ms;
144 -webkit-transition-timing-function: ease;
145 } 140 }
146 141
147 .gallery[tools] > .toolbar { 142 .gallery[tools] > .toolbar {
143 -webkit-transform: translate(0, 0);
144 opacity: 1;
148 pointer-events: auto; 145 pointer-events: auto;
149 opacity: 1;
150 -webkit-transform: translate(0, 0);
151 } 146 }
152 147
153 .gallery[tools][locked] > .toolbar { 148 .gallery[tools][locked] > .toolbar {
154 pointer-events: none; 149 pointer-events: none;
155 } 150 }
156 151
157 .gallery .arrow-box { 152 .gallery .arrow-box {
158 position: absolute; 153 -webkit-box-align: center;
159 z-index: 100; 154 -webkit-box-orient: horizontal;
160 width: 100%; 155 -webkit-box-pack: center;
156 display: -webkit-box;
161 height: 100%; 157 height: 100%;
162 pointer-events: none; 158 pointer-events: none;
163 display: -webkit-box; 159 position: absolute;
164 -webkit-box-orient: horizontal; 160 width: 100%;
165 -webkit-box-align: center; 161 z-index: 100;
166 -webkit-box-pack: center;
167 } 162 }
168 163
169 .gallery .arrow-box .arrow { 164 .gallery .arrow-box .arrow {
170 pointer-events: none; 165 pointer-events: none;
171 } 166 }
172 167
173 .gallery .arrow-box .arrow-spacer { 168 .gallery .arrow-box .arrow-spacer {
174 -webkit-box-flex: 1; 169 -webkit-box-flex: 1;
175 pointer-events: none; 170 pointer-events: none;
176 } 171 }
177 172
178 .gallery[tools] .arrow[active] { 173 .gallery[tools] .arrow[active] {
174 cursor: pointer;
179 pointer-events: auto; 175 pointer-events: auto;
180 cursor: pointer;
181 } 176 }
182 177
183 /* The arrow icons are in nested divs so that their opacity can be manipulated 178 /* The arrow icons are in nested divs so that their opacity can be manipulated
184 independently from their parent (which can be dimmed when the crop frame 179 * independently from their parent (which can be dimmed when the crop frame
185 overlaps it) */ 180 * overlaps it) */
186 .gallery .arrow div{ 181 .gallery .arrow div {
182 background-position: center center;
183 background-repeat: no-repeat;
184 height: 193px;
185 opacity: 0;
187 width: 105px; 186 width: 105px;
188 height: 193px;
189 background-repeat: no-repeat;
190 background-position: center center;
191 opacity: 0;
192 } 187 }
193 188
194 .gallery[tools] .arrow[active] div{ 189 .gallery[tools] .arrow[active] div {
195 opacity: 0.25; 190 opacity: 0.25;
196 } 191 }
197 192
198 .gallery[tools] .arrow[active] div:hover{ 193 .gallery[tools] .arrow[active] div:hover {
199 opacity: 1; 194 opacity: 1;
200 } 195 }
201 196
202 .gallery .arrow.left div{ 197 .gallery .arrow.left div {
203 background-image: url(../images/gallery/arrow_left.png); 198 background-image: url(../images/gallery/arrow_left.png);
204 } 199 }
205 200
206 .gallery .arrow.right div{ 201 .gallery .arrow.right div {
207 background-image: url(../images/gallery/arrow_right.png); 202 background-image: url(../images/gallery/arrow_right.png);
208 } 203 }
209 204
210 /* Special behavior on mouse drag. 205 /* Special behavior on mouse drag.
211 Redundant .gallery attributes included to make the rules more specific */ 206 Redundant .gallery attributes included to make the rules more specific */
212 207
213 /* Everything but the image container should become mouse-transparent */ 208 /* Everything but the image container should become mouse-transparent */
214 .gallery[tools][editing][mousedrag] * { 209 .gallery[tools][editing][mousedrag] * {
215 pointer-events: none; 210 pointer-events: none;
216 } 211 }
(...skipping 26 matching lines...) Expand all
243 z-index: 0; 238 z-index: 0;
244 } 239 }
245 240
246 .gallery .filename-spacer > .name, 241 .gallery .filename-spacer > .name,
247 .gallery[renaming] .filename-spacer > input { 242 .gallery[renaming] .filename-spacer > input {
248 opacity: 1; 243 opacity: 1;
249 z-index: 1; 244 z-index: 1;
250 } 245 }
251 246
252 .gallery .filename-spacer > * { 247 .gallery .filename-spacer > * {
248 background-color: transparent;
249 color: white;
253 font-family: Open Sans,Droid Sans Fallback,sans-serif; 250 font-family: Open Sans,Droid Sans Fallback,sans-serif;
251 height: 21px;
254 position: absolute; 252 position: absolute;
255 background-color: transparent;
256 height: 21px;
257 width: 260px; 253 width: 260px;
258 color: white;
259 } 254 }
260 255
261 .gallery .filename-spacer > input, 256 .gallery .filename-spacer > input,
262 .gallery .filename-spacer > .name { 257 .gallery .filename-spacer > .name {
263 border: none; 258 border: none;
259 font-size: 120%;
260 left: 10px;
264 outline: none; 261 outline: none;
265 font-size: 120%;
266 overflow: hidden; 262 overflow: hidden;
267 text-overflow: ellipsis; 263 text-overflow: ellipsis;
264 top: 5px;
268 white-space: nowrap; 265 white-space: nowrap;
269 left: 10px;
270 top: 5px;
271 } 266 }
272 267
273 .gallery .filename-spacer > .name:hover { 268 .gallery .filename-spacer > .name:hover {
274 background-color: rgba(48, 48, 48, 1.0); 269 background-color: rgba(48, 48, 48, 1.0);
275 cursor: pointer; 270 cursor: pointer;
276 } 271 }
277 272
278 .gallery .filename-spacer > input:focus, 273 .gallery .filename-spacer > input:focus,
279 .gallery .filename-spacer > input:focus:hover { 274 .gallery .filename-spacer > input:focus:hover {
280 background-color: white; 275 background-color: white;
276 border-bottom: 1px solid white;
277 border-right: 1px solid white;
281 color: black; 278 color: black;
282 border-right: 1px solid white;
283 border-bottom: 1px solid white;
284 } 279 }
285 280
286 .gallery .filename-spacer > .options { 281 .gallery .filename-spacer > .options {
287 left: 10px; 282 left: 10px;
288 top: 26px; 283 top: 26px;
289 } 284 }
290 285
291 .gallery .filename-spacer .saved, 286 .gallery .filename-spacer .saved,
292 .gallery .filename-spacer .keep-original { 287 .gallery .filename-spacer .keep-original {
288 -webkit-transition: all linear 120ms;
289 color: gray;
290 cursor: inherit;
293 display: none; 291 display: none;
294 color: gray;
295 font-size: 90%; 292 font-size: 90%;
296 -webkit-transition: all linear 120ms; 293 margin-right: 10px;
297 pointer-events: none; 294 pointer-events: none;
298 cursor: inherit;
299 margin-right: 10px;
300 } 295 }
301 296
302 .gallery .filename-spacer .saved[highlighted] { 297 .gallery .filename-spacer .saved[highlighted] {
298 -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
303 color: white; 299 color: white;
304 -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0deg);
305 } 300 }
306 301
307 .gallery .filename-spacer .keep-original[visible] { 302 .gallery .filename-spacer .keep-original[visible] {
303 color: white;
304 cursor: pointer;
308 display: inline-block; 305 display: inline-block;
309 cursor: pointer;
310 color: white;
311 pointer-events: auto; 306 pointer-events: auto;
312 } 307 }
313 308
314 .gallery .button-spacer { 309 .gallery .button-spacer {
310 -webkit-box-flex: 1;
315 display: -webkit-box; 311 display: -webkit-box;
316 -webkit-box-flex: 1;
317 } 312 }
318 313
319 /* Thumbnails */ 314 /* Thumbnails */
320 315
321 .gallery .ribbon-spacer { 316 .gallery .ribbon-spacer {
322 position: absolute; 317 -webkit-box-align: center;
323 left: 280px;
324 right: 280px;
325 height: 100%;
326 display: -webkit-box;
327 -webkit-box-orient: horizontal; 318 -webkit-box-orient: horizontal;
328 -webkit-box-pack: center; 319 -webkit-box-pack: center;
329 -webkit-box-align: center; 320 display: -webkit-box;
321 height: 100%;
322 left: 280px;
323 position: absolute;
324 right: 280px;
330 } 325 }
331 326
332 .gallery .toolbar .ribbon { 327 .gallery .toolbar .ribbon {
333 overflow: hidden;
334 height: 100%;
335 -webkit-box-flex: 0; 328 -webkit-box-flex: 0;
336 display: -webkit-box;
337 -webkit-box-orient: horizontal; 329 -webkit-box-orient: horizontal;
338 -webkit-box-pack: start; 330 -webkit-box-pack: start;
339
340 -webkit-transition: opacity 180ms linear; 331 -webkit-transition: opacity 180ms linear;
332 display: -webkit-box;
333 height: 100%;
334 overflow: hidden;
341 z-index: 0; 335 z-index: 0;
342 } 336 }
343 337
344 .gallery[editing] .toolbar .ribbon { 338 .gallery[editing] .toolbar .ribbon {
345 opacity: 0; 339 opacity: 0;
346 } 340 }
347 341
348 .gallery .ribbon-image { 342 .gallery .ribbon-image {
349 display: -webkit-box; 343 -webkit-box-align: center;
350 -webkit-box-orient: horizontal; 344 -webkit-box-orient: horizontal;
351 -webkit-box-pack: center; 345 -webkit-box-pack: center;
352 -webkit-box-align: center; 346 -webkit-transition: margin-left 180ms linear;
353 overflow: hidden; 347 border: 2px solid rgba(255,255,255,0); /* transparent white */
354 cursor: pointer; 348 cursor: pointer;
355 width: 47px; 349 display: -webkit-box;
356 height: 47px; 350 height: 47px;
357 margin: 2px; 351 margin: 2px;
358 border: 2px solid rgba(255,255,255,0); /* transparent white */ 352 overflow: hidden;
359 -webkit-transition: margin-left 180ms linear; 353 width: 47px;
360 } 354 }
361 355
362 .gallery .ribbon-image[selected] { 356 .gallery .ribbon-image[selected] {
363 border: 2px solid rgba(255,233,168,1); 357 border: 2px solid rgba(255,233,168,1);
364 } 358 }
365 359
366 .gallery .toolbar .ribbon.fade-left { 360 .gallery .toolbar .ribbon.fade-left {
367 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0, 1) 40px); 361 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0,
362 rgba(0, 0, 0, 1) 40px);
368 } 363 }
369 364
370 .gallery .toolbar .ribbon.fade-right { 365 .gallery .toolbar .ribbon.fade-right {
371 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0 ,1) 40px); 366 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0,
367 rgba(0, 0, 0, 1) 40px);
372 } 368 }
373 369
374 .gallery .toolbar .ribbon.fade-left.fade-right { 370 .gallery .toolbar .ribbon.fade-left.fade-right {
375 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0, 1) 40px, rgba(0,0,0,1) 230px, rgba(0,0,0,0) 100%); 371 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0,
372 rgba(0, 0, 0, 1) 40px,
373 rgba(0, 0, 0, 1) 230px,
374 rgba(0, 0, 0, 0) 100%);
376 } 375 }
377 376
378 .gallery .image-wrapper { 377 .gallery .image-wrapper {
378 border: 1px solid rgba(0, 0, 0, 0); /* transparent black */
379 height: 45px;
380 overflow: hidden;
379 position: relative; 381 position: relative;
380 overflow: hidden;
381 width: 45px; 382 width: 45px;
382 height: 45px;
383 border: 1px solid rgba(0,0,0,0); /* transparent black */
384 } 383 }
385 384
386 /* Editor buttons */ 385 /* Editor buttons */
387 386
388 .gallery .toolbar .edit-bar { 387 .gallery .toolbar .edit-bar {
389 position: absolute;
390 overflow: hidden;
391 pointer-events: none;
392 right: 0;
393 width: 100%;
394 opacity: 0;
395 height: 55px;
396 color: white;
397 display: -webkit-box;
398 -webkit-box-orient: horizontal; 388 -webkit-box-orient: horizontal;
399 -webkit-box-pack: center; 389 -webkit-box-pack: center;
400 -webkit-transition: opacity 180ms linear; 390 -webkit-transition: opacity 180ms linear;
391 color: white;
392 display: -webkit-box;
393 height: 55px;
394 opacity: 0;
395 overflow: hidden;
396 pointer-events: none;
397 position: absolute;
398 right: 0;
399 width: 100%;
401 } 400 }
402 401
403 .gallery[editing] .toolbar .edit-bar { 402 .gallery[editing] .toolbar .edit-bar {
404 opacity: 1; 403 opacity: 1;
405 } 404 }
406 405
407 .gallery .edit-main { 406 .gallery .edit-main {
407 -webkit-box-orient: horizontal;
408 -webkit-transition: opacity 250ms ease-in-out;
408 display: -webkit-box; 409 display: -webkit-box;
409 -webkit-box-orient: horizontal;
410 opacity: 0; 410 opacity: 0;
411 -webkit-transition: opacity 250ms ease-in-out;
412 } 411 }
413 412
414 .gallery[editing] .edit-main { 413 .gallery[editing] .edit-main {
414 opacity: 1.0;
415 pointer-events: auto; 415 pointer-events: auto;
416 opacity: 1.0;
417 } 416 }
418 417
419 .gallery > .toolbar .button { 418 .gallery > .toolbar .button {
419 -webkit-box-align: center;
420 -webkit-box-flex: 0; 420 -webkit-box-flex: 0;
421 -webkit-box-orient: horizontal;
422 -webkit-box-pack: end;
423 background-position: 5px center;
424 background-repeat: no-repeat;
425 cursor: pointer;
426 display: -webkit-box;
427 height: 40px;
428 margin: 8px 0 7px 3px;
429 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */
421 padding: 0 10px 0 35px; 430 padding: 0 10px 0 35px;
422 cursor: pointer;
423 margin: 8px 0 7px 3px;
424 height: 40px;
425
426 display: -webkit-box;
427 -webkit-box-orient: horizontal;
428 -webkit-box-align: center;
429 -webkit-box-pack: end;
430
431 background-repeat: no-repeat;
432 background-position: 5px center;
433
434 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */
435 } 431 }
436 432
437 .gallery > .toolbar .button { 433 .gallery > .toolbar .button {
438 background-color: rgba(0,0,0,0); 434 background-color: rgba(0,0,0,0);
439 color: white; 435 color: white;
440 } 436 }
441 437
442 .gallery > .toolbar .button:hover { 438 .gallery > .toolbar .button:hover {
443 background-color: rgba(31,31,31,1); 439 background-color: rgba(31,31,31,1);
444 color: white; 440 color: white;
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
492 488
493 .gallery > .toolbar .button.rotate_left[pressed] { 489 .gallery > .toolbar .button.rotate_left[pressed] {
494 background-image: url(../images/gallery/icon_rotate_left_selected.png); 490 background-image: url(../images/gallery/icon_rotate_left_selected.png);
495 } 491 }
496 492
497 .gallery > .toolbar .button.undo { 493 .gallery > .toolbar .button.undo {
498 background-image: url(../images/gallery/icon_undo.png); 494 background-image: url(../images/gallery/icon_undo.png);
499 } 495 }
500 496
501 .gallery > .toolbar .button.redo { 497 .gallery > .toolbar .button.redo {
498 background-image: url(../images/gallery/icon_redo.png);
502 position: absolute; /* Exclude from center-packing*/ 499 position: absolute; /* Exclude from center-packing*/
503 background-image: url(../images/gallery/icon_redo.png);
504 } 500 }
505 501
506 .gallery > .toolbar .button[disabled] { 502 .gallery > .toolbar .button[disabled] {
503 opacity: 0.5;
507 pointer-events: none; 504 pointer-events: none;
508 opacity: 0.5;
509 } 505 }
510 506
511 .gallery > .toolbar .button[hidden] { 507 .gallery > .toolbar .button[hidden] {
512 display: none; 508 display: none;
513 } 509 }
514 510
515 .gallery > .toolbar > .button.edit { 511 .gallery > .toolbar > .button.edit {
512 background-image: url(../images/gallery/icon_edit.png);
516 position: relative; 513 position: relative;
517 z-index: 10; 514 z-index: 10;
518 background-image: url(../images/gallery/icon_edit.png);
519 } 515 }
520 516
521 .gallery > .toolbar > .button.edit[pressed] { 517 .gallery > .toolbar > .button.edit[pressed] {
522 background-image: url(../images/gallery/icon_edit_selected.png); 518 background-image: url(../images/gallery/icon_edit_selected.png);
523 } 519 }
524 520
525 .gallery > .toolbar > .button.share { 521 .gallery > .toolbar > .button.share {
522 background-image: url(../images/gallery/icon_share.png);
526 position: relative; 523 position: relative;
527 z-index: 10; 524 z-index: 10;
528 background-image: url(../images/gallery/icon_share.png);
529 } 525 }
530 526
531 .gallery > .toolbar > .button.share[pressed] { 527 .gallery > .toolbar > .button.share[pressed] {
532 background-image: url(../images/gallery/icon_share_selected.png); 528 background-image: url(../images/gallery/icon_share_selected.png);
533 } 529 }
534 530
535 .gallery[error] > .toolbar .button.edit, 531 .gallery[error] > .toolbar .button.edit,
536 .gallery[error] > .toolbar .button.share { 532 .gallery[error] > .toolbar .button.share {
533 opacity: 0.7;
537 pointer-events: none; 534 pointer-events: none;
538 opacity: 0.7;
539 } 535 }
540 536
541 .gallery > .toolbar > .button:last-child { 537 .gallery > .toolbar > .button:last-child {
542 margin-right: 8px; 538 margin-right: 8px;
543 } 539 }
544 540
545 /* Secondary toolbar (mode-specific tools) */ 541 /* Secondary toolbar (mode-specific tools) */
546 542
547 .gallery .edit-modal { 543 .gallery .edit-modal {
544 -webkit-box-orient: horizontal;
545 -webkit-box-pack: center;
546 bottom: 80px;
547 display: -webkit-box;
548 height: 40px;
549 pointer-events: none;
548 position: absolute; 550 position: absolute;
549 width: 100%; 551 width: 100%;
550 bottom: 80px;
551 height: 40px;
552 display: -webkit-box;
553 -webkit-box-orient: horizontal;
554 -webkit-box-pack: center;
555 pointer-events: none;
556 } 552 }
557 553
558 .gallery .edit-modal-wrapper[hidden] { 554 .gallery .edit-modal-wrapper[hidden] {
559 display: none; 555 display: none;
560 } 556 }
561 557
562 .gallery .edit-modal-wrapper { 558 .gallery .edit-modal-wrapper {
563 color: white; 559 -webkit-box-align: center;
564 padding-right: 5px;
565 background-color: rgba(0, 0, 0, 0.75);
566 display: -webkit-box;
567 -webkit-box-orient: horizontal; 560 -webkit-box-orient: horizontal;
568 -webkit-box-pack: center; 561 -webkit-box-pack: center;
569 -webkit-box-align: center; 562 background-color: rgba(0, 0, 0, 0.75);
563 color: white;
564 display: -webkit-box;
565 padding-right: 5px;
570 pointer-events: auto; 566 pointer-events: auto;
571 } 567 }
572 568
573 .gallery .edit-modal .label { 569 .gallery .edit-modal .label {
570 -webkit-box-align: center;
571 -webkit-box-orient: horizontal;
572 background-position: 20px center;
573 background-repeat: no-repeat;
574 display: -webkit-box;
574 height: 20px; 575 height: 20px;
575 padding-left: 50px; 576 padding-left: 50px;
576 padding-right: 10px; 577 padding-right: 10px;
577
578 display: -webkit-box;
579 -webkit-box-orient: horizontal;
580 -webkit-box-align: center;
581
582 background-repeat: no-repeat;
583 background-position: 20px center;
584 } 578 }
585 579
586 .gallery .edit-modal .label.brightness { 580 .gallery .edit-modal .label.brightness {
587 background-image: url(../images/gallery/icon_brightness.png); 581 background-image: url(../images/gallery/icon_brightness.png);
588 } 582 }
589 583
590 .gallery .edit-modal .label.contrast { 584 .gallery .edit-modal .label.contrast {
585 background-image: url(../images/gallery/icon_contrast.png);
591 margin-left: 15px; 586 margin-left: 15px;
592 background-image: url(../images/gallery/icon_contrast.png);
593 } 587 }
594 588
595 .gallery .edit-modal .range { 589 .gallery .edit-modal .range {
596 -webkit-appearance: none !important; 590 -webkit-appearance: none !important;
597 height: 3px; 591 height: 3px;
592 margin-right: 10px;
598 margin-top: 1px; 593 margin-top: 1px;
599 margin-right: 10px;
600 } 594 }
601 595
602 .gallery .edit-modal .range::-webkit-slider-thumb { 596 .gallery .edit-modal .range::-webkit-slider-thumb {
603 -webkit-appearance: none; 597 -webkit-appearance: none;
598 background-image: url(../images/gallery/slider_thumb.png);
599 height: 29px;
604 width: 16px; 600 width: 16px;
605 height: 29px;
606 background-image: url(../images/gallery/slider_thumb.png);
607 } 601 }
608 602
609 /* Crop frame */ 603 /* Crop frame */
610 604
611 .gallery .crop-overlay { 605 .gallery .crop-overlay {
606 -webkit-box-orient: vertical;
607 display: -webkit-box;
608 pointer-events: none;
612 position: absolute; 609 position: absolute;
613 pointer-events: none;
614 display: -webkit-box;
615 -webkit-box-orient: vertical;
616 } 610 }
617 611
618 .gallery .crop-overlay .shadow { 612 .gallery .crop-overlay .shadow {
619 background-color: rgba(0,0,0,0.65); 613 background-color: rgba(0,0,0,0.65);
620 } 614 }
621 615
622 .gallery .crop-overlay .middle-box { 616 .gallery .crop-overlay .middle-box {
617 -webkit-box-flex: 1;
618 -webkit-box-orient: horizontal;
623 display: -webkit-box; 619 display: -webkit-box;
624 -webkit-box-orient: horizontal;
625 -webkit-box-flex: 1;
626 } 620 }
627 621
628 .gallery .crop-frame { 622 .gallery .crop-frame {
623 -webkit-box-flex: 1;
624 display: -webkit-box;
629 position: relative; 625 position: relative;
630 display: -webkit-box;
631 -webkit-box-flex: 1;
632 } 626 }
633 627
634 .gallery .crop-frame div{ 628 .gallery .crop-frame div {
629 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
630 background-color: rgba(255, 255, 255, 1);
635 position: absolute; 631 position: absolute;
636 background-color: rgba(255, 255, 255, 1);
637 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
638 } 632 }
639 633
640 .gallery .crop-frame .horizontal { 634 .gallery .crop-frame .horizontal {
635 height: 1px;
641 left: 7px; 636 left: 7px;
642 right: 7px; 637 right: 7px;
643 height: 1px;
644 } 638 }
645 639
646 .gallery .crop-frame .horizontal.top { 640 .gallery .crop-frame .horizontal.top {
647 top: 0; 641 top: 0;
648 } 642 }
649 643
650 .gallery .crop-frame .horizontal.bottom { 644 .gallery .crop-frame .horizontal.bottom {
651 bottom: 0; 645 bottom: 0;
652 } 646 }
653 647
654 .gallery .crop-frame .vertical { 648 .gallery .crop-frame .vertical {
649 bottom: 7px;
655 top: 7px; 650 top: 7px;
656 bottom: 7px;
657 width: 1px; 651 width: 1px;
658 } 652 }
659 653
660 .gallery .crop-frame .vertical.left { 654 .gallery .crop-frame .vertical.left {
661 left: 0; 655 left: 0;
662 } 656 }
663 657
664 .gallery .crop-frame .vertical.right { 658 .gallery .crop-frame .vertical.right {
665 right: 0; 659 right: 0;
666 } 660 }
667 661
668 .gallery .crop-frame .corner { 662 .gallery .crop-frame .corner {
669 border-radius: 6px; 663 border-radius: 6px;
664 height: 13px;
670 width: 13px; 665 width: 13px;
671 height: 13px;
672 } 666 }
673 667
674 .gallery .crop-frame .corner.left { 668 .gallery .crop-frame .corner.left {
675 left: -6px; 669 left: -6px;
676 } 670 }
677 671
678 .gallery .crop-frame .corner.right { 672 .gallery .crop-frame .corner.right {
679 right: -6px; 673 right: -6px;
680 } 674 }
681 675
682 .gallery .crop-frame .corner.top { 676 .gallery .crop-frame .corner.top {
683 top: -6px; 677 top: -6px;
684 } 678 }
685 679
686 .gallery .crop-frame .corner.bottom { 680 .gallery .crop-frame .corner.bottom {
687 bottom: -6px; 681 bottom: -6px;
688 } 682 }
689 683
690 /* Prompt/notification panel */ 684 /* Prompt/notification panel */
691 685
692 .gallery .prompt-wrapper { 686 .gallery .prompt-wrapper {
693 position: absolute;
694 pointer-events: none;
695
696 width: 100%;
697 height: 100%;
698
699 display: -webkit-box;
700 -webkit-box-orient: horizontal; 687 -webkit-box-orient: horizontal;
701 -webkit-box-pack: center; 688 -webkit-box-pack: center;
689 display: -webkit-box;
690 height: 100%;
691 pointer-events: none;
692 position: absolute;
693 width: 100%;
702 } 694 }
703 695
704 .gallery .prompt-wrapper[pos=top] { 696 .gallery .prompt-wrapper[pos=top] {
705 -webkit-box-align: start; 697 -webkit-box-align: start;
706 } 698 }
707 699
708 .gallery .prompt-wrapper[pos=center] { 700 .gallery .prompt-wrapper[pos=center] {
709 -webkit-box-align: center; 701 -webkit-box-align: center;
710 } 702 }
711 703
712 .gallery .prompt-wrapper[pos=center] .close { 704 .gallery .prompt-wrapper[pos=center] .close {
713 display: none; 705 display: none;
714 } 706 }
715 707
716 .gallery .prompt-wrapper > div.dimmable { 708 .gallery .prompt-wrapper > div.dimmable {
709 -webkit-transition: opacity 220ms ease;
717 opacity: 1; 710 opacity: 1;
718 -webkit-transition: opacity 220ms ease;
719 } 711 }
720 712
721 .gallery .prompt { 713 .gallery .prompt {
714 -webkit-box-align: center;
715 -webkit-box-orient: horizontal;
716 -webkit-transition: all 180ms ease;
717 background-color: rgba(0, 0, 0, 0.8);
718 color: white;
719 display: -webkit-box;
722 font-size: 120%; 720 font-size: 120%;
723 height: 40px; 721 height: 40px;
722 opacity: 0;
724 padding: 0 20px; 723 padding: 0 20px;
725 color: white;
726 background-color: rgba(0, 0, 0, 0.8);
727
728 display: -webkit-box;
729 -webkit-box-orient: horizontal;
730 -webkit-box-align: center;
731
732 position: relative; 724 position: relative;
733 top: 5px; 725 top: 5px;
734 opacity: 0;
735 -webkit-transition: all 180ms ease;
736 } 726 }
737 727
738 .gallery .prompt[state='fadein'] { 728 .gallery .prompt[state='fadein'],
729 .gallery .prompt[state='fadeout'] {
730 opacity: 0;
739 top: 0; 731 top: 0;
740 opacity: 1;
741 }
742
743 .gallery .prompt[state='fadeout'] {
744 top: 0;
745 opacity: 0;
746 } 732 }
747 733
748 .gallery .prompt-wrapper[pos=top] .prompt { 734 .gallery .prompt-wrapper[pos=top] .prompt {
749 padding-right: 10px; 735 padding-right: 10px;
750 } 736 }
751 737
752 .gallery .prompt .close { 738 .gallery .prompt .close {
753 pointer-events: auto; 739 background-image: url(../images/gallery/butterbar_close_x.png);
754 width: 16px; 740 background-position: center center;
741 background-repeat: no-repeat;
755 height: 16px; 742 height: 16px;
756 margin-left: 16px; 743 margin-left: 16px;
757 opacity: 0.65; 744 opacity: 0.65;
758 background-image: url(../images/gallery/butterbar_close_x.png); 745 pointer-events: auto;
759 background-repeat: no-repeat; 746 width: 16px;
760 background-position: center center;
761 } 747 }
762 748
763 .gallery .prompt .close:hover { 749 .gallery .prompt .close:hover {
750 background-color: rgba(81,81,81,1);
764 opacity: 1.0; 751 opacity: 1.0;
765 background-color: rgba(81,81,81,1);
766 } 752 }
767 753
768
769 .gallery .share-menu { 754 .gallery .share-menu {
755 -webkit-border-radius: 1px;
756 -webkit-box-align: stretch;
757 -webkit-box-orient: vertical;
758 -webkit-box-pack: start;
759 -webkit-transition: opacity 500ms ease-in-out;
760 background-color: white;
761 border: 1px solid #7f7f7f;
762 bottom: 60px;
763 display: -webkit-box;
764 opacity: 1.0;
765 padding: 8px;
770 position: absolute; 766 position: absolute;
771 right: 10px; 767 right: 10px;
772 bottom: 60px;
773 background-color: white;
774 opacity: 1.0;
775 -webkit-transition: opacity 500ms ease-in-out;
776 padding: 8px;
777 display: -webkit-box;
778 -webkit-box-orient: vertical;
779 -webkit-box-align: stretch;
780 -webkit-box-pack: start;
781 border: 1px solid #7f7f7f;
782 -webkit-border-radius: 1px;
783 } 768 }
784 769
785 .gallery .share-menu .bubble-point { 770 .gallery .share-menu .bubble-point {
786 background-image: url(../images/gallery/bubble_point.png); 771 background-image: url(../images/gallery/bubble_point.png);
787 background-position: center top; 772 background-position: center top;
788 background-repeat: no-repeat; 773 background-repeat: no-repeat;
774 bottom: -8px;
775 height: 8px;
776 padding: 0;
789 position: absolute; 777 position: absolute;
778 right: 20px;
790 width: 20px; 779 width: 20px;
791 height: 8px;
792 bottom: -8px;
793 right: 20px;
794 padding: 0;
795 } 780 }
796 781
797 .gallery .share-menu[hidden] { 782 .gallery .share-menu[hidden] {
783 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/
798 opacity: 0.0; 784 opacity: 0.0;
799 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/
800 pointer-events: none; 785 pointer-events: none;
801 } 786 }
802 787
803 .gallery .share-menu > div { 788 .gallery .share-menu > div {
804 cursor: pointer;
805 background-color: rgba(0,0,0,0);
806 padding: 5px;
807 display: -webkit-box;
808 -webkit-box-align: center; 789 -webkit-box-align: center;
809 -webkit-box-pack: start; 790 -webkit-box-pack: start;
791 background-color: rgba(0,0,0,0);
792 cursor: pointer;
793 display: -webkit-box;
794 padding: 5px;
810 } 795 }
811 796
812 .gallery .share-menu > div:hover { 797 .gallery .share-menu > div:hover {
813 background-color: rgba(240,240,240,1); 798 background-color: rgba(240,240,240,1);
814 } 799 }
815 800
816 .gallery .share-menu > div > img { 801 .gallery .share-menu > div > img {
802 display: block;
817 margin-right: 5px; 803 margin-right: 5px;
818 display: block;
819 } 804 }
820 805
821 /* Load spinner and error banner */ 806 /* Load spinner and error banner */
822 807
823 .gallery .spinner { 808 .gallery .spinner {
824 width: 32px; 809 background-image: url(../images/gallery/spinner_white.svg);
810 background-size: 100%;
825 height: 32px; 811 height: 32px;
826 position: absolute;
827 left: 50%; 812 left: 50%;
828 top: 50%;
829 margin-left: -16px; 813 margin-left: -16px;
830 margin-top: -16px; 814 margin-top: -16px;
831 opacity: 0.5; 815 opacity: 0.5;
832 background-size: 100%; 816 position: absolute;
833 background-image: url(../images/gallery/spinner_white.svg); 817 top: 50%;
818 width: 32px;
834 } 819 }
835 820
836 .gallery:not([spinner]) .spinner { 821 .gallery:not([spinner]) .spinner {
837 display: none; 822 display: none;
838 } 823 }
839 824
840 .gallery .error-banner { 825 .gallery .error-banner {
826 -webkit-box-align: center;
827 -webkit-box-orient: horizontal;
828 -webkit-box-pack: center;
829 background-color: rgba(24, 24, 24, 1);
830 background-image: url(../images/media/error.png);
831 background-position: 25px center;
832 background-repeat: no-repeat;
841 color: white; 833 color: white;
842 background-color: rgba(24, 24, 24, 1); 834 display: -webkit-box;
843 height: 54px; 835 height: 54px;
844 padding-left: 70px; 836 padding-left: 70px;
845 padding-right: 35px; 837 padding-right: 35px;
846
847 display: -webkit-box;
848 -webkit-box-orient: horizontal;
849 -webkit-box-align: center;
850 -webkit-box-pack: center;
851
852 background-image: url(../images/media/error.png);
853 background-repeat: no-repeat;
854 background-position: 25px center;
855 } 838 }
856 839
857 .gallery:not([error]) .error-banner { 840 .gallery:not([error]) .error-banner {
858 display: none; 841 display: none;
859 } 842 }
860 843
861 /* Video playback support. */ 844 /* Video playback support. */
862 845
863 .gallery video { 846 .gallery video {
847 height: 100%;
864 position: absolute; 848 position: absolute;
865 width: 100%; 849 width: 100%;
866 height: 100%;
867 } 850 }
868 851
869 .gallery .video-controls-spacer { 852 .gallery .video-controls-spacer {
870 position: absolute; 853 -webkit-box-align: center;
871 left: 0; 854 -webkit-box-orient: horizontal;
872 right: 0; 855 -webkit-box-pack: center;
873 height: 30px;
874 bottom: 60px; /* Just above the toolbar */ 856 bottom: 60px; /* Just above the toolbar */
875 display: -webkit-box; 857 display: -webkit-box;
876 -webkit-box-orient: horizontal; 858 height: 30px;
877 -webkit-box-align: center; 859 left: 0;
878 -webkit-box-pack: center; 860 opacity: 0;
879 pointer-events: none; 861 pointer-events: none;
880 opacity: 0; 862 position: absolute;
863 right: 0;
881 } 864 }
882 865
883 .gallery[video] .video-controls-spacer { 866 .gallery[video] .video-controls-spacer {
884 /* Animate opacity on 'tools' attribute toggle. */ 867 /* Animate opacity on 'tools' attribute toggle. */
885 /* Change opacity immediately on 'video' attribute change. */ 868 /* Change opacity immediately on 'video' attribute change. */
886 -webkit-transition: opacity 0.28s ease; 869 -webkit-transition: opacity 280ms ease;
887 } 870 }
888 871
889 .gallery[video][tools] .video-controls-spacer { 872 .gallery[video][tools] .video-controls-spacer {
890 opacity: 1; 873 opacity: 1;
891 } 874 }
892 875
893 .gallery .video-controls { 876 .gallery .video-controls {
877 display: none;
894 max-width: 800px; 878 max-width: 800px;
895 display: none;
896 } 879 }
897 880
898 .gallery[video] .video-controls { 881 .gallery[video] .video-controls {
882 -webkit-box-flex: 1;
899 display: -webkit-box; 883 display: -webkit-box;
900 -webkit-box-flex: 1;
901 } 884 }
902 885
903 .gallery[video] > .toolbar .button.edit, 886 .gallery[video] > .toolbar .button.edit,
904 .gallery[video] > .toolbar .edit-bar { 887 .gallery[video] > .toolbar .edit-bar {
905 display: none; 888 display: none;
906 } 889 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698