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