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
;
16 outline: 1px solid rgb
(77, 144, 254);
19 input
[type
='checkbox'] {
22 background: -webkit-image-set
(
23 url
(../../file_manager/foreground/images/common/checkbox_white_unchecked.png) 1x,
24 url
(../../file_manager/foreground/images/common/2x/checkbox_white_unchecked.png) 2x)
26 -webkit-appearance: none
;
27 display: inline-block
;
28 margin: 1px 6px 1px 1px;
29 vertical-align: text-bottom
;
32 input
[type
='checkbox']:checked
{
33 background: -webkit-image-set
(
34 url
(../../file_manager/foreground/images/common/checkbox_white_checked.png) 1x,
35 url
(../../file_manager/foreground/images/common/2x/checkbox_white_checked.png) 2x)
40 paper-button::shadow paper-ripple
{
44 files-toggle-ripple::shadow
.ripple
.activated
{
49 * Default size of slider knob is large for Gallery. Overwrite it to make it
50 * half of the original size.
52 paper-slider::shadow
.expand:not
(.pin
) > #sliderKnob
> #sliderKnobInner
{
67 /* Common background for both mosaic and slide mode. */
69 background-color: black
;
72 /* Image container and canvas elements */
74 .gallery .image-container {
75 cursor: none
; /* Only visible when the toolbar is active */
81 .gallery[tools] .image-container[cursor='default'] {
85 .gallery[tools] .image-container[cursor='move'] {
86 cursor: -webkit-image-set
(
87 url
(../images/100/cursor_move.png) 1x,
88 url
(../images/200/cursor_move.png) 2x) 15 15, auto
;
91 .gallery[tools] .image-container[cursor='crop'] {
92 cursor: -webkit-image-set
(
93 url
(../images/100/cursor_crop.png) 1x,
94 url
(../images/200/cursor_crop.png) 2x) 15 15, auto
;
97 .gallery
[tools
] .image-container
[cursor
='n-resize'],
98 .gallery[tools] .image-container[cursor='s-resize'] {
99 cursor: -webkit-image-set
(
100 url
(../images/100/cursor_updown.png) 1x,
101 url
(../images/200/cursor_updown.png) 2x) 15 15, auto
;
104 .gallery
[tools
] .image-container
[cursor
='e-resize'],
105 .gallery[tools] .image-container[cursor='w-resize'] {
106 cursor: -webkit-image-set
(
107 url
(../images/100/cursor_leftright.png) 1x,
108 url
(../images/200/cursor_leftright.png) 2x) 15 15, auto
;
111 .gallery
[tools
] .image-container
[cursor
='nw-resize'],
112 .gallery[tools] .image-container[cursor='se-resize'] {
113 cursor: -webkit-image-set
(
114 url
(../images/100/cursor_nwse.png) 1x,
115 url
(../images/200/cursor_nwse.png) 2x) 15 15, auto
;
118 .gallery
[tools
] .image-container
[cursor
='ne-resize'],
119 .gallery[tools] .image-container[cursor='sw-resize'] {
120 cursor: -webkit-image-set
(
121 url
(../images/100/cursor_swne.png) 1x,
122 url
(../images/200/cursor_swne.png) 2x) 15 15, auto
;
125 .gallery .image-container > .image {
127 pointer-events: none
;
129 /* Duration and timing function are set in Javascript. */
130 transition-property: transform
, opacity
;
133 .gallery .image-container > .image[fade] {
137 /* Full resolution image is invisible unless printing. */
138 .gallery .image-container > canvas.fullres {
144 /* Do not print anything but the image content. */
145 .gallery > :not(.content) {
146 display: none
!important
;
149 /* Center the printed image. */
150 .gallery .image-container {
151 -webkit-box-align: center
;
152 -webkit-box-orient: horizontal
;
153 -webkit-box-pack: center
;
154 display: -webkit-box
;
157 /* Do not print the screen resolution image. */
158 .gallery .image-container > canvas.image {
159 display: none
!important
;
162 /* Print the full resolution image instead. */
163 .gallery .image-container > canvas.fullres {
164 height: auto
!important
;
167 opacity: 1 !important
;
168 position: static
!important
;
169 transform: none
!important
;
170 visibility: visible
!important
;
171 width: auto
!important
;
177 .gallery > .toolbar {
178 -webkit-box-align: stretch
;
179 -webkit-box-orient: horizontal
;
180 -webkit-box-pack: start
;
181 background-color: rgb
(40, 42, 45);
188 pointer-events: none
;
191 transition: opacity
300ms ease
;
194 .gallery > .toolbar.top {
198 .gallery > .toolbar.bottom {
201 overflow: visible
; /* For overwrite original bubble. */
204 .gallery > .toolbar.bottom > .slide-mode-toolbar {
212 .gallery > .toolbar.bottom > .edit-mode-toolbar {
220 .gallery[editing] > .toolbar.bottom > .slide-mode-toolbar {
225 .gallery[editing] > .toolbar.bottom > .edit-mode-toolbar {
230 .gallery[tools]:not([slideshow]) > .toolbar {
232 pointer-events: auto
;
235 /* Hide immediately when entering the slideshow. */
236 .gallery[tools][slideshow] > .toolbar {
237 transition-duration: 0ms;
240 .gallery[tools][locked] > .toolbar {
241 pointer-events: none
;
244 .gallery .arrow-box {
245 pointer-events: none
;
248 .gallery .arrow-box .arrow {
256 .gallery .arrow-box .arrow.left {
260 .gallery .arrow-box .arrow.right {
264 /* The arrow icons are in nested divs so that their opacity can be manipulated
265 * independently from their parent (which can be dimmed when the crop frame
267 .gallery .arrow div {
274 .gallery[tools]:not([editing]) .arrow-box[active] .arrow div {
276 pointer-events: auto
;
279 .gallery[tools]:not([editing]) .arrow-box[active] .arrow div:hover {
283 .gallery .arrow.left div {
284 background-image: -webkit-image-set
(
285 url
(../images/100/slideshow_previous.png) 1x,
286 url
(../images/200/slideshow_previous.png) 2x);
289 .gallery .arrow.right div {
290 background-image: -webkit-image-set
(
291 url
(../images/100/slideshow_next.png) 1x,
292 url
(../images/200/slideshow_next.png) 2x);
295 /* Special behavior on mouse drag.
296 Redundant .gallery attributes included to make the rules more specific */
298 /* Everything but the image container should become mouse-transparent */
299 .gallery[tools][editing][mousedrag] * {
300 pointer-events: none
;
303 .gallery[tools][editing][mousedrag] .image-container {
304 pointer-events: auto
;
307 /* The editor marks elements with 'dimmed' attribute to get them out of the way
309 .gallery
[tools
][editing
] [dimmed
],
310 .gallery[tools][editing] [dimmed] * {
311 pointer-events: none
;
314 .gallery[tools][editing] [dimmed] {
321 -webkit-margin-start: 16px;
329 width: -webkit-fit-content
;
332 #rename-input > input
{
338 .gallery .toolbar .bubble {
346 .gallery:not([editing]) .toolbar .bubble {
352 .gallery .middle-spacer {
356 flex-direction: column
;
359 /* Toolbar buttons */
361 .gallery .button-spacer {
365 justify-content: flex-end
;
370 .gallery .ribbon-spacer {
375 .gallery .toolbar .ribbon {
377 justify-content: center
;
382 transition: opacity
180ms linear
, visibility
0ms linear
;
388 .gallery .toolbar .ribbon:focus {
392 .gallery[editing] .toolbar .ribbon {
394 transition-delay: 0ms, 180ms;
398 .gallery .ribbon-image {
399 background-color: black
;
407 transition: all
180ms linear
;
411 .ribbon-image[vanishing='smooth'] {
412 border-left-width: 0;
413 border-right-width: 0;
419 .gallery .toolbar .ribbon.fade-left {
420 justify-content: flex-end
;
423 .gallery .toolbar .ribbon.fade-right {
424 justify-content: flex-start
;
427 .gallery .image-wrapper {
434 .gallery .image-wrapper > img {
438 .gallery .image-wrapper > img:not(.cached) {
439 -webkit-animation: fadeIn
500ms ease-in
;
442 @-webkit-keyframes fadeIn
{
451 .gallery .ribbon-image[selected] > .selection-frame {
452 border: 2px solid rgb
(27, 168, 243);
453 box-sizing: border-box
;
460 /* Editor toolbar. */
462 .gallery
.edit-mode-toolbar
.options
,
463 .gallery .edit-mode-toolbar .exit-button-spacer {
468 pointer-events: none
;
475 .gallery
.edit-mode-toolbar
.options
> *,
476 .gallery .edit-mode-toolbar .exit-button-spacer > * {
477 pointer-events: auto
;
480 .gallery .edit-mode-toolbar .exit-button-spacer {
481 justify-content: flex-end
;
484 .gallery .edit-mode-toolbar .exit-button-spacer paper-button {
485 -webkit-margin-end: 8px;
488 text-transform: uppercase
;
491 .gallery .edit-mode-toolbar .edit-bar-spacer {
495 transition: opacity
180ms linear
, visibility
0ms linear
180ms;
499 .gallery
[editing
] .edit-mode-toolbar
.options
,
500 .gallery[editing] .edit-mode-toolbar .exit-button-spacer {
505 .edit-mode-toolbar .overwrite-original {
506 -webkit-margin-start: 16px;
509 .edit-mode-toolbar .overwrite-original::shadow #checkboxContainer {
510 transform: scale
(0.78, 0.78); /* Make box size to 14px. */
513 .edit-mode-toolbar .overwrite-original::shadow #ink {
518 .edit-mode-toolbar .overwrite-original::shadow #checkboxLabel {
522 .edit-mode-toolbar
.overwrite-original
[disabled
]::shadow #checkbox
,
523 .edit-mode-toolbar .overwrite-original[disabled]::shadow #checkboxLabel {
527 .gallery .edit-mode-toolbar .saved {
528 -webkit-margin-start: 14px;
531 pointer-events: none
;
532 transition-duration: 120ms;
533 transition-property: opacity
, transform
;
534 transition-timing-function: linear
;
537 .gallery[editing] .edit-mode-toolbar .saved {
542 .gallery .edit-mode-toolbar .saved[highlighted] {
543 transform: scaleX
(1.1) scaleY
(1.1) rotate
(0);
547 /* Editor buttons. */
549 .gallery .toolbar .edit-main {
554 justify-content: center
;
558 .gallery .toolbar .edit-main .container {
562 .gallery[editing] .edit-bar-spacer {
564 pointer-events: auto
;
565 transition-delay: 100ms, 100ms;
569 .gallery
> .toolbar paper-button
,
570 .gallery > .toolbar button {
575 .gallery > .toolbar .icon-button {
576 background-position: center
;
577 background-repeat: no-repeat
;
583 .gallery > .toolbar button {
584 background-color: transparent
;
590 .gallery
> .toolbar
paper-button:focus
,
591 .gallery > .toolbar button:focus {
592 background-color: rgba
(0, 0, 0, 0.3);
595 .gallery > .toolbar button:focus {
599 .gallery > .toolbar button.using-mouse:focus {
600 background-color: transparent
;
603 .gallery > .toolbar button > .icon {
604 background-position: center
;
605 background-repeat: no-repeat
;
612 .gallery > .toolbar button > files-toggle-ripple {
618 .gallery > .toolbar .icon-button > files-toggle-ripple {
625 .gallery > .toolbar button.edit > .icon {
626 background-image: -webkit-image-set
(
627 url
(../images/100/edit.png) 1x,
628 url
(../images/200/edit.png) 2x);
631 .gallery > .toolbar paper-button.print {
632 background-image: -webkit-image-set
(
633 url
(../images/100/print.png) 1x,
634 url
(../images/200/print.png) 2x);
637 .gallery > .toolbar paper-button.delete {
638 background-image: -webkit-image-set
(
639 url
(../images/100/delete.png) 1x,
640 url
(../images/200/delete.png) 2x);
643 .gallery > .toolbar .icon.slide-mode {
644 background-image: -webkit-image-set
(
645 url
(../images/100/slide_view.png) 1x,
646 url
(../images/200/slide_view.png) 2x);
649 .gallery > .toolbar .icon.thumbnail-mode {
650 background-image: -webkit-image-set
(
651 url
(../images/100/mosaic_view.png) 1x,
652 url
(../images/200/mosaic_view.png) 2x);
655 .gallery > .toolbar paper-button.slideshow {
656 background-image: -webkit-image-set
(
657 url
(../images/100/slideshow.png) 1x,
658 url
(../images/200/slideshow.png) 2x);
661 .gallery > .toolbar paper-button.share {
662 background-image: -webkit-image-set
(
663 url
(../images/100/share.png) 1x,
664 url
(../images/200/share.png) 2x);
667 .gallery[editing] > .toolbar paper-button.edit {
669 pointer-events: none
;
672 .gallery
[mode
='slide'] .icon
.slide-mode
,
673 .gallery
[mode
='thumbnail'] .icon
.thumbnail-mode
,
674 paper-button
[disabled
],
679 /* Button in edit toolbar. */
681 .toolbar button.edit-toolbar {
684 min-width: 28px; /* Reset. */
689 .toolbar button
.edit-toolbar
[disabled
],
690 .gallery[tools][locked] > button.edit-toolbar {
693 pointer-events: none
;
696 .toolbar button.edit-toolbar[hidden] {
700 /* Do not show focus state if it's made by mouse since it makes difficult to see
701 * the toggle animation. */
702 .toolbar button.edit-toolbar:focus.using-mouse {
703 background-color: transparent
;
706 /* Edit main toolbar. */
707 .gallery > .toolbar .edit-main button {
711 .edit-main button.autofix .icon {
712 background-image: -webkit-image-set
(
713 url
(../images/100/auto_fix.png) 1x,
714 url
(../images/200/auto_fix.png) 2x);
717 .edit-main button.crop .icon {
718 background-image: -webkit-image-set
(
719 url
(../images/100/crop.png) 1x,
720 url
(../images/200/crop.png) 2x);
723 .edit-main button.exposure .icon {
724 background-image: -webkit-image-set
(
725 url
(../images/100/brightness.png) 1x,
726 url
(../images/200/brightness.png) 2x);
729 .edit-main button.rotate_right .icon {
730 background-image: -webkit-image-set
(
731 url
(../images/100/rotate_right.png) 1x,
732 url
(../images/200/rotate_right.png) 2x);
735 .edit-main button.rotate_left .icon {
736 background-image: -webkit-image-set
(
737 url
(../images/100/rotate_left.png) 1x,
738 url
(../images/200/rotate_left.png) 2x);
741 .edit-main button.undo .icon {
742 background-image: -webkit-image-set
(
743 url
(../images/100/undo.png) 1x,
744 url
(../images/200/undo.png) 2x);
747 .edit-main button.redo .icon {
748 background-image: -webkit-image-set
(
749 url
(../images/100/redo.png) 1x,
750 url
(../images/200/redo.png) 2x);
755 -webkit-box-orient: horizontal
;
756 -webkit-box-pack: center
;
760 pointer-events: none
;
765 .edit-modal-wrapper[hidden] {
769 .edit-modal-wrapper {
770 background-color: rgb
(20, 22, 25);
774 pointer-events: auto
;
778 .edit-modal-wrapper
.container
,
779 .edit-modal-wrapper .action-buttons {
786 .edit-modal-wrapper .container {
787 justify-content: center
;
790 .edit-modal-wrapper .action-buttons {
791 justify-content: flex-end
;
797 .edit-modal button.edit-toolbar {
798 background: transparent
;
801 box-sizing: border-box
;
808 .edit-modal button.edit-toolbar .icon {
812 .edit-modal button.edit-toolbar .label {
817 .edit-modal-wrapper .action-buttons button {
818 -webkit-margin-end: 8px;
822 justify-content: center
;
827 .edit-modal-wrapper .action-buttons button .label {
831 /* Crop aspect ratio buttons */
832 .edit-modal button.crop-aspect-ratio {
833 border: solid
1px white
;
839 transition: background
200ms ease
;
843 .edit-modal button.crop-aspect-ratio.selected {
847 .edit-modal button.crop-aspect-ratio:focus:not(.using-mouse) {
848 outline: 1px solid rgb
(77, 144, 254);
851 .edit-modal button.crop-aspect-ratio .label {
854 pointer-events: none
;
857 .edit-modal button.crop-aspect-ratio.selected .label {
858 color: rgb
(20, 22, 25);
861 .edit-modal button.crop-aspect-ratio paper-ripple {
871 .edit-modal .range > .icon {
872 -webkit-margin-end: 8px;
878 paper-slider::shadow
paper-progress::shadow #progressContainer
{
879 background-color: rgba
(255, 255, 255, 0.2);
882 .edit-modal .range.brightness > .icon {
883 background-image: -webkit-image-set
(
884 url
(../images/100/brightness.png) 1x,
885 url
(../images/200/brightness.png) 2x);
888 .edit-modal .range.contrast > .icon {
889 background-image: -webkit-image-set
(
890 url
(../images/100/contrast.png) 1x,
891 url
(../images/200/contrast.png) 2x);
896 .gallery .crop-overlay {
897 -webkit-box-orient: vertical
;
898 display: -webkit-box
;
900 pointer-events: none
;
905 .gallery .crop-overlay .shadow {
906 background-color: rgba
(0, 0, 0, 0.65);
909 .gallery .crop-overlay .middle-box {
911 -webkit-box-orient: horizontal
;
912 display: -webkit-box
;
915 .gallery .crop-frame {
917 display: -webkit-box
;
921 .gallery .crop-frame div {
922 background-color: rgba
(255, 255, 255, 1);
923 box-shadow: 0 0 3px rgba
(0, 0, 0, 0.75);
927 .gallery .crop-frame .horizontal {
933 .gallery .crop-frame .horizontal.top {
937 .gallery .crop-frame .horizontal.bottom {
941 .gallery .crop-frame .vertical {
947 .gallery .crop-frame .vertical.left {
951 .gallery .crop-frame .vertical.right {
955 .gallery .crop-frame .corner {
961 .gallery .crop-frame .corner.left {
965 .gallery .crop-frame .corner.right {
969 .gallery .crop-frame .corner.top {
973 .gallery .crop-frame .corner.bottom {
977 /* Prompt/notification panel */
979 .gallery .prompt-wrapper {
980 -webkit-box-orient: horizontal
;
981 -webkit-box-pack: center
;
982 display: -webkit-box
;
984 pointer-events: none
;
989 .gallery .prompt-wrapper[pos=top] {
990 -webkit-box-align: start
;
993 .gallery .prompt-wrapper[pos=center] {
994 -webkit-box-align: center
;
997 .gallery .prompt-wrapper[pos=center] .back-button {
1003 transition: opacity
220ms ease
;
1007 -webkit-box-align: center
;
1008 -webkit-box-orient: horizontal
;
1009 background-color: rgba
(0, 0, 0, 0.8);
1011 display: -webkit-box
;
1018 transition: all
180ms ease
;
1021 .gallery .prompt[state='fadein'] {
1026 .gallery .prompt[state='fadeout'] {
1031 .gallery .prompt-wrapper[pos=top] .prompt {
1032 padding-right: 10px;
1035 .gallery .share-menu {
1036 -webkit-box-align: stretch
;
1037 -webkit-box-orient: vertical
;
1038 -webkit-box-pack: start
;
1039 background-color: white
;
1040 border: 1px solid
#7f7f7f;
1043 display: -webkit-box
;
1048 transition: opacity
500ms ease-in-out
;
1051 .gallery .share-menu .bubble-point {
1052 background-image: -webkit-image-set
(
1053 url
(../images/100/bubble_point.png) 1x,
1054 url
(../images/200/bubble_point.png) 2x);
1055 background-position: center top
;
1056 background-repeat: no-repeat
;
1065 .gallery .share-menu[hidden] {
1066 bottom: -100%; /* Offscreen so that 'dimmed' attribute does not show it. */
1068 pointer-events: none
;
1071 .gallery .share-menu > .item {
1072 background-color: rgba
(0, 0, 0, 0);
1073 background-position: 5px center
;
1074 background-repeat: no-repeat
;
1080 .gallery .share-menu > .item:hover {
1081 background-color: rgba
(240, 240, 240, 1);
1084 .gallery .share-menu > div > img {
1089 /* Load spinner and error banner. */
1092 background-image: url
(chrome://resources
/images
/throbber_medium
.svg
);
1093 background-size: 100%;
1103 .gallery:not([spinner]) .spinner {
1107 .gallery .error-banner {
1108 -webkit-box-align: center
;
1109 -webkit-box-orient: horizontal
;
1110 -webkit-box-pack: center
;
1111 background-color: rgba
(24, 24, 24, 1);
1112 background-image: -webkit-image-set
(
1113 url
(../images/100/error.png) 1x,
1114 url
(../images/200/error.png) 2x);
1115 background-position: 25px center
;
1116 background-repeat: no-repeat
;
1118 display: -webkit-box
;
1121 padding-right: 35px;
1124 .gallery:not([error]) .error-banner {
1131 pointer-events: none
;
1137 .gallery[tools] .toast-stage {
1143 pointer-events: auto
;
1146 /* In order to do mode animated transitions smoothly we keep both mosaic and
1147 image-container but transparent. */
1148 .gallery:not([mode='slide']) .image-container {
1149 pointer-events: none
;
1152 .gallery:not
([mode
='slide']) .ribbon
,
1153 .gallery:not([mode='slide']) .arrow-box {
1155 pointer-events: none
;
1158 /* Temporary. Remove this along with the delete confirmation dialog
1159 when Undo delete is implemented. */
1161 background-color: black
;
1164 /* Slideshow controls */
1166 .slideshow-toolbar {
1169 justify-content: center
;
1171 padding-bottom: 6px;
1172 pointer-events: none
;
1177 .gallery[tools][slideshow] .slideshow-toolbar {
1181 .slideshow-toolbar > div {
1182 background-position: center
;
1183 background-repeat: no-repeat
;
1186 pointer-events: auto
;
1190 .slideshow-toolbar > div:hover {
1194 .slideshow-toolbar > .slideshow-play {
1195 background-image: -webkit-image-set
(
1196 url
(../images/100/slideshow_play.png) 1x,
1197 url
(../images/200/slideshow_play.png) 2x);
1200 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1201 background-image: -webkit-image-set
(
1202 url
(../images/100/slideshow_pause.png) 1x,
1203 url
(../images/200/slideshow_pause.png) 2x);
1206 .slideshow-toolbar > .slideshow-end {
1207 -webkit-margin-start: 4px;
1208 background-image: -webkit-image-set
(
1209 url
(../images/100/slideshow_close.png) 1x,
1210 url
(../images/200/slideshow_close.png) 2x);
1213 .debug-me
.load-target-content-metadata::before
,
1214 .debug-me
.load-target-external-metadata::before
,
1215 .debug-me .load-target-file-entry::before {
1226 .debug-me .load-target-content-metadata::before {
1227 background-color: rgba
(255, 0, 0, 0.3);
1230 .debug-me .load-target-external-metadata::before {
1231 background-color: rgba
(0, 255, 0, 0.3);
1234 .debug-me .load-target-file-entry::before {
1235 background-color: rgba
(0, 0, 255, 0.3);
1247 .thumbnail-view ul {
1248 -webkit-padding-end: 4px;
1249 -webkit-padding-start: 0;
1251 padding-top: 52px; /* Toolbar height (48px) + Margin (4px) */
1255 .thumbnail-view .thumbnail {
1256 -webkit-margin-start: 4px;
1262 html
[dir
='ltr'] .thumbnail-view
.thumbnail
{
1266 html
[dir
='rtl'] .thumbnail-view
.thumbnail
{
1270 .thumbnail-view .thumbnail.selected:focus {
1274 .thumbnail-view::-webkit-scrollbar {
1278 .thumbnail-view .scrollbar {
1282 top: 52px; /* Toolbar height (48px) + Margin (4px) */
1283 transition: opacity
1s;
1287 .thumbnail-view .scrollbar.transparent {
1289 pointer-events: none
;
1292 html
[dir
='ltr'] .thumbnail-view
.scrollbar
{
1296 html
[dir
='rtl'] .thumbnail-view
.scrollbar
{
1300 .thumbnail-view .scrollbar .thumb {
1301 -webkit-margin-end: 4px;
1302 background-color: white
;
1308 .thumbnail-view .thumbnail > .frame {
1316 .thumbnail-view .thumbnail > .frame.image {
1317 background-repeat: no-repeat
;
1318 background-size: cover
;
1321 .thumbnail-view .thumbnail.selected > .frame.selection {
1322 border: solid
2px rgb
(27, 168, 243);
1325 .thumbnail-view .thumbnail.error {
1329 .thumbnail-view .thumbnail.transparent {
1333 .thumbnail-view .animation-thumbnail {
1334 background-repeat: no-repeat
;
1335 background-size: cover
;
1340 .thumbnail-view .animation-thumbnail.animating {