OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2014 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 body { | 5 body { |
6 -webkit-user-select: none; | 6 -webkit-user-select: none; |
7 font-family: Open Sans, Droid Sans Fallback, sans-serif; | 7 font-family: Open Sans, Droid Sans Fallback, sans-serif; |
8 font-size: 84%; | 8 font-size: 84%; |
9 margin: 0; | 9 margin: 0; |
10 } | 10 } |
11 | 11 |
(...skipping 22 matching lines...) Expand all Loading... |
34 position: absolute; | 34 position: absolute; |
35 top: 1px; | 35 top: 1px; |
36 z-index: 200; | 36 z-index: 200; |
37 } | 37 } |
38 | 38 |
39 /* The close icon is in a nested div so that its opacity can be manipulated | 39 /* The close icon is in a nested div so that its opacity can be manipulated |
40 independently from its parent (which can be dimmed when the crop frame | 40 independently from its parent (which can be dimmed when the crop frame |
41 overlaps it) */ | 41 overlaps it) */ |
42 .gallery > .back-button div { | 42 .gallery > .back-button div { |
43 background-image: -webkit-image-set( | 43 background-image: -webkit-image-set( |
44 url('../images/gallery/back_to_files.png') 1x, | 44 url('../images/100/back_to_files.png') 1x, |
45 url('../images/gallery/2x/back_to_files.png') 2x); | 45 url('../images/200/back_to_files.png') 2x); |
46 background-position: center center; | 46 background-position: center center; |
47 background-repeat: no-repeat; | 47 background-repeat: no-repeat; |
48 height: 40px; | 48 height: 40px; |
49 opacity: 0; | 49 opacity: 0; |
50 width: 64px; | 50 width: 64px; |
51 } | 51 } |
52 | 52 |
53 .gallery[tools] > .back-button div { | 53 .gallery[tools] > .back-button div { |
54 opacity: 0.5; | 54 opacity: 0.5; |
55 } | 55 } |
(...skipping 10 matching lines...) Expand all Loading... |
66 position: absolute; | 66 position: absolute; |
67 width: 100%; | 67 width: 100%; |
68 } | 68 } |
69 | 69 |
70 .gallery[tools] .image-container[cursor='default'] { | 70 .gallery[tools] .image-container[cursor='default'] { |
71 cursor: default; | 71 cursor: default; |
72 } | 72 } |
73 | 73 |
74 .gallery[tools] .image-container[cursor='move'] { | 74 .gallery[tools] .image-container[cursor='move'] { |
75 cursor: -webkit-image-set( | 75 cursor: -webkit-image-set( |
76 url('../images/gallery/cursor_move.png') 1x, | 76 url('../images/100/cursor_move.png') 1x, |
77 url('../images/gallery/2x/cursor_move.png') 2x) 15 15, auto; | 77 url('../images/200/cursor_move.png') 2x) 15 15, auto; |
78 } | 78 } |
79 | 79 |
80 .gallery[tools] .image-container[cursor='crop'] { | 80 .gallery[tools] .image-container[cursor='crop'] { |
81 cursor: -webkit-image-set( | 81 cursor: -webkit-image-set( |
82 url('../images/gallery/cursor_crop.png') 1x, | 82 url('../images/100/cursor_crop.png') 1x, |
83 url('../images/gallery/2x/cursor_crop.png') 2x) 15 15, auto; | 83 url('../images/200/cursor_crop.png') 2x) 15 15, auto; |
84 } | 84 } |
85 | 85 |
86 .gallery[tools] .image-container[cursor='n-resize'], | 86 .gallery[tools] .image-container[cursor='n-resize'], |
87 .gallery[tools] .image-container[cursor='s-resize'] { | 87 .gallery[tools] .image-container[cursor='s-resize'] { |
88 cursor: -webkit-image-set( | 88 cursor: -webkit-image-set( |
89 url('../images/gallery/cursor_updown.png') 1x, | 89 url('../images/100/cursor_updown.png') 1x, |
90 url('../images/gallery/2x/cursor_updown.png') 2x) 15 15, auto; | 90 url('../images/200/cursor_updown.png') 2x) 15 15, auto; |
91 } | 91 } |
92 | 92 |
93 .gallery[tools] .image-container[cursor='e-resize'], | 93 .gallery[tools] .image-container[cursor='e-resize'], |
94 .gallery[tools] .image-container[cursor='w-resize'] { | 94 .gallery[tools] .image-container[cursor='w-resize'] { |
95 cursor: -webkit-image-set( | 95 cursor: -webkit-image-set( |
96 url('../images/gallery/cursor_leftright.png') 1x, | 96 url('../images/100/cursor_leftright.png') 1x, |
97 url('../images/gallery/2x/cursor_leftright.png') 2x) 15 15, auto; | 97 url('../images/200/cursor_leftright.png') 2x) 15 15, auto; |
98 } | 98 } |
99 | 99 |
100 .gallery[tools] .image-container[cursor='nw-resize'], | 100 .gallery[tools] .image-container[cursor='nw-resize'], |
101 .gallery[tools] .image-container[cursor='se-resize'] { | 101 .gallery[tools] .image-container[cursor='se-resize'] { |
102 cursor: -webkit-image-set( | 102 cursor: -webkit-image-set( |
103 url('../images/gallery/cursor_nwse.png') 1x, | 103 url('../images/100/cursor_nwse.png') 1x, |
104 url('../images/gallery/2x/cursor_nwse.png') 2x) 15 15, auto; | 104 url('../images/200/cursor_nwse.png') 2x) 15 15, auto; |
105 } | 105 } |
106 | 106 |
107 .gallery[tools] .image-container[cursor='ne-resize'], | 107 .gallery[tools] .image-container[cursor='ne-resize'], |
108 .gallery[tools] .image-container[cursor='sw-resize'] { | 108 .gallery[tools] .image-container[cursor='sw-resize'] { |
109 cursor: -webkit-image-set( | 109 cursor: -webkit-image-set( |
110 url('../images/gallery/cursor_swne.png') 1x, | 110 url('../images/100/cursor_swne.png') 1x, |
111 url('../images/gallery/2x/cursor_swne.png') 2x) 15 15, auto; | 111 url('../images/200/cursor_swne.png') 2x) 15 15, auto; |
112 } | 112 } |
113 | 113 |
114 .gallery .image-container > .image { | 114 .gallery .image-container > .image { |
115 pointer-events: none; | 115 pointer-events: none; |
116 position: absolute; | 116 position: absolute; |
117 /* Duration and timing function are set in Javascript. */ | 117 /* Duration and timing function are set in Javascript. */ |
118 transition-property: -webkit-transform, opacity; | 118 transition-property: -webkit-transform, opacity; |
119 } | 119 } |
120 | 120 |
121 .gallery .image-container > .image[fade] { | 121 .gallery .image-container > .image[fade] { |
(...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
250 .gallery[tools] .arrow-box[active] .arrow div { | 250 .gallery[tools] .arrow-box[active] .arrow div { |
251 opacity: 0.25; | 251 opacity: 0.25; |
252 } | 252 } |
253 | 253 |
254 .gallery[tools] .arrow-box[active] .arrow div:hover { | 254 .gallery[tools] .arrow-box[active] .arrow div:hover { |
255 opacity: 1; | 255 opacity: 1; |
256 } | 256 } |
257 | 257 |
258 .gallery .arrow.left div { | 258 .gallery .arrow.left div { |
259 background-image: -webkit-image-set( | 259 background-image: -webkit-image-set( |
260 url('../images/gallery/arrow_left.png') 1x, | 260 url('../images/100/arrow_left.png') 1x, |
261 url('../images/gallery/2x/arrow_left.png') 2x); | 261 url('../images/200/arrow_left.png') 2x); |
262 } | 262 } |
263 | 263 |
264 .gallery .arrow.right div { | 264 .gallery .arrow.right div { |
265 background-image: -webkit-image-set( | 265 background-image: -webkit-image-set( |
266 url('../images/gallery/arrow_right.png') 1x, | 266 url('../images/100/arrow_right.png') 1x, |
267 url('../images/gallery/2x/arrow_right.png') 2x); | 267 url('../images/200/arrow_right.png') 2x); |
268 } | 268 } |
269 | 269 |
270 /* Special behavior on mouse drag. | 270 /* Special behavior on mouse drag. |
271 Redundant .gallery attributes included to make the rules more specific */ | 271 Redundant .gallery attributes included to make the rules more specific */ |
272 | 272 |
273 /* Everything but the image container should become mouse-transparent */ | 273 /* Everything but the image container should become mouse-transparent */ |
274 .gallery[tools][editing][mousedrag] * { | 274 .gallery[tools][editing][mousedrag] * { |
275 pointer-events: none; | 275 pointer-events: none; |
276 } | 276 } |
277 | 277 |
(...skipping 337 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
615 .gallery .header button[pressed], | 615 .gallery .header button[pressed], |
616 .gallery .toolbar button[pressed], | 616 .gallery .toolbar button[pressed], |
617 .gallery .header button[pressed]:hover, | 617 .gallery .header button[pressed]:hover, |
618 .gallery .toolbar button[pressed]:hover { | 618 .gallery .toolbar button[pressed]:hover { |
619 background-color: rgba(240, 240, 240, 1); | 619 background-color: rgba(240, 240, 240, 1); |
620 color: black; | 620 color: black; |
621 } | 621 } |
622 | 622 |
623 .gallery > .toolbar button.autofix { | 623 .gallery > .toolbar button.autofix { |
624 background-image: -webkit-image-set( | 624 background-image: -webkit-image-set( |
625 url('../images/gallery/icon_autofix.png') 1x, | 625 url('../images/100/icon_autofix.png') 1x, |
626 url('../images/gallery/2x/icon_autofix.png') 2x); | 626 url('../images/200/icon_autofix.png') 2x); |
627 } | 627 } |
628 | 628 |
629 .gallery > .toolbar button.autofix:active, | 629 .gallery > .toolbar button.autofix:active, |
630 .gallery > .toolbar button.autofix[pressed] { | 630 .gallery > .toolbar button.autofix[pressed] { |
631 background-image: -webkit-image-set( | 631 background-image: -webkit-image-set( |
632 url('../images/gallery/icon_autofix_selected.png') 1x, | 632 url('../images/100/icon_autofix_selected.png') 1x, |
633 url('../images/gallery/2x/icon_autofix_selected.png') 2x); | 633 url('../images/200/icon_autofix_selected.png') 2x); |
634 } | 634 } |
635 | 635 |
636 .gallery > .toolbar button.crop { | 636 .gallery > .toolbar button.crop { |
637 background-image: -webkit-image-set( | 637 background-image: -webkit-image-set( |
638 url('../images/gallery/icon_crop.png') 1x, | 638 url('../images/100/icon_crop.png') 1x, |
639 url('../images/gallery/2x/icon_crop.png') 2x); | 639 url('../images/200/icon_crop.png') 2x); |
640 } | 640 } |
641 | 641 |
642 .gallery > .toolbar button.crop:active, | 642 .gallery > .toolbar button.crop:active, |
643 .gallery > .toolbar button.crop[pressed] { | 643 .gallery > .toolbar button.crop[pressed] { |
644 background-image: -webkit-image-set( | 644 background-image: -webkit-image-set( |
645 url('../images/gallery/icon_crop_selected.png') 1x, | 645 url('../images/100/icon_crop_selected.png') 1x, |
646 url('../images/gallery/2x/icon_crop_selected.png') 2x); | 646 url('../images/200/icon_crop_selected.png') 2x); |
647 } | 647 } |
648 | 648 |
649 .gallery > .toolbar button.exposure { | 649 .gallery > .toolbar button.exposure { |
650 background-image: -webkit-image-set( | 650 background-image: -webkit-image-set( |
651 url('../images/gallery/icon_brightness.png') 1x, | 651 url('../images/100/icon_brightness.png') 1x, |
652 url('../images/gallery/2x/icon_brightness.png') 2x); | 652 url('../images/200/icon_brightness.png') 2x); |
653 } | 653 } |
654 | 654 |
655 .gallery > .toolbar button.exposure:active, | 655 .gallery > .toolbar button.exposure:active, |
656 .gallery > .toolbar button.exposure[pressed] { | 656 .gallery > .toolbar button.exposure[pressed] { |
657 background-image: -webkit-image-set( | 657 background-image: -webkit-image-set( |
658 url('../images/gallery/icon_brightness_selected.png') 1x, | 658 url('../images/100/icon_brightness_selected.png') 1x, |
659 url('../images/gallery/2x/icon_brightness_selected.png') 2x); | 659 url('../images/200/icon_brightness_selected.png') 2x); |
660 } | 660 } |
661 | 661 |
662 .gallery > .toolbar button.rotate_right { | 662 .gallery > .toolbar button.rotate_right { |
663 background-image: -webkit-image-set( | 663 background-image: -webkit-image-set( |
664 url('../images/gallery/icon_rotate.png') 1x, | 664 url('../images/100/icon_rotate.png') 1x, |
665 url('../images/gallery/2x/icon_rotate.png') 2x); | 665 url('../images/200/icon_rotate.png') 2x); |
666 } | 666 } |
667 | 667 |
668 .gallery > .toolbar button.rotate_right:active, | 668 .gallery > .toolbar button.rotate_right:active, |
669 .gallery > .toolbar button.rotate_right[pressed] { | 669 .gallery > .toolbar button.rotate_right[pressed] { |
670 background-image: -webkit-image-set( | 670 background-image: -webkit-image-set( |
671 url('../images/gallery/icon_rotate_selected.png') 1x, | 671 url('../images/100/icon_rotate_selected.png') 1x, |
672 url('../images/gallery/2x/icon_rotate_selected.png') 2x); | 672 url('../images/200/icon_rotate_selected.png') 2x); |
673 } | 673 } |
674 | 674 |
675 .gallery > .toolbar button.rotate_left { | 675 .gallery > .toolbar button.rotate_left { |
676 background-image: -webkit-image-set( | 676 background-image: -webkit-image-set( |
677 url('../images/gallery/icon_rotate_left.png') 1x, | 677 url('../images/100/icon_rotate_left.png') 1x, |
678 url('../images/gallery/2x/icon_rotate_left.png') 2x); | 678 url('../images/200/icon_rotate_left.png') 2x); |
679 } | 679 } |
680 | 680 |
681 .gallery > .toolbar button.rotate_left:active, | 681 .gallery > .toolbar button.rotate_left:active, |
682 .gallery > .toolbar button.rotate_left[pressed] { | 682 .gallery > .toolbar button.rotate_left[pressed] { |
683 background-image: -webkit-image-set( | 683 background-image: -webkit-image-set( |
684 url('../images/gallery/icon_rotate_left_selected.png') 1x, | 684 url('../images/100/icon_rotate_left_selected.png') 1x, |
685 url('../images/gallery/2x/icon_rotate_left_selected.png') 2x); | 685 url('../images/200/icon_rotate_left_selected.png') 2x); |
686 } | 686 } |
687 | 687 |
688 .gallery > .toolbar button.undo { | 688 .gallery > .toolbar button.undo { |
689 background-image: -webkit-image-set( | 689 background-image: -webkit-image-set( |
690 url('../images/gallery/icon_undo.png') 1x, | 690 url('../images/100/icon_undo.png') 1x, |
691 url('../images/gallery/2x/icon_undo.png') 2x); | 691 url('../images/200/icon_undo.png') 2x); |
692 } | 692 } |
693 | 693 |
694 .gallery > .toolbar button.undo:active, | 694 .gallery > .toolbar button.undo:active, |
695 .gallery > .toolbar button.undo[pressed] { | 695 .gallery > .toolbar button.undo[pressed] { |
696 background-image: -webkit-image-set( | 696 background-image: -webkit-image-set( |
697 url('../images/gallery/icon_undo_selected.png') 1x, | 697 url('../images/100/icon_undo_selected.png') 1x, |
698 url('../images/gallery/2x/icon_undo_selected.png') 2x); | 698 url('../images/200/icon_undo_selected.png') 2x); |
699 } | 699 } |
700 | 700 |
701 .gallery > .toolbar button.redo { | 701 .gallery > .toolbar button.redo { |
702 background-image: -webkit-image-set( | 702 background-image: -webkit-image-set( |
703 url('../images/gallery/icon_redo.png') 1x, | 703 url('../images/100/icon_redo.png') 1x, |
704 url('../images/gallery/2x/icon_redo.png') 2x); | 704 url('../images/200/icon_redo.png') 2x); |
705 position: absolute; /* Exclude from center-packing*/ | 705 position: absolute; /* Exclude from center-packing*/ |
706 } | 706 } |
707 | 707 |
708 .gallery > .toolbar button.redo:active, | 708 .gallery > .toolbar button.redo:active, |
709 .gallery > .toolbar button.redo[pressed] { | 709 .gallery > .toolbar button.redo[pressed] { |
710 background-image: -webkit-image-set( | 710 background-image: -webkit-image-set( |
711 url('../images/gallery/icon_redo_selected.png') 1x, | 711 url('../images/100/icon_redo_selected.png') 1x, |
712 url('../images/gallery/2x/icon_redo_selected.png') 2x); | 712 url('../images/200/icon_redo_selected.png') 2x); |
713 } | 713 } |
714 | 714 |
715 .gallery > .toolbar button[disabled], | 715 .gallery > .toolbar button[disabled], |
716 .gallery[tools][locked] > .toolbar button { | 716 .gallery[tools][locked] > .toolbar button { |
717 opacity: 0.5; | 717 opacity: 0.5; |
718 pointer-events: none; | 718 pointer-events: none; |
719 } | 719 } |
720 | 720 |
721 .gallery > .toolbar button[hidden] { | 721 .gallery > .toolbar button[hidden] { |
722 display: none; | 722 display: none; |
723 } | 723 } |
724 | 724 |
725 .gallery[mode='slide'] > .toolbar > button.mode { | 725 .gallery[mode='slide'] > .toolbar > button.mode { |
726 background-image: -webkit-image-set( | 726 background-image: -webkit-image-set( |
727 url('../images/gallery/icon_mosaic.png') 1x, | 727 url('../images/100/icon_mosaic.png') 1x, |
728 url('../images/gallery/2x/icon_mosaic.png') 2x); | 728 url('../images/200/icon_mosaic.png') 2x); |
729 } | 729 } |
730 | 730 |
731 .gallery[mode='slide'] > .toolbar > button.mode:active { | 731 .gallery[mode='slide'] > .toolbar > button.mode:active { |
732 background-image: -webkit-image-set( | 732 background-image: -webkit-image-set( |
733 url('../images/gallery/icon_mosaic_selected.png') 1x, | 733 url('../images/100/icon_mosaic_selected.png') 1x, |
734 url('../images/gallery/2x/icon_mosaic_selected.png') 2x); | 734 url('../images/200/icon_mosaic_selected.png') 2x); |
735 } | 735 } |
736 | 736 |
737 .gallery[mode='mosaic'] > .toolbar > button.mode { | 737 .gallery[mode='mosaic'] > .toolbar > button.mode { |
738 background-image: -webkit-image-set( | 738 background-image: -webkit-image-set( |
739 url('../images/gallery/icon_1up.png') 1x, | 739 url('../images/100/icon_1up.png') 1x, |
740 url('../images/gallery/2x/icon_1up.png') 2x); | 740 url('../images/200/icon_1up.png') 2x); |
741 } | 741 } |
742 | 742 |
743 .gallery[mode='mosaic'] > .toolbar > button.mode:active { | 743 .gallery[mode='mosaic'] > .toolbar > button.mode:active { |
744 background-image: -webkit-image-set( | 744 background-image: -webkit-image-set( |
745 url('../images/gallery/icon_1up_selected.png') 1x, | 745 url('../images/100/icon_1up_selected.png') 1x, |
746 url('../images/gallery/2x/icon_1up_selected.png') 2x); | 746 url('../images/200/icon_1up_selected.png') 2x); |
747 } | 747 } |
748 | 748 |
749 .gallery > .toolbar > button.slideshow { | 749 .gallery > .toolbar > button.slideshow { |
750 background-image: -webkit-image-set( | 750 background-image: -webkit-image-set( |
751 url('../images/gallery/icon_slideshow.png') 1x, | 751 url('../images/100/icon_slideshow.png') 1x, |
752 url('../images/gallery/2x/icon_slideshow.png') 2x); | 752 url('../images/200/icon_slideshow.png') 2x); |
753 } | 753 } |
754 | 754 |
755 .gallery > .toolbar > button.slideshow:active, | 755 .gallery > .toolbar > button.slideshow:active, |
756 .gallery > .toolbar > button.slideshow[pressed] { | 756 .gallery > .toolbar > button.slideshow[pressed] { |
757 background-image: -webkit-image-set( | 757 background-image: -webkit-image-set( |
758 url('../images/gallery/icon_slideshow_selected.png') 1x, | 758 url('../images/100/icon_slideshow_selected.png') 1x, |
759 url('../images/gallery/2x/icon_slideshow_selected.png') 2x); | 759 url('../images/200/icon_slideshow_selected.png') 2x); |
760 } | 760 } |
761 | 761 |
762 .gallery > .toolbar > button.delete { | 762 .gallery > .toolbar > button.delete { |
763 background-image: -webkit-image-set( | 763 background-image: -webkit-image-set( |
764 url('../images/gallery/icon_delete.png') 1x, | 764 url('../images/100/icon_delete.png') 1x, |
765 url('../images/gallery/2x/icon_delete.png') 2x); | 765 url('../images/200/icon_delete.png') 2x); |
766 } | 766 } |
767 | 767 |
768 .gallery > .toolbar > button.delete:active { | 768 .gallery > .toolbar > button.delete:active { |
769 background-image: -webkit-image-set( | 769 background-image: -webkit-image-set( |
770 url('../images/gallery/icon_delete_selected.png') 1x, | 770 url('../images/100/icon_delete_selected.png') 1x, |
771 url('../images/gallery/2x/icon_delete_selected.png') 2x); | 771 url('../images/200/icon_delete_selected.png') 2x); |
772 } | 772 } |
773 | 773 |
774 .gallery > .toolbar > button.edit { | 774 .gallery > .toolbar > button.edit { |
775 background-image: -webkit-image-set( | 775 background-image: -webkit-image-set( |
776 url('../images/gallery/icon_edit.png') 1x, | 776 url('../images/100/icon_edit.png') 1x, |
777 url('../images/gallery/2x/icon_edit.png') 2x); | 777 url('../images/200/icon_edit.png') 2x); |
778 } | 778 } |
779 | 779 |
780 .gallery > .toolbar > button.edit:active, | 780 .gallery > .toolbar > button.edit:active, |
781 .gallery > .toolbar > button.edit[pressed] { | 781 .gallery > .toolbar > button.edit[pressed] { |
782 background-image: -webkit-image-set( | 782 background-image: -webkit-image-set( |
783 url('../images/gallery/icon_edit_selected.png') 1x, | 783 url('../images/100/icon_edit_selected.png') 1x, |
784 url('../images/gallery/2x/icon_edit_selected.png') 2x); | 784 url('../images/200/icon_edit_selected.png') 2x); |
785 } | 785 } |
786 | 786 |
787 .gallery > .toolbar > button.print { | 787 .gallery > .toolbar > button.print { |
788 background-image: -webkit-image-set( | 788 background-image: -webkit-image-set( |
789 url('../images/gallery/icon_print.png') 1x, | 789 url('../images/100/icon_print.png') 1x, |
790 url('../images/gallery/2x/icon_print.png') 2x); | 790 url('../images/200/icon_print.png') 2x); |
791 } | 791 } |
792 | 792 |
793 .gallery > .toolbar > button.print:active, | 793 .gallery > .toolbar > button.print:active, |
794 .gallery > .toolbar > button.print[pressed] { | 794 .gallery > .toolbar > button.print[pressed] { |
795 background-image: -webkit-image-set( | 795 background-image: -webkit-image-set( |
796 url('../images/gallery/icon_print_selected.png') 1x, | 796 url('../images/100/icon_print_selected.png') 1x, |
797 url('../images/gallery/2x/icon_print_selected.png') 2x); | 797 url('../images/200/icon_print_selected.png') 2x); |
798 } | 798 } |
799 | 799 |
800 .gallery > .toolbar > button.share { | 800 .gallery > .toolbar > button.share { |
801 background-image: -webkit-image-set( | 801 background-image: -webkit-image-set( |
802 url('../images/gallery/icon_share.png') 1x, | 802 url('../images/100/icon_share.png') 1x, |
803 url('../images/gallery/2x/icon_share.png') 2x); | 803 url('../images/200/icon_share.png') 2x); |
804 } | 804 } |
805 | 805 |
806 .gallery > .toolbar > button.share:active, | 806 .gallery > .toolbar > button.share:active, |
807 .gallery > .toolbar > button.share[pressed] { | 807 .gallery > .toolbar > button.share[pressed] { |
808 background-image: -webkit-image-set( | 808 background-image: -webkit-image-set( |
809 url('../images/gallery/icon_share_selected.png') 1x, | 809 url('../images/100/icon_share_selected.png') 1x, |
810 url('../images/gallery/2x/icon_share_selected.png') 2x); | 810 url('../images/200/icon_share_selected.png') 2x); |
811 } | 811 } |
812 | 812 |
813 .gallery > .toolbar > button.share[disabled] { | 813 .gallery > .toolbar > button.share[disabled] { |
814 display: none; | 814 display: none; |
815 } | 815 } |
816 | 816 |
817 /* Secondary toolbar (mode-specific tools) */ | 817 /* Secondary toolbar (mode-specific tools) */ |
818 | 818 |
819 .gallery .edit-modal { | 819 .gallery .edit-modal { |
820 -webkit-box-orient: horizontal; | 820 -webkit-box-orient: horizontal; |
(...skipping 27 matching lines...) Expand all Loading... |
848 background-position: 20px center; | 848 background-position: 20px center; |
849 background-repeat: no-repeat; | 849 background-repeat: no-repeat; |
850 display: -webkit-box; | 850 display: -webkit-box; |
851 height: 20px; | 851 height: 20px; |
852 padding-left: 50px; | 852 padding-left: 50px; |
853 padding-right: 10px; | 853 padding-right: 10px; |
854 } | 854 } |
855 | 855 |
856 .gallery .edit-modal .label.brightness { | 856 .gallery .edit-modal .label.brightness { |
857 background-image: -webkit-image-set( | 857 background-image: -webkit-image-set( |
858 url('../images/gallery/icon_brightness.png') 1x, | 858 url('../images/100/icon_brightness.png') 1x, |
859 url('../images/gallery/2x/icon_brightness.png') 2x); | 859 url('../images/200/icon_brightness.png') 2x); |
860 } | 860 } |
861 | 861 |
862 .gallery .edit-modal .label.contrast { | 862 .gallery .edit-modal .label.contrast { |
863 background-image: -webkit-image-set( | 863 background-image: -webkit-image-set( |
864 url('../images/gallery/icon_contrast.png') 1x, | 864 url('../images/100/icon_contrast.png') 1x, |
865 url('../images/gallery/2x/icon_contrast.png') 2x); | 865 url('../images/200/icon_contrast.png') 2x); |
866 height: 24px; | 866 height: 24px; |
867 margin-left: 15px; | 867 margin-left: 15px; |
868 } | 868 } |
869 | 869 |
870 .gallery .edit-modal .range { | 870 .gallery .edit-modal .range { |
871 -webkit-appearance: none !important; | 871 -webkit-appearance: none !important; |
872 height: 3px; | 872 height: 3px; |
873 margin-right: 10px; | 873 margin-right: 10px; |
874 margin-top: 1px; | 874 margin-top: 1px; |
875 } | 875 } |
876 | 876 |
877 .gallery .edit-modal .range::-webkit-slider-thumb { | 877 .gallery .edit-modal .range::-webkit-slider-thumb { |
878 -webkit-appearance: none; | 878 -webkit-appearance: none; |
879 background-image: -webkit-image-set( | 879 background-image: -webkit-image-set( |
880 url('../images/gallery/slider_thumb.png') 1x, | 880 url('../images/100/slider_thumb.png') 1x, |
881 url('../images/gallery/2x/slider_thumb.png') 2x); | 881 url('../images/200/slider_thumb.png') 2x); |
882 height: 29px; | 882 height: 29px; |
883 width: 16px; | 883 width: 16px; |
884 } | 884 } |
885 | 885 |
886 /* Crop frame */ | 886 /* Crop frame */ |
887 | 887 |
888 .gallery .crop-overlay { | 888 .gallery .crop-overlay { |
889 -webkit-box-orient: vertical; | 889 -webkit-box-orient: vertical; |
890 display: -webkit-box; | 890 display: -webkit-box; |
891 pointer-events: none; | 891 pointer-events: none; |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1017 opacity: 0; | 1017 opacity: 0; |
1018 top: 0; | 1018 top: 0; |
1019 } | 1019 } |
1020 | 1020 |
1021 .gallery .prompt-wrapper[pos=top] .prompt { | 1021 .gallery .prompt-wrapper[pos=top] .prompt { |
1022 padding-right: 10px; | 1022 padding-right: 10px; |
1023 } | 1023 } |
1024 | 1024 |
1025 .gallery .prompt .back-button { | 1025 .gallery .prompt .back-button { |
1026 background-image: -webkit-image-set( | 1026 background-image: -webkit-image-set( |
1027 url('../images/gallery/butterbar_close_button.png') 1x, | 1027 url('../images/100/butterbar_close_button.png') 1x, |
1028 url('../images/gallery/2x/butterbar_close_button.png') 2x); | 1028 url('../images/200/butterbar_close_button.png') 2x); |
1029 background-position: center center; | 1029 background-position: center center; |
1030 background-repeat: no-repeat; | 1030 background-repeat: no-repeat; |
1031 height: 16px; | 1031 height: 16px; |
1032 margin-left: 16px; | 1032 margin-left: 16px; |
1033 opacity: 0.65; | 1033 opacity: 0.65; |
1034 pointer-events: auto; | 1034 pointer-events: auto; |
1035 width: 16px; | 1035 width: 16px; |
1036 } | 1036 } |
1037 | 1037 |
1038 .gallery .prompt .back-button:hover { | 1038 .gallery .prompt .back-button:hover { |
(...skipping 12 matching lines...) Expand all Loading... |
1051 display: -webkit-box; | 1051 display: -webkit-box; |
1052 opacity: 1.0; | 1052 opacity: 1.0; |
1053 padding: 8px; | 1053 padding: 8px; |
1054 position: absolute; | 1054 position: absolute; |
1055 right: 10px; | 1055 right: 10px; |
1056 transition: opacity 500ms ease-in-out; | 1056 transition: opacity 500ms ease-in-out; |
1057 } | 1057 } |
1058 | 1058 |
1059 .gallery .share-menu .bubble-point { | 1059 .gallery .share-menu .bubble-point { |
1060 background-image: -webkit-image-set( | 1060 background-image: -webkit-image-set( |
1061 url('../images/gallery/bubble_point.png') 1x, | 1061 url('../images/100/bubble_point.png') 1x, |
1062 url('../images/gallery/2x/bubble_point.png') 2x); | 1062 url('../images/200/bubble_point.png') 2x); |
1063 background-position: center top; | 1063 background-position: center top; |
1064 background-repeat: no-repeat; | 1064 background-repeat: no-repeat; |
1065 bottom: -8px; | 1065 bottom: -8px; |
1066 height: 8px; | 1066 height: 8px; |
1067 padding: 0; | 1067 padding: 0; |
1068 position: absolute; | 1068 position: absolute; |
1069 right: 20px; | 1069 right: 20px; |
1070 width: 20px; | 1070 width: 20px; |
1071 } | 1071 } |
1072 | 1072 |
(...skipping 17 matching lines...) Expand all Loading... |
1090 } | 1090 } |
1091 | 1091 |
1092 .gallery .share-menu > div > img { | 1092 .gallery .share-menu > div > img { |
1093 display: block; | 1093 display: block; |
1094 margin-right: 5px; | 1094 margin-right: 5px; |
1095 } | 1095 } |
1096 | 1096 |
1097 /* Load spinner and error banner. */ | 1097 /* Load spinner and error banner. */ |
1098 | 1098 |
1099 .gallery .spinner { | 1099 .gallery .spinner { |
1100 background-image: url(../images/common/spinner.svg); | 1100 background-image: url(../images/100/common/spinner.svg); |
1101 background-size: 100%; | 1101 background-size: 100%; |
1102 height: 16px; | 1102 height: 16px; |
1103 left: 50%; | 1103 left: 50%; |
1104 margin-left: -8px; | 1104 margin-left: -8px; |
1105 margin-top: -8px; | 1105 margin-top: -8px; |
1106 position: absolute; | 1106 position: absolute; |
1107 top: 50%; | 1107 top: 50%; |
1108 width: 16px; | 1108 width: 16px; |
1109 } | 1109 } |
1110 | 1110 |
1111 .gallery:not([spinner]) .spinner { | 1111 .gallery:not([spinner]) .spinner { |
1112 display: none; | 1112 display: none; |
1113 } | 1113 } |
1114 | 1114 |
1115 .gallery .error-banner { | 1115 .gallery .error-banner { |
1116 -webkit-box-align: center; | 1116 -webkit-box-align: center; |
1117 -webkit-box-orient: horizontal; | 1117 -webkit-box-orient: horizontal; |
1118 -webkit-box-pack: center; | 1118 -webkit-box-pack: center; |
1119 background-color: rgba(24, 24, 24, 1); | 1119 background-color: rgba(24, 24, 24, 1); |
1120 background-image: -webkit-image-set( | 1120 background-image: -webkit-image-set( |
1121 url('../images/media/error.png') 1x, | 1121 url('../images/100/media/error.png') 1x, |
1122 url('../images/media/2x/error.png') 2x); | 1122 url('../images/100/media/2x/error.png') 2x); |
1123 background-position: 25px center; | 1123 background-position: 25px center; |
1124 background-repeat: no-repeat; | 1124 background-repeat: no-repeat; |
1125 color: white; | 1125 color: white; |
1126 display: -webkit-box; | 1126 display: -webkit-box; |
1127 height: 54px; | 1127 height: 54px; |
1128 padding-left: 70px; | 1128 padding-left: 70px; |
1129 padding-right: 35px; | 1129 padding-right: 35px; |
1130 } | 1130 } |
1131 | 1131 |
1132 .gallery:not([error]) .error-banner { | 1132 .gallery:not([error]) .error-banner { |
(...skipping 193 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1326 pointer-events: auto; | 1326 pointer-events: auto; |
1327 width: 68px; | 1327 width: 68px; |
1328 } | 1328 } |
1329 | 1329 |
1330 .slideshow-toolbar > div:hover { | 1330 .slideshow-toolbar > div:hover { |
1331 opacity: 1; | 1331 opacity: 1; |
1332 } | 1332 } |
1333 | 1333 |
1334 .slideshow-toolbar > .slideshow-play { | 1334 .slideshow-toolbar > .slideshow-play { |
1335 background-image: -webkit-image-set( | 1335 background-image: -webkit-image-set( |
1336 url('../images/gallery/slideshow-play.png') 1x, | 1336 url('../images/100/slideshow-play.png') 1x, |
1337 url('../images/gallery/2x/slideshow-play.png') 2x); | 1337 url('../images/200/slideshow-play.png') 2x); |
1338 margin-right: -2px; | 1338 margin-right: -2px; |
1339 } | 1339 } |
1340 | 1340 |
1341 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play { | 1341 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play { |
1342 background-image: -webkit-image-set( | 1342 background-image: -webkit-image-set( |
1343 url('../images/gallery/slideshow-pause.png') 1x, | 1343 url('../images/100/slideshow-pause.png') 1x, |
1344 url('../images/gallery/2x/slideshow-pause.png') 2x); | 1344 url('../images/200/slideshow-pause.png') 2x); |
1345 } | 1345 } |
1346 | 1346 |
1347 .slideshow-toolbar > .slideshow-end { | 1347 .slideshow-toolbar > .slideshow-end { |
1348 background-image: -webkit-image-set( | 1348 background-image: -webkit-image-set( |
1349 url('../images/gallery/slideshow-end.png') 1x, | 1349 url('../images/100/slideshow-end.png') 1x, |
1350 url('../images/gallery/2x/slideshow-end.png') 2x); | 1350 url('../images/200/slideshow-end.png') 2x); |
1351 margin-left: -2px; | 1351 margin-left: -2px; |
1352 } | 1352 } |
1353 | 1353 |
1354 .gallery > .header > button { | 1354 .gallery > .header > button { |
1355 -webkit-margin-start: 10px; | 1355 -webkit-margin-start: 10px; |
1356 cursor: default; | 1356 cursor: default; |
1357 height: 32px; | 1357 height: 32px; |
1358 min-width: 32px; | 1358 min-width: 32px; |
1359 width: 32px; | 1359 width: 32px; |
1360 } | 1360 } |
(...skipping 11 matching lines...) Expand all Loading... |
1372 url('chrome://resources/images/2x/apps/topbar_button_maximize.png') 2x) | 1372 url('chrome://resources/images/2x/apps/topbar_button_maximize.png') 2x) |
1373 center; | 1373 center; |
1374 } | 1374 } |
1375 | 1375 |
1376 .gallery > .header > .close-button { | 1376 .gallery > .header > .close-button { |
1377 background: -webkit-image-set( | 1377 background: -webkit-image-set( |
1378 url('chrome://resources/images/apps/topbar_button_close.png') 1x, | 1378 url('chrome://resources/images/apps/topbar_button_close.png') 1x, |
1379 url('chrome://resources/images/2x/apps/topbar_button_close.png') 2x) | 1379 url('chrome://resources/images/2x/apps/topbar_button_close.png') 2x) |
1380 center; | 1380 center; |
1381 } | 1381 } |
OLD | NEW |