| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. */ |
| 4 */ | |
| 5 | 4 |
| 6 body { | 5 body { |
| 7 -webkit-user-select: none; | 6 -webkit-user-select: none; |
| 8 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 7 font-family: Open Sans, Droid Sans Fallback, sans-serif; |
| 9 font-size: 84%; | 8 font-size: 84%; |
| 10 margin: 0; | 9 margin: 0; |
| 11 } | 10 } |
| 12 | 11 |
| 13 .gallery { | 12 .gallery { |
| 14 background: black; | 13 background: black; |
| 15 bottom: 0; | 14 bottom: 0; |
| 16 left: 0; | 15 left: 0; |
| 17 overflow: hidden; | 16 overflow: hidden; |
| 18 position: absolute; | 17 position: absolute; |
| (...skipping 20 matching lines...) Expand all Loading... |
| 39 height: 20px; | 38 height: 20px; |
| 40 opacity: 0; | 39 opacity: 0; |
| 41 width: 20px; | 40 width: 20px; |
| 42 } | 41 } |
| 43 | 42 |
| 44 .gallery[tools] > .close div { | 43 .gallery[tools] > .close div { |
| 45 opacity: 0.5; | 44 opacity: 0.5; |
| 46 } | 45 } |
| 47 | 46 |
| 48 .gallery[tools] > .close div:hover { | 47 .gallery[tools] > .close div:hover { |
| 49 background-color: rgba(81,81,81,1); | 48 background-color: rgba(81, 81, 81, 1); |
| 50 opacity: 0.7; | 49 opacity: 0.7; |
| 51 } | 50 } |
| 52 | 51 |
| 53 /* Image container and canvas elements */ | 52 /* Image container and canvas elements */ |
| 54 | 53 |
| 55 .gallery > .image-container { | 54 .gallery > .image-container { |
| 56 background-color: rgba(0,0,0,1); | 55 background-color: rgba(0, 0, 0, 1); |
| 57 cursor: none; /* Only visible when the toolbar is active */ | 56 cursor: none; /* Only visible when the toolbar is active */ |
| 58 height: 100%; | 57 height: 100%; |
| 59 position: absolute; | 58 position: absolute; |
| 60 width: 100%; | 59 width: 100%; |
| 61 } | 60 } |
| 62 | 61 |
| 63 .gallery[tools][locked] *, | 62 .gallery[tools][locked] *, |
| 64 .gallery[tools][locked] .image-container[cursor] { | 63 .gallery[tools][locked] .image-container[cursor] { |
| 65 cursor: wait; | 64 cursor: wait; |
| 66 } | 65 } |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 104 -webkit-transition-timing-function: ease-in-out; | 103 -webkit-transition-timing-function: ease-in-out; |
| 105 pointer-events: none; | 104 pointer-events: none; |
| 106 position: absolute; | 105 position: absolute; |
| 107 } | 106 } |
| 108 | 107 |
| 109 .gallery > .image-container > .image[fade] { | 108 .gallery > .image-container > .image[fade] { |
| 110 opacity: 0; | 109 opacity: 0; |
| 111 } | 110 } |
| 112 | 111 |
| 113 .gallery > .image-container > .image[fade='left'] { | 112 .gallery > .image-container > .image[fade='left'] { |
| 114 -webkit-transform: translate(-40px,0); | 113 -webkit-transform: translate(-40px, 0); |
| 115 } | 114 } |
| 116 | 115 |
| 117 .gallery > .image-container > .image[fade='right'] { | 116 .gallery > .image-container > .image[fade='right'] { |
| 118 -webkit-transform: translate(40px,0); | 117 -webkit-transform: translate(40px, 0); |
| 119 } | 118 } |
| 120 | 119 |
| 121 /* Toolbar */ | 120 /* Toolbar */ |
| 122 | 121 |
| 123 .gallery > .toolbar { | 122 .gallery > .toolbar { |
| 124 -webkit-box-align: stretch; | 123 -webkit-box-align: stretch; |
| 125 -webkit-box-orient: horizontal; | 124 -webkit-box-orient: horizontal; |
| 126 -webkit-box-pack: start; | 125 -webkit-box-pack: start; |
| 127 -webkit-transform: translate(0, 0); | 126 -webkit-transform: translate(0, 0); |
| 128 -webkit-transition-duration: 300ms; | 127 -webkit-transition-duration: 300ms; |
| 129 -webkit-transition-property: webkit-transform, opacity; | 128 -webkit-transition-property: webkit-transform, opacity; |
| 130 -webkit-transition-timing-function: ease; | 129 -webkit-transition-timing-function: ease; |
| 131 background-color: rgba(18,18,18,0.75); | 130 background-color: rgba(18, 18, 18, 0.75); |
| 132 border-top: 1px solid rgba(31,31,31,0.75); | 131 border-top: 1px solid rgba(31, 31, 31, 0.75); |
| 133 bottom: 0; | 132 bottom: 0; |
| 134 display: -webkit-box; | 133 display: -webkit-box; |
| 135 height: 55px; | 134 height: 55px; |
| 136 opacity: 0; | 135 opacity: 0; |
| 137 pointer-events: none; | 136 pointer-events: none; |
| 138 position: absolute; | 137 position: absolute; |
| 139 width: 100%; | 138 width: 100%; |
| 140 } | 139 } |
| 141 | 140 |
| 142 .gallery[tools] > .toolbar { | 141 .gallery[tools] > .toolbar { |
| (...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 240 | 239 |
| 241 .gallery .filename-spacer > .name, | 240 .gallery .filename-spacer > .name, |
| 242 .gallery[renaming] .filename-spacer > input { | 241 .gallery[renaming] .filename-spacer > input { |
| 243 opacity: 1; | 242 opacity: 1; |
| 244 z-index: 1; | 243 z-index: 1; |
| 245 } | 244 } |
| 246 | 245 |
| 247 .gallery .filename-spacer > * { | 246 .gallery .filename-spacer > * { |
| 248 background-color: transparent; | 247 background-color: transparent; |
| 249 color: white; | 248 color: white; |
| 250 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 249 font-family: Open Sans, Droid Sans Fallback, sans-serif; |
| 251 height: 21px; | 250 height: 21px; |
| 252 position: absolute; | 251 position: absolute; |
| 253 width: 260px; | 252 width: 260px; |
| 254 } | 253 } |
| 255 | 254 |
| 256 .gallery .filename-spacer > input, | 255 .gallery .filename-spacer > input, |
| 257 .gallery .filename-spacer > .name { | 256 .gallery .filename-spacer > .name { |
| 258 border: none; | 257 border: none; |
| 259 font-size: 120%; | 258 font-size: 120%; |
| 260 left: 10px; | 259 left: 10px; |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 337 | 336 |
| 338 .gallery[editing] .toolbar .ribbon { | 337 .gallery[editing] .toolbar .ribbon { |
| 339 opacity: 0; | 338 opacity: 0; |
| 340 } | 339 } |
| 341 | 340 |
| 342 .gallery .ribbon-image { | 341 .gallery .ribbon-image { |
| 343 -webkit-box-align: center; | 342 -webkit-box-align: center; |
| 344 -webkit-box-orient: horizontal; | 343 -webkit-box-orient: horizontal; |
| 345 -webkit-box-pack: center; | 344 -webkit-box-pack: center; |
| 346 -webkit-transition: margin-left 180ms linear; | 345 -webkit-transition: margin-left 180ms linear; |
| 347 border: 2px solid rgba(255,255,255,0); /* transparent white */ | 346 border: 2px solid rgba(255, 255, 255, 0); /* transparent white */ |
| 348 cursor: pointer; | 347 cursor: pointer; |
| 349 display: -webkit-box; | 348 display: -webkit-box; |
| 350 height: 47px; | 349 height: 47px; |
| 351 margin: 2px; | 350 margin: 2px; |
| 352 overflow: hidden; | 351 overflow: hidden; |
| 353 width: 47px; | 352 width: 47px; |
| 354 } | 353 } |
| 355 | 354 |
| 356 .gallery .ribbon-image[selected] { | 355 .gallery .ribbon-image[selected] { |
| 357 border: 2px solid rgba(255,233,168,1); | 356 border: 2px solid rgba(255, 233, 168, 1); |
| 358 } | 357 } |
| 359 | 358 |
| 360 .gallery .toolbar .ribbon.fade-left { | 359 .gallery .toolbar .ribbon.fade-left { |
| 361 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, | 360 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, |
| 362 rgba(0, 0, 0, 1) 40px); | 361 rgba(0, 0, 0, 1) 40px); |
| 363 } | 362 } |
| 364 | 363 |
| 365 .gallery .toolbar .ribbon.fade-right { | 364 .gallery .toolbar .ribbon.fade-right { |
| 366 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0, | 365 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0, |
| 367 rgba(0, 0, 0, 1) 40px); | 366 rgba(0, 0, 0, 1) 40px); |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 424 background-repeat: no-repeat; | 423 background-repeat: no-repeat; |
| 425 cursor: pointer; | 424 cursor: pointer; |
| 426 display: -webkit-box; | 425 display: -webkit-box; |
| 427 height: 40px; | 426 height: 40px; |
| 428 margin: 8px 0 7px 3px; | 427 margin: 8px 0 7px 3px; |
| 429 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ | 428 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ |
| 430 padding: 0 10px 0 35px; | 429 padding: 0 10px 0 35px; |
| 431 } | 430 } |
| 432 | 431 |
| 433 .gallery > .toolbar .button { | 432 .gallery > .toolbar .button { |
| 434 background-color: rgba(0,0,0,0); | 433 background-color: rgba(0, 0, 0, 0); |
| 435 color: white; | 434 color: white; |
| 436 } | 435 } |
| 437 | 436 |
| 438 .gallery > .toolbar .button:hover { | 437 .gallery > .toolbar .button:hover { |
| 439 background-color: rgba(31,31,31,1); | 438 background-color: rgba(31, 31, 31, 1); |
| 440 color: white; | 439 color: white; |
| 441 } | 440 } |
| 442 | 441 |
| 443 .gallery > .toolbar .button[pressed] { | 442 .gallery > .toolbar .button[pressed] { |
| 444 background-color: rgba(240,240,240,1); | 443 background-color: rgba(240, 240, 240, 1); |
| 445 color: black; | 444 color: black; |
| 446 } | 445 } |
| 447 | 446 |
| 448 .gallery > .toolbar .button[pressed]:hover { | 447 .gallery > .toolbar .button[pressed]:hover { |
| 449 background-color: rgba(240,240,240,1); | 448 background-color: rgba(240, 240, 240, 1); |
| 450 color: black; | 449 color: black; |
| 451 } | 450 } |
| 452 | 451 |
| 453 .gallery > .toolbar .button.autofix { | 452 .gallery > .toolbar .button.autofix { |
| 454 background-image: url(../images/gallery/icon_autofix.png); | 453 background-image: url(../images/gallery/icon_autofix.png); |
| 455 } | 454 } |
| 456 | 455 |
| 457 .gallery > .toolbar .button.autofix[pressed] { | 456 .gallery > .toolbar .button.autofix[pressed] { |
| 458 background-image: url(../images/gallery/icon_autofix_selected.png); | 457 background-image: url(../images/gallery/icon_autofix_selected.png); |
| 459 } | 458 } |
| (...skipping 29 matching lines...) Expand all Loading... |
| 489 .gallery > .toolbar .button.rotate_left[pressed] { | 488 .gallery > .toolbar .button.rotate_left[pressed] { |
| 490 background-image: url(../images/gallery/icon_rotate_left_selected.png); | 489 background-image: url(../images/gallery/icon_rotate_left_selected.png); |
| 491 } | 490 } |
| 492 | 491 |
| 493 .gallery > .toolbar .button.undo { | 492 .gallery > .toolbar .button.undo { |
| 494 background-image: url(../images/gallery/icon_undo.png); | 493 background-image: url(../images/gallery/icon_undo.png); |
| 495 } | 494 } |
| 496 | 495 |
| 497 .gallery > .toolbar .button.redo { | 496 .gallery > .toolbar .button.redo { |
| 498 background-image: url(../images/gallery/icon_redo.png); | 497 background-image: url(../images/gallery/icon_redo.png); |
| 499 position: absolute; /* Exclude from center-packing*/ | 498 position: absolute; /* Exclude from center-packing*/ |
| 500 } | 499 } |
| 501 | 500 |
| 502 .gallery > .toolbar .button[disabled] { | 501 .gallery > .toolbar .button[disabled] { |
| 503 opacity: 0.5; | 502 opacity: 0.5; |
| 504 pointer-events: none; | 503 pointer-events: none; |
| 505 } | 504 } |
| 506 | 505 |
| 507 .gallery > .toolbar .button[hidden] { | 506 .gallery > .toolbar .button[hidden] { |
| 508 display: none; | 507 display: none; |
| 509 } | 508 } |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 603 /* Crop frame */ | 602 /* Crop frame */ |
| 604 | 603 |
| 605 .gallery .crop-overlay { | 604 .gallery .crop-overlay { |
| 606 -webkit-box-orient: vertical; | 605 -webkit-box-orient: vertical; |
| 607 display: -webkit-box; | 606 display: -webkit-box; |
| 608 pointer-events: none; | 607 pointer-events: none; |
| 609 position: absolute; | 608 position: absolute; |
| 610 } | 609 } |
| 611 | 610 |
| 612 .gallery .crop-overlay .shadow { | 611 .gallery .crop-overlay .shadow { |
| 613 background-color: rgba(0,0,0,0.65); | 612 background-color: rgba(0, 0, 0, 0.65); |
| 614 } | 613 } |
| 615 | 614 |
| 616 .gallery .crop-overlay .middle-box { | 615 .gallery .crop-overlay .middle-box { |
| 617 -webkit-box-flex: 1; | 616 -webkit-box-flex: 1; |
| 618 -webkit-box-orient: horizontal; | 617 -webkit-box-orient: horizontal; |
| 619 display: -webkit-box; | 618 display: -webkit-box; |
| 620 } | 619 } |
| 621 | 620 |
| 622 .gallery .crop-frame { | 621 .gallery .crop-frame { |
| 623 -webkit-box-flex: 1; | 622 -webkit-box-flex: 1; |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 718 color: white; | 717 color: white; |
| 719 display: -webkit-box; | 718 display: -webkit-box; |
| 720 font-size: 120%; | 719 font-size: 120%; |
| 721 height: 40px; | 720 height: 40px; |
| 722 opacity: 0; | 721 opacity: 0; |
| 723 padding: 0 20px; | 722 padding: 0 20px; |
| 724 position: relative; | 723 position: relative; |
| 725 top: 5px; | 724 top: 5px; |
| 726 } | 725 } |
| 727 | 726 |
| 728 .gallery .prompt[state='fadein'], | 727 .gallery .prompt[state='fadein'] { |
| 728 opacity: 1; |
| 729 top: 0; |
| 730 } |
| 731 |
| 729 .gallery .prompt[state='fadeout'] { | 732 .gallery .prompt[state='fadeout'] { |
| 730 opacity: 0; | 733 opacity: 0; |
| 731 top: 0; | 734 top: 0; |
| 732 } | 735 } |
| 733 | 736 |
| 734 .gallery .prompt-wrapper[pos=top] .prompt { | 737 .gallery .prompt-wrapper[pos=top] .prompt { |
| 735 padding-right: 10px; | 738 padding-right: 10px; |
| 736 } | 739 } |
| 737 | 740 |
| 738 .gallery .prompt .close { | 741 .gallery .prompt .close { |
| 739 background-image: url(../images/gallery/butterbar_close_x.png); | 742 background-image: url(../images/gallery/butterbar_close_x.png); |
| 740 background-position: center center; | 743 background-position: center center; |
| 741 background-repeat: no-repeat; | 744 background-repeat: no-repeat; |
| 742 height: 16px; | 745 height: 16px; |
| 743 margin-left: 16px; | 746 margin-left: 16px; |
| 744 opacity: 0.65; | 747 opacity: 0.65; |
| 745 pointer-events: auto; | 748 pointer-events: auto; |
| 746 width: 16px; | 749 width: 16px; |
| 747 } | 750 } |
| 748 | 751 |
| 749 .gallery .prompt .close:hover { | 752 .gallery .prompt .close:hover { |
| 750 background-color: rgba(81,81,81,1); | 753 background-color: rgba(81, 81, 81, 1); |
| 751 opacity: 1.0; | 754 opacity: 1.0; |
| 752 } | 755 } |
| 753 | 756 |
| 754 .gallery .share-menu { | 757 .gallery .share-menu { |
| 755 -webkit-border-radius: 1px; | 758 -webkit-border-radius: 1px; |
| 756 -webkit-box-align: stretch; | 759 -webkit-box-align: stretch; |
| 757 -webkit-box-orient: vertical; | 760 -webkit-box-orient: vertical; |
| 758 -webkit-box-pack: start; | 761 -webkit-box-pack: start; |
| 759 -webkit-transition: opacity 500ms ease-in-out; | 762 -webkit-transition: opacity 500ms ease-in-out; |
| 760 background-color: white; | 763 background-color: white; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 774 bottom: -8px; | 777 bottom: -8px; |
| 775 height: 8px; | 778 height: 8px; |
| 776 padding: 0; | 779 padding: 0; |
| 777 position: absolute; | 780 position: absolute; |
| 778 right: 20px; | 781 right: 20px; |
| 779 width: 20px; | 782 width: 20px; |
| 780 } | 783 } |
| 781 | 784 |
| 782 .gallery .share-menu[hidden] { | 785 .gallery .share-menu[hidden] { |
| 783 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ | 786 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ |
| 784 opacity: 0.0; | 787 opacity: 0; |
| 785 pointer-events: none; | 788 pointer-events: none; |
| 786 } | 789 } |
| 787 | 790 |
| 788 .gallery .share-menu > div { | 791 .gallery .share-menu > div { |
| 789 -webkit-box-align: center; | 792 -webkit-box-align: center; |
| 790 -webkit-box-pack: start; | 793 -webkit-box-pack: start; |
| 791 background-color: rgba(0,0,0,0); | 794 background-color: rgba(0, 0, 0, 0); |
| 792 cursor: pointer; | 795 cursor: pointer; |
| 793 display: -webkit-box; | 796 display: -webkit-box; |
| 794 padding: 5px; | 797 padding: 5px; |
| 795 } | 798 } |
| 796 | 799 |
| 797 .gallery .share-menu > div:hover { | 800 .gallery .share-menu > div:hover { |
| 798 background-color: rgba(240,240,240,1); | 801 background-color: rgba(240, 240, 240, 1); |
| 799 } | 802 } |
| 800 | 803 |
| 801 .gallery .share-menu > div > img { | 804 .gallery .share-menu > div > img { |
| 802 display: block; | 805 display: block; |
| 803 margin-right: 5px; | 806 margin-right: 5px; |
| 804 } | 807 } |
| 805 | 808 |
| 806 /* Load spinner and error banner */ | 809 /* Load spinner and error banner */ |
| 807 | 810 |
| 808 .gallery .spinner { | 811 .gallery .spinner { |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 846 .gallery video { | 849 .gallery video { |
| 847 height: 100%; | 850 height: 100%; |
| 848 position: absolute; | 851 position: absolute; |
| 849 width: 100%; | 852 width: 100%; |
| 850 } | 853 } |
| 851 | 854 |
| 852 .gallery .video-controls-spacer { | 855 .gallery .video-controls-spacer { |
| 853 -webkit-box-align: center; | 856 -webkit-box-align: center; |
| 854 -webkit-box-orient: horizontal; | 857 -webkit-box-orient: horizontal; |
| 855 -webkit-box-pack: center; | 858 -webkit-box-pack: center; |
| 856 bottom: 60px; /* Just above the toolbar */ | 859 bottom: 60px; /* Just above the toolbar */ |
| 857 display: -webkit-box; | 860 display: -webkit-box; |
| 858 height: 30px; | 861 height: 30px; |
| 859 left: 0; | 862 left: 0; |
| 860 opacity: 0; | 863 opacity: 0; |
| 861 pointer-events: none; | 864 pointer-events: none; |
| 862 position: absolute; | 865 position: absolute; |
| 863 right: 0; | 866 right: 0; |
| 864 } | 867 } |
| 865 | 868 |
| 866 .gallery[video] .video-controls-spacer { | 869 .gallery[video] .video-controls-spacer { |
| (...skipping 13 matching lines...) Expand all Loading... |
| 880 | 883 |
| 881 .gallery[video] .video-controls { | 884 .gallery[video] .video-controls { |
| 882 -webkit-box-flex: 1; | 885 -webkit-box-flex: 1; |
| 883 display: -webkit-box; | 886 display: -webkit-box; |
| 884 } | 887 } |
| 885 | 888 |
| 886 .gallery[video] > .toolbar .button.edit, | 889 .gallery[video] > .toolbar .button.edit, |
| 887 .gallery[video] > .toolbar .edit-bar { | 890 .gallery[video] > .toolbar .edit-bar { |
| 888 display: none; | 891 display: none; |
| 889 } | 892 } |
| OLD | NEW |