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

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

Issue 9958101: [WebUI] Fix rest of CSS style nits in misc. dirs so I can turn on CSS checker. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: rebase 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 /* 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
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
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
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
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
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
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
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
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
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
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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698