src/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: 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   }
 594
 595 }
 596
 597 .gallery .header button:hover,
 598 .gallery .toolbar button:hover {
 599   background-color: rgba(31, 31, 31, 1);
 600   color: white;
 601 }
 602
 603 .gallery .header button:active,
 604 .gallery .toolbar button:active,
 605 .gallery .header button[pressed],
 606 .gallery .toolbar button[pressed],
 607 .gallery .header button[pressed]:hover,
 608 .gallery .toolbar button[pressed]:hover {
 609   background-color: rgba(240, 240, 240, 1);
 610   color: black;
 611 }
 612
 613 .gallery > .toolbar button.autofix {
 614   background-image: -webkit-image-set(
 615       url(../images/100/icon_autofix.png) 1x,
 616       url(../images/200/icon_autofix.png) 2x);
 617 }
 618
 619 .gallery > .toolbar button.autofix:active,
 620 .gallery > .toolbar button.autofix[pressed] {
 621   background-image: -webkit-image-set(
 622       url(../images/100/icon_autofix_selected.png) 1x,
 623       url(../images/200/icon_autofix_selected.png) 2x);
 624 }
 625
 626 .gallery > .toolbar button.crop {
 627   background-image:  -webkit-image-set(
 628       url(../images/100/icon_crop.png) 1x,
 629       url(../images/200/icon_crop.png) 2x);
 630 }
 631
 632 .gallery > .toolbar button.crop:active,
 633 .gallery > .toolbar button.crop[pressed] {
 634   background-image:  -webkit-image-set(
 635       url(../images/100/icon_crop_selected.png) 1x,
 636       url(../images/200/icon_crop_selected.png) 2x);
 637 }
 638
 639 .gallery > .toolbar button.exposure {
 640   background-image: -webkit-image-set(
 641       url(../images/100/icon_brightness.png) 1x,
 642       url(../images/200/icon_brightness.png) 2x);
 643 }
 644
 645 .gallery > .toolbar button.exposure:active,
 646 .gallery > .toolbar button.exposure[pressed] {
 647   background-image: -webkit-image-set(
 648       url(../images/100/icon_brightness_selected.png) 1x,
 649       url(../images/200/icon_brightness_selected.png) 2x);
 650 }
 651
 652 .gallery > .toolbar button.rotate_right {
 653   background-image: -webkit-image-set(
 654       url(../images/100/icon_rotate.png) 1x,
 655       url(../images/200/icon_rotate.png) 2x);
 656 }
 657
 658 .gallery > .toolbar button.rotate_right:active,
 659 .gallery > .toolbar button.rotate_right[pressed] {
 660   background-image: -webkit-image-set(
 661       url(../images/100/icon_rotate_selected.png) 1x,
 662       url(../images/200/icon_rotate_selected.png) 2x);
 663 }
 664
 665 .gallery > .toolbar button.rotate_left {
 666   background-image: -webkit-image-set(
 667       url(../images/100/icon_rotate_left.png) 1x,
 668       url(../images/200/icon_rotate_left.png) 2x);
 669 }
 670
 671 .gallery > .toolbar button.rotate_left:active,
 672 .gallery > .toolbar button.rotate_left[pressed] {
 673   background-image: -webkit-image-set(
 674       url(../images/100/icon_rotate_left_selected.png) 1x,
 675       url(../images/200/icon_rotate_left_selected.png) 2x);
 676 }
 677
 678 .gallery > .toolbar button.undo {
 679   background-image: -webkit-image-set(
 680       url(../images/100/icon_undo.png) 1x,
 681       url(../images/200/icon_undo.png) 2x);
 682 }
 683
 684 .gallery > .toolbar button.undo:active,
 685 .gallery > .toolbar button.undo[pressed] {
 686   background-image: -webkit-image-set(
 687       url(../images/100/icon_undo_selected.png) 1x,
 688       url(../images/200/icon_undo_selected.png) 2x);
 689 }
 690
 691 .gallery > .toolbar button.redo {
 692   background-image: -webkit-image-set(
 693       url(../images/100/icon_redo.png) 1x,
 694       url(../images/200/icon_redo.png) 2x);
 695   position: absolute;  /* Exclude from center-packing*/
 696 }
 697
 698 .gallery > .toolbar button.redo:active,
 699 .gallery > .toolbar button.redo[pressed] {
 700   background-image: -webkit-image-set(
 701       url(../images/100/icon_redo_selected.png) 1x,
 702       url(../images/200/icon_redo_selected.png) 2x);
 703 }
 704
 705 .gallery > .toolbar button[disabled],
 706 .gallery[tools][locked] > .toolbar button {
 707   opacity: 0.5;
 708   pointer-events: none;
 709 }
 710
 711 .gallery > .toolbar button[hidden] {
 712   display: none;
 713 }
 714
 715 .gallery[mode='slide'] > .toolbar button.mode {
 716   background-image: -webkit-image-set(
 717       url(../images/100/icon_mosaic.png) 1x,
 718       url(../images/200/icon_mosaic.png) 2x);
 719 }
 720
 721 .gallery[mode='slide'] > .toolbar button.mode:active {
 722   background-image: -webkit-image-set(
 723       url(../images/100/icon_mosaic_selected.png) 1x,
 724       url(../images/200/icon_mosaic_selected.png) 2x);
 725 }
 726
 727 .gallery[mode='mosaic'] > .toolbar button.mode {
 728   background-image: -webkit-image-set(
 729       url(../images/100/icon_1up.png) 1x,
 730       url(../images/200/icon_1up.png) 2x);
 731 }
 732
 733 .gallery[mode='mosaic'] > .toolbar button.mode:active {
 734   background-image: -webkit-image-set(
 735       url(../images/100/icon_1up_selected.png) 1x,
 736       url(../images/200/icon_1up_selected.png) 2x);
 737 }
 738
 739 .gallery > .toolbar button.slideshow {
 740   background-image: -webkit-image-set(
 741       url(../images/100/icon_slideshow.png) 1x,
 742       url(../images/200/icon_slideshow.png) 2x);
 743 }
 744
 745 .gallery > .toolbar button.slideshow:active,
 746 .gallery > .toolbar button.slideshow[pressed] {
 747   background-image: -webkit-image-set(
 748       url(../images/100/icon_slideshow_selected.png) 1x,
 749       url(../images/200/icon_slideshow_selected.png) 2x);
 750 }
 751
 752 .gallery > .toolbar button.delete {
 753   background-image: -webkit-image-set(
 754       url(../images/100/icon_delete.png) 1x,
 755       url(../images/200/icon_delete.png) 2x);
 756 }
 757
 758 .gallery > .toolbar button.delete:active {
 759   background-image: -webkit-image-set(
 760       url(../images/100/icon_delete_selected.png) 1x,
 761       url(../images/200/icon_delete_selected.png) 2x);
 762 }
 763
 764 .gallery > .toolbar button.edit {
 765   background-image: -webkit-image-set(
 766       url(../images/100/icon_edit.png) 1x,
 767       url(../images/200/icon_edit.png) 2x);
 768 }
 769
 770 .gallery > .toolbar button.edit:active,
 771 .gallery > .toolbar button.edit[pressed] {
 772   background-image: -webkit-image-set(
 773       url(../images/100/icon_edit_selected.png) 1x,
 774       url(../images/200/icon_edit_selected.png) 2x);
 775 }
 776
 777 .gallery > .toolbar button.print {
 778   background-image: -webkit-image-set(
 779       url(../images/100/icon_print.png) 1x,
 780       url(../images/200/icon_print.png) 2x);
 781 }
 782
 783 .gallery > .toolbar button.print:active,
 784 .gallery > .toolbar button.print[pressed] {
 785   background-image: -webkit-image-set(
 786       url(../images/100/icon_print_selected.png) 1x,
 787       url(../images/200/icon_print_selected.png) 2x);
 788 }
 789
 790 .gallery > .toolbar button.share {
 791   background-image: -webkit-image-set(
 792       url(../images/100/icon_share.png) 1x,
 793       url(../images/200/icon_share.png) 2x);
 794 }
 795
 796 .gallery > .toolbar button.share:active,
 797 .gallery > .toolbar button.share[pressed] {
 798   background-image: -webkit-image-set(
 799       url(../images/100/icon_share_selected.png) 1x,
 800       url(../images/200/icon_share_selected.png) 2x);
 801 }
 802
 803 .gallery > .toolbar button.share[disabled] {
 804   display: none;
 805 }
 806
 807 /* Secondary toolbar (mode-specific tools) */
 808
 809 .gallery .edit-modal {
 810   -webkit-box-orient: horizontal;
 811   -webkit-box-pack: center;
 812   bottom: 80px;
 813   display: -webkit-box;
 814   height: 40px;
 815   pointer-events: none;
 816   position: absolute;
 817   width: 100%;
 818 }
 819
 820 .gallery .edit-modal-wrapper[hidden] {
 821   display: none;
 822 }
 823
 824 .gallery .edit-modal-wrapper {
 825   -webkit-box-align: center;
 826   -webkit-box-orient: horizontal;
 827   -webkit-box-pack: center;
 828   background-color: rgba(0, 0, 0, 0.75);
 829   color: white;
 830   display: -webkit-box;
 831   pointer-events: auto;
 832 }
 833
 834 .gallery .edit-modal .label {
 835   -webkit-box-align: center;
 836   -webkit-box-orient: horizontal;
 837   background-position: 20px center;
 838   background-repeat: no-repeat;
 839   display: -webkit-box;
 840   height: 20px;
 841   padding-left: 50px;
 842   padding-right: 10px;
 843 }
 844
 845 .gallery .edit-modal .label.brightness {
 846   background-image: -webkit-image-set(
 847       url(../images/100/icon_brightness.png) 1x,
 848       url(../images/200/icon_brightness.png) 2x);
 849 }
 850
 851 .gallery .edit-modal .label.contrast {
 852   background-image: -webkit-image-set(
 853       url(../images/100/icon_contrast.png) 1x,
 854       url(../images/200/icon_contrast.png) 2x);
 855   height: 24px;
 856   margin-left: 15px;
 857 }
 858
 859 .gallery .edit-modal button {
 860   background: transparent;
 861   border: 0 none;
 862   border-image: none;
 863   box-sizing: border-box;
 864   color: #fff;
 865   height: 100%;
 866   min-width: 0;
 867   padding: 8px 16px;
 868 }
 869
 870 .gallery .edit-modal button * {
 871   pointer-events: none;
 872 }
 873
 874 .gallery .edit-modal button:hover {
 875   background: #1f1f1f;
 876   color: #fff;
 877 }
 878
 879 .gallery .edit-modal button.selected,
 880 .gallery .edit-modal button:active {
 881   background: #f0f0f0;
 882   color: black;
 883 }
 884
 885 .gallery .edit-modal .range {
 886   -webkit-appearance: none !important;
 887   background: transparent;
 888   height: 29px;
 889   margin-right: 10px;
 890   position: relative;
 891 }
 892
 893 .gallery .edit-modal .range::before {
 894   background: #fff;
 895   content: '';
 896   display: block;
 897   height: 3px;
 898   left: 3px;
 899   position: absolute;
 900   right: 3px;
 901   top: 13px;
 902 }
 903
 904 .gallery .edit-modal .range::-webkit-slider-thumb {
 905   -webkit-appearance: none;
 906   background-image: -webkit-image-set(
 907       url(../images/100/slider_thumb.png) 1x,
 908       url(../images/200/slider_thumb.png) 2x);
 909   height: 29px;
 910   width: 16px;
 911 }
 912
 913 /* Crop frame */
 914
 915 .gallery .crop-overlay {
 916   -webkit-box-orient: vertical;
 917   display: -webkit-box;
 918   pointer-events: none;
 919   position: absolute;
 920 }
 921
 922 .gallery .crop-overlay .shadow {
 923   background-color: rgba(0, 0, 0, 0.65);
 924 }
 925
 926 .gallery .crop-overlay .middle-box {
 927   -webkit-box-flex: 1;
 928   -webkit-box-orient: horizontal;
 929   display: -webkit-box;
 930 }
 931
 932 .gallery .crop-frame {
 933   -webkit-box-flex: 1;
 934   display: -webkit-box;
 935   position: relative;
 936 }
 937
 938 .gallery .crop-frame div {
 939   background-color: rgba(255, 255, 255, 1);
 940   box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 941   position: absolute;
 942 }
 943
 944 .gallery .crop-frame .horizontal {
 945   height: 1px;
 946   left: 7px;
 947   right: 7px;
 948 }
 949
 950 .gallery .crop-frame .horizontal.top {
 951   top: 0;
 952 }
 953
 954 .gallery .crop-frame .horizontal.bottom {
 955   bottom: 0;
 956 }
 957
 958 .gallery .crop-frame .vertical {
 959   bottom: 7px;
 960   top: 7px;
 961   width: 1px;
 962 }
 963
 964 .gallery .crop-frame .vertical.left {
 965   left: 0;
 966 }
 967
 968 .gallery .crop-frame .vertical.right {
 969   right: 0;
 970 }
 971
 972 .gallery .crop-frame .corner {
 973   border-radius: 6px;
 974   height: 13px;
 975   width: 13px;
 976 }
 977
 978 .gallery .crop-frame .corner.left {
 979   left: -6px;
 980 }
 981
 982 .gallery .crop-frame .corner.right {
 983   right: -6px;
 984 }
 985
 986 .gallery .crop-frame .corner.top {
 987   top: -6px;
 988 }
 989
 990 .gallery .crop-frame .corner.bottom {
 991   bottom: -6px;
 992 }
 993
 994 /* Prompt/notification panel */
 995
 996 .gallery .prompt-wrapper {
 997   -webkit-box-orient: horizontal;
 998   -webkit-box-pack: center;
 999   display: -webkit-box;
1000   height: 100%;
1001   pointer-events: none;
1002   position: absolute;
1003   width: 100%;
1004 }
1005
1006 .gallery .prompt-wrapper[pos=top] {
1007   -webkit-box-align: start;
1008 }
1009
1010 .gallery .prompt-wrapper[pos=center] {
1011   -webkit-box-align: center;
1012 }
1013
1014 .gallery .prompt-wrapper[pos=center] .back-button {
1015   display: none;
1016 }
1017
1018 .dimmable {
1019   opacity: 1;
1020   transition: opacity 220ms ease;
1021 }
1022
1023 .gallery .prompt {
1024   -webkit-box-align: center;
1025   -webkit-box-orient: horizontal;
1026   background-color: rgba(0, 0, 0, 0.8);
1027   color: white;
1028   display: -webkit-box;
1029   font-size: 120%;
1030   height: 40px;
1031   opacity: 0;
1032   padding: 0 20px;
1033   position: relative;
1034   top: 5px;
1035   transition: all 180ms ease;
1036 }
1037
1038 .gallery .prompt[state='fadein'] {
1039   opacity: 1;
1040   top: 0;
1041 }
1042
1043 .gallery .prompt[state='fadeout'] {
1044   opacity: 0;
1045   top: 0;
1046 }
1047
1048 .gallery .prompt-wrapper[pos=top] .prompt {
1049   padding-right: 10px;
1050 }
1051
1052 .gallery .share-menu {
1053   -webkit-box-align: stretch;
1054   -webkit-box-orient: vertical;
1055   -webkit-box-pack: start;
1056   background-color: white;
1057   border: 1px solid #7f7f7f;
1058   border-radius: 1px;
1059   bottom: 60px;
1060   display: -webkit-box;
1061   opacity: 1.0;
1062   padding: 8px;
1063   position: absolute;
1064   right: 10px;
1065   transition: opacity 500ms ease-in-out;
1066 }
1067
1068 .gallery .share-menu .bubble-point {
1069   background-image: -webkit-image-set(
1070       url(../images/100/bubble_point.png) 1x,
1071       url(../images/200/bubble_point.png) 2x);
1072   background-position: center top;
1073   background-repeat: no-repeat;
1074   bottom: -8px;
1075   height: 8px;
1076   padding: 0;
1077   position: absolute;
1078   right: 20px;
1079   width: 20px;
1080 }
1081
1082 .gallery .share-menu[hidden] {
1083   bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1084   opacity: 0;
1085   pointer-events: none;
1086 }
1087
1088 .gallery .share-menu > .item {
1089   background-color: rgba(0, 0, 0, 0);
1090   background-position: 5px center;
1091   background-repeat: no-repeat;
1092   cursor: pointer;
1093   padding: 5px;
1094   padding-left: 26px;
1095 }
1096
1097 .gallery .share-menu > .item:hover {
1098   background-color: rgba(240, 240, 240, 1);
1099 }
1100
1101 .gallery .share-menu > div > img {
1102   display: block;
1103   margin-right: 5px;
1104 }
1105
1106 /* Load spinner and error banner. */
1107
1108 .gallery .spinner {
1109   background-image:
1110       url(../../file_manager/foreground/images/common/spinner.svg);
1111   background-size: 100%;
1112   height: 16px;
1113   left: 50%;
1114   margin-left: -8px;
1115   margin-top: -8px;
1116   position: absolute;
1117   top: 50%;
1118   width: 16px;
1119 }
1120
1121 .gallery:not([spinner]) .spinner {
1122   display: none;
1123 }
1124
1125 .gallery .error-banner {
1126   -webkit-box-align: center;
1127   -webkit-box-orient: horizontal;
1128   -webkit-box-pack: center;
1129   background-color: rgba(24, 24, 24, 1);
1130   background-image: -webkit-image-set(
1131       url(../../file_manager/foreground/images/media/error.png) 1x,
1132       url(../../file_manager/foreground/images/media/2x/error.png) 2x);
1133   background-position: 25px center;
1134   background-repeat: no-repeat;
1135   color: white;
1136   display: -webkit-box;
1137   height: 54px;
1138   padding-left: 70px;
1139   padding-right: 35px;
1140 }
1141
1142 .gallery:not([error]) .error-banner {
1143   display: none;
1144 }
1145
1146 /* Mosaic view. */
1147 .mosaic {
1148   bottom: 55px;  /* Toolbar height. */
1149   left: 0;
1150   overflow-x: scroll;
1151   overflow-y: hidden;
1152   position: absolute;
1153   right: 0;
1154   top: 0;
1155
1156   /* transition-duration is set in Javascript. */
1157   transition-property: -webkit-transform;
1158   transition-timing-function: linear;
1159 }
1160
1161 .mosaic::-webkit-scrollbar {
1162   background: transparent;
1163 }
1164
1165 .mosaic::-webkit-scrollbar-thumb {
1166   background: rgb(31, 31, 31);
1167 }
1168
1169 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1170   background: transparent;
1171 }
1172
1173 .mosaic-tile {
1174   position: absolute;
1175   /* Tile's zoom factor is animated on hover. We apply the transform to
1176   the entire tile so that the image outline is included into the animation. */
1177   transition: -webkit-transform 150ms linear;
1178 }
1179
1180 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
1181    separately from .gallery[mode] */
1182 .mosaic:not([visible]) .mosaic-tile .img-border {
1183   opacity: 0;
1184 }
1185
1186 /* Animate tile's opacity, except for the selected tile which should show/hide
1187   instantly (this looks better when zooming to/from the slide mode). */
1188 .mosaic-tile:not([selected]) .img-border {
1189   transition: opacity 350ms linear;
1190 }
1191
1192 /* Must be in sync with mosaic_mode.js.
1193   Mosaic.Layout.SPACING should be equal to
1194     top + bottom + border-top-width + border-bottom-width AND
1195     left + right + border-left-width + border-right-width */
1196 .mosaic-tile .img-border {
1197   border: 1px solid black;  /* Space between the outline and the image. */
1198   bottom: 4px;
1199   left: 4px;
1200   outline: 2px solid transparent;
1201   overflow: hidden;
1202   position: absolute;
1203   right: 4px;
1204   top: 4px;
1205 }
1206
1207 /* Selected and hover state are only visible when zoom transition is over. */
1208 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1209   outline-color: rgb(51, 153, 255);
1210 }
1211
1212 .mosaic[visible='normal'].hover-visible
1213     .mosaic-tile:hover:not([selected]) .img-border {
1214   outline-color: rgb(182, 212, 252);
1215 }
1216
1217 .mosaic-tile .img-wrapper {
1218   bottom: 0;
1219   left: 0;
1220   position: absolute;
1221   right: 0;
1222   top: 0;
1223 }
1224
1225 .mosaic-tile .img-wrapper[generic-thumbnail],
1226 .mosaic-tile .img-wrapper.animated:not([generic-thumbnail])
1227     canvas:not(.cached) {
1228   -webkit-animation: fadeIn ease-in 1;
1229   -webkit-animation-duration: 500ms;
1230   -webkit-animation-fill-mode: forwards;
1231 }
1232
1233 @-webkit-keyframes fadeIn {
1234   from {
1235     opacity: 0;
1236   }
1237   to {
1238     opacity: 1;
1239   }
1240 }
1241
1242 /* In order to do mode animated transitions smoothly we keep both mosaic and
1243   image-container but transparent. */
1244 .gallery:not([mode='mosaic']) .mosaic,
1245 .gallery:not([mode='slide']) .image-container {
1246   pointer-events: none;
1247 }
1248
1249 .gallery:not([mode='slide']) .ribbon,
1250 .gallery:not([mode='slide']) .arrow-box {
1251   opacity: 0;
1252   pointer-events: none;
1253 }
1254
1255 /* Temporary. Remove this along with the delete confirmation dialog
1256   when Undo delete is implemented. */
1257 .cr-dialog-shield {
1258   background-color: black;
1259 }
1260
1261 /* Slideshow controls */
1262
1263 .slideshow-toolbar {
1264   -webkit-box-align: center;
1265   -webkit-box-orient: horizontal;
1266   -webkit-box-pack: center;
1267   bottom: 0;
1268   display: none;
1269   left: 0;
1270   padding-bottom: 6px;
1271   pointer-events: none;
1272   position: absolute;
1273   right: 0;
1274 }
1275
1276 .gallery[tools][slideshow] .slideshow-toolbar {
1277   display: -webkit-box;
1278 }
1279
1280 .slideshow-toolbar > div {
1281   background-position: center;
1282   background-repeat: no-repeat;
1283   height: 68px;
1284   opacity: 0.5;
1285   pointer-events: auto;
1286   width: 68px;
1287 }
1288
1289 .slideshow-toolbar > div:hover {
1290   opacity: 1;
1291 }
1292
1293 .slideshow-toolbar > .slideshow-play {
1294   background-image: -webkit-image-set(
1295       url(../images/100/slideshow-play.png) 1x,
1296       url(../images/200/slideshow-play.png) 2x);
1297   margin-right: -2px;
1298 }
1299
1300 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1301   background-image: -webkit-image-set(
1302       url(../images/100/slideshow-pause.png) 1x,
1303       url(../images/200/slideshow-pause.png) 2x);
1304 }
1305
1306 .slideshow-toolbar > .slideshow-end {
1307   background-image: -webkit-image-set(
1308       url(../images/100/slideshow-end.png) 1x,
1309       url(../images/200/slideshow-end.png) 2x);
1310   margin-left: -2px;
1311 }
1312
1313 .gallery > .header > button {
1314   -webkit-margin-start: 10px;
1315   cursor: default;
1316   height: 32px;
1317   min-width: 32px;
1318   width: 32px;
1319 }
1320
1321 .gallery > .header > .minimize-button {
1322   background: -webkit-image-set(
1323       url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
1324       url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x)
1325       center;
1326 }
1327
1328 .gallery > .header > .maximize-button {
1329   background: -webkit-image-set(
1330       url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
1331       url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
1332       center;
1333 }
1334
1335 .gallery > .header > .close-button {
1336   background: -webkit-image-set(
1337       url(chrome://resources/images/apps/topbar_button_close.png) 1x,
1338       url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
1339       center;
1340 }