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
3 * found in the LICENSE file. */
4
5body {
6  -webkit-user-select: none;
7  font-family: Open Sans, Droid Sans Fallback, sans-serif;
8  font-size: 84%;
9  margin: 0;
10}
11
12.gallery,
13.gallery .content {
14  bottom: 0;
15  left: 0;
16  overflow: hidden;
17  position: absolute;
18  right: 0;
19  top: 0;
20}
21
22/* Common background for both mosaic and slide mode. */
23.gallery .content {
24  background-color: black;
25}
26
27/* Close button */
28
29/* We actually want (left,top) to be (0,0) but for some weird reason
30   this triggers :hover style on page reload which is ugly. */
31.gallery > .back-button {
32  cursor: pointer;
33  left: 1px;
34  position: absolute;
35  top: 1px;
36  z-index: 200;
37}
38
39/* The close icon is in a nested div so that its opacity can be manipulated
40   independently from its parent (which can be dimmed when the crop frame
41   overlaps it) */
42.gallery > .back-button div {
43  background-image: -webkit-image-set(
44    url('../images/gallery/back_to_files.png') 1x,
45    url('../images/gallery/2x/back_to_files.png') 2x);
46  background-position: center center;
47  background-repeat: no-repeat;
48  height: 40px;
49  opacity: 0;
50  width: 64px;
51}
52
53.gallery[tools] > .back-button div {
54  opacity: 0.5;
55}
56
57.gallery[tools] > .back-button div:hover {
58  opacity: 1;
59}
60
61/* Image container and canvas elements */
62
63.gallery .image-container {
64  cursor: none;   /* Only visible when the toolbar is active */
65  height: 100%;
66  position: absolute;
67  width: 100%;
68}
69
70.gallery[tools] .image-container[cursor='default'] {
71  cursor: default;
72}
73
74.gallery[tools] .image-container[cursor='move'] {
75  cursor: -webkit-image-set(
76    url('../images/gallery/cursor_move.png') 1x,
77    url('../images/gallery/2x/cursor_move.png') 2x) 15 15, auto;
78}
79
80.gallery[tools] .image-container[cursor='crop'] {
81  cursor: -webkit-image-set(
82    url('../images/gallery/cursor_crop.png') 1x,
83    url('../images/gallery/2x/cursor_crop.png') 2x) 15 15, auto;
84}
85
86.gallery[tools] .image-container[cursor='n-resize'],
87.gallery[tools] .image-container[cursor='s-resize'] {
88  cursor: -webkit-image-set(
89    url('../images/gallery/cursor_updown.png') 1x,
90    url('../images/gallery/2x/cursor_updown.png') 2x) 15 15, auto;
91}
92
93.gallery[tools] .image-container[cursor='e-resize'],
94.gallery[tools] .image-container[cursor='w-resize'] {
95  cursor: -webkit-image-set(
96    url('../images/gallery/cursor_leftright.png') 1x,
97    url('../images/gallery/2x/cursor_leftright.png') 2x) 15 15, auto;
98}
99
100.gallery[tools] .image-container[cursor='nw-resize'],
101.gallery[tools] .image-container[cursor='se-resize'] {
102  cursor: -webkit-image-set(
103    url('../images/gallery/cursor_nwse.png') 1x,
104    url('../images/gallery/2x/cursor_nwse.png') 2x) 15 15, auto;
105}
106
107.gallery[tools] .image-container[cursor='ne-resize'],
108.gallery[tools] .image-container[cursor='sw-resize'] {
109  cursor: -webkit-image-set(
110    url('../images/gallery/cursor_swne.png') 1x,
111    url('../images/gallery/2x/cursor_swne.png') 2x) 15 15, auto;
112}
113
114.gallery .image-container > .image {
115  pointer-events: none;
116  position: absolute;
117  /* Duration and timing function are set in Javascript. */
118  transition-property: -webkit-transform, opacity;
119}
120
121.gallery .image-container > .image[fade] {
122  opacity: 0;
123}
124
125/* Full resolution image is invisible unless printing. */
126.gallery .image-container > canvas.fullres {
127  display: none;
128}
129
130@media print {
131  /* Do not print anything but the image content. */
132  .gallery > :not(.content) {
133    display: none !important;
134  }
135
136  /* Center the printed image. */
137  .gallery .image-container {
138    -webkit-box-align: center;
139    -webkit-box-orient: horizontal;
140    -webkit-box-pack: center;
141    display: -webkit-box;
142  }
143
144  /* Do not print the screen resolution image. */
145  .gallery .image-container > canvas.image {
146    display: none !important;
147  }
148
149  /* Print the full resolution image instead. */
150  .gallery .image-container > canvas.fullres {
151    display: block !important;
152    max-height: 100%;
153    max-width: 100%;
154  }
155
156  /* Print video at the center of the page */
157  .gallery .image-container > video.image {
158    position: auto !important;
159  }
160}
161
162/* Toolbar */
163
164.gallery > .header,
165.gallery > .toolbar {
166  -webkit-box-align: stretch;
167  -webkit-box-orient: horizontal;
168  -webkit-box-pack: start;
169  background-color: rgba(30, 30, 30, 0.8);
170  display: -webkit-box;
171  left: 0;
172  opacity: 0;
173  padding: 0 10px;
174  pointer-events: none;
175  position: absolute;
176  right: 0;
177  transition: opacity 300ms ease;
178}
179
180.gallery > .header {
181  -webkit-box-align: center;
182  -webkit-box-pack: end;
183  border-bottom: 1px solid rgba(50, 50, 50, 0.8);
184  display: -webkit-box;
185  height: 45px;
186  top: 0;
187}
188
189.gallery > .toolbar {
190  border-top: 1px solid rgba(50, 50, 50, 0.8);
191  bottom: 0;
192  height: 55px;
193  min-width: 800px;
194}
195
196.gallery[tools]:not([slideshow]) > .header,
197.gallery[tools]:not([slideshow]) > .toolbar {
198  opacity: 1;
199  pointer-events: auto;
200}
201
202/* Hide immediately when entering the slideshow. */
203.gallery[tools][slideshow] > .toolbar {
204  transition-duration: 0;
205}
206
207.gallery[tools][locked] > .toolbar {
208  pointer-events: none;
209}
210
211.gallery .arrow-box {
212  -webkit-box-align: center;
213  -webkit-box-orient: horizontal;
214  -webkit-box-pack: center;
215  display: -webkit-box;
216  height: 100%;
217  pointer-events: none;
218  position: absolute;
219  width: 100%;
220  z-index: 100;
221}
222
223.gallery .arrow-box .arrow {
224  opacity: 0;
225  pointer-events: none;
226}
227
228.gallery .arrow-box .arrow-spacer {
229  -webkit-box-flex: 1;
230  pointer-events: none;
231}
232
233.gallery[tools] .arrow-box[active] .arrow {
234  cursor: pointer;
235  opacity: 1;
236  pointer-events: auto;
237}
238
239/* The arrow icons are in nested divs so that their opacity can be manipulated
240 * independently from their parent (which can be dimmed when the crop frame
241 * overlaps it) */
242.gallery .arrow div {
243  background-position: center center;
244  background-repeat: no-repeat;
245  height: 193px;
246  opacity: 0;
247  width: 105px;
248}
249
250.gallery[tools] .arrow-box[active] .arrow div {
251  opacity: 0.25;
252}
253
254.gallery[tools] .arrow-box[active] .arrow div:hover {
255  opacity: 1;
256}
257
258.gallery .arrow.left div {
259  background-image: -webkit-image-set(
260    url('../images/gallery/arrow_left.png') 1x,
261    url('../images/gallery/2x/arrow_left.png') 2x);
262}
263
264.gallery .arrow.right div {
265  background-image: -webkit-image-set(
266    url('../images/gallery/arrow_right.png') 1x,
267    url('../images/gallery/2x/arrow_right.png') 2x);
268}
269
270/* Special behavior on mouse drag.
271  Redundant .gallery attributes included to make the rules more specific */
272
273/* Everything but the image container should become mouse-transparent */
274.gallery[tools][editing][mousedrag] * {
275  pointer-events: none;
276}
277
278.gallery[tools][editing][mousedrag] .image-container {
279  pointer-events: auto;
280}
281
282/* The editor marks elements with 'dimmed' attribute to get them out of the way
283   of the crop frame */
284.gallery[tools][editing] [dimmed],
285.gallery[tools][editing] [dimmed] * {
286  pointer-events: none;
287}
288
289.gallery[tools][editing] [dimmed] {
290  opacity: 0.2;
291}
292
293/* Filename */
294
295.gallery .filename-spacer {
296  position: relative;
297  width: 270px;
298}
299
300.gallery .filename-spacer > * {
301  background-color: transparent;
302  overflow: hidden;
303  position: absolute;
304  transition: visibility 0 linear 180ms, all 180ms linear;
305  width: 260px;
306}
307
308.gallery .filename-spacer * {
309  color: white;
310}
311
312.gallery .filename-spacer .namebox {
313  height: 22px;
314  top: 15px;
315}
316
317.gallery[editing] .filename-spacer .namebox {
318  height: 21px;
319  top: 5px;
320}
321
322
323.gallery .filename-spacer .namebox {
324  background-color: transparent;
325  border: none;
326  box-sizing: border-box;
327  cursor: pointer;
328  display: block;
329  font-size: 120%;
330  outline: none;
331  overflow: hidden;
332  padding: 0 3px;
333  position: absolute;
334  text-overflow: ellipsis;
335  white-space: nowrap;
336}
337
338.gallery .filename-spacer .namebox[disabled] {
339  -webkit-user-select: none;
340  cursor: default;
341}
342
343.gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
344  background-color: rgba(48, 48, 48, 1.0);
345}
346
347.gallery .filename-spacer .namebox:focus {
348  background-color: white;
349  color: black;
350  cursor: text;
351}
352
353.gallery .filename-spacer .options {
354  -webkit-box-align: center;
355  -webkit-box-orient: horizontal;
356  -webkit-box-pack: start;
357  display: -webkit-box;
358  opacity: 0;
359  top: 50px;
360  visibility: hidden;
361}
362
363.gallery[editing] .filename-spacer .options {
364  opacity: 1;
365  top: 28px;
366  visibility: visible;
367}
368
369.gallery .filename-spacer .saved,
370.gallery .filename-spacer .overwrite-original {
371  cursor: inherit;
372  font-size: 90%;
373  margin-left: 3px;
374  margin-right: 18px;
375  opacity: 0;
376  pointer-events: none;
377  transition: all linear 120ms;
378}
379
380.gallery[editing] .filename-spacer .saved {
381  color: white;
382  opacity: 0.5;
383}
384
385.gallery[editing] .filename-spacer .overwrite-original,
386.gallery[editing] .filename-spacer .overwrite-original > * {
387  cursor: pointer;
388  opacity: 1;
389  pointer-events: auto;
390}
391
392.gallery[editing] .options[saved] .overwrite-original {
393  opacity: 0.5;
394}
395
396.gallery[editing] .options[saved] .overwrite-original,
397.gallery[editing] .options[saved] .overwrite-original > * {
398  cursor: default;
399  pointer-events: none;
400}
401
402.gallery .filename-spacer .overwrite-original input {
403  margin-bottom: -2px;
404  margin-right: 6px;
405}
406
407.gallery .filename-spacer .saved[highlighted] {
408  -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
409  opacity: 1;
410}
411
412/* Bubble */
413.gallery .toolbar .bubble {
414  bottom: 65px;
415  font-size: 85%;
416  left: 50px;
417  position: absolute;
418  width: 220px;
419}
420
421.gallery:not([editing]) .toolbar .bubble {
422  display: none;
423}
424
425/* Toolbar buttons */
426
427.gallery .button-spacer {
428  -webkit-box-flex: 1;
429  display: -webkit-box;
430}
431
432/* Thumbnails */
433
434.gallery .ribbon-spacer {
435  -webkit-box-align: center;
436  -webkit-box-orient: horizontal;
437  -webkit-box-pack: center;
438  display: -webkit-box;
439  height: 100%;
440  left: 280px;
441  position: absolute;
442  right: 280px;
443}
444
445.gallery .toolbar .ribbon {
446  -webkit-box-flex: 0;
447  -webkit-box-orient: horizontal;
448  -webkit-box-pack: start;
449  display: -webkit-box;
450  height: 100%;
451  overflow: hidden;
452  transition: opacity 180ms linear, visibility 0 linear;
453  z-index: 0;
454}
455
456.gallery[editing] .toolbar .ribbon {
457  opacity: 0;
458  transition-delay: 0, 180ms;
459  visibility: hidden;
460}
461
462.gallery .ribbon-image {
463  -webkit-box-align: center;
464  -webkit-box-orient: horizontal;
465  -webkit-box-pack: center;
466  border: 2px solid rgba(255, 255, 255, 0);  /* transparent white */
467  cursor: pointer;
468  display: -webkit-box;
469  height: 47px;
470  margin: 2px;
471  overflow: hidden;
472  transition: all 180ms linear;
473  width: 47px;
474}
475
476.ribbon-image[vanishing='smooth'] {
477  border-left-width: 0;
478  border-right-width: 0;
479  margin-left: 0;
480  margin-right: 0;
481  width: 0;
482}
483
484.gallery .ribbon-image[selected] {
485  border: 2px solid rgba(255, 233, 168, 1);
486}
487
488.gallery .toolbar .ribbon.fade-left {
489  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
490                                                rgba(0, 0, 0, 1) 40px);
491}
492
493.gallery .toolbar .ribbon.fade-right {
494  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0,
495                                               rgba(0, 0, 0, 1) 40px);
496}
497
498.gallery .toolbar .ribbon.fade-left.fade-right {
499  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
500                                                rgba(0, 0, 0, 1) 40px,
501                                                rgba(0, 0, 0, 1) 230px,
502                                                rgba(0, 0, 0, 0) 100%);
503}
504
505.gallery .image-wrapper {
506  background-size: 45px 45px;
507  border: 1px solid rgba(0, 0, 0, 0);  /* transparent black */
508  height: 45px;
509  overflow: hidden;
510  position: relative;
511  width: 45px;
512}
513
514.gallery .image-wrapper > img {
515  position: absolute;
516}
517
518.gallery .image-wrapper > img:not(.cached) {
519  -webkit-animation: fadeIn 500ms ease-in;
520}
521
522/* Editor buttons */
523
524.gallery .edit-bar-spacer {
525  -webkit-box-align: center;
526  -webkit-box-orient: horizontal;
527  -webkit-box-pack: center;
528  display: -webkit-box;
529  height: 100%;
530  left: 280px;
531  opacity: 0;
532  position: absolute;
533  right: 280px;
534  transition: opacity 180ms linear, visibility 0 linear 180ms;
535  visibility: hidden;
536}
537
538.gallery .toolbar .edit-main {
539  -webkit-box-orient: horizontal;
540  -webkit-box-pack: center;
541  color: white;
542  display: -webkit-box;
543  height: 55px;
544  overflow: visible;
545}
546
547.gallery[editing] .edit-bar-spacer {
548  opacity: 1.0;
549  pointer-events: auto;
550  transition-delay: 100ms, 100ms;
551  visibility: visible;
552}
553
554.gallery .header button,
555.gallery .toolbar button,
556.gallery .header button[disabled],
557.gallery .toolbar button[disabled] {
558  -webkit-box-align: center;
559  -webkit-box-flex: 0;
560  -webkit-box-orient: horizontal;
561  -webkit-box-pack: end;
562  background-color: rgba(0, 0, 0, 0);
563  background-position: center;
564  background-repeat: no-repeat;
565  border: none;
566  box-shadow: none;
567  color: white;
568  cursor: pointer;
569  display: -webkit-box;
570  opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
571  padding: 1px;  /* Instead of a border. */
572  position: relative;
573  z-index: 10;
574}
575
576.gallery .header button,
577.gallery .toolbar button {
578  height: 40px;
579  margin: 6px 0;
580  min-width: 40px;  /* Reset. */
581  width: 40px;
582}
583
584/* By default, labels are hidden. */
585.gallery > .toolbar button span {
586  display: none;
587}
588
589/* Show labels if there is enough space. */
590@media (min-width: 1180px) {
591
592  .gallery .edit-main button,
593  .gallery .edit-main button[disabled] {
594    background-position: 5px center;
595    max-width: 60px;
596    min-width: 0;  /* Reset. */
597    padding: 0 10px 0 35px;
598    width: auto;
599  }
600
601  .gallery > .toolbar button span {
602    display: inline;
603  }
604
605}
606
607.gallery .header button:hover,
608.gallery .toolbar button:hover {
609  background-color: rgba(31, 31, 31, 1);
610  color: white;
611}
612
613.gallery .header button:active,
614.gallery .toolbar button:active,
615.gallery .header button[pressed],
616.gallery .toolbar button[pressed],
617.gallery .header button[pressed]:hover,
618.gallery .toolbar button[pressed]:hover {
619  background-color: rgba(240, 240, 240, 1);
620  color: black;
621}
622
623.gallery > .toolbar button.autofix {
624  background-image: -webkit-image-set(
625    url('../images/gallery/icon_autofix.png') 1x,
626    url('../images/gallery/2x/icon_autofix.png') 2x);
627}
628
629.gallery > .toolbar button.autofix:active,
630.gallery > .toolbar button.autofix[pressed] {
631  background-image: -webkit-image-set(
632    url('../images/gallery/icon_autofix_selected.png') 1x,
633    url('../images/gallery/2x/icon_autofix_selected.png') 2x);
634}
635
636.gallery > .toolbar button.crop {
637  background-image:  -webkit-image-set(
638    url('../images/gallery/icon_crop.png') 1x,
639    url('../images/gallery/2x/icon_crop.png') 2x);
640}
641
642.gallery > .toolbar button.crop:active,
643.gallery > .toolbar button.crop[pressed] {
644  background-image:  -webkit-image-set(
645    url('../images/gallery/icon_crop_selected.png') 1x,
646    url('../images/gallery/2x/icon_crop_selected.png') 2x);
647}
648
649.gallery > .toolbar button.exposure {
650  background-image: -webkit-image-set(
651    url('../images/gallery/icon_brightness.png') 1x,
652    url('../images/gallery/2x/icon_brightness.png') 2x);
653}
654
655.gallery > .toolbar button.exposure:active,
656.gallery > .toolbar button.exposure[pressed] {
657  background-image: -webkit-image-set(
658    url('../images/gallery/icon_brightness_selected.png') 1x,
659    url('../images/gallery/2x/icon_brightness_selected.png') 2x);
660}
661
662.gallery > .toolbar button.rotate_right {
663  background-image: -webkit-image-set(
664    url('../images/gallery/icon_rotate.png') 1x,
665    url('../images/gallery/2x/icon_rotate.png') 2x);
666}
667
668.gallery > .toolbar button.rotate_right:active,
669.gallery > .toolbar button.rotate_right[pressed] {
670  background-image: -webkit-image-set(
671    url('../images/gallery/icon_rotate_selected.png') 1x,
672    url('../images/gallery/2x/icon_rotate_selected.png') 2x);
673}
674
675.gallery > .toolbar button.rotate_left {
676  background-image: -webkit-image-set(
677    url('../images/gallery/icon_rotate_left.png') 1x,
678    url('../images/gallery/2x/icon_rotate_left.png') 2x);
679}
680
681.gallery > .toolbar button.rotate_left:active,
682.gallery > .toolbar button.rotate_left[pressed] {
683  background-image: -webkit-image-set(
684    url('../images/gallery/icon_rotate_left_selected.png') 1x,
685    url('../images/gallery/2x/icon_rotate_left_selected.png') 2x);
686}
687
688.gallery > .toolbar button.undo {
689  background-image: -webkit-image-set(
690    url('../images/gallery/icon_undo.png') 1x,
691    url('../images/gallery/2x/icon_undo.png') 2x);
692}
693
694.gallery > .toolbar button.undo:active,
695.gallery > .toolbar button.undo[pressed] {
696  background-image: -webkit-image-set(
697    url('../images/gallery/icon_undo_selected.png') 1x,
698    url('../images/gallery/2x/icon_undo_selected.png') 2x);
699}
700
701.gallery > .toolbar button.redo {
702  background-image: -webkit-image-set(
703    url('../images/gallery/icon_redo.png') 1x,
704    url('../images/gallery/2x/icon_redo.png') 2x);
705  position: absolute;  /* Exclude from center-packing*/
706}
707
708.gallery > .toolbar button.redo:active,
709.gallery > .toolbar button.redo[pressed] {
710  background-image: -webkit-image-set(
711    url('../images/gallery/icon_redo_selected.png') 1x,
712    url('../images/gallery/2x/icon_redo_selected.png') 2x);
713}
714
715.gallery > .toolbar button[disabled],
716.gallery[tools][locked] > .toolbar button {
717  opacity: 0.5;
718  pointer-events: none;
719}
720
721.gallery > .toolbar button[hidden] {
722  display: none;
723}
724
725.gallery[mode='slide'] > .toolbar > button.mode {
726  background-image: -webkit-image-set(
727    url('../images/gallery/icon_mosaic.png') 1x,
728    url('../images/gallery/2x/icon_mosaic.png') 2x);
729}
730
731.gallery[mode='slide'] > .toolbar > button.mode:active {
732  background-image: -webkit-image-set(
733    url('../images/gallery/icon_mosaic_selected.png') 1x,
734    url('../images/gallery/2x/icon_mosaic_selected.png') 2x);
735}
736
737.gallery[mode='mosaic'] > .toolbar > button.mode {
738  background-image: -webkit-image-set(
739    url('../images/gallery/icon_1up.png') 1x,
740    url('../images/gallery/2x/icon_1up.png') 2x);
741}
742
743.gallery[mode='mosaic'] > .toolbar > button.mode:active {
744  background-image: -webkit-image-set(
745    url('../images/gallery/icon_1up_selected.png') 1x,
746    url('../images/gallery/2x/icon_1up_selected.png') 2x);
747}
748
749.gallery > .toolbar > button.slideshow {
750  background-image: -webkit-image-set(
751    url('../images/gallery/icon_slideshow.png') 1x,
752    url('../images/gallery/2x/icon_slideshow.png') 2x);
753}
754
755.gallery > .toolbar > button.slideshow:active,
756.gallery > .toolbar > button.slideshow[pressed] {
757    background-image: -webkit-image-set(
758        url('../images/gallery/icon_slideshow_selected.png') 1x,
759        url('../images/gallery/2x/icon_slideshow_selected.png') 2x);
760}
761
762.gallery > .toolbar > button.delete {
763  background-image: -webkit-image-set(
764    url('../images/gallery/icon_delete.png') 1x,
765    url('../images/gallery/2x/icon_delete.png') 2x);
766}
767
768.gallery > .toolbar > button.delete:active {
769  background-image: -webkit-image-set(
770    url('../images/gallery/icon_delete_selected.png') 1x,
771    url('../images/gallery/2x/icon_delete_selected.png') 2x);
772}
773
774.gallery > .toolbar > button.edit {
775  background-image: -webkit-image-set(
776    url('../images/gallery/icon_edit.png') 1x,
777    url('../images/gallery/2x/icon_edit.png') 2x);
778}
779
780.gallery > .toolbar > button.edit:active,
781.gallery > .toolbar > button.edit[pressed] {
782  background-image: -webkit-image-set(
783    url('../images/gallery/icon_edit_selected.png') 1x,
784    url('../images/gallery/2x/icon_edit_selected.png') 2x);
785}
786
787.gallery > .toolbar > button.print {
788  background-image: -webkit-image-set(
789    url('../images/gallery/icon_print.png') 1x,
790    url('../images/gallery/2x/icon_print.png') 2x);
791}
792
793.gallery > .toolbar > button.print:active,
794.gallery > .toolbar > button.print[pressed] {
795  background-image: -webkit-image-set(
796    url('../images/gallery/icon_print_selected.png') 1x,
797    url('../images/gallery/2x/icon_print_selected.png') 2x);
798}
799
800.gallery > .toolbar > button.share {
801  background-image: -webkit-image-set(
802    url('../images/gallery/icon_share.png') 1x,
803    url('../images/gallery/2x/icon_share.png') 2x);
804}
805
806.gallery > .toolbar > button.share:active,
807.gallery > .toolbar > button.share[pressed] {
808  background-image: -webkit-image-set(
809    url('../images/gallery/icon_share_selected.png') 1x,
810    url('../images/gallery/2x/icon_share_selected.png') 2x);
811}
812
813.gallery > .toolbar > button.share[disabled] {
814  display: none;
815}
816
817/* Secondary toolbar (mode-specific tools) */
818
819.gallery .edit-modal {
820  -webkit-box-orient: horizontal;
821  -webkit-box-pack: center;
822  bottom: 80px;
823  display: -webkit-box;
824  height: 40px;
825  pointer-events: none;
826  position: absolute;
827  width: 100%;
828}
829
830.gallery .edit-modal-wrapper[hidden] {
831  display: none;
832}
833
834.gallery .edit-modal-wrapper {
835  -webkit-box-align: center;
836  -webkit-box-orient: horizontal;
837  -webkit-box-pack: center;
838  background-color: rgba(0, 0, 0, 0.75);
839  color: white;
840  display: -webkit-box;
841  padding-right: 5px;
842  pointer-events: auto;
843}
844
845.gallery .edit-modal .label {
846  -webkit-box-align: center;
847  -webkit-box-orient: horizontal;
848  background-position: 20px center;
849  background-repeat: no-repeat;
850  display: -webkit-box;
851  height: 20px;
852  padding-left: 50px;
853  padding-right: 10px;
854}
855
856.gallery .edit-modal .label.brightness {
857  background-image: -webkit-image-set(
858    url('../images/gallery/icon_brightness.png') 1x,
859    url('../images/gallery/2x/icon_brightness.png') 2x);
860}
861
862.gallery .edit-modal .label.contrast {
863  background-image: -webkit-image-set(
864    url('../images/gallery/icon_contrast.png') 1x,
865    url('../images/gallery/2x/icon_contrast.png') 2x);
866  height: 24px;
867  margin-left: 15px;
868}
869
870.gallery .edit-modal .range {
871  -webkit-appearance: none !important;
872  height: 3px;
873  margin-right: 10px;
874  margin-top: 1px;
875}
876
877.gallery .edit-modal .range::-webkit-slider-thumb {
878  -webkit-appearance: none;
879  background-image: -webkit-image-set(
880    url('../images/gallery/slider_thumb.png') 1x,
881    url('../images/gallery/2x/slider_thumb.png') 2x);
882  height: 29px;
883  width: 16px;
884}
885
886/* Crop frame */
887
888.gallery .crop-overlay {
889  -webkit-box-orient: vertical;
890  display: -webkit-box;
891  pointer-events: none;
892  position: absolute;
893}
894
895.gallery .crop-overlay .shadow {
896  background-color: rgba(0, 0, 0, 0.65);
897}
898
899.gallery .crop-overlay .middle-box {
900  -webkit-box-flex: 1;
901  -webkit-box-orient: horizontal;
902  display: -webkit-box;
903}
904
905.gallery .crop-frame {
906  -webkit-box-flex: 1;
907  display: -webkit-box;
908  position: relative;
909}
910
911.gallery .crop-frame div {
912  background-color: rgba(255, 255, 255, 1);
913  box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
914  position: absolute;
915}
916
917.gallery .crop-frame .horizontal {
918  height: 1px;
919  left: 7px;
920  right: 7px;
921}
922
923.gallery .crop-frame .horizontal.top {
924  top: 0;
925}
926
927.gallery .crop-frame .horizontal.bottom {
928  bottom: 0;
929}
930
931.gallery .crop-frame .vertical {
932  bottom: 7px;
933  top: 7px;
934  width: 1px;
935}
936
937.gallery .crop-frame .vertical.left {
938  left: 0;
939}
940
941.gallery .crop-frame .vertical.right {
942  right: 0;
943}
944
945.gallery .crop-frame .corner {
946  border-radius: 6px;
947  height: 13px;
948  width: 13px;
949}
950
951.gallery .crop-frame .corner.left {
952  left: -6px;
953}
954
955.gallery .crop-frame .corner.right {
956  right: -6px;
957}
958
959.gallery .crop-frame .corner.top {
960  top: -6px;
961}
962
963.gallery .crop-frame .corner.bottom {
964  bottom: -6px;
965}
966
967/* Prompt/notification panel */
968
969.gallery .prompt-wrapper {
970  -webkit-box-orient: horizontal;
971  -webkit-box-pack: center;
972  display: -webkit-box;
973  height: 100%;
974  pointer-events: none;
975  position: absolute;
976  width: 100%;
977}
978
979.gallery .prompt-wrapper[pos=top] {
980  -webkit-box-align: start;
981}
982
983.gallery .prompt-wrapper[pos=center] {
984  -webkit-box-align: center;
985}
986
987.gallery .prompt-wrapper[pos=center] .back-button {
988  display: none;
989}
990
991.gallery .prompt-wrapper > div.dimmable {
992  opacity: 1;
993  transition: opacity 220ms ease;
994}
995
996.gallery .prompt {
997  -webkit-box-align: center;
998  -webkit-box-orient: horizontal;
999  background-color: rgba(0, 0, 0, 0.8);
1000  color: white;
1001  display: -webkit-box;
1002  font-size: 120%;
1003  height: 40px;
1004  opacity: 0;
1005  padding: 0 20px;
1006  position: relative;
1007  top: 5px;
1008  transition: all 180ms ease;
1009}
1010
1011.gallery .prompt[state='fadein'] {
1012  opacity: 1;
1013  top: 0;
1014}
1015
1016.gallery .prompt[state='fadeout'] {
1017  opacity: 0;
1018  top: 0;
1019}
1020
1021.gallery .prompt-wrapper[pos=top] .prompt {
1022  padding-right: 10px;
1023}
1024
1025.gallery .prompt .back-button {
1026  background-image: -webkit-image-set(
1027    url('../images/gallery/butterbar_close_button.png') 1x,
1028    url('../images/gallery/2x/butterbar_close_button.png') 2x);
1029  background-position: center center;
1030  background-repeat: no-repeat;
1031  height: 16px;
1032  margin-left: 16px;
1033  opacity: 0.65;
1034  pointer-events: auto;
1035  width: 16px;
1036}
1037
1038.gallery .prompt .back-button:hover {
1039  background-color: rgba(81, 81, 81, 1);
1040  opacity: 1.0;
1041}
1042
1043.gallery .share-menu {
1044  -webkit-box-align: stretch;
1045  -webkit-box-orient: vertical;
1046  -webkit-box-pack: start;
1047  background-color: white;
1048  border: 1px solid #7f7f7f;
1049  border-radius: 1px;
1050  bottom: 60px;
1051  display: -webkit-box;
1052  opacity: 1.0;
1053  padding: 8px;
1054  position: absolute;
1055  right: 10px;
1056  transition: opacity 500ms ease-in-out;
1057}
1058
1059.gallery .share-menu .bubble-point {
1060  background-image: -webkit-image-set(
1061    url('../images/gallery/bubble_point.png') 1x,
1062    url('../images/gallery/2x/bubble_point.png') 2x);
1063  background-position: center top;
1064  background-repeat: no-repeat;
1065  bottom: -8px;
1066  height: 8px;
1067  padding: 0;
1068  position: absolute;
1069  right: 20px;
1070  width: 20px;
1071}
1072
1073.gallery .share-menu[hidden] {
1074  bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1075  opacity: 0;
1076  pointer-events: none;
1077}
1078
1079.gallery .share-menu > .item {
1080  background-color: rgba(0, 0, 0, 0);
1081  background-position: 5px center;
1082  background-repeat: no-repeat;
1083  cursor: pointer;
1084  padding: 5px;
1085  padding-left: 26px;
1086}
1087
1088.gallery .share-menu > .item:hover {
1089  background-color: rgba(240, 240, 240, 1);
1090}
1091
1092.gallery .share-menu > div > img {
1093  display: block;
1094  margin-right: 5px;
1095}
1096
1097/* Load spinner and error banner. */
1098
1099.gallery .spinner {
1100  background-image: url(../images/common/spinner.svg);
1101  background-size: 100%;
1102  height: 16px;
1103  left: 50%;
1104  margin-left: -8px;
1105  margin-top: -8px;
1106  position: absolute;
1107  top: 50%;
1108  width: 16px;
1109}
1110
1111.gallery:not([spinner]) .spinner {
1112  display: none;
1113}
1114
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('../images/media/error.png') 1x,
1122    url('../images/media/2x/error.png') 2x);
1123  background-position: 25px center;
1124  background-repeat: no-repeat;
1125  color: white;
1126  display: -webkit-box;
1127  height: 54px;
1128  padding-left: 70px;
1129  padding-right: 35px;
1130}
1131
1132.gallery:not([error]) .error-banner {
1133  display: none;
1134}
1135
1136/* Video playback support. */
1137
1138.gallery video {
1139  height: 100%;
1140  position: absolute;
1141  width: 100%;
1142}
1143
1144.gallery .video-controls-spacer {
1145  -webkit-box-align: center;
1146  -webkit-box-orient: horizontal;
1147  -webkit-box-pack: center;
1148  bottom: 60px;  /* Just above the toolbar */
1149  display: -webkit-box;
1150  height: 30px;
1151  left: 0;
1152  opacity: 0;
1153  pointer-events: none;
1154  position: absolute;
1155  right: 0;
1156}
1157
1158.gallery[video] .video-controls-spacer {
1159  /* Animate opacity on 'tools' attribute toggle. */
1160  /* Change opacity immediately on 'video' attribute change. */
1161  transition: opacity 280ms ease;
1162}
1163
1164.gallery[video][tools] .video-controls-spacer {
1165  opacity: 1;
1166}
1167
1168.gallery .video-controls {
1169  display: none;
1170  max-width: 800px;
1171}
1172
1173.gallery[video] .video-controls {
1174  -webkit-box-flex: 1;
1175  display: -webkit-box;
1176}
1177
1178.gallery[video] > .toolbar .edit-main {
1179  display: none;
1180}
1181
1182/* Mosaic view. */
1183.mosaic {
1184  bottom: 55px;  /* Toolbar height. */
1185  left: 0;
1186  overflow-x: scroll;
1187  overflow-y: hidden;
1188  position: absolute;
1189  right: 0;
1190  top: 0;
1191
1192  /* transition-duration is set in Javascript. */
1193  transition-property: -webkit-transform;
1194  transition-timing-function: linear;
1195}
1196
1197.mosaic::-webkit-scrollbar {
1198  background: transparent;
1199}
1200
1201.mosaic::-webkit-scrollbar-thumb {
1202  background: rgb(31, 31, 31);
1203}
1204
1205.gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1206  background: transparent;
1207}
1208
1209.mosaic-tile {
1210  position: absolute;
1211  /* Tile's zoom factor is animated on hover. We apply the transform to
1212  the entire tile so that the image outline is included into the animation. */
1213  transition: -webkit-transform 150ms linear;
1214}
1215
1216/* Mosaic tile's opacity is controlled by |visible| attribute which changes
1217   separately from .gallery[mode] */
1218.mosaic:not([visible]) .mosaic-tile .img-border {
1219  opacity: 0;
1220}
1221
1222/* Animate tile's opacity, except for the selected tile which should show/hide
1223  instantly (this looks better when zooming to/from the slide mode). */
1224.mosaic-tile:not([selected]) .img-border {
1225  transition: opacity 350ms linear;
1226}
1227
1228/* Must be in sync with mosaic_mode.js.
1229  Mosaic.Layout.SPACING should be equal to
1230    top + bottom + border-top-width + border-bottom-width AND
1231    left + right + border-left-width + border-right-width */
1232.mosaic-tile .img-border {
1233  border: 1px solid black;  /* Space between the outline and the image. */
1234  bottom: 4px;
1235  left: 4px;
1236  outline: 2px solid transparent;
1237  overflow: hidden;
1238  position: absolute;
1239  right: 4px;
1240  top: 4px;
1241}
1242
1243/* Selected and hover state are only visible when zoom transition is over. */
1244.mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1245  outline-color: rgb(51, 153, 255);
1246}
1247
1248.mosaic[visible='normal'].hover-visible .mosaic-tile:hover {
1249  -webkit-transform: scale(1.05);
1250  z-index: 50;
1251}
1252
1253.mosaic[visible='normal'].hover-visible
1254    .mosaic-tile:hover:not([selected]) .img-border {
1255  outline-color: rgb(182, 212, 252);
1256}
1257
1258.mosaic-tile .img-wrapper {
1259  bottom: 0;
1260  left: 0;
1261  position: absolute;
1262  right: 0;
1263  top: 0;
1264}
1265
1266.mosaic-tile .img-wrapper[generic-thumbnail],
1267.mosaic-tile .img-wrapper.animated:not([generic-thumbnail])
1268    canvas:not(.cached) {
1269  -webkit-animation: fadeIn ease-in 1;
1270  -webkit-animation-duration: 500ms;
1271  -webkit-animation-fill-mode: forwards;
1272}
1273
1274@-webkit-keyframes fadeIn {
1275  from {
1276    opacity: 0;
1277  }
1278  to {
1279    opacity: 1;
1280  }
1281}
1282
1283/* In order to do mode animated transitions smoothly we keep both mosaic and
1284  image-container but transparent. */
1285.gallery:not([mode='mosaic']) .mosaic,
1286.gallery:not([mode='slide']) .image-container {
1287  pointer-events: none;
1288}
1289
1290.gallery:not([mode='slide']) .ribbon,
1291.gallery:not([mode='slide']) .arrow-box {
1292  opacity: 0;
1293  pointer-events: none;
1294}
1295
1296/* Temporary. Remove this along with the delete confirmation dialog
1297  when Undo delete is implemented. */
1298.cr-dialog-shield {
1299  background-color: black;
1300}
1301
1302/* Slideshow controls */
1303
1304.slideshow-toolbar {
1305  -webkit-box-align: center;
1306  -webkit-box-orient: horizontal;
1307  -webkit-box-pack: center;
1308  bottom: 0;
1309  display: none;
1310  left: 0;
1311  padding-bottom: 6px;
1312  pointer-events: none;
1313  position: absolute;
1314  right: 0;
1315}
1316
1317.gallery[tools][slideshow] .slideshow-toolbar {
1318  display: -webkit-box;
1319}
1320
1321.slideshow-toolbar > div {
1322  background-position: center;
1323  background-repeat: no-repeat;
1324  height: 68px;
1325  opacity: 0.5;
1326  pointer-events: auto;
1327  width: 68px;
1328}
1329
1330.slideshow-toolbar > div:hover {
1331  opacity: 1;
1332}
1333
1334.slideshow-toolbar > .slideshow-play {
1335  background-image: -webkit-image-set(
1336    url('../images/gallery/slideshow-play.png') 1x,
1337    url('../images/gallery/2x/slideshow-play.png') 2x);
1338  margin-right: -2px;
1339}
1340
1341.gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1342  background-image: -webkit-image-set(
1343    url('../images/gallery/slideshow-pause.png') 1x,
1344    url('../images/gallery/2x/slideshow-pause.png') 2x);
1345}
1346
1347.slideshow-toolbar > .slideshow-end {
1348  background-image: -webkit-image-set(
1349    url('../images/gallery/slideshow-end.png') 1x,
1350    url('../images/gallery/2x/slideshow-end.png') 2x);
1351  margin-left: -2px;
1352}
1353
1354.gallery > .header > button {
1355  -webkit-margin-start: 10px;
1356  cursor: default;
1357  height: 32px;
1358  min-width: 32px;
1359  width: 32px;
1360}
1361
1362.gallery > .header > .minimize-button {
1363  background: -webkit-image-set(
1364    url('chrome://resources/images/apps/topbar_button_minimize.png') 1x,
1365    url('chrome://resources/images/2x/apps/topbar_button_minimize.png') 2x)
1366    center;
1367}
1368
1369.gallery > .header > .maximize-button {
1370  background: -webkit-image-set(
1371    url('chrome://resources/images/apps/topbar_button_maximize.png') 1x,
1372    url('chrome://resources/images/2x/apps/topbar_button_maximize.png') 2x)
1373    center;
1374}
1375
1376.gallery > .header > .close-button {
1377  background: -webkit-image-set(
1378    url('chrome://resources/images/apps/topbar_button_close.png') 1x,
1379    url('chrome://resources/images/2x/apps/topbar_button_close.png') 2x)
1380    center;
1381}
1382