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