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
3 * found in the LICENSE file. */
6 -webkit-user-select: none
;
7 font-family: Noto Sans UI
, sans-serif
;
12 input:focus
, button:focus
{
13 outline: 1px solid rgb
(77, 144, 254);
16 input
[type
='checkbox'] {
19 background: -webkit-image-set
(
20 url
(../../file_manager/foreground/images/common/checkbox_white_unchecked.png) 1x,
21 url
(../../file_manager/foreground/images/common/2x/checkbox_white_unchecked.png) 2x)
23 -webkit-appearance: none
;
24 display: inline-block
;
25 margin: 1px 6px 1px 1px;
26 vertical-align: text-bottom
;
29 input
[type
='checkbox']:checked
{
30 background: -webkit-image-set
(
31 url
(../../file_manager/foreground/images/common/checkbox_white_checked.png) 1x,
32 url
(../../file_manager/foreground/images/common/2x/checkbox_white_checked.png) 2x)
46 /* Common background for both mosaic and slide mode. */
48 background-color: black
;
51 /* Image container and canvas elements */
53 .gallery .image-container {
54 cursor: none
; /* Only visible when the toolbar is active */
60 .gallery[tools] .image-container[cursor='default'] {
64 .gallery[tools] .image-container[cursor='move'] {
65 cursor: -webkit-image-set
(
66 url
(../images/100/cursor_move.png) 1x,
67 url
(../images/200/cursor_move.png) 2x) 15 15, auto
;
70 .gallery[tools] .image-container[cursor='crop'] {
71 cursor: -webkit-image-set
(
72 url
(../images/100/cursor_crop.png) 1x,
73 url
(../images/200/cursor_crop.png) 2x) 15 15, auto
;
76 .gallery
[tools
] .image-container
[cursor
='n-resize'],
77 .gallery[tools] .image-container[cursor='s-resize'] {
78 cursor: -webkit-image-set
(
79 url
(../images/100/cursor_updown.png) 1x,
80 url
(../images/200/cursor_updown.png) 2x) 15 15, auto
;
83 .gallery
[tools
] .image-container
[cursor
='e-resize'],
84 .gallery[tools] .image-container[cursor='w-resize'] {
85 cursor: -webkit-image-set
(
86 url
(../images/100/cursor_leftright.png) 1x,
87 url
(../images/200/cursor_leftright.png) 2x) 15 15, auto
;
90 .gallery
[tools
] .image-container
[cursor
='nw-resize'],
91 .gallery[tools] .image-container[cursor='se-resize'] {
92 cursor: -webkit-image-set
(
93 url
(../images/100/cursor_nwse.png) 1x,
94 url
(../images/200/cursor_nwse.png) 2x) 15 15, auto
;
97 .gallery
[tools
] .image-container
[cursor
='ne-resize'],
98 .gallery[tools] .image-container[cursor='sw-resize'] {
99 cursor: -webkit-image-set
(
100 url
(../images/100/cursor_swne.png) 1x,
101 url
(../images/200/cursor_swne.png) 2x) 15 15, auto
;
104 .gallery .image-container > .image {
105 pointer-events: none
;
107 /* Duration and timing function are set in Javascript. */
108 transition-property: -webkit-transform
, opacity
;
111 .gallery .image-container > .image[fade] {
115 /* Full resolution image is invisible unless printing. */
116 .gallery .image-container > canvas.fullres {
121 /* Do not print anything but the image content. */
122 .gallery > :not(.content) {
123 display: none
!important
;
126 /* Center the printed image. */
127 .gallery .image-container {
128 -webkit-box-align: center
;
129 -webkit-box-orient: horizontal
;
130 -webkit-box-pack: center
;
131 display: -webkit-box
;
134 /* Do not print the screen resolution image. */
135 .gallery .image-container > canvas.image {
136 display: none
!important
;
139 /* Print the full resolution image instead. */
140 .gallery .image-container > canvas.fullres {
141 display: block
!important
;
150 .gallery > .toolbar {
151 -webkit-box-align: stretch
;
152 -webkit-box-orient: horizontal
;
153 -webkit-box-pack: start
;
154 background-color: rgba
(30, 30, 30, 0.8);
159 pointer-events: none
;
162 transition: opacity
300ms ease
;
166 -webkit-app-region: drag
;
167 -webkit-box-align: center
;
168 -webkit-box-pack: end
;
169 border-bottom: 1px solid rgba
(50, 50, 50, 0.8);
170 display: -webkit-box
;
175 .gallery .header button {
176 -webkit-app-region: no-drag
;
179 .gallery > .toolbar {
180 border-top: 1px solid rgba
(50, 50, 50, 0.8);
186 .gallery
[tools
]:not
([slideshow
]) > .header
,
187 .gallery[tools]:not([slideshow]) > .toolbar {
189 pointer-events: auto
;
192 /* Hide immediately when entering the slideshow. */
193 .gallery[tools][slideshow] > .toolbar {
194 transition-duration: 0;
197 .gallery[tools][locked] > .toolbar {
198 pointer-events: none
;
201 .gallery .arrow-box {
202 -webkit-box-align: center
;
203 -webkit-box-orient: horizontal
;
204 -webkit-box-pack: center
;
205 display: -webkit-box
;
207 pointer-events: none
;
213 .gallery .arrow-box .arrow {
215 pointer-events: none
;
218 .gallery .arrow-box .arrow-spacer {
220 pointer-events: none
;
223 .gallery[tools] .arrow-box[active] .arrow {
226 pointer-events: auto
;
229 /* The arrow icons are in nested divs so that their opacity can be manipulated
230 * independently from their parent (which can be dimmed when the crop frame
232 .gallery .arrow div {
233 background-position: center center
;
234 background-repeat: no-repeat
;
240 .gallery[tools] .arrow-box[active] .arrow div {
244 .gallery[tools] .arrow-box[active] .arrow div:hover {
248 .gallery .arrow.left div {
249 background-image: -webkit-image-set
(
250 url
(../images/100/arrow_left.png) 1x,
251 url
(../images/200/arrow_left.png) 2x);
254 .gallery .arrow.right div {
255 background-image: -webkit-image-set
(
256 url
(../images/100/arrow_right.png) 1x,
257 url
(../images/200/arrow_right.png) 2x);
260 /* Special behavior on mouse drag.
261 Redundant .gallery attributes included to make the rules more specific */
263 /* Everything but the image container should become mouse-transparent */
264 .gallery[tools][editing][mousedrag] * {
265 pointer-events: none
;
268 .gallery[tools][editing][mousedrag] .image-container {
269 pointer-events: auto
;
272 /* The editor marks elements with 'dimmed' attribute to get them out of the way
274 .gallery
[tools
][editing
] [dimmed
],
275 .gallery[tools][editing] [dimmed] * {
276 pointer-events: none
;
279 .gallery[tools][editing] [dimmed] {
285 .gallery .filename-spacer {
294 .gallery .filename-spacer > * {
295 background-color: transparent
;
298 transition: visibility
0 linear
180ms, all
180ms linear
;
302 .gallery .filename-spacer * {
306 .gallery .filename-spacer .namebox {
311 .gallery[editing] .filename-spacer .namebox {
316 .gallery .filename-spacer .namebox {
317 background-color: transparent
;
319 box-sizing: border-box
;
327 text-overflow: ellipsis
;
331 .gallery .filename-spacer .namebox[disabled] {
332 -webkit-user-select: none
;
336 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
337 background-color: rgba
(48, 48, 48, 1.0);
340 .gallery .filename-spacer .namebox:focus {
341 background-color: white
;
346 .gallery .filename-spacer .options {
347 -webkit-box-align: center
;
348 -webkit-box-orient: horizontal
;
349 -webkit-box-pack: start
;
350 display: -webkit-box
;
357 .gallery[editing] .filename-spacer .options {
364 .gallery
.filename-spacer
.saved
,
365 .gallery .filename-spacer .overwrite-original {
371 pointer-events: none
;
372 transition: all linear
120ms;
375 .gallery[editing] .filename-spacer .saved {
380 .gallery
[editing
] .filename-spacer
.overwrite-original
,
381 .gallery[editing] .filename-spacer .overwrite-original > * {
384 pointer-events: auto
;
387 .gallery[editing] .options[saved] .overwrite-original {
391 .gallery
[editing
] .options
[saved
] .overwrite-original
,
392 .gallery[editing] .options[saved] .overwrite-original > * {
394 pointer-events: none
;
397 .gallery .filename-spacer .saved[highlighted] {
398 -webkit-transform: scaleX
(1.1) scaleY
(1.1) rotate
(0);
404 .gallery .toolbar .bubble {
412 .gallery:not([editing]) .toolbar .bubble {
418 .gallery .middle-spacer {
422 flex-direction: column
;
425 /* Toolbar buttons */
427 .gallery .button-spacer {
430 justify-content: flex-end
;
431 width: 252px; /* 42px button x 6 */
436 .gallery .ribbon-spacer {
438 margin-bottom: -55px;
441 .gallery .toolbar .ribbon {
444 transition: opacity
180ms linear
, visibility
0 linear
;
448 .gallery[editing] .toolbar .ribbon {
450 transition-delay: 0, 180ms;
454 .gallery .ribbon-image {
455 border: 2px solid rgba
(255, 255, 255, 0); /* transparent white */
457 display: inline-block
;
461 transition: all
180ms linear
;
465 .ribbon-image[vanishing='smooth'] {
466 border-left-width: 0;
467 border-right-width: 0;
473 .gallery .ribbon-image[selected] {
474 border: 2px solid rgb
(77, 144, 254);
477 .gallery .toolbar .ribbon.fade-left {
478 -webkit-mask-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0,
479 rgba
(0, 0, 0, 1) 40px);
482 .gallery .toolbar .ribbon.fade-right {
483 -webkit-mask-image: linear-gradient
(to left
, rgba
(0, 0, 0, 0) 0,
484 rgba
(0, 0, 0, 1) 40px);
487 .gallery .toolbar .ribbon.fade-left.fade-right {
488 -webkit-mask-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0,
489 rgba
(0, 0, 0, 1) 40px,
490 rgba
(0, 0, 0, 1) 230px,
491 rgba
(0, 0, 0, 0) 100%);
494 .gallery .image-wrapper {
495 background-size: 45px 45px;
496 border: 1px solid rgba
(0, 0, 0, 0); /* transparent black */
503 .gallery .image-wrapper > img {
507 .gallery .image-wrapper > img:not(.cached) {
508 -webkit-animation: fadeIn
500ms ease-in
;
513 .gallery .edit-bar-spacer {
514 -webkit-box-align: center
;
515 -webkit-box-orient: horizontal
;
516 -webkit-box-pack: center
;
517 display: -webkit-box
;
522 transition: opacity
180ms linear
, visibility
0 linear
180ms;
524 margin-bottom: -55px;
527 .gallery .toolbar .edit-main {
528 -webkit-box-orient: horizontal
;
529 -webkit-box-pack: center
;
531 display: -webkit-box
;
536 .gallery[editing] .edit-bar-spacer {
538 pointer-events: auto
;
539 transition-delay: 100ms, 100ms;
543 .gallery
.header button
,
544 .gallery
.toolbar button
,
545 .gallery
.header button
[disabled
],
546 .gallery .toolbar button[disabled] {
547 background-color: rgba
(0, 0, 0, 0);
548 background-position: center
;
549 background-repeat: no-repeat
;
554 display: inline-block
;
556 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */
557 padding: 1px; /* Instead of a border. */
562 .gallery
.header button
,
563 .gallery .toolbar button {
566 min-width: 40px; /* Reset. */
570 .gallery .toolbar button:focus {
574 /* By default, labels are hidden. */
575 .gallery > .toolbar button span {
579 /* Show labels if there is enough space. */
580 @media (min-width: 1180px) {
582 .gallery
.edit-main button
,
583 .gallery .edit-main button[disabled] {
584 background-position: 5px center
;
586 min-width: 0; /* Reset. */
587 padding: 0 10px 0 35px;
591 .gallery > .toolbar button span {
597 .gallery
.header
button:hover
,
598 .gallery .toolbar button:hover {
599 background-color: rgba
(31, 31, 31, 1);
603 .gallery
.header
button:active
,
604 .gallery
.toolbar
button:active
,
605 .gallery
.header button
[pressed
],
606 .gallery
.toolbar button
[pressed
],
607 .gallery
.header button
[pressed
]:hover
,
608 .gallery .toolbar button[pressed]:hover {
609 background-color: rgba
(240, 240, 240, 1);
613 .gallery > .toolbar button.autofix {
614 background-image: -webkit-image-set
(
615 url
(../images/100/icon_autofix.png) 1x,
616 url
(../images/200/icon_autofix.png) 2x);
619 .gallery
> .toolbar button
.autofix:active
,
620 .gallery > .toolbar button.autofix[pressed] {
621 background-image: -webkit-image-set
(
622 url
(../images/100/icon_autofix_selected.png) 1x,
623 url
(../images/200/icon_autofix_selected.png) 2x);
626 .gallery > .toolbar button.crop {
627 background-image: -webkit-image-set
(
628 url
(../images/100/icon_crop.png) 1x,
629 url
(../images/200/icon_crop.png) 2x);
632 .gallery
> .toolbar button
.crop:active
,
633 .gallery > .toolbar button.crop[pressed] {
634 background-image: -webkit-image-set
(
635 url
(../images/100/icon_crop_selected.png) 1x,
636 url
(../images/200/icon_crop_selected.png) 2x);
639 .gallery > .toolbar button.exposure {
640 background-image: -webkit-image-set
(
641 url
(../images/100/icon_brightness.png) 1x,
642 url
(../images/200/icon_brightness.png) 2x);
645 .gallery
> .toolbar button
.exposure:active
,
646 .gallery > .toolbar button.exposure[pressed] {
647 background-image: -webkit-image-set
(
648 url
(../images/100/icon_brightness_selected.png) 1x,
649 url
(../images/200/icon_brightness_selected.png) 2x);
652 .gallery > .toolbar button.rotate_right {
653 background-image: -webkit-image-set
(
654 url
(../images/100/icon_rotate.png) 1x,
655 url
(../images/200/icon_rotate.png) 2x);
658 .gallery
> .toolbar button
.rotate_right:active
,
659 .gallery > .toolbar button.rotate_right[pressed] {
660 background-image: -webkit-image-set
(
661 url
(../images/100/icon_rotate_selected.png) 1x,
662 url
(../images/200/icon_rotate_selected.png) 2x);
665 .gallery > .toolbar button.rotate_left {
666 background-image: -webkit-image-set
(
667 url
(../images/100/icon_rotate_left.png) 1x,
668 url
(../images/200/icon_rotate_left.png) 2x);
671 .gallery
> .toolbar button
.rotate_left:active
,
672 .gallery > .toolbar button.rotate_left[pressed] {
673 background-image: -webkit-image-set
(
674 url
(../images/100/icon_rotate_left_selected.png) 1x,
675 url
(../images/200/icon_rotate_left_selected.png) 2x);
678 .gallery > .toolbar button.undo {
679 background-image: -webkit-image-set
(
680 url
(../images/100/icon_undo.png) 1x,
681 url
(../images/200/icon_undo.png) 2x);
684 .gallery
> .toolbar button
.undo:active
,
685 .gallery > .toolbar button.undo[pressed] {
686 background-image: -webkit-image-set
(
687 url
(../images/100/icon_undo_selected.png) 1x,
688 url
(../images/200/icon_undo_selected.png) 2x);
691 .gallery > .toolbar button.redo {
692 background-image: -webkit-image-set
(
693 url
(../images/100/icon_redo.png) 1x,
694 url
(../images/200/icon_redo.png) 2x);
695 position: absolute
; /* Exclude from center-packing*/
698 .gallery
> .toolbar button
.redo:active
,
699 .gallery > .toolbar button.redo[pressed] {
700 background-image: -webkit-image-set
(
701 url
(../images/100/icon_redo_selected.png) 1x,
702 url
(../images/200/icon_redo_selected.png) 2x);
705 .gallery
> .toolbar button
[disabled
],
706 .gallery[tools][locked] > .toolbar button {
708 pointer-events: none
;
711 .gallery > .toolbar button[hidden] {
715 .gallery[mode='slide'] > .toolbar button.mode {
716 background-image: -webkit-image-set
(
717 url
(../images/100/icon_mosaic.png) 1x,
718 url
(../images/200/icon_mosaic.png) 2x);
721 .gallery[mode='slide'] > .toolbar button.mode:active {
722 background-image: -webkit-image-set
(
723 url
(../images/100/icon_mosaic_selected.png) 1x,
724 url
(../images/200/icon_mosaic_selected.png) 2x);
727 .gallery[mode='mosaic'] > .toolbar button.mode {
728 background-image: -webkit-image-set
(
729 url
(../images/100/icon_1up.png) 1x,
730 url
(../images/200/icon_1up.png) 2x);
733 .gallery[mode='mosaic'] > .toolbar button.mode:active {
734 background-image: -webkit-image-set
(
735 url
(../images/100/icon_1up_selected.png) 1x,
736 url
(../images/200/icon_1up_selected.png) 2x);
739 .gallery > .toolbar button.slideshow {
740 background-image: -webkit-image-set
(
741 url
(../images/100/icon_slideshow.png) 1x,
742 url
(../images/200/icon_slideshow.png) 2x);
745 .gallery
> .toolbar button
.slideshow:active
,
746 .gallery > .toolbar button.slideshow[pressed] {
747 background-image: -webkit-image-set
(
748 url
(../images/100/icon_slideshow_selected.png) 1x,
749 url
(../images/200/icon_slideshow_selected.png) 2x);
752 .gallery > .toolbar button.delete {
753 background-image: -webkit-image-set
(
754 url
(../images/100/icon_delete.png) 1x,
755 url
(../images/200/icon_delete.png) 2x);
758 .gallery > .toolbar button.delete:active {
759 background-image: -webkit-image-set
(
760 url
(../images/100/icon_delete_selected.png) 1x,
761 url
(../images/200/icon_delete_selected.png) 2x);
764 .gallery > .toolbar button.edit {
765 background-image: -webkit-image-set
(
766 url
(../images/100/icon_edit.png) 1x,
767 url
(../images/200/icon_edit.png) 2x);
770 .gallery
> .toolbar button
.edit:active
,
771 .gallery > .toolbar button.edit[pressed] {
772 background-image: -webkit-image-set
(
773 url
(../images/100/icon_edit_selected.png) 1x,
774 url
(../images/200/icon_edit_selected.png) 2x);
777 .gallery > .toolbar button.print {
778 background-image: -webkit-image-set
(
779 url
(../images/100/icon_print.png) 1x,
780 url
(../images/200/icon_print.png) 2x);
783 .gallery
> .toolbar button
.print:active
,
784 .gallery > .toolbar button.print[pressed] {
785 background-image: -webkit-image-set
(
786 url
(../images/100/icon_print_selected.png) 1x,
787 url
(../images/200/icon_print_selected.png) 2x);
790 .gallery > .toolbar button.share {
791 background-image: -webkit-image-set
(
792 url
(../images/100/icon_share.png) 1x,
793 url
(../images/200/icon_share.png) 2x);
796 .gallery
> .toolbar button
.share:active
,
797 .gallery > .toolbar button.share[pressed] {
798 background-image: -webkit-image-set
(
799 url
(../images/100/icon_share_selected.png) 1x,
800 url
(../images/200/icon_share_selected.png) 2x);
803 .gallery > .toolbar button.share[disabled] {
807 /* Secondary toolbar (mode-specific tools) */
809 .gallery .edit-modal {
810 -webkit-box-orient: horizontal
;
811 -webkit-box-pack: center
;
813 display: -webkit-box
;
815 pointer-events: none
;
820 .gallery .edit-modal-wrapper[hidden] {
824 .gallery .edit-modal-wrapper {
825 -webkit-box-align: center
;
826 -webkit-box-orient: horizontal
;
827 -webkit-box-pack: center
;
828 background-color: rgba
(0, 0, 0, 0.75);
830 display: -webkit-box
;
831 pointer-events: auto
;
834 .gallery .edit-modal .label {
835 -webkit-box-align: center
;
836 -webkit-box-orient: horizontal
;
837 background-position: 20px center
;
838 background-repeat: no-repeat
;
839 display: -webkit-box
;
845 .gallery .edit-modal .label.brightness {
846 background-image: -webkit-image-set
(
847 url
(../images/100/icon_brightness.png) 1x,
848 url
(../images/200/icon_brightness.png) 2x);
851 .gallery .edit-modal .label.contrast {
852 background-image: -webkit-image-set
(
853 url
(../images/100/icon_contrast.png) 1x,
854 url
(../images/200/icon_contrast.png) 2x);
859 .gallery .edit-modal button {
860 background: transparent
;
863 box-sizing: border-box
;
870 .gallery .edit-modal button * {
871 pointer-events: none
;
874 .gallery .edit-modal button:hover {
879 .gallery
.edit-modal button
.selected
,
880 .gallery .edit-modal button:active {
885 .gallery .edit-modal .range {
886 -webkit-appearance: none
!important
;
887 background: transparent
;
893 .gallery .edit-modal .range::before {
904 .gallery .edit-modal .range::-webkit-slider-thumb {
905 -webkit-appearance: none
;
906 background-image: -webkit-image-set
(
907 url
(../images/100/slider_thumb.png) 1x,
908 url
(../images/200/slider_thumb.png) 2x);
915 .gallery .crop-overlay {
916 -webkit-box-orient: vertical
;
917 display: -webkit-box
;
918 pointer-events: none
;
922 .gallery .crop-overlay .shadow {
923 background-color: rgba
(0, 0, 0, 0.65);
926 .gallery .crop-overlay .middle-box {
928 -webkit-box-orient: horizontal
;
929 display: -webkit-box
;
932 .gallery .crop-frame {
934 display: -webkit-box
;
938 .gallery .crop-frame div {
939 background-color: rgba
(255, 255, 255, 1);
940 box-shadow: 0 0 3px rgba
(0, 0, 0, 0.75);
944 .gallery .crop-frame .horizontal {
950 .gallery .crop-frame .horizontal.top {
954 .gallery .crop-frame .horizontal.bottom {
958 .gallery .crop-frame .vertical {
964 .gallery .crop-frame .vertical.left {
968 .gallery .crop-frame .vertical.right {
972 .gallery .crop-frame .corner {
978 .gallery .crop-frame .corner.left {
982 .gallery .crop-frame .corner.right {
986 .gallery .crop-frame .corner.top {
990 .gallery .crop-frame .corner.bottom {
994 /* Prompt/notification panel */
996 .gallery .prompt-wrapper {
997 -webkit-box-orient: horizontal
;
998 -webkit-box-pack: center
;
999 display: -webkit-box
;
1001 pointer-events: none
;
1006 .gallery .prompt-wrapper[pos=top] {
1007 -webkit-box-align: start
;
1010 .gallery .prompt-wrapper[pos=center] {
1011 -webkit-box-align: center
;
1014 .gallery .prompt-wrapper[pos=center] .back-button {
1020 transition: opacity
220ms ease
;
1024 -webkit-box-align: center
;
1025 -webkit-box-orient: horizontal
;
1026 background-color: rgba
(0, 0, 0, 0.8);
1028 display: -webkit-box
;
1035 transition: all
180ms ease
;
1038 .gallery .prompt[state='fadein'] {
1043 .gallery .prompt[state='fadeout'] {
1048 .gallery .prompt-wrapper[pos=top] .prompt {
1049 padding-right: 10px;
1052 .gallery .share-menu {
1053 -webkit-box-align: stretch
;
1054 -webkit-box-orient: vertical
;
1055 -webkit-box-pack: start
;
1056 background-color: white
;
1057 border: 1px solid
#7f7f7f;
1060 display: -webkit-box
;
1065 transition: opacity
500ms ease-in-out
;
1068 .gallery .share-menu .bubble-point {
1069 background-image: -webkit-image-set
(
1070 url
(../images/100/bubble_point.png) 1x,
1071 url
(../images/200/bubble_point.png) 2x);
1072 background-position: center top
;
1073 background-repeat: no-repeat
;
1082 .gallery .share-menu[hidden] {
1083 bottom: -100%; /* Offscreen so that 'dimmed' attribute does not show it. */
1085 pointer-events: none
;
1088 .gallery .share-menu > .item {
1089 background-color: rgba
(0, 0, 0, 0);
1090 background-position: 5px center
;
1091 background-repeat: no-repeat
;
1097 .gallery .share-menu > .item:hover {
1098 background-color: rgba
(240, 240, 240, 1);
1101 .gallery .share-menu > div > img {
1106 /* Load spinner and error banner. */
1110 url
(../../file_manager/foreground/images/common/spinner.svg);
1111 background-size: 100%;
1121 .gallery:not([spinner]) .spinner {
1125 .gallery .error-banner {
1126 -webkit-box-align: center
;
1127 -webkit-box-orient: horizontal
;
1128 -webkit-box-pack: center
;
1129 background-color: rgba
(24, 24, 24, 1);
1130 background-image: -webkit-image-set
(
1131 url
(../../file_manager/foreground/images/media/error.png) 1x,
1132 url
(../../file_manager/foreground/images/media/2x/error.png) 2x);
1133 background-position: 25px center
;
1134 background-repeat: no-repeat
;
1136 display: -webkit-box
;
1139 padding-right: 35px;
1142 .gallery:not([error]) .error-banner {
1148 bottom: 55px; /* Toolbar height. */
1156 /* transition-duration is set in Javascript. */
1157 transition-property: -webkit-transform
;
1158 transition-timing-function: linear
;
1161 .mosaic::-webkit-scrollbar {
1162 background: transparent
;
1165 .mosaic::-webkit-scrollbar-thumb {
1166 background: rgb
(31, 31, 31);
1169 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1170 background: transparent
;
1175 /* Tile's zoom factor is animated on hover. We apply the transform to
1176 the entire tile so that the image outline is included into the animation. */
1177 transition: -webkit-transform
150ms linear
;
1180 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
1181 separately from .gallery[mode] */
1182 .mosaic:not([visible]) .mosaic-tile .img-border {
1186 /* Animate tile's opacity, except for the selected tile which should show/hide
1187 instantly (this looks better when zooming to/from the slide mode). */
1188 .mosaic-tile:not([selected]) .img-border {
1189 transition: opacity
350ms linear
;
1192 /* Must be in sync with mosaic_mode.js.
1193 Mosaic.Layout.SPACING should be equal to
1194 top + bottom + border-top-width + border-bottom-width AND
1195 left + right + border-left-width + border-right-width */
1196 .mosaic-tile .img-border {
1197 border: 1px solid black
; /* Space between the outline and the image. */
1200 outline: 2px solid transparent
;
1207 /* Selected and hover state are only visible when zoom transition is over. */
1208 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1209 outline-color: rgb
(51, 153, 255);
1212 .mosaic
[visible
='normal'].hover-visible
1213 .mosaic-tile:hover:not([selected]) .img-border {
1214 outline-color: rgb
(182, 212, 252);
1217 .mosaic-tile .img-wrapper {
1225 .mosaic-tile
.img-wrapper
[generic-thumbnail
],
1226 .mosaic-tile
.img-wrapper
.animated:not
([generic-thumbnail
])
1227 canvas:not
(.cached
) {
1228 -webkit-animation: fadeIn ease-in
1;
1229 -webkit-animation-duration: 500ms;
1230 -webkit-animation-fill-mode: forwards
;
1233 @-webkit-keyframes fadeIn
{
1242 /* In order to do mode animated transitions smoothly we keep both mosaic and
1243 image-container but transparent. */
1244 .gallery:not
([mode
='mosaic']) .mosaic
,
1245 .gallery:not([mode='slide']) .image-container {
1246 pointer-events: none
;
1249 .gallery:not
([mode
='slide']) .ribbon
,
1250 .gallery:not([mode='slide']) .arrow-box {
1252 pointer-events: none
;
1255 /* Temporary. Remove this along with the delete confirmation dialog
1256 when Undo delete is implemented. */
1258 background-color: black
;
1261 /* Slideshow controls */
1263 .slideshow-toolbar {
1264 -webkit-box-align: center
;
1265 -webkit-box-orient: horizontal
;
1266 -webkit-box-pack: center
;
1270 padding-bottom: 6px;
1271 pointer-events: none
;
1276 .gallery[tools][slideshow] .slideshow-toolbar {
1277 display: -webkit-box
;
1280 .slideshow-toolbar > div {
1281 background-position: center
;
1282 background-repeat: no-repeat
;
1285 pointer-events: auto
;
1289 .slideshow-toolbar > div:hover {
1293 .slideshow-toolbar > .slideshow-play {
1294 background-image: -webkit-image-set
(
1295 url
(../images
/100/slideshow-play
.png
) 1x,
1296 url
(../images
/200/slideshow-play
.png
) 2x);
1300 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1301 background-image: -webkit-image-set
(
1302 url
(../images
/100/slideshow-pause
.png
) 1x,
1303 url
(../images
/200/slideshow-pause
.png
) 2x);
1306 .slideshow-toolbar > .slideshow-end {
1307 background-image: -webkit-image-set
(
1308 url
(../images
/100/slideshow-end
.png
) 1x,
1309 url
(../images
/200/slideshow-end
.png
) 2x);
1313 .gallery > .header > button {
1314 -webkit-margin-start: 10px;
1321 .gallery > .header > .minimize-button {
1322 background: -webkit-image-set
(
1323 url
(chrome://resources
/images
/apps
/topbar_button_minimize
.png
) 1x,
1324 url
(chrome://resources
/images
/2x/apps
/topbar_button_minimize
.png
) 2x)
1328 .gallery > .header > .maximize-button {
1329 background: -webkit-image-set
(
1330 url
(chrome://resources
/images
/apps
/topbar_button_maximize
.png
) 1x,
1331 url
(chrome://resources
/images
/2x/apps
/topbar_button_maximize
.png
) 2x)
1335 .gallery > .header > .close-button {
1336 background: -webkit-image-set
(
1337 url
(chrome://resources
/images
/apps
/topbar_button_close
.png
) 1x,
1338 url
(chrome://resources
/images
/2x/apps
/topbar_button_close
.png
) 2x)