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 .gallery .ribbon-image[selected] > .selection-frame {
 443   border: 2px solid rgb(27, 168, 243);
 444   box-sizing: border-box;
 445   height: 100%;
 446   position: absolute;
 447   top: 0;
 448   width: 100%;
 449 }
 450
 451 /* Editor toolbar. */
 452
 453 .gallery .edit-mode-toolbar .options,
 454 .gallery .edit-mode-toolbar .exit-button-spacer {
 455   align-items: center;
 456   display: flex;
 457   height: 100%;
 458   opacity: 0;
 459   pointer-events: none;
 460   position: absolute;
 461   top: 0;
 462   visibility: hidden;
 463   width: 100%;
 464 }
 465
 466 .gallery .edit-mode-toolbar .options > *,
 467 .gallery .edit-mode-toolbar .exit-button-spacer > * {
 468   pointer-events: auto;
 469 }
 470
 471 .gallery .edit-mode-toolbar .exit-button-spacer {
 472   justify-content: flex-end;
 473 }
 474
 475 .gallery .edit-mode-toolbar .exit-button-spacer paper-button {
 476   -webkit-margin-end: 8px;
 477   color: white;
 478   font-weight: bold;
 479   text-transform: uppercase;
 480 }
 481
 482 .gallery .edit-mode-toolbar .edit-bar-spacer {
 483   display: block;
 484   height: 100%;
 485   opacity: 0;
 486   transition: opacity 180ms linear, visibility 0ms linear 180ms;
 487   visibility: hidden;
 488 }
 489
 490 .gallery[editing] .edit-mode-toolbar .options,
 491 .gallery[editing] .edit-mode-toolbar .exit-button-spacer {
 492   opacity: 1;
 493   visibility: visible;
 494 }
 495
 496 .edit-mode-toolbar .overwrite-original {
 497   -webkit-margin-start: 16px;
 498 }
 499
 500 .edit-mode-toolbar .overwrite-original::shadow #checkboxContainer {
 501   transform: scale(0.78, 0.78); /* Make box size to 14px. */
 502 }
 503
 504 .edit-mode-toolbar .overwrite-original::shadow #ink {
 505   left: -10px;
 506   top: -10px;
 507 }
 508
 509 .edit-mode-toolbar .overwrite-original::shadow #checkboxLabel {
 510   padding-left: 6px;
 511 }
 512
 513 .edit-mode-toolbar .overwrite-original[disabled]::shadow #checkbox,
 514 .edit-mode-toolbar .overwrite-original[disabled]::shadow #checkboxLabel {
 515   opacity: 0.2;
 516 }
 517
 518 .gallery .edit-mode-toolbar .saved {
 519   -webkit-margin-start: 14px;
 520   cursor: inherit;
 521   opacity: 0;
 522   pointer-events: none;
 523   transition-duration: 120ms;
 524   transition-property: opacity, transform;
 525   transition-timing-function: linear;
 526 }
 527
 528 .gallery[editing] .edit-mode-toolbar .saved {
 529   color: white;
 530   opacity: 0.5;
 531 }
 532
 533 .gallery .edit-mode-toolbar .saved[highlighted] {
 534   transform: scaleX(1.1) scaleY(1.1) rotate(0);
 535   opacity: 1;
 536 }
 537
 538 /* Editor buttons. */
 539
 540 .gallery .toolbar .edit-main {
 541   align-items: center;
 542   color: white;
 543   display: flex;
 544   height: 48px;
 545   justify-content: center;
 546   overflow: visible;
 547 }
 548
 549 .gallery .toolbar .edit-main .container {
 550   display: flex;
 551 }
 552
 553 .gallery[editing] .edit-bar-spacer {
 554   opacity: 1.0;
 555   pointer-events: auto;
 556   transition-delay: 100ms, 100ms;
 557   visibility: visible;
 558 }
 559
 560 .gallery > .toolbar paper-button,
 561 .gallery > .toolbar button {
 562   border-radius: 2px;
 563   margin: 0 8px;
 564 }
 565
 566 .gallery > .toolbar .icon-button {
 567   background-position: center;
 568   background-repeat: no-repeat;
 569   height: 32px;
 570   min-width: 32px;
 571   width: 32px;
 572 }
 573
 574 .gallery > .toolbar button {
 575   background-color: transparent;
 576   border: 0;
 577   padding: 0;
 578   position: relative;
 579 }
 580
 581 .gallery > .toolbar paper-button:focus,
 582 .gallery > .toolbar button:focus {
 583   background-color: rgba(0, 0, 0, 0.3);
 584 }
 585
 586 .gallery > .toolbar button:focus {
 587   outline: none;
 588 }
 589
 590 .gallery > .toolbar button.using-mouse:focus {
 591   background-color: transparent;
 592 }
 593
 594 .gallery > .toolbar button > .icon {
 595   background-position: center;
 596   background-repeat: no-repeat;
 597   height: 100%;
 598   position: relative;
 599   width: 100%;
 600   z-index: 2;
 601 }
 602
 603 .gallery > .toolbar button > files-toggle-ripple {
 604   position: absolute;
 605   top: 0;
 606   z-index: 1;
 607 }
 608
 609 .gallery > .toolbar .icon-button > files-toggle-ripple {
 610   height: 28px;
 611   left: 2px;
 612   top: 2px;
 613   width: 28px;
 614 }
 615
 616 .gallery > .toolbar button.edit > .icon {
 617   background-image: -webkit-image-set(
 618       url(../images/100/edit.png) 1x,
 619       url(../images/200/edit.png) 2x);
 620 }
 621
 622 .gallery > .toolbar paper-button.print {
 623   background-image: -webkit-image-set(
 624       url(../images/100/print.png) 1x,
 625       url(../images/200/print.png) 2x);
 626 }
 627
 628 .gallery > .toolbar paper-button.delete {
 629   background-image: -webkit-image-set(
 630       url(../images/100/delete.png) 1x,
 631       url(../images/200/delete.png) 2x);
 632 }
 633
 634 .gallery > .toolbar .icon.slide-mode {
 635   background-image: -webkit-image-set(
 636       url(../images/100/slide_view.png) 1x,
 637       url(../images/200/slide_view.png) 2x);
 638 }
 639
 640 .gallery > .toolbar .icon.thumbnail-mode {
 641   background-image: -webkit-image-set(
 642       url(../images/100/mosaic_view.png) 1x,
 643       url(../images/200/mosaic_view.png) 2x);
 644 }
 645
 646 .gallery > .toolbar paper-button.slideshow {
 647   background-image: -webkit-image-set(
 648       url(../images/100/slideshow.png) 1x,
 649       url(../images/200/slideshow.png) 2x);
 650 }
 651
 652 .gallery > .toolbar paper-button.share {
 653   background-image: -webkit-image-set(
 654       url(../images/100/share.png) 1x,
 655       url(../images/200/share.png) 2x);
 656 }
 657
 658 .gallery[editing] > .toolbar paper-button.edit {
 659   opacity: 0.5;
 660   pointer-events: none;
 661 }
 662
 663 .gallery[mode='slide'] .icon.slide-mode,
 664 .gallery[mode='thumbnail'] .icon.thumbnail-mode,
 665 paper-button[disabled],
 666 button[disabled] {
 667   display: none;
 668 }
 669
 670 /* Button in edit toolbar. */
 671
 672 .toolbar button.edit-toolbar {
 673   height: 28px;
 674   margin: 0 10px;
 675   min-width: 28px;  /* Reset. */
 676   outline: none;
 677   width: 28px;
 678 }
 679
 680 .toolbar button.edit-toolbar[disabled],
 681 .gallery[tools][locked] > button.edit-toolbar {
 682   display: block;
 683   opacity: 0.5;
 684   pointer-events: none;
 685 }
 686
 687 .toolbar button.edit-toolbar[hidden] {
 688   display: none;
 689 }
 690
 691 /* Do not show focus state if it's made by mouse since it makes difficult to see
 692  * the toggle animation. */
 693 .toolbar button.edit-toolbar:focus.using-mouse {
 694   background-color: transparent;
 695 }
 696
 697 /* Edit main toolbar. */
 698 .gallery > .toolbar .edit-main button {
 699   border-radius: 1px;
 700 }
 701
 702 .edit-main button.autofix .icon {
 703   background-image: -webkit-image-set(
 704       url(../images/100/auto_fix.png) 1x,
 705       url(../images/200/auto_fix.png) 2x);
 706 }
 707
 708 .edit-main button.crop .icon {
 709   background-image:  -webkit-image-set(
 710       url(../images/100/crop.png) 1x,
 711       url(../images/200/crop.png) 2x);
 712 }
 713
 714 .edit-main button.exposure .icon {
 715   background-image: -webkit-image-set(
 716       url(../images/100/brightness.png) 1x,
 717       url(../images/200/brightness.png) 2x);
 718 }
 719
 720 .edit-main button.rotate_right .icon {
 721   background-image: -webkit-image-set(
 722       url(../images/100/rotate_right.png) 1x,
 723       url(../images/200/rotate_right.png) 2x);
 724 }
 725
 726 .edit-main button.rotate_left .icon {
 727   background-image: -webkit-image-set(
 728       url(../images/100/rotate_left.png) 1x,
 729       url(../images/200/rotate_left.png) 2x);
 730 }
 731
 732 .edit-main button.undo .icon {
 733   background-image: -webkit-image-set(
 734       url(../images/100/undo.png) 1x,
 735       url(../images/200/undo.png) 2x);
 736 }
 737
 738 .edit-main button.redo .icon {
 739   background-image: -webkit-image-set(
 740       url(../images/100/redo.png) 1x,
 741       url(../images/200/redo.png) 2x);
 742 }
 743
 744 /* Edit modal. */
 745 .edit-modal {
 746   -webkit-box-orient: horizontal;
 747   -webkit-box-pack: center;
 748   bottom: 48px;
 749   display: block;
 750   height: 48px;
 751   pointer-events: none;
 752   position: absolute;
 753   width: 100%;
 754 }
 755
 756 .edit-modal-wrapper[hidden] {
 757   display: none;
 758 }
 759
 760 .edit-modal-wrapper {
 761   background-color: rgb(20, 22, 25);
 762   color: white;
 763   height: 100%;
 764   opacity: 0.9;
 765   pointer-events: auto;
 766   position: relative;
 767 }
 768
 769 .edit-modal-wrapper .container,
 770 .edit-modal-wrapper .action-buttons {
 771   align-items: center;
 772   display: flex;
 773   height: 100%;
 774   width: 100%;
 775 }
 776
 777 .edit-modal-wrapper .container {
 778   justify-content: center;
 779 }
 780
 781 .edit-modal-wrapper .action-buttons {
 782   justify-content: flex-end;
 783   left: 0;
 784   position: absolute;
 785   top: 0;
 786 }
 787
 788 .edit-modal button.edit-toolbar {
 789   background: transparent;
 790   border: 0 none;
 791   border-image: none;
 792   box-sizing: border-box;
 793   color: white;
 794   min-width: 0;
 795   padding: 0;
 796   position: relative;
 797 }
 798
 799 .edit-modal button.edit-toolbar .icon {
 800   display: none;
 801 }
 802
 803 .edit-modal button.edit-toolbar .label {
 804   display: block;
 805 }
 806
 807 /* Action buttons */
 808 .edit-modal-wrapper .action-buttons button {
 809   -webkit-margin-end: 8px;
 810   align-items: center;
 811   display: flex;
 812   height: 32px;
 813   justify-content: center;
 814   outline: none;
 815   width: 70px;
 816 }
 817
 818 .edit-modal-wrapper .action-buttons button .label {
 819   font-weight: bold;
 820 }
 821
 822 /* Crop aspect ratio buttons */
 823 .edit-modal button.crop-aspect-ratio {
 824   border: solid 1px white;
 825   border-radius: 2px;
 826   height: 18px;
 827   margin: 0 12px;
 828   outline: none;
 829   position: relative;
 830   transition: background 200ms ease;
 831   width: 36px;
 832 }
 833
 834 .edit-modal button.crop-aspect-ratio.selected {
 835   background: white;
 836 }
 837
 838 .edit-modal button.crop-aspect-ratio:focus:not(.using-mouse) {
 839   outline: 1px solid rgb(77, 144, 254);
 840 }
 841
 842 .edit-modal button.crop-aspect-ratio .label {
 843   font-size: 12px;
 844   height: 12px;
 845   pointer-events: none;
 846 }
 847
 848 .edit-modal button.crop-aspect-ratio.selected .label {
 849   color: rgb(20, 22, 25);
 850 }
 851
 852 .edit-modal button.crop-aspect-ratio paper-ripple {
 853   display: none;
 854 }
 855
 856 /* Range UI */
 857 .edit-modal .range {
 858   align-items: center;
 859   display: flex;
 860 }
 861
 862 .edit-modal .range > .icon {
 863   -webkit-margin-end: 8px;
 864   display: block;
 865   height: 16px;
 866   width: 16px;
 867 }
 868
 869 paper-slider::shadow paper-progress::shadow #progressContainer {
 870   background-color: rgba(255, 255, 255, 0.2);
 871 }
 872
 873 .edit-modal .range.brightness > .icon {
 874   background-image: -webkit-image-set(
 875       url(../images/100/brightness.png) 1x,
 876       url(../images/200/brightness.png) 2x);
 877 }
 878
 879 .edit-modal .range.contrast > .icon {
 880   background-image: -webkit-image-set(
 881       url(../images/100/contrast.png) 1x,
 882       url(../images/200/contrast.png) 2x);
 883 }
 884
 885 /* Crop frame */
 886
 887 .gallery .crop-overlay {
 888   -webkit-box-orient: vertical;
 889   display: -webkit-box;
 890   height: 100%;
 891   pointer-events: none;
 892   position: absolute;
 893   width: 100%;
 894 }
 895
 896 .gallery .crop-overlay .shadow {
 897   background-color: rgba(0, 0, 0, 0.65);
 898 }
 899
 900 .gallery .crop-overlay .middle-box {
 901   -webkit-box-flex: 1;
 902   -webkit-box-orient: horizontal;
 903   display: -webkit-box;
 904 }
 905
 906 .gallery .crop-frame {
 907   -webkit-box-flex: 1;
 908   display: -webkit-box;
 909   position: relative;
 910 }
 911
 912 .gallery .crop-frame div {
 913   background-color: rgba(255, 255, 255, 1);
 914   box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 915   position: absolute;
 916 }
 917
 918 .gallery .crop-frame .horizontal {
 919   height: 1px;
 920   left: 7px;
 921   right: 7px;
 922 }
 923
 924 .gallery .crop-frame .horizontal.top {
 925   top: 0;
 926 }
 927
 928 .gallery .crop-frame .horizontal.bottom {
 929   bottom: 0;
 930 }
 931
 932 .gallery .crop-frame .vertical {
 933   bottom: 7px;
 934   top: 7px;
 935   width: 1px;
 936 }
 937
 938 .gallery .crop-frame .vertical.left {
 939   left: 0;
 940 }
 941
 942 .gallery .crop-frame .vertical.right {
 943   right: 0;
 944 }
 945
 946 .gallery .crop-frame .corner {
 947   border-radius: 6px;
 948   height: 13px;
 949   width: 13px;
 950 }
 951
 952 .gallery .crop-frame .corner.left {
 953   left: -6px;
 954 }
 955
 956 .gallery .crop-frame .corner.right {
 957   right: -6px;
 958 }
 959
 960 .gallery .crop-frame .corner.top {
 961   top: -6px;
 962 }
 963
 964 .gallery .crop-frame .corner.bottom {
 965   bottom: -6px;
 966 }
 967
 968 /* Prompt/notification panel */
 969
 970 .gallery .prompt-wrapper {
 971   -webkit-box-orient: horizontal;
 972   -webkit-box-pack: center;
 973   display: -webkit-box;
 974   height: 100%;
 975   pointer-events: none;
 976   position: absolute;
 977   width: 100%;
 978 }
 979
 980 .gallery .prompt-wrapper[pos=top] {
 981   -webkit-box-align: start;
 982 }
 983
 984 .gallery .prompt-wrapper[pos=center] {
 985   -webkit-box-align: center;
 986 }
 987
 988 .gallery .prompt-wrapper[pos=center] .back-button {
 989   display: none;
 990 }
 991
 992 .dimmable {
 993   opacity: 1;
 994   transition: opacity 220ms ease;
 995 }
 996
 997 .gallery .prompt {
 998   -webkit-box-align: center;
 999   -webkit-box-orient: horizontal;
1000   background-color: rgba(0, 0, 0, 0.8);
1001   color: white;
1002   display: -webkit-box;
1003   font-size: 120%;
1004   height: 40px;
1005   opacity: 0;
1006   padding: 0 20px;
1007   position: relative;
1008   top: 5px;
1009   transition: all 180ms ease;
1010 }
1011
1012 .gallery .prompt[state='fadein'] {
1013   opacity: 1;
1014   top: 0;
1015 }
1016
1017 .gallery .prompt[state='fadeout'] {
1018   opacity: 0;
1019   top: 0;
1020 }
1021
1022 .gallery .prompt-wrapper[pos=top] .prompt {
1023   padding-right: 10px;
1024 }
1025
1026 .gallery .share-menu {
1027   -webkit-box-align: stretch;
1028   -webkit-box-orient: vertical;
1029   -webkit-box-pack: start;
1030   background-color: white;
1031   border: 1px solid #7f7f7f;
1032   border-radius: 1px;
1033   bottom: 60px;
1034   display: -webkit-box;
1035   opacity: 1.0;
1036   padding: 8px;
1037   position: absolute;
1038   right: 10px;
1039   transition: opacity 500ms ease-in-out;
1040 }
1041
1042 .gallery .share-menu .bubble-point {
1043   background-image: -webkit-image-set(
1044       url(../images/100/bubble_point.png) 1x,
1045       url(../images/200/bubble_point.png) 2x);
1046   background-position: center top;
1047   background-repeat: no-repeat;
1048   bottom: -8px;
1049   height: 8px;
1050   padding: 0;
1051   position: absolute;
1052   right: 20px;
1053   width: 20px;
1054 }
1055
1056 .gallery .share-menu[hidden] {
1057   bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
1058   opacity: 0;
1059   pointer-events: none;
1060 }
1061
1062 .gallery .share-menu > .item {
1063   background-color: rgba(0, 0, 0, 0);
1064   background-position: 5px center;
1065   background-repeat: no-repeat;
1066   cursor: pointer;
1067   padding: 5px;
1068   padding-left: 26px;
1069 }
1070
1071 .gallery .share-menu > .item:hover {
1072   background-color: rgba(240, 240, 240, 1);
1073 }
1074
1075 .gallery .share-menu > div > img {
1076   display: block;
1077   margin-right: 5px;
1078 }
1079
1080 /* Load spinner and error banner. */
1081
1082 .gallery .spinner {
1083   background-image: url(chrome://resources/images/throbber_medium.svg);
1084   background-size: 100%;
1085   height: 32px;
1086   left: 50%;
1087   margin-left: -16px;
1088   margin-top: -16px;
1089   position: absolute;
1090   top: 50%;
1091   width: 32px;
1092 }
1093
1094 .gallery:not([spinner]) .spinner {
1095   display: none;
1096 }
1097
1098 .gallery .error-banner {
1099   -webkit-box-align: center;
1100   -webkit-box-orient: horizontal;
1101   -webkit-box-pack: center;
1102   background-color: rgba(24, 24, 24, 1);
1103   background-image: -webkit-image-set(
1104       url(../images/100/error.png) 1x,
1105       url(../images/200/error.png) 2x);
1106   background-position: 25px center;
1107   background-repeat: no-repeat;
1108   color: white;
1109   display: -webkit-box;
1110   height: 54px;
1111   padding-left: 70px;
1112   padding-right: 35px;
1113 }
1114
1115 .gallery:not([error]) .error-banner {
1116   display: none;
1117 }
1118
1119 .toast-stage {
1120   bottom: 0;
1121   left: 0;
1122   pointer-events: none;
1123   position: absolute;
1124   right: 0;
1125   top: 0;
1126 }
1127
1128 .gallery[tools] .toast-stage {
1129   bottom: 48px;
1130   top: 48px;
1131 }
1132
1133 files-toast {
1134   pointer-events: auto;
1135 }
1136
1137 /* Mosaic view. */
1138 .mosaic {
1139   bottom: 0;
1140   left: 0;
1141   overflow-x: scroll;
1142   overflow-y: hidden;
1143   position: absolute;
1144   right: 0;
1145   top: 55px; /* Toolbar height. */
1146
1147   /* transition-duration is set in Javascript. */
1148   transition-property: transform;
1149   transition-timing-function: linear;
1150 }
1151
1152 .mosaic::-webkit-scrollbar {
1153   background: transparent;
1154 }
1155
1156 .mosaic::-webkit-scrollbar-thumb {
1157   background: rgb(31, 31, 31);
1158 }
1159
1160 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
1161   background: transparent;
1162 }
1163
1164 .mosaic-tile {
1165   position: absolute;
1166   /* Tile's zoom factor is animated on hover. We apply the transform to
1167   the entire tile so that the image outline is included into the animation. */
1168   transition: transform 150ms linear;
1169   z-index: 50;
1170 }
1171
1172 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
1173    separately from .gallery[mode] */
1174 .mosaic:not([visible]) .mosaic-tile .img-border {
1175   opacity: 0;
1176 }
1177
1178 /* Animate tile's opacity, except for the selected tile which should show/hide
1179   instantly (this looks better when zooming to/from the slide mode). */
1180 .mosaic-tile:not([selected]) .img-border {
1181   transition: opacity 350ms linear;
1182 }
1183
1184 /* Must be in sync with mosaic_mode.js.
1185   Mosaic.Layout.SPACING should be equal to
1186     top + bottom + border-top-width + border-bottom-width AND
1187     left + right + border-left-width + border-right-width */
1188 .mosaic-tile .img-border {
1189   border: 1px solid black;  /* Space between the outline and the image. */
1190   bottom: 4px;
1191   left: 4px;
1192   outline: 2px solid transparent;
1193   overflow: hidden;
1194   position: absolute;
1195   right: 4px;
1196   top: 4px;
1197 }
1198
1199 /* Selected and hover state are only visible when zoom transition is over. */
1200 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
1201   outline-color: rgb(51, 153, 255);
1202 }
1203
1204 .mosaic[visible='normal'].hover-visible
1205     .mosaic-tile:hover:not([selected]) .img-border {
1206   outline-color: rgb(182, 212, 252);
1207 }
1208
1209 .mosaic-tile .img-wrapper {
1210   bottom: 0;
1211   left: 0;
1212   position: absolute;
1213   right: 0;
1214   top: 0;
1215 }
1216
1217 .mosaic-tile .img-wrapper[generic-thumbnail],
1218 .mosaic-tile .img-wrapper.animated:not([generic-thumbnail])
1219     canvas:not(.cached) {
1220   -webkit-animation: fadeIn ease-in 1;
1221   -webkit-animation-duration: 500ms;
1222   -webkit-animation-fill-mode: forwards;
1223 }
1224
1225 @-webkit-keyframes fadeIn {
1226   from {
1227     opacity: 0;
1228   }
1229   to {
1230     opacity: 1;
1231   }
1232 }
1233
1234 /* In order to do mode animated transitions smoothly we keep both mosaic and
1235   image-container but transparent. */
1236 .gallery:not([mode='mosaic']) .mosaic,
1237 .gallery:not([mode='slide']) .image-container {
1238   pointer-events: none;
1239 }
1240
1241 .gallery:not([mode='slide']) .ribbon,
1242 .gallery:not([mode='slide']) .arrow-box {
1243   opacity: 0;
1244   pointer-events: none;
1245 }
1246
1247 /* Temporary. Remove this along with the delete confirmation dialog
1248   when Undo delete is implemented. */
1249 .cr-dialog-shield {
1250   background-color: black;
1251 }
1252
1253 /* Slideshow controls */
1254
1255 .slideshow-toolbar {
1256   bottom: 16px;
1257   display: none;
1258   justify-content: center;
1259   left: 0;
1260   padding-bottom: 6px;
1261   pointer-events: none;
1262   position: absolute;
1263   right: 0;
1264 }
1265
1266 .gallery[tools][slideshow] .slideshow-toolbar {
1267   display: flex;
1268 }
1269
1270 .slideshow-toolbar > div {
1271   background-position: center;
1272   background-repeat: no-repeat;
1273   height: 48px;
1274   opacity: 0.8;
1275   pointer-events: auto;
1276   width: 48px;
1277 }
1278
1279 .slideshow-toolbar > div:hover {
1280   opacity: 1;
1281 }
1282
1283 .slideshow-toolbar > .slideshow-play {
1284   background-image: -webkit-image-set(
1285       url(../images/100/slideshow_play.png) 1x,
1286       url(../images/200/slideshow_play.png) 2x);
1287 }
1288
1289 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
1290   background-image: -webkit-image-set(
1291       url(../images/100/slideshow_pause.png) 1x,
1292       url(../images/200/slideshow_pause.png) 2x);
1293 }
1294
1295 .slideshow-toolbar > .slideshow-end {
1296   -webkit-margin-start: 4px;
1297   background-image: -webkit-image-set(
1298       url(../images/100/slideshow_close.png) 1x,
1299       url(../images/200/slideshow_close.png) 2x);
1300 }
1301
1302 .debug-me .load-target-content-metadata::before,
1303 .debug-me .load-target-external-metadata::before,
1304 .debug-me .load-target-file-entry::before {
1305   bottom: 0;
1306   content: '';
1307   display: block;
1308   left: 0;
1309   position: absolute;
1310   right: 0;
1311   top: 0;
1312   z-index: 1;
1313 }
1314
1315 .debug-me .load-target-content-metadata::before {
1316   background-color: rgba(255, 0, 0, 0.3);
1317 }
1318
1319 .debug-me .load-target-external-metadata::before {
1320   background-color: rgba(0, 255, 0, 0.3);
1321 }
1322
1323 .debug-me .load-target-file-entry::before {
1324   background-color: rgba(0, 0, 255, 0.3);
1325 }
1326
1327 /**
1328  * Thumbnail view.
1329  */
1330 .thumbnail-view {
1331   display: block;
1332   height: 100%;
1333   overflow-y: scroll;
1334 }
1335
1336 .thumbnail-view ul {
1337   -webkit-padding-end: 4px;
1338   -webkit-padding-start: 0;
1339   margin: 0;
1340   padding-top: 52px; /* Toolbar height (48px) + Margin (4px) */
1341   padding-bottom: 0;
1342 }
1343
1344 .thumbnail-view .thumbnail {
1345   -webkit-margin-start: 4px;
1346   display: block;
1347   margin-bottom: 4px;
1348   position: relative;
1349 }
1350
1351 html[dir='ltr'] .thumbnail-view .thumbnail {
1352   float: left;
1353 }
1354
1355 html[dir='rtl'] .thumbnail-view .thumbnail {
1356   float: right;
1357 }
1358
1359 .thumbnail-view .thumbnail.selected:focus {
1360   outline: none;
1361 }
1362
1363 .thumbnail-view::-webkit-scrollbar {
1364   width: 0;
1365 }
1366
1367 .thumbnail-view .scrollbar {
1368   bottom: 4px;
1369   opacity: 1;
1370   position: absolute;
1371   top: 52px; /* Toolbar height (48px) + Margin (4px) */
1372   transition: opacity 1s;
1373   width: 8px;
1374 }
1375
1376 .thumbnail-view .scrollbar.transparent {
1377   opacity: 0;
1378   pointer-events: none;
1379 }
1380
1381 html[dir='ltr'] .thumbnail-view .scrollbar {
1382   right: 0;
1383 }
1384
1385 html[dir='rtl'] .thumbnail-view .scrollbar {
1386   left: 0;
1387 }
1388
1389 .thumbnail-view .scrollbar .thumb {
1390   -webkit-margin-end: 4px;
1391   background-color: white;
1392   border-radius: 2px;
1393   opacity: 0.4;
1394   width: 4px;
1395 }
1396
1397 .thumbnail-view .thumbnail > .frame {
1398   bottom: 0;
1399   left: 0;
1400   position: absolute;
1401   right: 0;
1402   top: 0;
1403 }
1404
1405 .thumbnail-view .thumbnail > .frame.image {
1406   background-repeat: no-repeat;
1407   background-size: cover;
1408 }
1409
1410 .thumbnail-view .thumbnail.selected > .frame.selection {
1411   border: solid 2px rgb(27, 168, 243);
1412 }
1413
1414 .thumbnail-view .thumbnail.error {
1415   display: none;
1416 }
1417
1418 .thumbnail-view .thumbnail.transparent {
1419   opacity: 0;
1420 }
1421
1422 .thumbnail-view .animation-thumbnail {
1423   background-repeat: no-repeat;
1424   background-size: cover;
1425   display: none;
1426   position: absolute;
1427 }
1428
1429 .thumbnail-view .animation-thumbnail.animating {
1430   display: block;
1431 }