ui/file_manager/gallery/css/gallery.css

   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. */
   4
   5 body {
   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 input:focus, button:focus {
  13   outline: 1px solid rgb(77, 144, 254);
  14 }
  15
  16 input[type='checkbox'] {
  17   width: 15px;
  18   height: 15px;
  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)
  22       -1px -1px;
  23   -webkit-appearance: none;
  24   display: inline-block;
  25   margin: 1px 6px 1px 1px;
  26   vertical-align: text-bottom;
  27 }
  28
  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)
  33       -1px -1px;
  34 }
  35
  36 .gallery,
  37 .gallery .content {
  38   bottom: 0;
  39   left: 0;
  40   overflow: hidden;
  41   position: absolute;
  42   right: 0;
  43   top: 0;
  44 }
  45
  46 /* Common background for both mosaic and slide mode. */
  47 .gallery .content {
  48   background-color: black;
  49 }
  50
  51 /* Image container and canvas elements */
  52
  53 .gallery .image-container {
  54   cursor: none;   /* Only visible when the toolbar is active */
  55   height: 100%;
  56   position: absolute;
  57   width: 100%;
  58 }
  59
  60 .gallery[tools] .image-container[cursor='default'] {
  61   cursor: default;
  62 }
  63
  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;
  68 }
  69
  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;
  74 }
  75
  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;
  81 }
  82
  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;
  88 }
  89
  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;
  95 }
  96
  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;
 102 }
 103
 104 .gallery .image-container > .image {
 105   pointer-events: none;
 106   position: absolute;
 107   /* Duration and timing function are set in Javascript. */
 108   transition-property: -webkit-transform, opacity;
 109 }
 110
 111 .gallery .image-container > .image[fade] {
 112   opacity: 0;
 113 }
 114
 115 /* Full resolution image is invisible unless printing. */
 116 .gallery .image-container > canvas.fullres {
 117   display: none;
 118 }
 119
 120 @media print {
 121   /* Do not print anything but the image content. */
 122   .gallery > :not(.content) {
 123     display: none !important;
 124   }
 125
 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;
 132   }
 133
 134   /* Do not print the screen resolution image. */
 135   .gallery .image-container > canvas.image {
 136     display: none !important;
 137   }
 138
 139   /* Print the full resolution image instead. */
 140   .gallery .image-container > canvas.fullres {
 141     display: block !important;
 142     max-height: 100%;
 143     max-width: 100%;
 144   }
 145 }
 146
 147 /* Toolbar */
 148
 149 .gallery > .header,
 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;
 156   left: 0;
 157   opacity: 0;
 158   padding: 0 10px;
 159   pointer-events: none;
 160   position: absolute;
 161   right: 0;
 162   transition: opacity 300ms ease;
 163 }
 164
 165 .gallery > .header {
 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;
 171   height: 45px;
 172   top: 0;
 173 }
 174
 175 .gallery .header button {
 176   -webkit-app-region: no-drag;
 177 }
 178
 179 .gallery > .toolbar {
 180   border-top: 1px solid rgba(50, 50, 50, 0.8);
 181   bottom: 0;
 182   height: 55px;
 183   min-width: 800px;
 184 }
 185
 186 .gallery[tools]:not([slideshow]) > .header,
 187 .gallery[tools]:not([slideshow]) > .toolbar {
 188   opacity: 1;
 189   pointer-events: auto;
 190 }
 191
 192 /* Hide immediately when entering the slideshow. */
 193 .gallery[tools][slideshow] > .toolbar {
 194   transition-duration: 0;
 195 }
 196
 197 .gallery[tools][locked] > .toolbar {
 198   pointer-events: none;
 199 }
 200
 201 .gallery .arrow-box {
 202   -webkit-box-align: center;
 203   -webkit-box-orient: horizontal;
 204   -webkit-box-pack: center;
 205   display: -webkit-box;
 206   height: 100%;
 207   pointer-events: none;
 208   position: absolute;
 209   width: 100%;
 210   z-index: 100;
 211 }
 212
 213 .gallery .arrow-box .arrow {
 214   opacity: 0;
 215   pointer-events: none;
 216 }
 217
 218 .gallery .arrow-box .arrow-spacer {
 219   -webkit-box-flex: 1;
 220   pointer-events: none;
 221 }
 222
 223 .gallery[tools] .arrow-box[active] .arrow {
 224   cursor: pointer;
 225   opacity: 1;
 226   pointer-events: auto;
 227 }
 228
 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
 231  * overlaps it) */
 232 .gallery .arrow div {
 233   background-position: center center;
 234   background-repeat: no-repeat;
 235   height: 193px;
 236   opacity: 0;
 237   width: 105px;
 238 }
 239
 240 .gallery[tools] .arrow-box[active] .arrow div {
 241   opacity: 0.25;
 242 }
 243
 244 .gallery[tools] .arrow-box[active] .arrow div:hover {
 245   opacity: 1;
 246 }
 247
 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);
 252 }
 253
 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);
 258 }
 259
 260 /* Special behavior on mouse drag.
 261   Redundant .gallery attributes included to make the rules more specific */
 262
 263 /* Everything but the image container should become mouse-transparent */
 264 .gallery[tools][editing][mousedrag] * {
 265   pointer-events: none;
 266 }
 267
 268 .gallery[tools][editing][mousedrag] .image-container {
 269   pointer-events: auto;
 270 }
 271
 272 /* The editor marks elements with 'dimmed' attribute to get them out of the way
 273    of the crop frame */
 274 .gallery[tools][editing] [dimmed],
 275 .gallery[tools][editing] [dimmed] * {
 276   pointer-events: none;
 277 }
 278
 279 .gallery[tools][editing] [dimmed] {
 280   opacity: 0.2;
 281 }
 282
 283 /* Filename */
 284
 285 .gallery .filename-spacer {
 286   height: 100%;
 287   overflow: hidden;
 288   position: relative;
 289   width: 270px;
 290 }
 291
 292 .gallery .filename-spacer > * {
 293   background-color: transparent;
 294   overflow: hidden;
 295   position: absolute;
 296   transition: visibility 0 linear 180ms, all 180ms linear;
 297   width: 260px;
 298 }
 299
 300 .gallery .filename-spacer * {
 301   color: white;
 302 }
 303
 304 .gallery .filename-spacer .namebox {
 305   height: 22px;
 306   top: 15px;
 307 }
 308
 309 .gallery[editing] .filename-spacer .namebox {
 310   height: 21px;
 311   top: 5px;
 312 }
 313
 314 .gallery .filename-spacer .namebox {
 315   background-color: transparent;
 316   border: none;
 317   box-sizing: border-box;
 318   cursor: pointer;
 319   display: block;
 320   font-size: 120%;
 321   outline: none;
 322   overflow: hidden;
 323   padding: 0 3px;
 324   position: absolute;
 325   text-overflow: ellipsis;
 326   white-space: nowrap;
 327 }
 328
 329 .gallery .filename-spacer .namebox[disabled] {
 330   -webkit-user-select: none;
 331   cursor: default;
 332 }
 333
 334 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
 335   background-color: rgba(48, 48, 48, 1.0);
 336 }
 337
 338 .gallery .filename-spacer .namebox:focus {
 339   background-color: white;
 340   color: black;
 341   cursor: text;
 342 }
 343
 344 .gallery .filename-spacer .options {
 345   -webkit-box-align: center;
 346   -webkit-box-orient: horizontal;
 347   -webkit-box-pack: start;
 348   display: -webkit-box;
 349   height: 0;
 350   opacity: 0;
 351   top: 50px;
 352   visibility: hidden;
 353 }
 354
 355 .gallery[editing] .filename-spacer .options {
 356   height: auto;
 357   opacity: 1;
 358   top: 28px;
 359   visibility: visible;
 360 }
 361
 362 .gallery .filename-spacer .saved,
 363 .gallery .filename-spacer .overwrite-original {
 364   cursor: inherit;
 365   font-size: 90%;
 366   margin-left: 3px;
 367   margin-right: 18px;
 368   opacity: 0;
 369   pointer-events: none;
 370   transition: all linear 120ms;
 371 }
 372
 373 .gallery[editing] .filename-spacer .saved {
 374   color: white;
 375   opacity: 0.5;
 376 }
 377
 378 .gallery[editing] .filename-spacer .overwrite-original,
 379 .gallery[editing] .filename-spacer .overwrite-original > * {
 380   cursor: pointer;
 381   opacity: 1;
 382   pointer-events: auto;
 383 }
 384
 385 .gallery[editing] .options[saved] .overwrite-original {
 386   opacity: 0.5;
 387 }
 388
 389 .gallery[editing] .options[saved] .overwrite-original,
 390 .gallery[editing] .options[saved] .overwrite-original > * {
 391   cursor: default;
 392   pointer-events: none;
 393 }
 394
 395 .gallery .filename-spacer .saved[highlighted] {
 396   -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
 397   opacity: 1;
 398 }
 399
 400 /* Bubble */
 401 .gallery .toolbar .bubble {
 402   bottom: 65px;
 403   font-size: 85%;
 404   left: 50px;
 405   position: absolute;
 406   width: 220px;
 407 }
 408
 409 .gallery:not([editing]) .toolbar .bubble {
 410   display: none;
 411 }
 412
 413 /* Toolbar buttons */
 414
 415 .gallery .button-spacer {
 416   -webkit-box-flex: 1;
 417   display: -webkit-box;
 418 }
 419
 420 /* Thumbnails */
 421
 422 .gallery .ribbon-spacer {
 423   -webkit-box-align: center;
 424   -webkit-box-orient: horizontal;
 425   -webkit-box-pack: center;
 426   display: -webkit-box;
 427   height: 100%;
 428   left: 280px;
 429   position: absolute;
 430   right: 280px;
 431 }
 432
 433 .gallery .toolbar .ribbon {
 434   -webkit-box-flex: 0;
 435   -webkit-box-orient: horizontal;
 436   -webkit-box-pack: start;
 437   display: -webkit-box;
 438   height: 100%;
 439   overflow: hidden;
 440   transition: opacity 180ms linear, visibility 0 linear;
 441   z-index: 0;
 442 }
 443
 444 .gallery[editing] .toolbar .ribbon {
 445   opacity: 0;
 446   transition-delay: 0, 180ms;
 447   visibility: hidden;
 448 }
 449
 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 */
 455   cursor: pointer;
 456   display: -webkit-box;
 457   height: 47px;
 458   margin: 2px;
 459   overflow: hidden;
 460   transition: all 180ms linear;
 461   width: 47px;
 462 }
 463
 464 .ribbon-image[vanishing='smooth'] {
 465   border-left-width: 0;
 466   border-right-width: 0;
 467   margin-left: 0;
 468   margin-right: 0;
 469   width: 0;
 470 }
 471
 472 .gallery .ribbon-image[selected] {
 473   border: 2px solid rgb(77, 144, 254);
 474 }
 475
 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);
 479 }
 480
 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);
 484 }
 485
 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%);
 491 }
 492
 493 .gallery .image-wrapper {
 494   background-size: 45px 45px;
 495   border: 1px solid rgba(0, 0, 0, 0);  /* transparent black */
 496   height: 45px;
 497   overflow: hidden;
 498   position: relative;
 499   width: 45px;
 500 }
 501
 502 .gallery .image-wrapper > img {
 503   position: absolute;
 504 }
 505
 506 .gallery .image-wrapper > img:not(.cached) {
 507   -webkit-animation: fadeIn 500ms ease-in;
 508 }
 509
 510 /* Editor buttons */
 511
 512 .gallery .edit-bar-spacer {
 513   -webkit-box-align: center;
 514   -webkit-box-orient: horizontal;
 515   -webkit-box-pack: center;
 516   display: -webkit-box;
 517   height: 100%;
 518   left: 280px;
 519   opacity: 0;
 520   position: absolute;
 521   right: 280px;
 522   transition: opacity 180ms linear, visibility 0 linear 180ms;
 523   visibility: hidden;
 524 }
 525
 526 .gallery .toolbar .edit-main {
 527   -webkit-box-orient: horizontal;
 528   -webkit-box-pack: center;
 529   color: white;
 530   display: -webkit-box;
 531   height: 55px;
 532   overflow: visible;
 533 }
 534
 535 .gallery[editing] .edit-bar-spacer {
 536   opacity: 1.0;
 537   pointer-events: auto;
 538   transition-delay: 100ms, 100ms;
 539   visibility: visible;
 540 }
 541
 542 .gallery .header button,
 543 .gallery .toolbar button,
 544 .gallery .header button[disabled],
 545 .gallery .toolbar button[disabled] {
 546   -webkit-box-align: center;
 547   -webkit-box-flex: 0;
 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;
 553   border: none;
 554   box-shadow: none;
 555   color: white;
 556   cursor: pointer;
 557   display: -webkit-box;
 558   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
 559   padding: 1px;  /* Instead of a border. */
 560   position: relative;
 561   z-index: 10;
 562 }
 563
 564 .gallery .header button,
 565 .gallery .toolbar button {
 566   height: 40px;
 567   margin: 6px 0;
 568   min-width: 40px;  /* Reset. */
 569   width: 40px;
 570 }
 571
 572 .gallery .toolbar button:focus {
 573   z-index: 11;
 574 }
 575
 576 /* By default, labels are hidden. */
 577 .gallery > .toolbar button span {
 578   display: none;
 579 }
 580
 581 /* Show labels if there is enough space. */
 582 @media (min-width: 1180px) {
 583
 584   .gallery .edit-main button,
 585   .gallery .edit-main button[disabled] {
 586       background-position: 5px center;
 587     max-width: 60px;
 588     min-width: 0;  /* Reset. */
 589     padding: 0 10px 0 35px;
 590     width: auto;
 591   }
 592
 593   .gallery > .toolbar button span {
 594     display: inline;
 595   }
 596
 597 }
 598
 599 .gallery .header button:hover,
 600 .gallery .toolbar button:hover {
 601   background-color: rgba(31, 31, 31, 1);
 602   color: white;
 603 }
 604
 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);
 612   color: black;
 613 }
 614
 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);
 619 }
 620
 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);
 626 }
 627
 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);
 632 }
 633
 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);
 639 }
 640
 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);
 645 }
 646
 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);
 652 }
 653
 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);
 658 }
 659
 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);
 665 }
 666
 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);
 671 }
 672
 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);
 678 }
 679
 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);
 684 }
 685
 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);
 691 }
 692
 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*/
 698 }
 699
 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);
 705 }
 706
 707 .gallery > .toolbar button[disabled],
 708 .gallery[tools][locked] > .toolbar button {
 709   opacity: 0.5;
 710   pointer-events: none;
 711 }
 712
 713 .gallery > .toolbar button[hidden] {
 714   display: none;
 715 }
 716
 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);
 721 }
 722
 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);
 727 }
 728
 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);
 733 }
 734
 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);
 739 }
 740
 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);
 745 }
 746
 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);
 752 }
 753
 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);
 758 }
 759
 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);
 764 }
 765
 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);
 770 }
 771
 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);
 777 }
 778
 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);
 783 }
 784
 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);
 790 }
 791
 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);
 796 }
 797
 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);
 803 }
 804
 805 .gallery > .toolbar > button.share[disabled] {
 806   display: none;
 807 }
 808
 809 /* Secondary toolbar (mode-specific tools) */
 810
 811 .gallery .edit-modal {
 812   -webkit-box-orient: horizontal;
 813   -webkit-box-pack: center;
 814   bottom: 80px;
 815   display: -webkit-box;
 816   height: 40px;
 817   pointer-events: none;
 818   position: absolute;
 819   width: 100%;
 820 }
 821
 822 .gallery .edit-modal-wrapper[hidden] {
 823   display: none;
 824 }
 825
 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);
 831   color: white;
 832   display: -webkit-box;
 833   pointer-events: auto;
 834 }
 835
 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;
 842   height: 20px;
 843   padding-left: 50px;
 844   padding-right: 10px;
 845 }
 846
 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);
 851 }
 852
 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);
 857   height: 24px;
 858   margin-left: 15px;
 859 }
 860
 861 .gallery .edit-modal button {
 862   background: transparent;
 863   border: 0 none;
 864   border-image: none;
 865   box-sizing: border-box;
 866   color: #fff;
 867   height: 100%;
 868   min-width: 0;
 869   padding: 8px 16px;
 870 }
 871
 872 .gallery .edit-modal button * {
 873   pointer-events: none;
 874 }
 875
 876 .gallery .edit-modal button:hover {
 877   background: #1f1f1f;
 878   color: #fff;
 879 }
 880
 881 .gallery .edit-modal button.selected,
 882 .gallery .edit-modal button:active {
 883   background: #f0f0f0;
 884   color: black;
 885 }
 886
 887 .gallery .edit-modal .range {
 888   -webkit-appearance: none !important;
 889   height: 3px;
 890   margin-right: 10px;
 891   margin-top: 1px;
 892 }
 893
 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);
 899   height: 29px;
 900   width: 16px;
 901 }
 902
 903 /* Crop frame */
 904
 905 .gallery .crop-overlay {
 906   -webkit-box-orient: vertical;
 907   display: -webkit-box;
 908   pointer-events: none;
 909   position: absolute;
 910 }
 911
 912 .gallery .crop-overlay .shadow {
 913   background-color: rgba(0, 0, 0, 0.65);
 914 }
 915
 916 .gallery .crop-overlay .middle-box {
 917   -webkit-box-flex: 1;
 918   -webkit-box-orient: horizontal;
 919   display: -webkit-box;
 920 }
 921
 922 .gallery .crop-frame {
 923   -webkit-box-flex: 1;
 924   display: -webkit-box;
 925   position: relative;
 926 }
 927
 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);
 931   position: absolute;
 932 }
 933
 934 .gallery .crop-frame .horizontal {
 935   height: 1px;
 936   left: 7px;
 937   right: 7px;
 938 }
 939
 940 .gallery .crop-frame .horizontal.top {
 941   top: 0;
 942 }
 943
 944 .gallery .crop-frame .horizontal.bottom {
 945   bottom: 0;
 946 }
 947
 948 .gallery .crop-frame .vertical {
 949   bottom: 7px;
 950   top: 7px;
 951   width: 1px;
 952 }
 953
 954 .gallery .crop-frame .vertical.left {
 955   left: 0;
 956 }
 957
 958 .gallery .crop-frame .vertical.right {
 959   right: 0;
 960 }
 961
 962 .gallery .crop-frame .corner {
 963   border-radius: 6px;
 964   height: 13px;
 965   width: 13px;
 966 }
 967
 968 .gallery .crop-frame .corner.left {
 969   left: -6px;
 970 }
 971
 972 .gallery .crop-frame .corner.right {
 973   right: -6px;
 974 }
 975
 976 .gallery .crop-frame .corner.top {
 977   top: -6px;
 978 }
 979
 980 .gallery .crop-frame .corner.bottom {
 981   bottom: -6px;
 982 }
 983
 984 /* Prompt/notification panel */
 985
 986 .gallery .prompt-wrapper {
 987   -webkit-box-orient: horizontal;
 988   -webkit-box-pack: center;
 989   display: -webkit-box;
 990   height: 100%;
 991   pointer-events: none;
 992   position: absolute;
 993   width: 100%;
 994 }
 995
 996 .gallery .prompt-wrapper[pos=top] {
 997   -webkit-box-align: start;
 998 }
 999
1000 .gallery .prompt-wrapper[pos=center] {
1001   -webkit-box-align: center;
1002 }
1003
1004 .gallery .prompt-wrapper[pos=center] .back-button {
1005   display: none;
1006 }
1007
1008 .gallery .prompt-wrapper > div.dimmable {
1009   opacity: 1;
1010   transition: opacity 220ms ease;
1011 }
1012
1013 .gallery .prompt {
1014   -webkit-box-align: center;
1015   -webkit-box-orient: horizontal;
1016   background-color: rgba(0, 0, 0, 0.8);
1017   color: white;
1018   display: -webkit-box;
1019   font-size: 120%;
1020   height: 40px;
1021   opacity: 0;
1022   padding: 0 20px;
1023   position: relative;
1024   top: 5px;
1025   transition: all 180ms ease;
1026 }
1027
1028 .gallery .prompt[state='fadein'] {
1029   opacity: 1;
1030   top: 0;
1031 }
1032
1033 .gallery .prompt[state='fadeout'] {
1034   opacity: 0;
1035   top: 0;
1036 }
1037
1038 .gallery .prompt-wrapper[pos=top] .prompt {
1039   padding-right: 10px;
1040 }
1041
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;
1048   border-radius: 1px;
1049   bottom: 60px;
1050   display: -webkit-box;
1051   opacity: 1.0;
1052   padding: 8px;
1053   position: absolute;
1054   right: 10px;
1055   transition: opacity 500ms ease-in-out;
1056 }
1057
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;
1064   bottom: -8px;
1065   height: 8px;
1066   padding: 0;
1067   position: absolute;
1068   right: 20px;
1069   width: 20px;
1070 }
1071
1072 .gallery .share-menu[hidden] {
1073   bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1074   opacity: 0;
1075   pointer-events: none;
1076 }
1077
1078 .gallery .share-menu > .item {
1079   background-color: rgba(0, 0, 0, 0);
1080   background-position: 5px center;
1081   background-repeat: no-repeat;
1082   cursor: pointer;
1083   padding: 5px;
1084   padding-left: 26px;
1085 }
1086
1087 .gallery .share-menu > .item:hover {
1088   background-color: rgba(240, 240, 240, 1);
1089 }
1090
1091 .gallery .share-menu > div > img {
1092   display: block;
1093   margin-right: 5px;
1094 }
1095
1096 /* Load spinner and error banner. */
1097
1098 .gallery .spinner {
1099   background-image:
1100       url(../../file_manager/foreground/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(../../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;
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 /* Mosaic view. */
1137 .mosaic {
1138   bottom: 55px;  /* Toolbar height. */
1139   left: 0;
1140   overflow-x: scroll;
1141   overflow-y: hidden;
1142   position: absolute;
1143   right: 0;
1144   top: 0;
1145
1146   /* transition-duration is set in Javascript. */
1147   transition-property: -webkit-transform;
1148   transition-timing-function: linear;
1149 }
1150
1151 .mosaic::-webkit-scrollbar {
1152   background: transparent;
1153 }
1154
1155 .mosaic::-webkit-scrollbar-thumb {
1156   background: rgb(31, 31, 31);
1157 }
1158
1159 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1160   background: transparent;
1161 }
1162
1163 .mosaic-tile {
1164   position: absolute;
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;
1168 }
1169
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 {
1173   opacity: 0;
1174 }
1175
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;
1180 }
1181
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. */
1188   bottom: 4px;
1189   left: 4px;
1190   outline: 2px solid transparent;
1191   overflow: hidden;
1192   position: absolute;
1193   right: 4px;
1194   top: 4px;
1195 }
1196
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);
1200 }
1201
1202 .mosaic[visible='normal'].hover-visible
1203     .mosaic-tile:hover:not([selected]) .img-border {
1204   outline-color: rgb(182, 212, 252);
1205 }
1206
1207 .mosaic-tile .img-wrapper {
1208   bottom: 0;
1209   left: 0;
1210   position: absolute;
1211   right: 0;
1212   top: 0;
1213 }
1214
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;
1221 }
1222
1223 @-webkit-keyframes fadeIn {
1224   from {
1225     opacity: 0;
1226   }
1227   to {
1228     opacity: 1;
1229   }
1230 }
1231
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;
1237 }
1238
1239 .gallery:not([mode='slide']) .ribbon,
1240 .gallery:not([mode='slide']) .arrow-box {
1241   opacity: 0;
1242   pointer-events: none;
1243 }
1244
1245 /* Temporary. Remove this along with the delete confirmation dialog
1246   when Undo delete is implemented. */
1247 .cr-dialog-shield {
1248   background-color: black;
1249 }
1250
1251 /* Slideshow controls */
1252
1253 .slideshow-toolbar {
1254   -webkit-box-align: center;
1255   -webkit-box-orient: horizontal;
1256   -webkit-box-pack: center;
1257   bottom: 0;
1258   display: none;
1259   left: 0;
1260   padding-bottom: 6px;
1261   pointer-events: none;
1262   position: absolute;
1263   right: 0;
1264 }
1265
1266 .gallery[tools][slideshow] .slideshow-toolbar {
1267   display: -webkit-box;
1268 }
1269
1270 .slideshow-toolbar > div {
1271   background-position: center;
1272   background-repeat: no-repeat;
1273   height: 68px;
1274   opacity: 0.5;
1275   pointer-events: auto;
1276   width: 68px;
1277 }
1278
1279 .slideshow-toolbar > div:hover {
1280   opacity: 1;
1281 }
1282
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);
1287   margin-right: -2px;
1288 }
1289
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);
1294 }
1295
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);
1300   margin-left: -2px;
1301 }
1302
1303 .gallery > .header > button {
1304   -webkit-margin-start: 10px;
1305   cursor: default;
1306   height: 32px;
1307   min-width: 32px;
1308   width: 32px;
1309 }
1310
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)
1315       center;
1316 }
1317
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)
1322       center;
1323 }
1324
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)
1329       center;
1330 }