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: Noto Sans UI, 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: flex;
 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   overflow: hidden;
 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   flex: 0 1 auto;
 287   height: 100%;
 288   min-width: 140px;
 289   overflow: hidden;
 290   position: relative;
 291   width: 252px;
 292 }
 293
 294 .gallery .filename-spacer > * {
 295   background-color: transparent;
 296   overflow: hidden;
 297   position: absolute;
 298   transition: visibility 0 linear 180ms, all 180ms linear;
 299   width: 260px;
 300 }
 301
 302 .gallery .filename-spacer * {
 303   color: white;
 304 }
 305
 306 .gallery .filename-spacer .namebox {
 307   height: 22px;
 308   top: 15px;
 309 }
 310
 311 .gallery[editing] .filename-spacer .namebox {
 312   height: 21px;
 313   top: 5px;
 314 }
 315
 316 .gallery .filename-spacer .namebox {
 317   background-color: transparent;
 318   border: none;
 319   box-sizing: border-box;
 320   cursor: pointer;
 321   display: block;
 322   font-size: 120%;
 323   outline: none;
 324   overflow: hidden;
 325   padding: 0 3px;
 326   position: absolute;
 327   text-overflow: ellipsis;
 328   white-space: nowrap;
 329 }
 330
 331 .gallery .filename-spacer .namebox[disabled] {
 332   -webkit-user-select: none;
 333   cursor: default;
 334 }
 335
 336 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
 337   background-color: rgba(48, 48, 48, 1.0);
 338 }
 339
 340 .gallery .filename-spacer .namebox:focus {
 341   background-color: white;
 342   color: black;
 343   cursor: text;
 344 }
 345
 346 .gallery .filename-spacer .options {
 347   -webkit-box-align: center;
 348   -webkit-box-orient: horizontal;
 349   -webkit-box-pack: start;
 350   display: -webkit-box;
 351   height: 0;
 352   opacity: 0;
 353   top: 50px;
 354   visibility: hidden;
 355 }
 356
 357 .gallery[editing] .filename-spacer .options {
 358   height: auto;
 359   opacity: 1;
 360   top: 28px;
 361   visibility: visible;
 362 }
 363
 364 .gallery .filename-spacer .saved,
 365 .gallery .filename-spacer .overwrite-original {
 366   cursor: inherit;
 367   font-size: 90%;
 368   margin-left: 3px;
 369   margin-right: 18px;
 370   opacity: 0;
 371   pointer-events: none;
 372   transition: all linear 120ms;
 373 }
 374
 375 .gallery[editing] .filename-spacer .saved {
 376   color: white;
 377   opacity: 0.5;
 378 }
 379
 380 .gallery[editing] .filename-spacer .overwrite-original,
 381 .gallery[editing] .filename-spacer .overwrite-original > * {
 382   cursor: pointer;
 383   opacity: 1;
 384   pointer-events: auto;
 385 }
 386
 387 .gallery[editing] .options[saved] .overwrite-original {
 388   opacity: 0.5;
 389 }
 390
 391 .gallery[editing] .options[saved] .overwrite-original,
 392 .gallery[editing] .options[saved] .overwrite-original > * {
 393   cursor: default;
 394   pointer-events: none;
 395 }
 396
 397 .gallery .filename-spacer .saved[highlighted] {
 398   -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
 399   opacity: 1;
 400 }
 401
 402 /* Bubble */
 403
 404 .gallery .toolbar .bubble {
 405   bottom: 65px;
 406   font-size: 85%;
 407   left: 50px;
 408   position: absolute;
 409   width: 220px;
 410 }
 411
 412 .gallery:not([editing]) .toolbar .bubble {
 413   display: none;
 414 }
 415
 416 /* Middle spacer */
 417
 418 .gallery .middle-spacer {
 419   align-items: center;
 420   display: flex;
 421   flex: 1 0 auto;
 422   flex-direction: column;
 423 }
 424
 425 /* Toolbar buttons */
 426
 427 .gallery .button-spacer {
 428   display: flex;
 429   flex: none;
 430   justify-content: flex-end;
 431   width: 252px; /* 42px button x 6 */
 432 }
 433
 434 /* Thumbnails */
 435
 436 .gallery .ribbon-spacer {
 437   height: 55px;
 438   margin-bottom: -55px;
 439 }
 440
 441 .gallery .toolbar .ribbon {
 442   height: 100%;
 443   overflow: hidden;
 444   transition: opacity 180ms linear, visibility 0 linear;
 445   z-index: 0;
 446 }
 447
 448 .gallery[editing] .toolbar .ribbon {
 449   opacity: 0;
 450   transition-delay: 0, 180ms;
 451   visibility: hidden;
 452 }
 453
 454 .gallery .ribbon-image {
 455   border: 2px solid rgba(255, 255, 255, 0);  /* transparent white */
 456   cursor: pointer;
 457   display: inline-block;
 458   height: 47px;
 459   margin: 2px;
 460   overflow: hidden;
 461   transition: all 180ms linear;
 462   width: 47px;
 463 }
 464
 465 .ribbon-image[vanishing='smooth'] {
 466   border-left-width: 0;
 467   border-right-width: 0;
 468   margin-left: 0;
 469   margin-right: 0;
 470   width: 0;
 471 }
 472
 473 .gallery .ribbon-image[selected] {
 474   border: 2px solid rgb(77, 144, 254);
 475 }
 476
 477 .gallery .toolbar .ribbon.fade-left {
 478   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
 479                                                 rgba(0, 0, 0, 1) 40px);
 480 }
 481
 482 .gallery .toolbar .ribbon.fade-right {
 483   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0,
 484                                                rgba(0, 0, 0, 1) 40px);
 485 }
 486
 487 .gallery .toolbar .ribbon.fade-left.fade-right {
 488   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
 489                                                 rgba(0, 0, 0, 1) 40px,
 490                                                 rgba(0, 0, 0, 1) 230px,
 491                                                 rgba(0, 0, 0, 0) 100%);
 492 }
 493
 494 .gallery .image-wrapper {
 495   background-size: 45px 45px;
 496   border: 1px solid rgba(0, 0, 0, 0);  /* transparent black */
 497   height: 45px;
 498   overflow: hidden;
 499   position: relative;
 500   width: 45px;
 501 }
 502
 503 .gallery .image-wrapper > img {
 504   position: absolute;
 505 }
 506
 507 .gallery .image-wrapper > img:not(.cached) {
 508   -webkit-animation: fadeIn 500ms ease-in;
 509 }
 510
 511 /* Editor buttons */
 512
 513 .gallery .edit-bar-spacer {
 514   -webkit-box-align: center;
 515   -webkit-box-orient: horizontal;
 516   -webkit-box-pack: center;
 517   display: -webkit-box;
 518   height: 100%;
 519   left: 280px;
 520   opacity: 0;
 521   right: 280px;
 522   transition: opacity 180ms linear, visibility 0 linear 180ms;
 523   visibility: hidden;
 524   margin-bottom: -55px;
 525 }
 526
 527 .gallery .toolbar .edit-main {
 528   -webkit-box-orient: horizontal;
 529   -webkit-box-pack: center;
 530   color: white;
 531   display: -webkit-box;
 532   height: 55px;
 533   overflow: visible;
 534 }
 535
 536 .gallery[editing] .edit-bar-spacer {
 537   opacity: 1.0;
 538   pointer-events: auto;
 539   transition-delay: 100ms, 100ms;
 540   visibility: visible;
 541 }
 542
 543 .gallery .header button,
 544 .gallery .toolbar button,
 545 .gallery .header button[disabled],
 546 .gallery .toolbar button[disabled] {
 547   background-color: rgba(0, 0, 0, 0);
 548   background-position: center;
 549   background-repeat: no-repeat;
 550   border: none;
 551   box-shadow: none;
 552   color: white;
 553   cursor: pointer;
 554   display: inline-block;
 555   flex: none;
 556   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
 557   padding: 1px;  /* Instead of a border. */
 558   position: relative;
 559   z-index: 10;
 560 }
 561
 562 .gallery .header button,
 563 .gallery .toolbar button {
 564   height: 40px;
 565   margin: 6px 0;
 566   min-width: 40px;  /* Reset. */
 567   width: 40px;
 568 }
 569
 570 .gallery .toolbar button:focus {
 571   z-index: 11;
 572 }
 573
 574 /* By default, labels are hidden. */
 575 .gallery > .toolbar button span {
 576   display: none;
 577 }
 578
 579 /* Show labels if there is enough space. */
 580 @media (min-width: 1180px) {
 581
 582   .gallery .edit-main button,
 583   .gallery .edit-main button[disabled] {
 584       background-position: 5px center;
 585     max-width: 60px;
 586     min-width: 0;  /* Reset. */
 587     padding: 0 10px 0 35px;
 588     width: auto;
 589   }
 590
 591   .gallery > .toolbar button span {
 592     display: inline;
 593     white-space: nowrap;
 594   }
 595
 596 }
 597
 598 .gallery .header button:hover,
 599 .gallery .toolbar button:hover {
 600   background-color: rgba(31, 31, 31, 1);
 601   color: white;
 602 }
 603
 604 .gallery .header button:active,
 605 .gallery .toolbar button:active,
 606 .gallery .header button[pressed],
 607 .gallery .toolbar button[pressed],
 608 .gallery .header button[pressed]:hover,
 609 .gallery .toolbar button[pressed]:hover {
 610   background-color: rgba(240, 240, 240, 1);
 611   color: black;
 612 }
 613
 614 .gallery > .toolbar button.autofix {
 615   background-image: -webkit-image-set(
 616       url(../images/100/icon_autofix.png) 1x,
 617       url(../images/200/icon_autofix.png) 2x);
 618 }
 619
 620 .gallery > .toolbar button.autofix:active,
 621 .gallery > .toolbar button.autofix[pressed] {
 622   background-image: -webkit-image-set(
 623       url(../images/100/icon_autofix_selected.png) 1x,
 624       url(../images/200/icon_autofix_selected.png) 2x);
 625 }
 626
 627 .gallery > .toolbar button.crop {
 628   background-image:  -webkit-image-set(
 629       url(../images/100/icon_crop.png) 1x,
 630       url(../images/200/icon_crop.png) 2x);
 631 }
 632
 633 .gallery > .toolbar button.crop:active,
 634 .gallery > .toolbar button.crop[pressed] {
 635   background-image:  -webkit-image-set(
 636       url(../images/100/icon_crop_selected.png) 1x,
 637       url(../images/200/icon_crop_selected.png) 2x);
 638 }
 639
 640 .gallery > .toolbar button.exposure {
 641   background-image: -webkit-image-set(
 642       url(../images/100/icon_brightness.png) 1x,
 643       url(../images/200/icon_brightness.png) 2x);
 644 }
 645
 646 .gallery > .toolbar button.exposure:active,
 647 .gallery > .toolbar button.exposure[pressed] {
 648   background-image: -webkit-image-set(
 649       url(../images/100/icon_brightness_selected.png) 1x,
 650       url(../images/200/icon_brightness_selected.png) 2x);
 651 }
 652
 653 .gallery > .toolbar button.rotate_right {
 654   background-image: -webkit-image-set(
 655       url(../images/100/icon_rotate.png) 1x,
 656       url(../images/200/icon_rotate.png) 2x);
 657 }
 658
 659 .gallery > .toolbar button.rotate_right:active,
 660 .gallery > .toolbar button.rotate_right[pressed] {
 661   background-image: -webkit-image-set(
 662       url(../images/100/icon_rotate_selected.png) 1x,
 663       url(../images/200/icon_rotate_selected.png) 2x);
 664 }
 665
 666 .gallery > .toolbar button.rotate_left {
 667   background-image: -webkit-image-set(
 668       url(../images/100/icon_rotate_left.png) 1x,
 669       url(../images/200/icon_rotate_left.png) 2x);
 670 }
 671
 672 .gallery > .toolbar button.rotate_left:active,
 673 .gallery > .toolbar button.rotate_left[pressed] {
 674   background-image: -webkit-image-set(
 675       url(../images/100/icon_rotate_left_selected.png) 1x,
 676       url(../images/200/icon_rotate_left_selected.png) 2x);
 677 }
 678
 679 .gallery > .toolbar button.undo {
 680   background-image: -webkit-image-set(
 681       url(../images/100/icon_undo.png) 1x,
 682       url(../images/200/icon_undo.png) 2x);
 683 }
 684
 685 .gallery > .toolbar button.undo:active,
 686 .gallery > .toolbar button.undo[pressed] {
 687   background-image: -webkit-image-set(
 688       url(../images/100/icon_undo_selected.png) 1x,
 689       url(../images/200/icon_undo_selected.png) 2x);
 690 }
 691
 692 .gallery > .toolbar button.redo {
 693   background-image: -webkit-image-set(
 694       url(../images/100/icon_redo.png) 1x,
 695       url(../images/200/icon_redo.png) 2x);
 696   position: absolute;  /* Exclude from center-packing*/
 697 }
 698
 699 .gallery > .toolbar button.redo:active,
 700 .gallery > .toolbar button.redo[pressed] {
 701   background-image: -webkit-image-set(
 702       url(../images/100/icon_redo_selected.png) 1x,
 703       url(../images/200/icon_redo_selected.png) 2x);
 704 }
 705
 706 .gallery > .toolbar button[disabled],
 707 .gallery[tools][locked] > .toolbar button {
 708   opacity: 0.5;
 709   pointer-events: none;
 710 }
 711
 712 .gallery > .toolbar button[hidden] {
 713   display: none;
 714 }
 715
 716 .gallery[mode='slide'] > .toolbar button.mode {
 717   background-image: -webkit-image-set(
 718       url(../images/100/icon_mosaic.png) 1x,
 719       url(../images/200/icon_mosaic.png) 2x);
 720 }
 721
 722 .gallery[mode='slide'] > .toolbar button.mode:active {
 723   background-image: -webkit-image-set(
 724       url(../images/100/icon_mosaic_selected.png) 1x,
 725       url(../images/200/icon_mosaic_selected.png) 2x);
 726 }
 727
 728 .gallery[mode='mosaic'] > .toolbar button.mode {
 729   background-image: -webkit-image-set(
 730       url(../images/100/icon_1up.png) 1x,
 731       url(../images/200/icon_1up.png) 2x);
 732 }
 733
 734 .gallery[mode='mosaic'] > .toolbar button.mode:active {
 735   background-image: -webkit-image-set(
 736       url(../images/100/icon_1up_selected.png) 1x,
 737       url(../images/200/icon_1up_selected.png) 2x);
 738 }
 739
 740 .gallery > .toolbar button.slideshow {
 741   background-image: -webkit-image-set(
 742       url(../images/100/icon_slideshow.png) 1x,
 743       url(../images/200/icon_slideshow.png) 2x);
 744 }
 745
 746 .gallery > .toolbar button.slideshow:active,
 747 .gallery > .toolbar button.slideshow[pressed] {
 748   background-image: -webkit-image-set(
 749       url(../images/100/icon_slideshow_selected.png) 1x,
 750       url(../images/200/icon_slideshow_selected.png) 2x);
 751 }
 752
 753 .gallery > .toolbar button.delete {
 754   background-image: -webkit-image-set(
 755       url(../images/100/icon_delete.png) 1x,
 756       url(../images/200/icon_delete.png) 2x);
 757 }
 758
 759 .gallery > .toolbar button.delete:active {
 760   background-image: -webkit-image-set(
 761       url(../images/100/icon_delete_selected.png) 1x,
 762       url(../images/200/icon_delete_selected.png) 2x);
 763 }
 764
 765 .gallery > .toolbar button.edit {
 766   background-image: -webkit-image-set(
 767       url(../images/100/icon_edit.png) 1x,
 768       url(../images/200/icon_edit.png) 2x);
 769 }
 770
 771 .gallery > .toolbar button.edit:active,
 772 .gallery > .toolbar button.edit[pressed] {
 773   background-image: -webkit-image-set(
 774       url(../images/100/icon_edit_selected.png) 1x,
 775       url(../images/200/icon_edit_selected.png) 2x);
 776 }
 777
 778 .gallery > .toolbar button.print {
 779   background-image: -webkit-image-set(
 780       url(../images/100/icon_print.png) 1x,
 781       url(../images/200/icon_print.png) 2x);
 782 }
 783
 784 .gallery > .toolbar button.print:active,
 785 .gallery > .toolbar button.print[pressed] {
 786   background-image: -webkit-image-set(
 787       url(../images/100/icon_print_selected.png) 1x,
 788       url(../images/200/icon_print_selected.png) 2x);
 789 }
 790
 791 .gallery > .toolbar button.share {
 792   background-image: -webkit-image-set(
 793       url(../images/100/icon_share.png) 1x,
 794       url(../images/200/icon_share.png) 2x);
 795 }
 796
 797 .gallery > .toolbar button.share:active,
 798 .gallery > .toolbar button.share[pressed] {
 799   background-image: -webkit-image-set(
 800       url(../images/100/icon_share_selected.png) 1x,
 801       url(../images/200/icon_share_selected.png) 2x);
 802 }
 803
 804 .gallery > .toolbar button.share[disabled] {
 805   display: none;
 806 }
 807
 808 /* Secondary toolbar (mode-specific tools) */
 809
 810 .gallery .edit-modal {
 811   -webkit-box-orient: horizontal;
 812   -webkit-box-pack: center;
 813   bottom: 80px;
 814   display: -webkit-box;
 815   height: 40px;
 816   pointer-events: none;
 817   position: absolute;
 818   width: 100%;
 819 }
 820
 821 .gallery .edit-modal-wrapper[hidden] {
 822   display: none;
 823 }
 824
 825 .gallery .edit-modal-wrapper {
 826   -webkit-box-align: center;
 827   -webkit-box-orient: horizontal;
 828   -webkit-box-pack: center;
 829   background-color: rgba(0, 0, 0, 0.75);
 830   color: white;
 831   display: -webkit-box;
 832   pointer-events: auto;
 833 }
 834
 835 .gallery .edit-modal .label {
 836   -webkit-box-align: center;
 837   -webkit-box-orient: horizontal;
 838   background-position: 20px center;
 839   background-repeat: no-repeat;
 840   display: -webkit-box;
 841   height: 20px;
 842   padding-left: 50px;
 843   padding-right: 10px;
 844 }
 845
 846 .gallery .edit-modal .label.brightness {
 847   background-image: -webkit-image-set(
 848       url(../images/100/icon_brightness.png) 1x,
 849       url(../images/200/icon_brightness.png) 2x);
 850 }
 851
 852 .gallery .edit-modal .label.contrast {
 853   background-image: -webkit-image-set(
 854       url(../images/100/icon_contrast.png) 1x,
 855       url(../images/200/icon_contrast.png) 2x);
 856   height: 24px;
 857   margin-left: 15px;
 858 }
 859
 860 .gallery .edit-modal button {
 861   background: transparent;
 862   border: 0 none;
 863   border-image: none;
 864   box-sizing: border-box;
 865   color: #fff;
 866   height: 100%;
 867   min-width: 0;
 868   padding: 8px 16px;
 869 }
 870
 871 .gallery .edit-modal button * {
 872   pointer-events: none;
 873 }
 874
 875 .gallery .edit-modal button:hover {
 876   background: #1f1f1f;
 877   color: #fff;
 878 }
 879
 880 .gallery .edit-modal button.selected,
 881 .gallery .edit-modal button:active {
 882   background: #f0f0f0;
 883   color: black;
 884 }
 885
 886 .gallery .edit-modal .range {
 887   -webkit-appearance: none !important;
 888   background: transparent;
 889   height: 29px;
 890   margin-right: 10px;
 891   position: relative;
 892 }
 893
 894 .gallery .edit-modal .range::before {
 895   background: #fff;
 896   content: '';
 897   display: block;
 898   height: 3px;
 899   left: 3px;
 900   position: absolute;
 901   right: 3px;
 902   top: 13px;
 903 }
 904
 905 .gallery .edit-modal .range::-webkit-slider-thumb {
 906   -webkit-appearance: none;
 907   background-image: -webkit-image-set(
 908       url(../images/100/slider_thumb.png) 1x,
 909       url(../images/200/slider_thumb.png) 2x);
 910   height: 29px;
 911   width: 16px;
 912 }
 913
 914 /* Crop frame */
 915
 916 .gallery .crop-overlay {
 917   -webkit-box-orient: vertical;
 918   display: -webkit-box;
 919   pointer-events: none;
 920   position: absolute;
 921 }
 922
 923 .gallery .crop-overlay .shadow {
 924   background-color: rgba(0, 0, 0, 0.65);
 925 }
 926
 927 .gallery .crop-overlay .middle-box {
 928   -webkit-box-flex: 1;
 929   -webkit-box-orient: horizontal;
 930   display: -webkit-box;
 931 }
 932
 933 .gallery .crop-frame {
 934   -webkit-box-flex: 1;
 935   display: -webkit-box;
 936   position: relative;
 937 }
 938
 939 .gallery .crop-frame div {
 940   background-color: rgba(255, 255, 255, 1);
 941   box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 942   position: absolute;
 943 }
 944
 945 .gallery .crop-frame .horizontal {
 946   height: 1px;
 947   left: 7px;
 948   right: 7px;
 949 }
 950
 951 .gallery .crop-frame .horizontal.top {
 952   top: 0;
 953 }
 954
 955 .gallery .crop-frame .horizontal.bottom {
 956   bottom: 0;
 957 }
 958
 959 .gallery .crop-frame .vertical {
 960   bottom: 7px;
 961   top: 7px;
 962   width: 1px;
 963 }
 964
 965 .gallery .crop-frame .vertical.left {
 966   left: 0;
 967 }
 968
 969 .gallery .crop-frame .vertical.right {
 970   right: 0;
 971 }
 972
 973 .gallery .crop-frame .corner {
 974   border-radius: 6px;
 975   height: 13px;
 976   width: 13px;
 977 }
 978
 979 .gallery .crop-frame .corner.left {
 980   left: -6px;
 981 }
 982
 983 .gallery .crop-frame .corner.right {
 984   right: -6px;
 985 }
 986
 987 .gallery .crop-frame .corner.top {
 988   top: -6px;
 989 }
 990
 991 .gallery .crop-frame .corner.bottom {
 992   bottom: -6px;
 993 }
 994
 995 /* Prompt/notification panel */
 996
 997 .gallery .prompt-wrapper {
 998   -webkit-box-orient: horizontal;
 999   -webkit-box-pack: center;
1000   display: -webkit-box;
1001   height: 100%;
1002   pointer-events: none;
1003   position: absolute;
1004   width: 100%;
1005 }
1006
1007 .gallery .prompt-wrapper[pos=top] {
1008   -webkit-box-align: start;
1009 }
1010
1011 .gallery .prompt-wrapper[pos=center] {
1012   -webkit-box-align: center;
1013 }
1014
1015 .gallery .prompt-wrapper[pos=center] .back-button {
1016   display: none;
1017 }
1018
1019 .dimmable {
1020   opacity: 1;
1021   transition: opacity 220ms ease;
1022 }
1023
1024 .gallery .prompt {
1025   -webkit-box-align: center;
1026   -webkit-box-orient: horizontal;
1027   background-color: rgba(0, 0, 0, 0.8);
1028   color: white;
1029   display: -webkit-box;
1030   font-size: 120%;
1031   height: 40px;
1032   opacity: 0;
1033   padding: 0 20px;
1034   position: relative;
1035   top: 5px;
1036   transition: all 180ms ease;
1037 }
1038
1039 .gallery .prompt[state='fadein'] {
1040   opacity: 1;
1041   top: 0;
1042 }
1043
1044 .gallery .prompt[state='fadeout'] {
1045   opacity: 0;
1046   top: 0;
1047 }
1048
1049 .gallery .prompt-wrapper[pos=top] .prompt {
1050   padding-right: 10px;
1051 }
1052
1053 .gallery .share-menu {
1054   -webkit-box-align: stretch;
1055   -webkit-box-orient: vertical;
1056   -webkit-box-pack: start;
1057   background-color: white;
1058   border: 1px solid #7f7f7f;
1059   border-radius: 1px;
1060   bottom: 60px;
1061   display: -webkit-box;
1062   opacity: 1.0;
1063   padding: 8px;
1064   position: absolute;
1065   right: 10px;
1066   transition: opacity 500ms ease-in-out;
1067 }
1068
1069 .gallery .share-menu .bubble-point {
1070   background-image: -webkit-image-set(
1071       url(../images/100/bubble_point.png) 1x,
1072       url(../images/200/bubble_point.png) 2x);
1073   background-position: center top;
1074   background-repeat: no-repeat;
1075   bottom: -8px;
1076   height: 8px;
1077   padding: 0;
1078   position: absolute;
1079   right: 20px;
1080   width: 20px;
1081 }
1082
1083 .gallery .share-menu[hidden] {
1084   bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1085   opacity: 0;
1086   pointer-events: none;
1087 }
1088
1089 .gallery .share-menu > .item {
1090   background-color: rgba(0, 0, 0, 0);
1091   background-position: 5px center;
1092   background-repeat: no-repeat;
1093   cursor: pointer;
1094   padding: 5px;
1095   padding-left: 26px;
1096 }
1097
1098 .gallery .share-menu > .item:hover {
1099   background-color: rgba(240, 240, 240, 1);
1100 }
1101
1102 .gallery .share-menu > div > img {
1103   display: block;
1104   margin-right: 5px;
1105 }
1106
1107 /* Load spinner and error banner. */
1108
1109 .gallery .spinner {
1110   background-image:
1111       url(../../file_manager/foreground/images/common/spinner.svg);
1112   background-size: 100%;
1113   height: 16px;
1114   left: 50%;
1115   margin-left: -8px;
1116   margin-top: -8px;
1117   position: absolute;
1118   top: 50%;
1119   width: 16px;
1120 }
1121
1122 .gallery:not([spinner]) .spinner {
1123   display: none;
1124 }
1125
1126 .gallery .error-banner {
1127   -webkit-box-align: center;
1128   -webkit-box-orient: horizontal;
1129   -webkit-box-pack: center;
1130   background-color: rgba(24, 24, 24, 1);
1131   background-image: -webkit-image-set(
1132       url(../images/100/error.png) 1x,
1133       url(../images/200/error.png) 2x);
1134   background-position: 25px center;
1135   background-repeat: no-repeat;
1136   color: white;
1137   display: -webkit-box;
1138   height: 54px;
1139   padding-left: 70px;
1140   padding-right: 35px;
1141 }
1142
1143 .gallery:not([error]) .error-banner {
1144   display: none;
1145 }
1146
1147 /* Mosaic view. */
1148 .mosaic {
1149   bottom: 55px;  /* Toolbar height. */
1150   left: 0;
1151   overflow-x: scroll;
1152   overflow-y: hidden;
1153   position: absolute;
1154   right: 0;
1155   top: 0;
1156
1157   /* transition-duration is set in Javascript. */
1158   transition-property: -webkit-transform;
1159   transition-timing-function: linear;
1160 }
1161
1162 .mosaic::-webkit-scrollbar {
1163   background: transparent;
1164 }
1165
1166 .mosaic::-webkit-scrollbar-thumb {
1167   background: rgb(31, 31, 31);
1168 }
1169
1170 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1171   background: transparent;
1172 }
1173
1174 .mosaic-tile {
1175   position: absolute;
1176   /* Tile's zoom factor is animated on hover. We apply the transform to
1177   the entire tile so that the image outline is included into the animation. */
1178   transition: -webkit-transform 150ms linear;
1179   z-index: 50;
1180 }
1181
1182 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
1183    separately from .gallery[mode] */
1184 .mosaic:not([visible]) .mosaic-tile .img-border {
1185   opacity: 0;
1186 }
1187
1188 /* Animate tile's opacity, except for the selected tile which should show/hide
1189   instantly (this looks better when zooming to/from the slide mode). */
1190 .mosaic-tile:not([selected]) .img-border {
1191   transition: opacity 350ms linear;
1192 }
1193
1194 /* Must be in sync with mosaic_mode.js.
1195   Mosaic.Layout.SPACING should be equal to
1196     top + bottom + border-top-width + border-bottom-width AND
1197     left + right + border-left-width + border-right-width */
1198 .mosaic-tile .img-border {
1199   border: 1px solid black;  /* Space between the outline and the image. */
1200   bottom: 4px;
1201   left: 4px;
1202   outline: 2px solid transparent;
1203   overflow: hidden;
1204   position: absolute;
1205   right: 4px;
1206   top: 4px;
1207 }
1208
1209 /* Selected and hover state are only visible when zoom transition is over. */
1210 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1211   outline-color: rgb(51, 153, 255);
1212 }
1213
1214 .mosaic[visible='normal'].hover-visible
1215     .mosaic-tile:hover:not([selected]) .img-border {
1216   outline-color: rgb(182, 212, 252);
1217 }
1218
1219 .mosaic-tile .img-wrapper {
1220   bottom: 0;
1221   left: 0;
1222   position: absolute;
1223   right: 0;
1224   top: 0;
1225 }
1226
1227 .mosaic-tile .img-wrapper[generic-thumbnail],
1228 .mosaic-tile .img-wrapper.animated:not([generic-thumbnail])
1229     canvas:not(.cached) {
1230   -webkit-animation: fadeIn ease-in 1;
1231   -webkit-animation-duration: 500ms;
1232   -webkit-animation-fill-mode: forwards;
1233 }
1234
1235 @-webkit-keyframes fadeIn {
1236   from {
1237     opacity: 0;
1238   }
1239   to {
1240     opacity: 1;
1241   }
1242 }
1243
1244 /* In order to do mode animated transitions smoothly we keep both mosaic and
1245   image-container but transparent. */
1246 .gallery:not([mode='mosaic']) .mosaic,
1247 .gallery:not([mode='slide']) .image-container {
1248   pointer-events: none;
1249 }
1250
1251 .gallery:not([mode='slide']) .ribbon,
1252 .gallery:not([mode='slide']) .arrow-box {
1253   opacity: 0;
1254   pointer-events: none;
1255 }
1256
1257 /* Temporary. Remove this along with the delete confirmation dialog
1258   when Undo delete is implemented. */
1259 .cr-dialog-shield {
1260   background-color: black;
1261 }
1262
1263 /* Slideshow controls */
1264
1265 .slideshow-toolbar {
1266   -webkit-box-align: center;
1267   -webkit-box-orient: horizontal;
1268   -webkit-box-pack: center;
1269   bottom: 0;
1270   display: none;
1271   left: 0;
1272   padding-bottom: 6px;
1273   pointer-events: none;
1274   position: absolute;
1275   right: 0;
1276 }
1277
1278 .gallery[tools][slideshow] .slideshow-toolbar {
1279   display: -webkit-box;
1280 }
1281
1282 .slideshow-toolbar > div {
1283   background-position: center;
1284   background-repeat: no-repeat;
1285   height: 68px;
1286   opacity: 0.5;
1287   pointer-events: auto;
1288   width: 68px;
1289 }
1290
1291 .slideshow-toolbar > div:hover {
1292   opacity: 1;
1293 }
1294
1295 .slideshow-toolbar > .slideshow-play {
1296   background-image: -webkit-image-set(
1297       url(../images/100/slideshow-play.png) 1x,
1298       url(../images/200/slideshow-play.png) 2x);
1299   margin-right: -2px;
1300 }
1301
1302 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1303   background-image: -webkit-image-set(
1304       url(../images/100/slideshow-pause.png) 1x,
1305       url(../images/200/slideshow-pause.png) 2x);
1306 }
1307
1308 .slideshow-toolbar > .slideshow-end {
1309   background-image: -webkit-image-set(
1310       url(../images/100/slideshow-end.png) 1x,
1311       url(../images/200/slideshow-end.png) 2x);
1312   margin-left: -2px;
1313 }
1314
1315 .gallery > .header > button {
1316   -webkit-margin-start: 10px;
1317   cursor: default;
1318   height: 32px;
1319   min-width: 32px;
1320   width: 32px;
1321 }
1322
1323 .gallery > .header > .minimize-button {
1324   background: -webkit-image-set(
1325       url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
1326       url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x)
1327       center;
1328 }
1329
1330 .gallery > .header > .maximize-button {
1331   background: -webkit-image-set(
1332       url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
1333       url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
1334       center;
1335 }
1336
1337 .gallery > .header > .close-button {
1338   background: -webkit-image-set(
1339       url(chrome://resources/images/apps/topbar_button_close.png) 1x,
1340       url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
1341       center;
1342 }