OLD | NEW |
1 /* | 1 /* |
2 * 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 | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 -webkit-user-select: none; | 9 -webkit-user-select: none; |
10 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 10 font-family: Open Sans,Droid Sans Fallback,sans-serif; |
(...skipping 19 matching lines...) Expand all Loading... |
30 z-index: 200; | 30 z-index: 200; |
31 } | 31 } |
32 | 32 |
33 /* The close icon is in a nested div so that its opacity can be manipulated | 33 /* 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 | 34 independently from its parent (which can be dimmed when the crop frame |
35 overlaps it) */ | 35 overlaps it) */ |
36 .gallery > .close div { | 36 .gallery > .close div { |
37 opacity: 0; | 37 opacity: 0; |
38 width: 20px; | 38 width: 20px; |
39 height: 20px; | 39 height: 20px; |
40 background-image: url(../../images/gallery/close_x.png); | 40 background-image: url(../images/gallery/close_x.png); |
41 background-repeat: no-repeat; | 41 background-repeat: no-repeat; |
42 background-position: center center; | 42 background-position: center center; |
43 } | 43 } |
44 | 44 |
45 .gallery[tools] > .close div { | 45 .gallery[tools] > .close div { |
46 opacity: 0.5; | 46 opacity: 0.5; |
47 } | 47 } |
48 | 48 |
49 .gallery[tools] > .close div:hover { | 49 .gallery[tools] > .close div:hover { |
50 opacity: 0.7; | 50 opacity: 0.7; |
(...skipping 13 matching lines...) Expand all Loading... |
64 .gallery[tools][locked] *, | 64 .gallery[tools][locked] *, |
65 .gallery[tools][locked] .image-container[cursor] { | 65 .gallery[tools][locked] .image-container[cursor] { |
66 cursor: wait; | 66 cursor: wait; |
67 } | 67 } |
68 | 68 |
69 .gallery[tools] .image-container[cursor='default'] { | 69 .gallery[tools] .image-container[cursor='default'] { |
70 cursor: default; | 70 cursor: default; |
71 } | 71 } |
72 | 72 |
73 .gallery[tools] .image-container[cursor='move'] { | 73 .gallery[tools] .image-container[cursor='move'] { |
74 cursor: url(../../images/gallery/cursor_move.png) 18 18; | 74 cursor: url(../images/gallery/cursor_move.png) 18 18; |
75 } | 75 } |
76 | 76 |
77 .gallery[tools] .image-container[cursor='crop'] { | 77 .gallery[tools] .image-container[cursor='crop'] { |
78 cursor: url(../../images/gallery/cursor_crop.png) 18 18; | 78 cursor: url(../images/gallery/cursor_crop.png) 18 18; |
79 } | 79 } |
80 | 80 |
81 .gallery[tools] .image-container[cursor='n-resize'], | 81 .gallery[tools] .image-container[cursor='n-resize'], |
82 .gallery[tools] .image-container[cursor='s-resize'] { | 82 .gallery[tools] .image-container[cursor='s-resize'] { |
83 cursor: url(../../images/gallery/cursor_updown.png) 18 18; | 83 cursor: url(../images/gallery/cursor_updown.png) 18 18; |
84 } | 84 } |
85 | 85 |
86 .gallery[tools] .image-container[cursor='e-resize'], | 86 .gallery[tools] .image-container[cursor='e-resize'], |
87 .gallery[tools] .image-container[cursor='w-resize'] { | 87 .gallery[tools] .image-container[cursor='w-resize'] { |
88 cursor: url(../../images/gallery/cursor_leftright.png) 18 18; | 88 cursor: url(../images/gallery/cursor_leftright.png) 18 18; |
89 } | 89 } |
90 | 90 |
91 .gallery[tools] .image-container[cursor='nw-resize'], | 91 .gallery[tools] .image-container[cursor='nw-resize'], |
92 .gallery[tools] .image-container[cursor='se-resize'] { | 92 .gallery[tools] .image-container[cursor='se-resize'] { |
93 cursor: url(../../images/gallery/cursor_nwse.png) 18 18; | 93 cursor: url(../images/gallery/cursor_nwse.png) 18 18; |
94 } | 94 } |
95 | 95 |
96 .gallery[tools] .image-container[cursor='ne-resize'], | 96 .gallery[tools] .image-container[cursor='ne-resize'], |
97 .gallery[tools] .image-container[cursor='sw-resize'] { | 97 .gallery[tools] .image-container[cursor='sw-resize'] { |
98 cursor: url(../../images/gallery/cursor_swne.png) 18 18; | 98 cursor: url(../images/gallery/cursor_swne.png) 18 18; |
99 } | 99 } |
100 | 100 |
101 .gallery > .image-container > .image { | 101 .gallery > .image-container > .image { |
102 position: absolute; | 102 position: absolute; |
103 pointer-events: none; | 103 pointer-events: none; |
104 | 104 |
105 -webkit-transition-property: -webkit-transform, opacity; | 105 -webkit-transition-property: -webkit-transform, opacity; |
106 -webkit-transition-timing-function: ease-in-out; | 106 -webkit-transition-timing-function: ease-in-out; |
107 | 107 |
108 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ | 108 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
193 | 193 |
194 .gallery[tools] .arrow[active] div{ | 194 .gallery[tools] .arrow[active] div{ |
195 opacity: 0.25; | 195 opacity: 0.25; |
196 } | 196 } |
197 | 197 |
198 .gallery[tools] .arrow[active] div:hover{ | 198 .gallery[tools] .arrow[active] div:hover{ |
199 opacity: 1; | 199 opacity: 1; |
200 } | 200 } |
201 | 201 |
202 .gallery .arrow.left div{ | 202 .gallery .arrow.left div{ |
203 background-image: url(../../images/gallery/arrow_left.png); | 203 background-image: url(../images/gallery/arrow_left.png); |
204 } | 204 } |
205 | 205 |
206 .gallery .arrow.right div{ | 206 .gallery .arrow.right div{ |
207 background-image: url(../../images/gallery/arrow_right.png); | 207 background-image: url(../images/gallery/arrow_right.png); |
208 } | 208 } |
209 | 209 |
210 /* Special behavior on mouse drag. | 210 /* Special behavior on mouse drag. |
211 Redundant .gallery attributes included to make the rules more specific */ | 211 Redundant .gallery attributes included to make the rules more specific */ |
212 | 212 |
213 /* Everything but the image container should become mouse-transparent */ | 213 /* Everything but the image container should become mouse-transparent */ |
214 .gallery[tools][editing][mousedrag] * { | 214 .gallery[tools][editing][mousedrag] * { |
215 pointer-events: none; | 215 pointer-events: none; |
216 } | 216 } |
217 | 217 |
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
417 background-color: rgba(240,240,240,1); | 417 background-color: rgba(240,240,240,1); |
418 color: black; | 418 color: black; |
419 } | 419 } |
420 | 420 |
421 .gallery > .toolbar .button[pressed]:hover { | 421 .gallery > .toolbar .button[pressed]:hover { |
422 background-color: rgba(240,240,240,1); | 422 background-color: rgba(240,240,240,1); |
423 color: black; | 423 color: black; |
424 } | 424 } |
425 | 425 |
426 .gallery > .toolbar .button.autofix { | 426 .gallery > .toolbar .button.autofix { |
427 background-image: url(../../images/gallery/icon_autofix.png); | 427 background-image: url(../images/gallery/icon_autofix.png); |
428 } | 428 } |
429 | 429 |
430 .gallery > .toolbar .button.autofix[pressed] { | 430 .gallery > .toolbar .button.autofix[pressed] { |
431 background-image: url(../../images/gallery/icon_autofix_selected.png); | 431 background-image: url(../images/gallery/icon_autofix_selected.png); |
432 } | 432 } |
433 | 433 |
434 .gallery > .toolbar .button.crop { | 434 .gallery > .toolbar .button.crop { |
435 background-image: url(../../images/gallery/icon_crop.png); | 435 background-image: url(../images/gallery/icon_crop.png); |
436 } | 436 } |
437 | 437 |
438 .gallery > .toolbar .button.crop[pressed] { | 438 .gallery > .toolbar .button.crop[pressed] { |
439 background-image: url(../../images/gallery/icon_crop_selected.png); | 439 background-image: url(../images/gallery/icon_crop_selected.png); |
440 } | 440 } |
441 | 441 |
442 .gallery > .toolbar .button.exposure { | 442 .gallery > .toolbar .button.exposure { |
443 background-image: url(../../images/gallery/icon_brightness.png); | 443 background-image: url(../images/gallery/icon_brightness.png); |
444 } | 444 } |
445 | 445 |
446 .gallery > .toolbar .button.exposure[pressed] { | 446 .gallery > .toolbar .button.exposure[pressed] { |
447 background-image: url(../../images/gallery/icon_brightness_selected.png); | 447 background-image: url(../images/gallery/icon_brightness_selected.png); |
448 } | 448 } |
449 | 449 |
450 .gallery > .toolbar .button.rotate_right { | 450 .gallery > .toolbar .button.rotate_right { |
451 background-image: url(../../images/gallery/icon_rotate.png); | 451 background-image: url(../images/gallery/icon_rotate.png); |
452 } | 452 } |
453 | 453 |
454 .gallery > .toolbar .button.rotate_right[pressed] { | 454 .gallery > .toolbar .button.rotate_right[pressed] { |
455 background-image: url(../../images/gallery/icon_rotate_selected.png); | 455 background-image: url(../images/gallery/icon_rotate_selected.png); |
456 } | 456 } |
457 | 457 |
458 .gallery > .toolbar .button.rotate_left { | 458 .gallery > .toolbar .button.rotate_left { |
459 background-image: url(../../images/gallery/icon_rotate_left.png); | 459 background-image: url(../images/gallery/icon_rotate_left.png); |
460 } | 460 } |
461 | 461 |
462 .gallery > .toolbar .button.rotate_left[pressed] { | 462 .gallery > .toolbar .button.rotate_left[pressed] { |
463 background-image: url(../../images/gallery/icon_rotate_left_selected.png); | 463 background-image: url(../images/gallery/icon_rotate_left_selected.png); |
464 } | 464 } |
465 | 465 |
466 .gallery > .toolbar .button.undo { | 466 .gallery > .toolbar .button.undo { |
467 background-image: url(../../images/gallery/icon_undo.png); | 467 background-image: url(../images/gallery/icon_undo.png); |
468 } | 468 } |
469 | 469 |
470 .gallery > .toolbar .button.redo { | 470 .gallery > .toolbar .button.redo { |
471 position: absolute; /* Exclude from center-packing*/ | 471 position: absolute; /* Exclude from center-packing*/ |
472 background-image: url(../../images/gallery/icon_redo.png); | 472 background-image: url(../images/gallery/icon_redo.png); |
473 } | 473 } |
474 | 474 |
475 .gallery > .toolbar .button[disabled] { | 475 .gallery > .toolbar .button[disabled] { |
476 pointer-events: none; | 476 pointer-events: none; |
477 opacity: 0.5; | 477 opacity: 0.5; |
478 } | 478 } |
479 | 479 |
480 .gallery > .toolbar .button[hidden] { | 480 .gallery > .toolbar .button[hidden] { |
481 display: none; | 481 display: none; |
482 } | 482 } |
483 | 483 |
484 .gallery > .toolbar > .button.edit { | 484 .gallery > .toolbar > .button.edit { |
485 position: relative; | 485 position: relative; |
486 z-index: 10; | 486 z-index: 10; |
487 background-image: url(../../images/gallery/icon_edit.png); | 487 background-image: url(../images/gallery/icon_edit.png); |
488 } | 488 } |
489 | 489 |
490 .gallery > .toolbar > .button.edit[pressed] { | 490 .gallery > .toolbar > .button.edit[pressed] { |
491 background-image: url(../../images/gallery/icon_edit_selected.png); | 491 background-image: url(../images/gallery/icon_edit_selected.png); |
492 } | 492 } |
493 | 493 |
494 .gallery > .toolbar > .button.share { | 494 .gallery > .toolbar > .button.share { |
495 position: relative; | 495 position: relative; |
496 z-index: 10; | 496 z-index: 10; |
497 background-image: url(../../images/gallery/icon_share.png); | 497 background-image: url(../images/gallery/icon_share.png); |
498 } | 498 } |
499 | 499 |
500 .gallery > .toolbar > .button.share[pressed] { | 500 .gallery > .toolbar > .button.share[pressed] { |
501 background-image: url(../../images/gallery/icon_share_selected.png); | 501 background-image: url(../images/gallery/icon_share_selected.png); |
502 } | 502 } |
503 | 503 |
504 .gallery > .toolbar > .button:last-child { | 504 .gallery > .toolbar > .button:last-child { |
505 margin-right: 8px; | 505 margin-right: 8px; |
506 } | 506 } |
507 | 507 |
508 /* Secondary toolbar (mode-specific tools) */ | 508 /* Secondary toolbar (mode-specific tools) */ |
509 | 509 |
510 .gallery .edit-modal { | 510 .gallery .edit-modal { |
511 position: absolute; | 511 position: absolute; |
(...skipping 28 matching lines...) Expand all Loading... |
540 | 540 |
541 display: -webkit-box; | 541 display: -webkit-box; |
542 -webkit-box-orient: horizontal; | 542 -webkit-box-orient: horizontal; |
543 -webkit-box-align: center; | 543 -webkit-box-align: center; |
544 | 544 |
545 background-repeat: no-repeat; | 545 background-repeat: no-repeat; |
546 background-position: 20px center; | 546 background-position: 20px center; |
547 } | 547 } |
548 | 548 |
549 .gallery .edit-modal .label.brightness { | 549 .gallery .edit-modal .label.brightness { |
550 background-image: url(../../images/gallery/icon_brightness.png); | 550 background-image: url(../images/gallery/icon_brightness.png); |
551 } | 551 } |
552 | 552 |
553 .gallery .edit-modal .label.contrast { | 553 .gallery .edit-modal .label.contrast { |
554 margin-left: 15px; | 554 margin-left: 15px; |
555 background-image: url(../../images/gallery/icon_contrast.png); | 555 background-image: url(../images/gallery/icon_contrast.png); |
556 } | 556 } |
557 | 557 |
558 .gallery .edit-modal .range { | 558 .gallery .edit-modal .range { |
559 -webkit-appearance: none !important; | 559 -webkit-appearance: none !important; |
560 height: 3px; | 560 height: 3px; |
561 margin-top: 1px; | 561 margin-top: 1px; |
562 margin-right: 10px; | 562 margin-right: 10px; |
563 } | 563 } |
564 | 564 |
565 .gallery .edit-modal .range::-webkit-slider-thumb { | 565 .gallery .edit-modal .range::-webkit-slider-thumb { |
566 -webkit-appearance: none; | 566 -webkit-appearance: none; |
567 width: 16px; | 567 width: 16px; |
568 height: 29px; | 568 height: 29px; |
569 background-image: url(../../images/gallery/slider_thumb.png); | 569 background-image: url(../images/gallery/slider_thumb.png); |
570 } | 570 } |
571 | 571 |
572 /* Crop frame */ | 572 /* Crop frame */ |
573 | 573 |
574 .gallery .crop-overlay { | 574 .gallery .crop-overlay { |
575 position: absolute; | 575 position: absolute; |
576 pointer-events: none; | 576 pointer-events: none; |
577 display: -webkit-box; | 577 display: -webkit-box; |
578 -webkit-box-orient: vertical; | 578 -webkit-box-orient: vertical; |
579 } | 579 } |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
707 padding: 8px; | 707 padding: 8px; |
708 display: -webkit-box; | 708 display: -webkit-box; |
709 -webkit-box-orient: vertical; | 709 -webkit-box-orient: vertical; |
710 -webkit-box-align: stretch; | 710 -webkit-box-align: stretch; |
711 -webkit-box-pack: start; | 711 -webkit-box-pack: start; |
712 border: 1px solid #7f7f7f; | 712 border: 1px solid #7f7f7f; |
713 -webkit-border-radius: 1px; | 713 -webkit-border-radius: 1px; |
714 } | 714 } |
715 | 715 |
716 .gallery .share-menu .bubble-point { | 716 .gallery .share-menu .bubble-point { |
717 background-image: url(../../images/gallery/bubble_point.png); | 717 background-image: url(../images/gallery/bubble_point.png); |
718 background-position: center top; | 718 background-position: center top; |
719 background-repeat: no-repeat; | 719 background-repeat: no-repeat; |
720 position: absolute; | 720 position: absolute; |
721 width: 20px; | 721 width: 20px; |
722 height: 8px; | 722 height: 8px; |
723 bottom: -8px; | 723 bottom: -8px; |
724 right: 20px; | 724 right: 20px; |
725 padding: 0; | 725 padding: 0; |
726 } | 726 } |
727 | 727 |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
788 | 788 |
789 .gallery[video] .video-controls { | 789 .gallery[video] .video-controls { |
790 display: -webkit-box; | 790 display: -webkit-box; |
791 -webkit-box-flex: 1; | 791 -webkit-box-flex: 1; |
792 } | 792 } |
793 | 793 |
794 .gallery[video] > .toolbar .button.edit, | 794 .gallery[video] > .toolbar .button.edit, |
795 .gallery[video] > .toolbar .edit-bar { | 795 .gallery[video] > .toolbar .edit-bar { |
796 display: none; | 796 display: none; |
797 } | 797 } |
OLD | NEW |