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: -webkit-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   display: none;
 117 }
 118
 119 @media print {
 120   /* Do not print anything but the image content. */
 121   .gallery > :not(.content) {
 122     display: none !important;
 123   }
 124
 125   /* Center the printed image. */
 126   .gallery .image-container {
 127     -webkit-box-align: center;
 128     -webkit-box-orient: horizontal;
 129     -webkit-box-pack: center;
 130     display: -webkit-box;
 131   }
 132
 133   /* Do not print the screen resolution image. */
 134   .gallery .image-container > canvas.image {
 135     display: none !important;
 136   }
 137
 138   /* Print the full resolution image instead. */
 139   .gallery .image-container > canvas.fullres {
 140     display: block !important;
 141     max-height: 100%;
 142     max-width: 100%;
 143   }
 144 }
 145
 146 /* Toolbar */
 147
 148 .gallery > .header,
 149 .gallery > .toolbar {
 150   -webkit-box-align: stretch;
 151   -webkit-box-orient: horizontal;
 152   -webkit-box-pack: start;
 153   background-color: rgba(30, 30, 30, 0.8);
 154   display: flex;
 155   left: 0;
 156   opacity: 0;
 157   padding: 0 10px;
 158   pointer-events: none;
 159   position: absolute;
 160   right: 0;
 161   transition: opacity 300ms ease;
 162 }
 163
 164 .gallery > .header {
 165   -webkit-app-region: drag;
 166   -webkit-box-align: center;
 167   -webkit-box-pack: end;
 168   border-bottom: 1px solid rgba(50, 50, 50, 0.8);
 169   display: -webkit-box;
 170   height: 45px;
 171   top: 0;
 172 }
 173
 174 .gallery .header button {
 175   -webkit-app-region: no-drag;
 176 }
 177
 178 .gallery > .toolbar {
 179   border-top: 1px solid rgba(50, 50, 50, 0.8);
 180   bottom: 0;
 181   height: 55px;
 182   overflow: hidden;
 183 }
 184
 185 .gallery[tools]:not([slideshow]) > .header,
 186 .gallery[tools]:not([slideshow]) > .toolbar {
 187   opacity: 1;
 188   pointer-events: auto;
 189 }
 190
 191 /* Hide immediately when entering the slideshow. */
 192 .gallery[tools][slideshow] > .toolbar {
 193   transition-duration: 0ms;
 194 }
 195
 196 .gallery[tools][locked] > .toolbar {
 197   pointer-events: none;
 198 }
 199
 200 .gallery .arrow-box {
 201   -webkit-box-align: center;
 202   -webkit-box-orient: horizontal;
 203   -webkit-box-pack: center;
 204   display: -webkit-box;
 205   height: 100%;
 206   pointer-events: none;
 207   position: absolute;
 208   width: 100%;
 209   z-index: 100;
 210 }
 211
 212 .gallery .arrow-box .arrow {
 213   opacity: 0;
 214   pointer-events: none;
 215 }
 216
 217 .gallery .arrow-box .arrow-spacer {
 218   -webkit-box-flex: 1;
 219   pointer-events: none;
 220 }
 221
 222 .gallery[tools] .arrow-box[active] .arrow {
 223   cursor: pointer;
 224   opacity: 1;
 225   pointer-events: auto;
 226 }
 227
 228 /* The arrow icons are in nested divs so that their opacity can be manipulated
 229  * independently from their parent (which can be dimmed when the crop frame
 230  * overlaps it) */
 231 .gallery .arrow div {
 232   background-position: center center;
 233   background-repeat: no-repeat;
 234   height: 193px;
 235   opacity: 0;
 236   width: 105px;
 237 }
 238
 239 .gallery[tools] .arrow-box[active] .arrow div {
 240   opacity: 0.25;
 241 }
 242
 243 .gallery[tools] .arrow-box[active] .arrow div:hover {
 244   opacity: 1;
 245 }
 246
 247 .gallery .arrow.left div {
 248   background-image: -webkit-image-set(
 249       url(../images/100/arrow_left.png) 1x,
 250       url(../images/200/arrow_left.png) 2x);
 251 }
 252
 253 .gallery .arrow.right div {
 254   background-image: -webkit-image-set(
 255       url(../images/100/arrow_right.png) 1x,
 256       url(../images/200/arrow_right.png) 2x);
 257 }
 258
 259 /* Special behavior on mouse drag.
 260   Redundant .gallery attributes included to make the rules more specific */
 261
 262 /* Everything but the image container should become mouse-transparent */
 263 .gallery[tools][editing][mousedrag] * {
 264   pointer-events: none;
 265 }
 266
 267 .gallery[tools][editing][mousedrag] .image-container {
 268   pointer-events: auto;
 269 }
 270
 271 /* The editor marks elements with 'dimmed' attribute to get them out of the way
 272    of the crop frame */
 273 .gallery[tools][editing] [dimmed],
 274 .gallery[tools][editing] [dimmed] * {
 275   pointer-events: none;
 276 }
 277
 278 .gallery[tools][editing] [dimmed] {
 279   opacity: 0.2;
 280 }
 281
 282 /* Filename */
 283
 284 .gallery .filename-spacer {
 285   flex: 0 1 auto;
 286   height: 100%;
 287   min-width: 140px;
 288   overflow: hidden;
 289   position: relative;
 290   width: 252px;
 291 }
 292
 293 .gallery .filename-spacer > * {
 294   background-color: transparent;
 295   overflow: hidden;
 296   position: absolute;
 297   transition: visibility 0ms linear 180ms, all 180ms linear;
 298   width: 260px;
 299 }
 300
 301 .gallery .filename-spacer * {
 302   color: white;
 303 }
 304
 305 .gallery .filename-spacer .namebox {
 306   height: 22px;
 307   top: 15px;
 308 }
 309
 310 .gallery[editing] .filename-spacer .namebox {
 311   height: 21px;
 312   top: 5px;
 313 }
 314
 315 .gallery .filename-spacer .namebox {
 316   background-color: transparent;
 317   border: none;
 318   box-sizing: border-box;
 319   cursor: pointer;
 320   display: block;
 321   font-size: 120%;
 322   outline: none;
 323   overflow: hidden;
 324   padding: 0 3px;
 325   position: absolute;
 326   text-overflow: ellipsis;
 327   white-space: nowrap;
 328 }
 329
 330 .gallery .filename-spacer .namebox[disabled] {
 331   -webkit-user-select: none;
 332   cursor: default;
 333 }
 334
 335 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
 336   background-color: rgba(48, 48, 48, 1.0);
 337 }
 338
 339 .gallery .filename-spacer .namebox:focus {
 340   background-color: white;
 341   color: black;
 342   cursor: text;
 343 }
 344
 345 .gallery .filename-spacer .options {
 346   -webkit-box-align: center;
 347   -webkit-box-orient: horizontal;
 348   -webkit-box-pack: start;
 349   display: -webkit-box;
 350   height: 0;
 351   opacity: 0;
 352   top: 50px;
 353   visibility: hidden;
 354 }
 355
 356 .gallery[editing] .filename-spacer .options {
 357   height: auto;
 358   opacity: 1;
 359   top: 28px;
 360   visibility: visible;
 361 }
 362
 363 .gallery .filename-spacer .saved,
 364 .gallery .filename-spacer .overwrite-original {
 365   cursor: inherit;
 366   font-size: 90%;
 367   margin-left: 3px;
 368   margin-right: 18px;
 369   opacity: 0;
 370   pointer-events: none;
 371   transition: all linear 120ms;
 372 }
 373
 374 .gallery[editing] .filename-spacer .saved {
 375   color: white;
 376   opacity: 0.5;
 377 }
 378
 379 .gallery[editing] .filename-spacer .overwrite-original,
 380 .gallery[editing] .filename-spacer .overwrite-original > * {
 381   cursor: pointer;
 382   opacity: 1;
 383   pointer-events: auto;
 384 }
 385
 386 .gallery[editing] .overwrite-original[disabled] {
 387   opacity: 0.5;
 388 }
 389
 390 .gallery[editing] .overwrite-original[disabled],
 391 .gallery[editing] .overwrite-original[disabled] > * {
 392   cursor: default;
 393   pointer-events: none;
 394 }
 395
 396 .gallery .filename-spacer .saved[highlighted] {
 397   -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
 398   opacity: 1;
 399 }
 400
 401 /* Bubble */
 402
 403 .gallery .toolbar .bubble {
 404   bottom: 65px;
 405   font-size: 85%;
 406   left: 50px;
 407   position: absolute;
 408   width: 220px;
 409 }
 410
 411 .gallery:not([editing]) .toolbar .bubble {
 412   display: none;
 413 }
 414
 415 /* Middle spacer */
 416
 417 .gallery .middle-spacer {
 418   align-items: center;
 419   display: flex;
 420   flex: 1 0 auto;
 421   flex-direction: column;
 422 }
 423
 424 /* Toolbar buttons */
 425
 426 .gallery .button-spacer {
 427   display: flex;
 428   flex: none;
 429   justify-content: flex-end;
 430   width: 252px; /* 42px button x 6 */
 431 }
 432
 433 /* Thumbnails */
 434
 435 .gallery .ribbon-spacer {
 436   height: 55px;
 437   margin-bottom: -55px;
 438 }
 439
 440 .gallery .toolbar .ribbon {
 441   height: 100%;
 442   overflow: hidden;
 443   transition: opacity 180ms linear, visibility 0ms linear;
 444   z-index: 0;
 445 }
 446
 447 .gallery[editing] .toolbar .ribbon {
 448   opacity: 0;
 449   transition-delay: 0ms, 180ms;
 450   visibility: hidden;
 451 }
 452
 453 .gallery .ribbon-image {
 454   border: 2px solid rgba(255, 255, 255, 0);  /* transparent white */
 455   cursor: pointer;
 456   display: inline-block;
 457   height: 47px;
 458   margin: 2px;
 459   overflow: hidden;
 460   transition: all 180ms linear;
 461   width: 47px;
 462 }
 463
 464 .ribbon-image[vanishing='smooth'] {
 465   border-left-width: 0;
 466   border-right-width: 0;
 467   margin-left: 0;
 468   margin-right: 0;
 469   width: 0;
 470 }
 471
 472 .gallery .ribbon-image[selected] {
 473   border: 2px solid rgb(77, 144, 254);
 474 }
 475
 476 .gallery .toolbar .ribbon.fade-left {
 477   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
 478                                                 rgba(0, 0, 0, 1) 40px);
 479 }
 480
 481 .gallery .toolbar .ribbon.fade-right {
 482   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0,
 483                                                rgba(0, 0, 0, 1) 40px);
 484 }
 485
 486 .gallery .toolbar .ribbon.fade-left.fade-right {
 487   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
 488                                                 rgba(0, 0, 0, 1) 40px,
 489                                                 rgba(0, 0, 0, 1) 230px,
 490                                                 rgba(0, 0, 0, 0) 100%);
 491 }
 492
 493 .gallery .image-wrapper {
 494   background-size: 45px 45px;
 495   border: 1px solid rgba(0, 0, 0, 0);  /* transparent black */
 496   height: 45px;
 497   overflow: hidden;
 498   position: relative;
 499   width: 45px;
 500 }
 501
 502 .gallery .image-wrapper > img {
 503   position: absolute;
 504 }
 505
 506 .gallery .image-wrapper > img:not(.cached) {
 507   -webkit-animation: fadeIn 500ms ease-in;
 508 }
 509
 510 /* Editor buttons */
 511
 512 .gallery .edit-bar-spacer {
 513   -webkit-box-align: center;
 514   -webkit-box-orient: horizontal;
 515   -webkit-box-pack: center;
 516   display: -webkit-box;
 517   height: 100%;
 518   left: 280px;
 519   opacity: 0;
 520   right: 280px;
 521   transition: opacity 180ms linear, visibility 0ms linear 180ms;
 522   visibility: hidden;
 523   margin-bottom: -55px;
 524 }
 525
 526 .gallery .toolbar .edit-main {
 527   -webkit-box-orient: horizontal;
 528   -webkit-box-pack: center;
 529   color: white;
 530   display: -webkit-box;
 531   height: 55px;
 532   overflow: visible;
 533 }
 534
 535 .gallery[editing] .edit-bar-spacer {
 536   opacity: 1.0;
 537   pointer-events: auto;
 538   transition-delay: 100ms, 100ms;
 539   visibility: visible;
 540 }
 541
 542 .gallery .header button,
 543 .gallery .toolbar button,
 544 .gallery .header button[disabled],
 545 .gallery .toolbar button[disabled] {
 546   background-color: rgba(0, 0, 0, 0);
 547   background-position: center;
 548   background-repeat: no-repeat;
 549   border: none;
 550   box-shadow: none;
 551   color: white;
 552   cursor: pointer;
 553   display: inline-block;
 554   flex: none;
 555   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
 556   padding: 1px;  /* Instead of a border. */
 557   position: relative;
 558   z-index: 10;
 559 }
 560
 561 .gallery .header button,
 562 .gallery .toolbar button {
 563   height: 40px;
 564   margin: 6px 0;
 565   min-width: 40px;  /* Reset. */
 566   width: 40px;
 567 }
 568
 569 .gallery .toolbar button:focus {
 570   z-index: 11;
 571 }
 572
 573 /* By default, labels are hidden. */
 574 .gallery > .toolbar button span {
 575   display: none;
 576 }
 577
 578 /* Show labels if there is enough space. */
 579 @media (min-width: 1180px) {
 580
 581   .gallery .edit-main button,
 582   .gallery .edit-main button[disabled] {
 583       background-position: 5px center;
 584     max-width: 60px;
 585     min-width: 0;  /* Reset. */
 586     padding: 0 10px 0 35px;
 587     width: auto;
 588   }
 589
 590   .gallery > .toolbar button span {
 591     display: inline;
 592     white-space: nowrap;
 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 }
 696
 697 .gallery > .toolbar button.redo:active,
 698 .gallery > .toolbar button.redo[pressed] {
 699   background-image: -webkit-image-set(
 700       url(../images/100/icon_redo_selected.png) 1x,
 701       url(../images/200/icon_redo_selected.png) 2x);
 702 }
 703
 704 .gallery > .toolbar button[disabled],
 705 .gallery[tools][locked] > .toolbar button {
 706   opacity: 0.5;
 707   pointer-events: none;
 708 }
 709
 710 .gallery > .toolbar button[hidden] {
 711   display: none;
 712 }
 713
 714 .gallery[mode='slide'] > .toolbar button.mode {
 715   background-image: -webkit-image-set(
 716       url(../images/100/icon_mosaic.png) 1x,
 717       url(../images/200/icon_mosaic.png) 2x);
 718 }
 719
 720 .gallery[mode='slide'] > .toolbar button.mode:active {
 721   background-image: -webkit-image-set(
 722       url(../images/100/icon_mosaic_selected.png) 1x,
 723       url(../images/200/icon_mosaic_selected.png) 2x);
 724 }
 725
 726 .gallery[mode='mosaic'] > .toolbar button.mode {
 727   background-image: -webkit-image-set(
 728       url(../images/100/icon_1up.png) 1x,
 729       url(../images/200/icon_1up.png) 2x);
 730 }
 731
 732 .gallery[mode='mosaic'] > .toolbar button.mode:active {
 733   background-image: -webkit-image-set(
 734       url(../images/100/icon_1up_selected.png) 1x,
 735       url(../images/200/icon_1up_selected.png) 2x);
 736 }
 737
 738 .gallery > .toolbar button.slideshow {
 739   background-image: -webkit-image-set(
 740       url(../images/100/icon_slideshow.png) 1x,
 741       url(../images/200/icon_slideshow.png) 2x);
 742 }
 743
 744 .gallery > .toolbar button.slideshow:active,
 745 .gallery > .toolbar button.slideshow[pressed] {
 746   background-image: -webkit-image-set(
 747       url(../images/100/icon_slideshow_selected.png) 1x,
 748       url(../images/200/icon_slideshow_selected.png) 2x);
 749 }
 750
 751 .gallery > .toolbar button.delete {
 752   background-image: -webkit-image-set(
 753       url(../images/100/icon_delete.png) 1x,
 754       url(../images/200/icon_delete.png) 2x);
 755 }
 756
 757 .gallery > .toolbar button.delete:active {
 758   background-image: -webkit-image-set(
 759       url(../images/100/icon_delete_selected.png) 1x,
 760       url(../images/200/icon_delete_selected.png) 2x);
 761 }
 762
 763 .gallery > .toolbar button.edit {
 764   background-image: -webkit-image-set(
 765       url(../images/100/icon_edit.png) 1x,
 766       url(../images/200/icon_edit.png) 2x);
 767 }
 768
 769 .gallery > .toolbar button.edit:active,
 770 .gallery > .toolbar button.edit[pressed] {
 771   background-image: -webkit-image-set(
 772       url(../images/100/icon_edit_selected.png) 1x,
 773       url(../images/200/icon_edit_selected.png) 2x);
 774 }
 775
 776 .gallery > .toolbar button.print {
 777   background-image: -webkit-image-set(
 778       url(../images/100/icon_print.png) 1x,
 779       url(../images/200/icon_print.png) 2x);
 780 }
 781
 782 .gallery > .toolbar button.print:active,
 783 .gallery > .toolbar button.print[pressed] {
 784   background-image: -webkit-image-set(
 785       url(../images/100/icon_print_selected.png) 1x,
 786       url(../images/200/icon_print_selected.png) 2x);
 787 }
 788
 789 .gallery > .toolbar button.share {
 790   background-image: -webkit-image-set(
 791       url(../images/100/icon_share.png) 1x,
 792       url(../images/200/icon_share.png) 2x);
 793 }
 794
 795 .gallery > .toolbar button.share:active,
 796 .gallery > .toolbar button.share[pressed] {
 797   background-image: -webkit-image-set(
 798       url(../images/100/icon_share_selected.png) 1x,
 799       url(../images/200/icon_share_selected.png) 2x);
 800 }
 801
 802 .gallery > .toolbar button.share[disabled] {
 803   display: none;
 804 }
 805
 806 /* Secondary toolbar (mode-specific tools) */
 807
 808 .gallery .edit-modal {
 809   -webkit-box-orient: horizontal;
 810   -webkit-box-pack: center;
 811   bottom: 80px;
 812   display: -webkit-box;
 813   height: 40px;
 814   pointer-events: none;
 815   position: absolute;
 816   width: 100%;
 817 }
 818
 819 .gallery .edit-modal-wrapper[hidden] {
 820   display: none;
 821 }
 822
 823 .gallery .edit-modal-wrapper {
 824   -webkit-box-align: center;
 825   -webkit-box-orient: horizontal;
 826   -webkit-box-pack: center;
 827   background-color: rgba(0, 0, 0, 0.75);
 828   color: white;
 829   display: -webkit-box;
 830   pointer-events: auto;
 831 }
 832
 833 .gallery .edit-modal .label {
 834   -webkit-box-align: center;
 835   -webkit-box-orient: horizontal;
 836   background-position: 20px center;
 837   background-repeat: no-repeat;
 838   display: -webkit-box;
 839   height: 20px;
 840   padding-left: 50px;
 841   padding-right: 10px;
 842 }
 843
 844 .gallery .edit-modal .label.brightness {
 845   background-image: -webkit-image-set(
 846       url(../images/100/icon_brightness.png) 1x,
 847       url(../images/200/icon_brightness.png) 2x);
 848 }
 849
 850 .gallery .edit-modal .label.contrast {
 851   background-image: -webkit-image-set(
 852       url(../images/100/icon_contrast.png) 1x,
 853       url(../images/200/icon_contrast.png) 2x);
 854   height: 24px;
 855   margin-left: 15px;
 856 }
 857
 858 .gallery .edit-modal button {
 859   background: transparent;
 860   border: 0 none;
 861   border-image: none;
 862   box-sizing: border-box;
 863   color: #fff;
 864   height: 100%;
 865   min-width: 0;
 866   padding: 8px 16px;
 867 }
 868
 869 .gallery .edit-modal button * {
 870   pointer-events: none;
 871 }
 872
 873 .gallery .edit-modal button:hover {
 874   background: #1f1f1f;
 875   color: #fff;
 876 }
 877
 878 .gallery .edit-modal button.selected,
 879 .gallery .edit-modal button:active {
 880   background: #f0f0f0;
 881   color: black;
 882 }
 883
 884 .gallery .edit-modal .range {
 885   -webkit-appearance: none !important;
 886   background: transparent;
 887   height: 29px;
 888   margin-right: 10px;
 889   position: relative;
 890 }
 891
 892 .gallery .edit-modal .range::before {
 893   background: #fff;
 894   content: '';
 895   display: block;
 896   height: 3px;
 897   left: 3px;
 898   position: absolute;
 899   right: 3px;
 900   top: 13px;
 901 }
 902
 903 .gallery .edit-modal .range::-webkit-slider-thumb {
 904   -webkit-appearance: none;
 905   background-image: -webkit-image-set(
 906       url(../images/100/slider_thumb.png) 1x,
 907       url(../images/200/slider_thumb.png) 2x);
 908   height: 29px;
 909   width: 16px;
 910 }
 911
 912 /* Crop frame */
 913
 914 .gallery .crop-overlay {
 915   -webkit-box-orient: vertical;
 916   display: -webkit-box;
 917   pointer-events: none;
 918   position: absolute;
 919 }
 920
 921 .gallery .crop-overlay .shadow {
 922   background-color: rgba(0, 0, 0, 0.65);
 923 }
 924
 925 .gallery .crop-overlay .middle-box {
 926   -webkit-box-flex: 1;
 927   -webkit-box-orient: horizontal;
 928   display: -webkit-box;
 929 }
 930
 931 .gallery .crop-frame {
 932   -webkit-box-flex: 1;
 933   display: -webkit-box;
 934   position: relative;
 935 }
 936
 937 .gallery .crop-frame div {
 938   background-color: rgba(255, 255, 255, 1);
 939   box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 940   position: absolute;
 941 }
 942
 943 .gallery .crop-frame .horizontal {
 944   height: 1px;
 945   left: 7px;
 946   right: 7px;
 947 }
 948
 949 .gallery .crop-frame .horizontal.top {
 950   top: 0;
 951 }
 952
 953 .gallery .crop-frame .horizontal.bottom {
 954   bottom: 0;
 955 }
 956
 957 .gallery .crop-frame .vertical {
 958   bottom: 7px;
 959   top: 7px;
 960   width: 1px;
 961 }
 962
 963 .gallery .crop-frame .vertical.left {
 964   left: 0;
 965 }
 966
 967 .gallery .crop-frame .vertical.right {
 968   right: 0;
 969 }
 970
 971 .gallery .crop-frame .corner {
 972   border-radius: 6px;
 973   height: 13px;
 974   width: 13px;
 975 }
 976
 977 .gallery .crop-frame .corner.left {
 978   left: -6px;
 979 }
 980
 981 .gallery .crop-frame .corner.right {
 982   right: -6px;
 983 }
 984
 985 .gallery .crop-frame .corner.top {
 986   top: -6px;
 987 }
 988
 989 .gallery .crop-frame .corner.bottom {
 990   bottom: -6px;
 991 }
 992
 993 /* Prompt/notification panel */
 994
 995 .gallery .prompt-wrapper {
 996   -webkit-box-orient: horizontal;
 997   -webkit-box-pack: center;
 998   display: -webkit-box;
 999   height: 100%;
1000   pointer-events: none;
1001   position: absolute;
1002   width: 100%;
1003 }
1004
1005 .gallery .prompt-wrapper[pos=top] {
1006   -webkit-box-align: start;
1007 }
1008
1009 .gallery .prompt-wrapper[pos=center] {
1010   -webkit-box-align: center;
1011 }
1012
1013 .gallery .prompt-wrapper[pos=center] .back-button {
1014   display: none;
1015 }
1016
1017 .dimmable {
1018   opacity: 1;
1019   transition: opacity 220ms ease;
1020 }
1021
1022 .gallery .prompt {
1023   -webkit-box-align: center;
1024   -webkit-box-orient: horizontal;
1025   background-color: rgba(0, 0, 0, 0.8);
1026   color: white;
1027   display: -webkit-box;
1028   font-size: 120%;
1029   height: 40px;
1030   opacity: 0;
1031   padding: 0 20px;
1032   position: relative;
1033   top: 5px;
1034   transition: all 180ms ease;
1035 }
1036
1037 .gallery .prompt[state='fadein'] {
1038   opacity: 1;
1039   top: 0;
1040 }
1041
1042 .gallery .prompt[state='fadeout'] {
1043   opacity: 0;
1044   top: 0;
1045 }
1046
1047 .gallery .prompt-wrapper[pos=top] .prompt {
1048   padding-right: 10px;
1049 }
1050
1051 .gallery .share-menu {
1052   -webkit-box-align: stretch;
1053   -webkit-box-orient: vertical;
1054   -webkit-box-pack: start;
1055   background-color: white;
1056   border: 1px solid #7f7f7f;
1057   border-radius: 1px;
1058   bottom: 60px;
1059   display: -webkit-box;
1060   opacity: 1.0;
1061   padding: 8px;
1062   position: absolute;
1063   right: 10px;
1064   transition: opacity 500ms ease-in-out;
1065 }
1066
1067 .gallery .share-menu .bubble-point {
1068   background-image: -webkit-image-set(
1069       url(../images/100/bubble_point.png) 1x,
1070       url(../images/200/bubble_point.png) 2x);
1071   background-position: center top;
1072   background-repeat: no-repeat;
1073   bottom: -8px;
1074   height: 8px;
1075   padding: 0;
1076   position: absolute;
1077   right: 20px;
1078   width: 20px;
1079 }
1080
1081 .gallery .share-menu[hidden] {
1082   bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1083   opacity: 0;
1084   pointer-events: none;
1085 }
1086
1087 .gallery .share-menu > .item {
1088   background-color: rgba(0, 0, 0, 0);
1089   background-position: 5px center;
1090   background-repeat: no-repeat;
1091   cursor: pointer;
1092   padding: 5px;
1093   padding-left: 26px;
1094 }
1095
1096 .gallery .share-menu > .item:hover {
1097   background-color: rgba(240, 240, 240, 1);
1098 }
1099
1100 .gallery .share-menu > div > img {
1101   display: block;
1102   margin-right: 5px;
1103 }
1104
1105 /* Load spinner and error banner. */
1106
1107 .gallery .spinner {
1108   background-image:
1109       url(../../file_manager/foreground/images/common/spinner.svg);
1110   background-size: 100%;
1111   height: 16px;
1112   left: 50%;
1113   margin-left: -8px;
1114   margin-top: -8px;
1115   position: absolute;
1116   top: 50%;
1117   width: 16px;
1118 }
1119
1120 .gallery:not([spinner]) .spinner {
1121   display: none;
1122 }
1123
1124 .gallery .error-banner {
1125   -webkit-box-align: center;
1126   -webkit-box-orient: horizontal;
1127   -webkit-box-pack: center;
1128   background-color: rgba(24, 24, 24, 1);
1129   background-image: -webkit-image-set(
1130       url(../images/100/error.png) 1x,
1131       url(../images/200/error.png) 2x);
1132   background-position: 25px center;
1133   background-repeat: no-repeat;
1134   color: white;
1135   display: -webkit-box;
1136   height: 54px;
1137   padding-left: 70px;
1138   padding-right: 35px;
1139 }
1140
1141 .gallery:not([error]) .error-banner {
1142   display: none;
1143 }
1144
1145 /* Mosaic view. */
1146 .mosaic {
1147   bottom: 55px;  /* Toolbar height. */
1148   left: 0;
1149   overflow-x: scroll;
1150   overflow-y: hidden;
1151   position: absolute;
1152   right: 0;
1153   top: 0;
1154
1155   /* transition-duration is set in Javascript. */
1156   transition-property: -webkit-transform;
1157   transition-timing-function: linear;
1158 }
1159
1160 .mosaic::-webkit-scrollbar {
1161   background: transparent;
1162 }
1163
1164 .mosaic::-webkit-scrollbar-thumb {
1165   background: rgb(31, 31, 31);
1166 }
1167
1168 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1169   background: transparent;
1170 }
1171
1172 .mosaic-tile {
1173   position: absolute;
1174   /* Tile's zoom factor is animated on hover. We apply the transform to
1175   the entire tile so that the image outline is included into the animation. */
1176   transition: -webkit-transform 150ms linear;
1177   z-index: 50;
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 }
1341
1342 .debug-me .load-target-content-metadata::before,
1343 .debug-me .load-target-external-metadata::before,
1344 .debug-me .load-target-file-entry::before {
1345   bottom: 0;
1346   content: '';
1347   display: block;
1348   left: 0;
1349   position: absolute;
1350   right: 0;
1351   top: 0;
1352   z-index: 1;
1353 }
1354
1355 .debug-me .load-target-content-metadata::before {
1356   background-color: rgba(255, 0, 0, 0.3);
1357 }
1358
1359 .debug-me .load-target-external-metadata::before {
1360   background-color: rgba(0, 255, 0, 0.3);
1361 }
1362
1363 .debug-me .load-target-file-entry::before {
1364   background-color: rgba(0, 0, 255, 0.3);
1365 }