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: Open Sans
, Droid Sans Fallback
, 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);
155 display: -webkit-box
;
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 {
292 .gallery .filename-spacer > * {
293 background-color: transparent
;
296 transition: visibility
0 linear
180ms, all
180ms linear
;
300 .gallery .filename-spacer * {
304 .gallery .filename-spacer .namebox {
309 .gallery[editing] .filename-spacer .namebox {
314 .gallery .filename-spacer .namebox {
315 background-color: transparent
;
317 box-sizing: border-box
;
325 text-overflow: ellipsis
;
329 .gallery .filename-spacer .namebox[disabled] {
330 -webkit-user-select: none
;
334 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
335 background-color: rgba
(48, 48, 48, 1.0);
338 .gallery .filename-spacer .namebox:focus {
339 background-color: white
;
344 .gallery .filename-spacer .options {
345 -webkit-box-align: center
;
346 -webkit-box-orient: horizontal
;
347 -webkit-box-pack: start
;
348 display: -webkit-box
;
355 .gallery[editing] .filename-spacer .options {
362 .gallery
.filename-spacer
.saved
,
363 .gallery .filename-spacer .overwrite-original {
369 pointer-events: none
;
370 transition: all linear
120ms;
373 .gallery[editing] .filename-spacer .saved {
378 .gallery
[editing
] .filename-spacer
.overwrite-original
,
379 .gallery[editing] .filename-spacer .overwrite-original > * {
382 pointer-events: auto
;
385 .gallery[editing] .options[saved] .overwrite-original {
389 .gallery
[editing
] .options
[saved
] .overwrite-original
,
390 .gallery[editing] .options[saved] .overwrite-original > * {
392 pointer-events: none
;
395 .gallery .filename-spacer .saved[highlighted] {
396 -webkit-transform: scaleX
(1.1) scaleY
(1.1) rotate
(0);
401 .gallery .toolbar .bubble {
409 .gallery:not([editing]) .toolbar .bubble {
413 /* Toolbar buttons */
415 .gallery .button-spacer {
417 display: -webkit-box
;
422 .gallery .ribbon-spacer {
423 -webkit-box-align: center
;
424 -webkit-box-orient: horizontal
;
425 -webkit-box-pack: center
;
426 display: -webkit-box
;
433 .gallery .toolbar .ribbon {
435 -webkit-box-orient: horizontal
;
436 -webkit-box-pack: start
;
437 display: -webkit-box
;
440 transition: opacity
180ms linear
, visibility
0 linear
;
444 .gallery[editing] .toolbar .ribbon {
446 transition-delay: 0, 180ms;
450 .gallery .ribbon-image {
451 -webkit-box-align: center
;
452 -webkit-box-orient: horizontal
;
453 -webkit-box-pack: center
;
454 border: 2px solid rgba
(255, 255, 255, 0); /* transparent white */
456 display: -webkit-box
;
460 transition: all
180ms linear
;
464 .ribbon-image[vanishing='smooth'] {
465 border-left-width: 0;
466 border-right-width: 0;
472 .gallery .ribbon-image[selected] {
473 border: 2px solid rgb
(77, 144, 254);
476 .gallery .toolbar .ribbon.fade-left {
477 -webkit-mask-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0,
478 rgba
(0, 0, 0, 1) 40px);
481 .gallery .toolbar .ribbon.fade-right {
482 -webkit-mask-image: linear-gradient
(to left
, rgba
(0, 0, 0, 0) 0,
483 rgba
(0, 0, 0, 1) 40px);
486 .gallery .toolbar .ribbon.fade-left.fade-right {
487 -webkit-mask-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0,
488 rgba
(0, 0, 0, 1) 40px,
489 rgba
(0, 0, 0, 1) 230px,
490 rgba
(0, 0, 0, 0) 100%);
493 .gallery .image-wrapper {
494 background-size: 45px 45px;
495 border: 1px solid rgba
(0, 0, 0, 0); /* transparent black */
502 .gallery .image-wrapper > img {
506 .gallery .image-wrapper > img:not(.cached) {
507 -webkit-animation: fadeIn
500ms ease-in
;
512 .gallery .edit-bar-spacer {
513 -webkit-box-align: center
;
514 -webkit-box-orient: horizontal
;
515 -webkit-box-pack: center
;
516 display: -webkit-box
;
522 transition: opacity
180ms linear
, visibility
0 linear
180ms;
526 .gallery .toolbar .edit-main {
527 -webkit-box-orient: horizontal
;
528 -webkit-box-pack: center
;
530 display: -webkit-box
;
535 .gallery[editing] .edit-bar-spacer {
537 pointer-events: auto
;
538 transition-delay: 100ms, 100ms;
542 .gallery
.header button
,
543 .gallery
.toolbar button
,
544 .gallery
.header button
[disabled
],
545 .gallery .toolbar button[disabled] {
546 -webkit-box-align: center
;
548 -webkit-box-orient: horizontal
;
549 -webkit-box-pack: end
;
550 background-color: rgba
(0, 0, 0, 0);
551 background-position: center
;
552 background-repeat: no-repeat
;
557 display: -webkit-box
;
558 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */
559 padding: 1px; /* Instead of a border. */
564 .gallery
.header button
,
565 .gallery .toolbar button {
568 min-width: 40px; /* Reset. */
572 .gallery .toolbar button:focus {
576 /* By default, labels are hidden. */
577 .gallery > .toolbar button span {
581 /* Show labels if there is enough space. */
582 @media (min-width: 1180px) {
584 .gallery
.edit-main button
,
585 .gallery .edit-main button[disabled] {
586 background-position: 5px center
;
588 min-width: 0; /* Reset. */
589 padding: 0 10px 0 35px;
593 .gallery > .toolbar button span {
599 .gallery
.header
button:hover
,
600 .gallery .toolbar button:hover {
601 background-color: rgba
(31, 31, 31, 1);
605 .gallery
.header
button:active
,
606 .gallery
.toolbar
button:active
,
607 .gallery
.header button
[pressed
],
608 .gallery
.toolbar button
[pressed
],
609 .gallery
.header button
[pressed
]:hover
,
610 .gallery .toolbar button[pressed]:hover {
611 background-color: rgba
(240, 240, 240, 1);
615 .gallery > .toolbar button.autofix {
616 background-image: -webkit-image-set
(
617 url
(../images/100/icon_autofix.png) 1x,
618 url
(../images/200/icon_autofix.png) 2x);
621 .gallery
> .toolbar button
.autofix:active
,
622 .gallery > .toolbar button.autofix[pressed] {
623 background-image: -webkit-image-set
(
624 url
(../images/100/icon_autofix_selected.png) 1x,
625 url
(../images/200/icon_autofix_selected.png) 2x);
628 .gallery > .toolbar button.crop {
629 background-image: -webkit-image-set
(
630 url
(../images/100/icon_crop.png) 1x,
631 url
(../images/200/icon_crop.png) 2x);
634 .gallery
> .toolbar button
.crop:active
,
635 .gallery > .toolbar button.crop[pressed] {
636 background-image: -webkit-image-set
(
637 url
(../images/100/icon_crop_selected.png) 1x,
638 url
(../images/200/icon_crop_selected.png) 2x);
641 .gallery > .toolbar button.exposure {
642 background-image: -webkit-image-set
(
643 url
(../images/100/icon_brightness.png) 1x,
644 url
(../images/200/icon_brightness.png) 2x);
647 .gallery
> .toolbar button
.exposure:active
,
648 .gallery > .toolbar button.exposure[pressed] {
649 background-image: -webkit-image-set
(
650 url
(../images/100/icon_brightness_selected.png) 1x,
651 url
(../images/200/icon_brightness_selected.png) 2x);
654 .gallery > .toolbar button.rotate_right {
655 background-image: -webkit-image-set
(
656 url
(../images/100/icon_rotate.png) 1x,
657 url
(../images/200/icon_rotate.png) 2x);
660 .gallery
> .toolbar button
.rotate_right:active
,
661 .gallery > .toolbar button.rotate_right[pressed] {
662 background-image: -webkit-image-set
(
663 url
(../images/100/icon_rotate_selected.png) 1x,
664 url
(../images/200/icon_rotate_selected.png) 2x);
667 .gallery > .toolbar button.rotate_left {
668 background-image: -webkit-image-set
(
669 url
(../images/100/icon_rotate_left.png) 1x,
670 url
(../images/200/icon_rotate_left.png) 2x);
673 .gallery
> .toolbar button
.rotate_left:active
,
674 .gallery > .toolbar button.rotate_left[pressed] {
675 background-image: -webkit-image-set
(
676 url
(../images/100/icon_rotate_left_selected.png) 1x,
677 url
(../images/200/icon_rotate_left_selected.png) 2x);
680 .gallery > .toolbar button.undo {
681 background-image: -webkit-image-set
(
682 url
(../images/100/icon_undo.png) 1x,
683 url
(../images/200/icon_undo.png) 2x);
686 .gallery
> .toolbar button
.undo:active
,
687 .gallery > .toolbar button.undo[pressed] {
688 background-image: -webkit-image-set
(
689 url
(../images/100/icon_undo_selected.png) 1x,
690 url
(../images/200/icon_undo_selected.png) 2x);
693 .gallery > .toolbar button.redo {
694 background-image: -webkit-image-set
(
695 url
(../images/100/icon_redo.png) 1x,
696 url
(../images/200/icon_redo.png) 2x);
697 position: absolute
; /* Exclude from center-packing*/
700 .gallery
> .toolbar button
.redo:active
,
701 .gallery > .toolbar button.redo[pressed] {
702 background-image: -webkit-image-set
(
703 url
(../images/100/icon_redo_selected.png) 1x,
704 url
(../images/200/icon_redo_selected.png) 2x);
707 .gallery
> .toolbar button
[disabled
],
708 .gallery[tools][locked] > .toolbar button {
710 pointer-events: none
;
713 .gallery > .toolbar button[hidden] {
717 .gallery[mode='slide'] > .toolbar > button.mode {
718 background-image: -webkit-image-set
(
719 url
(../images/100/icon_mosaic.png) 1x,
720 url
(../images/200/icon_mosaic.png) 2x);
723 .gallery[mode='slide'] > .toolbar > button.mode:active {
724 background-image: -webkit-image-set
(
725 url
(../images/100/icon_mosaic_selected.png) 1x,
726 url
(../images/200/icon_mosaic_selected.png) 2x);
729 .gallery[mode='mosaic'] > .toolbar > button.mode {
730 background-image: -webkit-image-set
(
731 url
(../images/100/icon_1up.png) 1x,
732 url
(../images/200/icon_1up.png) 2x);
735 .gallery[mode='mosaic'] > .toolbar > button.mode:active {
736 background-image: -webkit-image-set
(
737 url
(../images/100/icon_1up_selected.png) 1x,
738 url
(../images/200/icon_1up_selected.png) 2x);
741 .gallery > .toolbar > button.slideshow {
742 background-image: -webkit-image-set
(
743 url
(../images/100/icon_slideshow.png) 1x,
744 url
(../images/200/icon_slideshow.png) 2x);
747 .gallery
> .toolbar
> button
.slideshow:active
,
748 .gallery > .toolbar > button.slideshow[pressed] {
749 background-image: -webkit-image-set
(
750 url
(../images/100/icon_slideshow_selected.png) 1x,
751 url
(../images/200/icon_slideshow_selected.png) 2x);
754 .gallery > .toolbar > button.delete {
755 background-image: -webkit-image-set
(
756 url
(../images/100/icon_delete.png) 1x,
757 url
(../images/200/icon_delete.png) 2x);
760 .gallery > .toolbar > button.delete:active {
761 background-image: -webkit-image-set
(
762 url
(../images/100/icon_delete_selected.png) 1x,
763 url
(../images/200/icon_delete_selected.png) 2x);
766 .gallery > .toolbar > button.edit {
767 background-image: -webkit-image-set
(
768 url
(../images/100/icon_edit.png) 1x,
769 url
(../images/200/icon_edit.png) 2x);
772 .gallery
> .toolbar
> button
.edit:active
,
773 .gallery > .toolbar > button.edit[pressed] {
774 background-image: -webkit-image-set
(
775 url
(../images/100/icon_edit_selected.png) 1x,
776 url
(../images/200/icon_edit_selected.png) 2x);
779 .gallery > .toolbar > button.print {
780 background-image: -webkit-image-set
(
781 url
(../images/100/icon_print.png) 1x,
782 url
(../images/200/icon_print.png) 2x);
785 .gallery
> .toolbar
> button
.print:active
,
786 .gallery > .toolbar > button.print[pressed] {
787 background-image: -webkit-image-set
(
788 url
(../images/100/icon_print_selected.png) 1x,
789 url
(../images/200/icon_print_selected.png) 2x);
792 .gallery > .toolbar > button.share {
793 background-image: -webkit-image-set
(
794 url
(../images/100/icon_share.png) 1x,
795 url
(../images/200/icon_share.png) 2x);
798 .gallery
> .toolbar
> button
.share:active
,
799 .gallery > .toolbar > button.share[pressed] {
800 background-image: -webkit-image-set
(
801 url
(../images/100/icon_share_selected.png) 1x,
802 url
(../images/200/icon_share_selected.png) 2x);
805 .gallery > .toolbar > button.share[disabled] {
809 /* Secondary toolbar (mode-specific tools) */
811 .gallery .edit-modal {
812 -webkit-box-orient: horizontal
;
813 -webkit-box-pack: center
;
815 display: -webkit-box
;
817 pointer-events: none
;
822 .gallery .edit-modal-wrapper[hidden] {
826 .gallery .edit-modal-wrapper {
827 -webkit-box-align: center
;
828 -webkit-box-orient: horizontal
;
829 -webkit-box-pack: center
;
830 background-color: rgba
(0, 0, 0, 0.75);
832 display: -webkit-box
;
833 pointer-events: auto
;
836 .gallery .edit-modal .label {
837 -webkit-box-align: center
;
838 -webkit-box-orient: horizontal
;
839 background-position: 20px center
;
840 background-repeat: no-repeat
;
841 display: -webkit-box
;
847 .gallery .edit-modal .label.brightness {
848 background-image: -webkit-image-set
(
849 url
(../images/100/icon_brightness.png) 1x,
850 url
(../images/200/icon_brightness.png) 2x);
853 .gallery .edit-modal .label.contrast {
854 background-image: -webkit-image-set
(
855 url
(../images/100/icon_contrast.png) 1x,
856 url
(../images/200/icon_contrast.png) 2x);
861 .gallery .edit-modal button {
862 background: transparent
;
865 box-sizing: border-box
;
872 .gallery .edit-modal button * {
873 pointer-events: none
;
876 .gallery .edit-modal button:hover {
881 .gallery
.edit-modal button
.selected
,
882 .gallery .edit-modal button:active {
887 .gallery .edit-modal .range {
888 -webkit-appearance: none
!important
;
894 .gallery .edit-modal .range::-webkit-slider-thumb {
895 -webkit-appearance: none
;
896 background-image: -webkit-image-set
(
897 url
(../images/100/slider_thumb.png) 1x,
898 url
(../images/200/slider_thumb.png) 2x);
905 .gallery .crop-overlay {
906 -webkit-box-orient: vertical
;
907 display: -webkit-box
;
908 pointer-events: none
;
912 .gallery .crop-overlay .shadow {
913 background-color: rgba
(0, 0, 0, 0.65);
916 .gallery .crop-overlay .middle-box {
918 -webkit-box-orient: horizontal
;
919 display: -webkit-box
;
922 .gallery .crop-frame {
924 display: -webkit-box
;
928 .gallery .crop-frame div {
929 background-color: rgba
(255, 255, 255, 1);
930 box-shadow: 0 0 3px rgba
(0, 0, 0, 0.75);
934 .gallery .crop-frame .horizontal {
940 .gallery .crop-frame .horizontal.top {
944 .gallery .crop-frame .horizontal.bottom {
948 .gallery .crop-frame .vertical {
954 .gallery .crop-frame .vertical.left {
958 .gallery .crop-frame .vertical.right {
962 .gallery .crop-frame .corner {
968 .gallery .crop-frame .corner.left {
972 .gallery .crop-frame .corner.right {
976 .gallery .crop-frame .corner.top {
980 .gallery .crop-frame .corner.bottom {
984 /* Prompt/notification panel */
986 .gallery .prompt-wrapper {
987 -webkit-box-orient: horizontal
;
988 -webkit-box-pack: center
;
989 display: -webkit-box
;
991 pointer-events: none
;
996 .gallery .prompt-wrapper[pos=top] {
997 -webkit-box-align: start
;
1000 .gallery .prompt-wrapper[pos=center] {
1001 -webkit-box-align: center
;
1004 .gallery .prompt-wrapper[pos=center] .back-button {
1008 .gallery .prompt-wrapper > div.dimmable {
1010 transition: opacity
220ms ease
;
1014 -webkit-box-align: center
;
1015 -webkit-box-orient: horizontal
;
1016 background-color: rgba
(0, 0, 0, 0.8);
1018 display: -webkit-box
;
1025 transition: all
180ms ease
;
1028 .gallery .prompt[state='fadein'] {
1033 .gallery .prompt[state='fadeout'] {
1038 .gallery .prompt-wrapper[pos=top] .prompt {
1039 padding-right: 10px;
1042 .gallery .share-menu {
1043 -webkit-box-align: stretch
;
1044 -webkit-box-orient: vertical
;
1045 -webkit-box-pack: start
;
1046 background-color: white
;
1047 border: 1px solid
#7f7f7f;
1050 display: -webkit-box
;
1055 transition: opacity
500ms ease-in-out
;
1058 .gallery .share-menu .bubble-point {
1059 background-image: -webkit-image-set
(
1060 url
(../images/100/bubble_point.png) 1x,
1061 url
(../images/200/bubble_point.png) 2x);
1062 background-position: center top
;
1063 background-repeat: no-repeat
;
1072 .gallery .share-menu[hidden] {
1073 bottom: -100%; /* Offscreen so that 'dimmed' attribute does not show it. */
1075 pointer-events: none
;
1078 .gallery .share-menu > .item {
1079 background-color: rgba
(0, 0, 0, 0);
1080 background-position: 5px center
;
1081 background-repeat: no-repeat
;
1087 .gallery .share-menu > .item:hover {
1088 background-color: rgba
(240, 240, 240, 1);
1091 .gallery .share-menu > div > img {
1096 /* Load spinner and error banner. */
1100 url
(../../file_manager/foreground/images/common/spinner.svg);
1101 background-size: 100%;
1111 .gallery:not([spinner]) .spinner {
1115 .gallery .error-banner {
1116 -webkit-box-align: center
;
1117 -webkit-box-orient: horizontal
;
1118 -webkit-box-pack: center
;
1119 background-color: rgba
(24, 24, 24, 1);
1120 background-image: -webkit-image-set
(
1121 url
(../../file_manager/foreground/images/media/error.png) 1x,
1122 url
(../../file_manager/foreground/images/media/2x/error.png) 2x);
1123 background-position: 25px center
;
1124 background-repeat: no-repeat
;
1126 display: -webkit-box
;
1129 padding-right: 35px;
1132 .gallery:not([error]) .error-banner {
1138 bottom: 55px; /* Toolbar height. */
1146 /* transition-duration is set in Javascript. */
1147 transition-property: -webkit-transform
;
1148 transition-timing-function: linear
;
1151 .mosaic::-webkit-scrollbar {
1152 background: transparent
;
1155 .mosaic::-webkit-scrollbar-thumb {
1156 background: rgb
(31, 31, 31);
1159 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1160 background: transparent
;
1165 /* Tile's zoom factor is animated on hover. We apply the transform to
1166 the entire tile so that the image outline is included into the animation. */
1167 transition: -webkit-transform
150ms linear
;
1170 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
1171 separately from .gallery[mode] */
1172 .mosaic:not([visible]) .mosaic-tile .img-border {
1176 /* Animate tile's opacity, except for the selected tile which should show/hide
1177 instantly (this looks better when zooming to/from the slide mode). */
1178 .mosaic-tile:not([selected]) .img-border {
1179 transition: opacity
350ms linear
;
1182 /* Must be in sync with mosaic_mode.js.
1183 Mosaic.Layout.SPACING should be equal to
1184 top + bottom + border-top-width + border-bottom-width AND
1185 left + right + border-left-width + border-right-width */
1186 .mosaic-tile .img-border {
1187 border: 1px solid black
; /* Space between the outline and the image. */
1190 outline: 2px solid transparent
;
1197 /* Selected and hover state are only visible when zoom transition is over. */
1198 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1199 outline-color: rgb
(51, 153, 255);
1202 .mosaic
[visible
='normal'].hover-visible
1203 .mosaic-tile:hover:not([selected]) .img-border {
1204 outline-color: rgb
(182, 212, 252);
1207 .mosaic-tile .img-wrapper {
1215 .mosaic-tile
.img-wrapper
[generic-thumbnail
],
1216 .mosaic-tile
.img-wrapper
.animated:not
([generic-thumbnail
])
1217 canvas:not
(.cached
) {
1218 -webkit-animation: fadeIn ease-in
1;
1219 -webkit-animation-duration: 500ms;
1220 -webkit-animation-fill-mode: forwards
;
1223 @-webkit-keyframes fadeIn
{
1232 /* In order to do mode animated transitions smoothly we keep both mosaic and
1233 image-container but transparent. */
1234 .gallery:not
([mode
='mosaic']) .mosaic
,
1235 .gallery:not([mode='slide']) .image-container {
1236 pointer-events: none
;
1239 .gallery:not
([mode
='slide']) .ribbon
,
1240 .gallery:not([mode='slide']) .arrow-box {
1242 pointer-events: none
;
1245 /* Temporary. Remove this along with the delete confirmation dialog
1246 when Undo delete is implemented. */
1248 background-color: black
;
1251 /* Slideshow controls */
1253 .slideshow-toolbar {
1254 -webkit-box-align: center
;
1255 -webkit-box-orient: horizontal
;
1256 -webkit-box-pack: center
;
1260 padding-bottom: 6px;
1261 pointer-events: none
;
1266 .gallery[tools][slideshow] .slideshow-toolbar {
1267 display: -webkit-box
;
1270 .slideshow-toolbar > div {
1271 background-position: center
;
1272 background-repeat: no-repeat
;
1275 pointer-events: auto
;
1279 .slideshow-toolbar > div:hover {
1283 .slideshow-toolbar > .slideshow-play {
1284 background-image: -webkit-image-set
(
1285 url
(../images
/100/slideshow-play
.png
) 1x,
1286 url
(../images
/200/slideshow-play
.png
) 2x);
1290 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1291 background-image: -webkit-image-set
(
1292 url
(../images
/100/slideshow-pause
.png
) 1x,
1293 url
(../images
/200/slideshow-pause
.png
) 2x);
1296 .slideshow-toolbar > .slideshow-end {
1297 background-image: -webkit-image-set
(
1298 url
(../images
/100/slideshow-end
.png
) 1x,
1299 url
(../images
/200/slideshow-end
.png
) 2x);
1303 .gallery > .header > button {
1304 -webkit-margin-start: 10px;
1311 .gallery > .header > .minimize-button {
1312 background: -webkit-image-set
(
1313 url
(chrome://resources
/images
/apps
/topbar_button_minimize
.png
) 1x,
1314 url
(chrome://resources
/images
/2x/apps
/topbar_button_minimize
.png
) 2x)
1318 .gallery > .header > .maximize-button {
1319 background: -webkit-image-set
(
1320 url
(chrome://resources
/images
/apps
/topbar_button_maximize
.png
) 1x,
1321 url
(chrome://resources
/images
/2x/apps
/topbar_button_maximize
.png
) 2x)
1325 .gallery > .header > .close-button {
1326 background: -webkit-image-set
(
1327 url
(chrome://resources
/images
/apps
/topbar_button_close
.png
) 1x,
1328 url
(chrome://resources
/images
/2x/apps
/topbar_button_close
.png
) 2x)