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