ui/file_manager/gallery/css/gallery.css

/* Copyright (c) 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body {
  -webkit-user-select: none;
  background-color: black;
  font-size: 84%;
  margin: 0;
}

button {
  cursor: pointer;
}

button:focus {
  outline: 1px solid rgb(77, 144, 254);
}

/* TODO(fukino): This style for the bubble is old. Apply new design and remove
 * these styles. */
.bubble {
  background: #FFF;
  border-radius: 2px;
  cursor: default;
  outline: 1px solid rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.bubble .pointer {
  background: -webkit-image-set(
    url(../../file_manager/foreground/images/common/bubble_point_white.png) 1x,
    url(../../file_manager/foreground/images/common/2x/bubble_point_white.png) 2x);
  display: block;
  height: 11px;
  left: 24px;
  margin: 0 0 0 -5px;
  outline: none;
  position: absolute;
  width: 17px;
}

html[dir='rtl'] .bubble .pointer {
  margin: 0 -5px 0 0;
  left: auto;
  right: 24px;
}

.bubble .pointer:not(.bottom) {
  top: -11px;
}

.bubble .pointer.bottom {
  transform: rotate(180deg);
  bottom: -11px;
}

.bubble .close-x {
  background: -webkit-image-set(
    url(../../file_manager/foreground/images/common/close_x_gray.png) 1x,
    url(../../file_manager/foreground/images/common/2x/close_x_gray.png) 2x);
  height: 21px;
  opacity: 0.3;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 21px;
}

html[dir='rtl'] .bubble .close-x {
  right: auto;
  left: 3px;
}

.bubble .close-x:hover {
  opacity: 0.7;
}

paper-ripple {
  color: black;
}

.gallery,
.gallery > .content {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

/* Common background for both mosaic and slide mode. */
.gallery > .content {
  background-color: black;
}

/* Image container and canvas elements */

.gallery .image-container {
  cursor: none;   /* Only visible when the toolbar is active */
  height: 100%;
  position: absolute;
  width: 100%;
}

.gallery[tools] .image-container[cursor='default'] {
  cursor: default;
}

.gallery[tools] .image-container[cursor='move'] {
  cursor: move;
}

.gallery[tools] .image-container[cursor='crop'] {
  cursor: -webkit-image-set(
      url(../images/100/cursor_crop.png) 1x,
      url(../images/200/cursor_crop.png) 2x) 15 15, auto;
}

/**
 * If large cursor or high contrast is enabled, falls back to default cursor
 * since they don't support css custom cursor.
 */
.gallery[tools][large-cursor] .image-container[cursor='crop'],
.gallery[tools][high-contrast] .image-container[cursor='crop'] {
  cursor: default;
}

.gallery[tools] .image-container[cursor='n-resize'],
.gallery[tools] .image-container[cursor='s-resize'] {
  cursor: ns-resize;
}

.gallery[tools] .image-container[cursor='e-resize'],
.gallery[tools] .image-container[cursor='w-resize'] {
  cursor: ew-resize;
}

.gallery[tools] .image-container[cursor='nw-resize'],
.gallery[tools] .image-container[cursor='se-resize'] {
  cursor: nwse-resize;
}

.gallery[tools] .image-container[cursor='ne-resize'],
.gallery[tools] .image-container[cursor='sw-resize'] {
  cursor: nesw-resize;
}

.gallery .image-container > .image {
  left: 0;
  pointer-events: none;
  position: absolute;
  /* Duration and timing function are set in Javascript. */
  transition-property: transform, opacity;
}

.gallery .image-container > .image[fade] {
  opacity: 0;
}

@media print {
  /* Do not print anything but the image content. */
  .gallery > :not(.content) {
    display: none !important;
  }

  /* Center the printed image. */
  .gallery .image-container {
    -webkit-box-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -webkit-box;
  }

  /* Print the full resolution image instead. */
  .gallery .image-container > .image {
    height: auto !important;
    max-height: 100%;
    max-width: 100%;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
  }
}

/* Toolbar */

.gallery > .toolbar {
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: start;
  background-color: rgb(40, 42, 45);
  display: flex;
  height: 48px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 300ms ease;
}

.gallery > .toolbar.top {
  top: 0;
}

.gallery > .toolbar.bottom {
  bottom: 0;
  height: 48px;
  overflow: visible; /* For overwrite original bubble. */
}

.gallery > .toolbar.bottom > .slide-mode-toolbar {
  left: 0;
  opacity: 1;
  position: absolute;
  visibility: visible;
  width: 100%;
}

.gallery > .toolbar.bottom > .edit-mode-toolbar {
  left: 0;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  width: 100%;
}

.gallery[editing] > .toolbar.bottom > .slide-mode-toolbar {
  opacity: 0;
  visibility: hidden;
}

.gallery[editing] > .toolbar.bottom > .edit-mode-toolbar {
  opacity: 1;
  visibility: visible;
}

.gallery[tools]:not([slideshow]) > .toolbar {
  opacity: 0.9;
  pointer-events: auto;
}

.gallery:not([tools]) > files-tooltip {
  opacity: 0;
}

/* Hide immediately when entering the slideshow. */
.gallery[tools][slideshow] > .toolbar {
  transition-duration: 0ms;
}

.gallery[tools][slideshow] > files-tooltip {
  transition-duration: 0ms;
}

.gallery[tools][locked] > .toolbar {
  pointer-events: none;
}

.gallery .arrow-box {
  pointer-events: none;
}

.gallery .arrow-box .arrow {
  align-items: center;
  display: flex;
  height: 100%;
  position: absolute;
  z-index: 100;
}

.gallery .arrow-box .arrow.left {
  left: 16px;
}

.gallery .arrow-box .arrow.right {
  right: 16px;
}

/* The arrow icons are in nested divs so that their opacity can be manipulated
 * independently from their parent (which can be dimmed when the crop frame
 * overlaps it) */
.gallery .arrow div {
  cursor: pointer;
  height: 48px;
  opacity: 0;
  width: 48px;
}

.gallery[tools]:not([editing]) .arrow-box[active] .arrow div {
  opacity: 0.4;
  pointer-events: auto;
}

.gallery[tools]:not([editing]) .arrow-box[active] .arrow div:hover {
  opacity: 1;
}

.gallery .arrow.left div {
  background-image: -webkit-image-set(
      url(../images/100/slideshow_previous.png) 1x,
      url(../images/200/slideshow_previous.png) 2x);
}

.gallery .arrow.right div {
  background-image: -webkit-image-set(
      url(../images/100/slideshow_next.png) 1x,
      url(../images/200/slideshow_next.png) 2x);
}

/* Special behavior on mouse drag.
  Redundant .gallery attributes included to make the rules more specific */

/* Everything but the image container should become mouse-transparent */
.gallery[tools][editing][mousedrag] * {
  pointer-events: none;
}

.gallery[tools][editing][mousedrag] .image-container {
  pointer-events: auto;
}

/* The editor marks elements with 'dimmed' attribute to get them out of the way
   of the crop frame */
.gallery[tools][editing] [dimmed],
.gallery[tools][editing] [dimmed] * {
  pointer-events: none;
}

.gallery[tools][editing] [dimmed] {
  opacity: 0.2;
}

/* Filename */

.filename-spacer {
  -webkit-margin-start: 16px;
  flex: 1 0 auto;
}

#rename-input {
  margin: 8px 0;
  min-width: 160px;
  padding: 4px 0;
  width: -webkit-fit-content;
}

#rename-input > input {
  color: white;
  text-overflow: ellipsis;
}

/* Bubble */

.gallery .toolbar .bubble {
  bottom: 65px;
  font-size: 85%;
  left: 20px;
  position: absolute;
  width: 220px;
}

html[dir='rtl'] .gallery .toolbar .bubble {
  left: auto;
  right: 20px;
}

.gallery:not([editing]) .toolbar .bubble {
  display: none;
}

/* Middle spacer */

.gallery .middle-spacer {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* Toolbar buttons */

.gallery .button-spacer {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: flex-end;
}

/* Thumbnails */

.gallery .ribbon-spacer {
  height: 48px;
  position: relative;
}

.gallery .toolbar .ribbon {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 4px 0;
  position: absolute;
  top: 0;
  transition: opacity 180ms linear, visibility 0ms linear;
  white-space: nowrap;
  width: 100%;
  z-index: 0;
}

.gallery .toolbar .ribbon:focus {
  outline: none;
}

.gallery[editing] .toolbar .ribbon {
  opacity: 0;
  transition-delay: 0ms, 180ms;
  visibility: hidden;
}

.gallery .ribbon-image {
  background-color: black;
  cursor: pointer;
  display: block;
  flex: none;
  height: 40px;
  margin: 0 2px;
  overflow: hidden;
  position: relative;
  transition: all 180ms linear;
  width: 71px;
}

.ribbon-image[vanishing='smooth'] {
  border-left-width: 0;
  border-right-width: 0;
  margin-left: 0;
  margin-right: 0;
  width: 0;
}

.gallery .toolbar .ribbon.fade-left {
  justify-content: flex-end;
}

.gallery .toolbar .ribbon.fade-right {
  justify-content: flex-start;
}

.gallery .image-wrapper {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.gallery .image-wrapper > img {
  position: absolute;
}

.gallery .image-wrapper > img:not(.cached) {
  -webkit-animation: fadeIn 500ms ease-in;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gallery .ribbon-image > .indicator {
  -webkit-transition: opacity 500ms ease-in;
  background-image: -webkit-image-set(
      url(../images/100/slide_view.png) 1x,
      url(../images/200/slide_view.png) 2x);
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.gallery .ribbon-image > .indicator.loading {
  opacity: 0.2;
}

.gallery .ribbon-image[selected] > .selection-frame {
  border: 2px solid rgb(27, 168, 243);
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Editor toolbar. */

.gallery .edit-mode-toolbar .options,
.gallery .edit-mode-toolbar .exit-button-spacer {
  align-items: center;
  display: flex;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
}

.gallery .edit-mode-toolbar .options > *,
.gallery .edit-mode-toolbar .exit-button-spacer > * {
  pointer-events: auto;
}

.gallery .edit-mode-toolbar .exit-button-spacer {
  justify-content: flex-end;
}

.gallery .edit-mode-toolbar .exit-button-spacer paper-button {
  -webkit-margin-end: 8px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.gallery .edit-mode-toolbar .edit-bar-spacer {
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms linear, visibility 0ms linear 180ms;
  visibility: hidden;
}

.gallery[editing] .edit-mode-toolbar .options,
.gallery[editing] .edit-mode-toolbar .exit-button-spacer {
  opacity: 1;
  visibility: visible;
}

.edit-mode-toolbar .overwrite-original {
  -webkit-margin-start: 16px;
}

.edit-mode-toolbar .overwrite-original[disabled] {
  opacity: 0.2;
}

.gallery .edit-mode-toolbar .saved {
  -webkit-margin-start: 14px;
  cursor: inherit;
  opacity: 0;
  pointer-events: none;
  transition-duration: 120ms;
  transition-property: opacity, transform;
  transition-timing-function: linear;
}

.gallery[editing] .edit-mode-toolbar .saved {
  color: white;
  opacity: 0.5;
}

.gallery .edit-mode-toolbar .saved[highlighted] {
  transform: scaleX(1.1) scaleY(1.1) rotate(0);
  opacity: 1;
}

/* Editor buttons. */

.gallery .toolbar .edit-main {
  align-items: center;
  color: white;
  display: flex;
  height: 48px;
  justify-content: center;
  overflow: visible;
}

.gallery .toolbar .edit-main .container {
  display: flex;
}

.gallery[editing] .edit-bar-spacer {
  opacity: 1.0;
  pointer-events: auto;
  transition-delay: 100ms, 100ms;
  visibility: visible;
}

.gallery > .toolbar paper-button,
.gallery > .toolbar button {
  border-radius: 2px;
  margin: 0 8px;
}

.gallery > .toolbar .icon-button {
  background-position: center;
  background-repeat: no-repeat;
  height: 32px;
  min-width: 32px;
  width: 32px;
}

.gallery > .toolbar button {
  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;
}

.gallery > .toolbar paper-button:focus,
.gallery > .toolbar button:focus {
  background-color: rgba(0, 0, 0, 0.3);
}

.gallery > .toolbar button:focus {
  outline: none;
}

.gallery > .toolbar button.using-mouse:focus {
  background-color: transparent;
}

.gallery > .toolbar button > .icon {
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

.gallery > .toolbar button > files-toggle-ripple {
  position: absolute;
  top: 0;
  z-index: 1;
}

.gallery > .toolbar .icon-button > files-toggle-ripple {
  height: 28px;
  left: 2px;
  top: 2px;
  width: 28px;
}

.gallery > .toolbar button.edit > .icon {
  background-image: -webkit-image-set(
      url(../images/100/edit.png) 1x,
      url(../images/200/edit.png) 2x);
}

.gallery > .toolbar button.print > .icon {
  background-image: -webkit-image-set(
      url(../images/100/print.png) 1x,
      url(../images/200/print.png) 2x);
}

.gallery > .toolbar button.delete > .icon {
  background-image: -webkit-image-set(
      url(../images/100/delete.png) 1x,
      url(../images/200/delete.png) 2x);
}

.gallery > .toolbar .icon.slide-mode {
  background-image: -webkit-image-set(
      url(../images/100/slide_view.png) 1x,
      url(../images/200/slide_view.png) 2x);
}

.gallery > .toolbar .icon.thumbnail-mode {
  background-image: -webkit-image-set(
      url(../images/100/mosaic_view.png) 1x,
      url(../images/200/mosaic_view.png) 2x);
}

.gallery > .toolbar button.slideshow > .icon {
  background-image: -webkit-image-set(
      url(../images/100/slideshow.png) 1x,
      url(../images/200/slideshow.png) 2x);
}

.gallery > .toolbar button.share > .icon {
  background-image: -webkit-image-set(
      url(../images/100/share.png) 1x,
      url(../images/200/share.png) 2x);
}

.gallery[mode='slide'] .icon.slide-mode,
.gallery[mode='thumbnail'] .icon.thumbnail-mode,
paper-button[disabled],
button[disabled] {
  display: none;
}

/* Button in edit toolbar. */

.toolbar button.edit-toolbar {
  height: 28px;
  margin: 0 10px;
  min-width: 28px;  /* Reset. */
  outline: none;
  width: 28px;
}

.toolbar button.edit-toolbar[disabled],
.gallery[tools][locked] > button.edit-toolbar {
  display: block;
  opacity: 0.5;
  pointer-events: none;
}

.toolbar button.edit-toolbar[hidden] {
  display: none;
}

/* Do not show focus state if it's made by mouse since it makes difficult to see
 * the toggle animation. */
.toolbar button.edit-toolbar:focus.using-mouse {
  background-color: transparent;
}

/* Edit main toolbar. */
.gallery > .toolbar .edit-main button {
  border-radius: 1px;
}

.edit-main button.autofix .icon {
  background-image: -webkit-image-set(
      url(../images/100/auto_fix.png) 1x,
      url(../images/200/auto_fix.png) 2x);
}

.edit-main button.crop .icon {
  background-image:  -webkit-image-set(
      url(../images/100/crop.png) 1x,
      url(../images/200/crop.png) 2x);
}

.edit-main button.resize .icon {
  background-image:  -webkit-image-set(
      url(../images/100/resize.png) 1x,
      url(../images/200/resize.png) 2x);
}

.edit-main button.exposure .icon {
  background-image: -webkit-image-set(
      url(../images/100/brightness.png) 1x,
      url(../images/200/brightness.png) 2x);
}

.edit-main button.rotate_right .icon {
  background-image: -webkit-image-set(
      url(../images/100/rotate_right.png) 1x,
      url(../images/200/rotate_right.png) 2x);
}

.edit-main button.rotate_left .icon {
  background-image: -webkit-image-set(
      url(../images/100/rotate_left.png) 1x,
      url(../images/200/rotate_left.png) 2x);
}

.edit-main button.undo .icon {
  background-image: -webkit-image-set(
      url(../images/100/undo.png) 1x,
      url(../images/200/undo.png) 2x);
}

.edit-main button.redo .icon {
  background-image: -webkit-image-set(
      url(../images/100/redo.png) 1x,
      url(../images/200/redo.png) 2x);
}

/* Edit modal. */
.edit-modal {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  bottom: 48px;
  display: block;
  height: 48px;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.gallery[editor-mode="resize"] .edit-modal {
  height: 56px;
}

.edit-modal-wrapper[hidden] {
  display: none;
}

.edit-modal-wrapper {
  background-color: rgb(20, 22, 25);
  color: white;
  height: 100%;
  opacity: 0.9;
  pointer-events: auto;
  position: relative;
}

.edit-modal-wrapper .container,
.edit-modal-wrapper .action-buttons {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}

.edit-modal-wrapper .container {
  justify-content: center;
}

.edit-modal-wrapper .action-buttons {
  justify-content: flex-end;
  left: 0;
  position: absolute;
  top: 0;
}

.edit-modal button.edit-toolbar {
  background: transparent;
  border: 0 none;
  border-image: none;
  box-sizing: border-box;
  color: white;
  min-width: 0;
  padding: 0;
  position: relative;
}

.edit-modal button.edit-toolbar .icon {
  display: none;
}

.edit-modal button.edit-toolbar .label {
  display: block;
}

/* Action buttons */
.edit-modal-wrapper .action-buttons button {
  -webkit-margin-end: 8px;
  align-items: center;
  display: flex;
  height: 32px;
  justify-content: center;
  outline: none;
  width: 70px;
}

.edit-modal-wrapper .action-buttons button .label {
  font-weight: bold;
}

/* Crop aspect ratio buttons */
.edit-modal button.crop-aspect-ratio {
  border: solid 1px white;
  border-radius: 2px;
  height: 18px;
  margin: 0 12px;
  outline: none;
  position: relative;
  transition: background 200ms ease;
  width: 36px;
}

.edit-modal button.crop-aspect-ratio.selected {
  background: white;
}

.edit-modal button.crop-aspect-ratio:focus:not(.using-mouse) {
  outline: 1px solid rgb(77, 144, 254);
}

.edit-modal button.crop-aspect-ratio .label {
  font-size: 12px;
  height: 12px;
  pointer-events: none;
}

.edit-modal button.crop-aspect-ratio.selected .label {
  color: rgb(20, 22, 25);
}

.edit-modal button.crop-aspect-ratio paper-ripple {
  display: none;
}

/* Range UI */
.edit-modal .range {
  align-items: center;
  display: flex;
}

.edit-modal .range:not(:last-child) {
  -webkit-margin-end: 16px;
}

.edit-modal .range > .icon {
  -webkit-margin-end: 8px;
  display: block;
  height: 16px;
  width: 16px;
}

paper-slider {
  width: 172px;
}

.edit-modal .range.brightness > .icon {
  background-image: -webkit-image-set(
      url(../images/100/brightness.png) 1x,
      url(../images/200/brightness.png) 2x);
}

.edit-modal .range.contrast > .icon {
  background-image: -webkit-image-set(
      url(../images/100/contrast.png) 1x,
      url(../images/200/contrast.png) 2x);
}

/* Crop frame */

.gallery .crop-overlay {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.gallery .crop-overlay .shadow {
  background-color: rgba(0, 0, 0, 0.65);
}

.gallery .crop-overlay .middle-box {
  -webkit-box-flex: 1;
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.gallery .crop-frame {
  -webkit-box-flex: 1;
  display: -webkit-box;
  position: relative;
}

.gallery .crop-frame div {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
  position: absolute;
}

.gallery .crop-frame .horizontal {
  height: 1px;
  left: 7px;
  right: 7px;
}

.gallery .crop-frame .horizontal.top {
  top: 0;
}

.gallery .crop-frame .horizontal.bottom {
  bottom: 0;
}

.gallery .crop-frame .vertical {
  bottom: 7px;
  top: 7px;
  width: 1px;
}

.gallery .crop-frame .vertical.left {
  left: 0;
}

.gallery .crop-frame .vertical.right {
  right: 0;
}

.gallery .crop-frame .corner {
  border-radius: 6px;
  height: 13px;
  width: 13px;
}

.gallery .crop-frame .corner.left {
  left: -6px;
}

.gallery .crop-frame .corner.right {
  right: -6px;
}

.gallery .crop-frame .corner.top {
  top: -6px;
}

.gallery .crop-frame .corner.bottom {
  bottom: -6px;
}

/* Input UI */
.edit-modal .input {
  align-items: flex-end;
  display: flex;
  width: 90px;
}

.edit-modal .input > .unit_label {
  color: rgba(255, 255, 255, 0.54);
  margin-bottom: 10px;
}

.edit-modal .lockicon {
  background-repeat: no-repeat;
  background-size: contain;
  height: 16px;
  margin: 16px;
  margin-top: auto;
  width: 16px;
}

.edit-modal .lockicon:focus {
  outline: none;
}

.edit-modal .lockicon[locked] {
  background-image: -webkit-image-set(
      url(../images/100/ratio_locked.png) 1x,
      url(../images/200/ratio_locked.png) 2x);
}

.edit-modal .lockicon:not([locked]) {
  opacity: 0.54;
  background-image: -webkit-image-set(
      url(../images/100/ratio_unlocked.png) 1x,
      url(../images/200/ratio_unlocked.png) 2x);
}

/* Prompt/notification panel */

.gallery .prompt-wrapper {
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  display: -webkit-box;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.gallery .prompt-wrapper[pos=top] {
  -webkit-box-align: start;
}

.gallery .prompt-wrapper[pos=center] {
  -webkit-box-align: center;
}

.gallery .prompt-wrapper[pos=center] .back-button {
  display: none;
}

.dimmable {
  opacity: 1;
  transition: opacity 220ms ease;
}

.gallery .prompt {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: -webkit-box;
  font-size: 120%;
  height: 40px;
  opacity: 0;
  padding: 0 20px;
  position: relative;
  top: 5px;
  transition: all 180ms ease;
}

.gallery .prompt[state='fadein'] {
  opacity: 1;
  top: 0;
}

.gallery .prompt[state='fadeout'] {
  opacity: 0;
  top: 0;
}

.gallery .prompt-wrapper[pos=top] .prompt {
  padding-right: 10px;
}

.gallery .share-menu {
  -webkit-box-align: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-pack: start;
  background-color: white;
  border: 1px solid #7f7f7f;
  border-radius: 1px;
  bottom: 60px;
  display: -webkit-box;
  opacity: 1.0;
  padding: 8px;
  position: absolute;
  right: 10px;
  transition: opacity 500ms ease-in-out;
}

.gallery .share-menu .bubble-point {
  background-image: -webkit-image-set(
      url(../images/100/bubble_point.png) 1x,
      url(../images/200/bubble_point.png) 2x);
  background-position: center top;
  background-repeat: no-repeat;
  bottom: -8px;
  height: 8px;
  padding: 0;
  position: absolute;
  right: 20px;
  width: 20px;
}

.gallery .share-menu[hidden] {
  bottom: -100%;  /* Offscreen so that 'dimmed' attribute does not show it. */
  opacity: 0;
  pointer-events: none;
}

.gallery .share-menu > .item {
  background-color: rgba(0, 0, 0, 0);
  background-position: 5px center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 5px;
  padding-left: 26px;
}

.gallery .share-menu > .item:hover {
  background-color: rgba(240, 240, 240, 1);
}

.gallery .share-menu > div > img {
  display: block;
  margin-right: 5px;
}

/* Load spinner and error banner. */

.gallery .spinner {
  background-image: url(chrome://resources/images/throbber_medium.svg);
  background-size: 100%;
  height: 32px;
  left: 50%;
  margin-left: -16px;
  margin-top: -16px;
  position: absolute;
  top: 50%;
  width: 32px;
}

.gallery:not([spinner]) .spinner {
  display: none;
}

#progress-bar {
  position: absolute;
  top: 48px; /* toolbar height */
  width: 100%;
}

.gallery .error-banner {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  background-color: rgba(24, 24, 24, 1);
  background-image: -webkit-image-set(
      url(../images/100/error.png) 1x,
      url(../images/200/error.png) 2x);
  background-position: 25px center;
  background-repeat: no-repeat;
  color: white;
  display: -webkit-box;
  height: 54px;
  padding-left: 70px;
  padding-right: 35px;
}

.gallery:not([error]) .error-banner {
  display: none;
}

.toast-stage {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.gallery[tools] .toast-stage {
  bottom: 48px;
  top: 48px;
}

files-toast {
  pointer-events: auto;
}

/* In order to do mode animated transitions smoothly we keep both mosaic and
  image-container but transparent. */
.gallery:not([mode='slide']) .image-container {
  pointer-events: none;
}

.gallery:not([mode='slide']) .ribbon,
.gallery:not([mode='slide']) .arrow-box {
  opacity: 0;
  pointer-events: none;
}

/* Temporary. Remove this along with the delete confirmation dialog
  when Undo delete is implemented. */
.cr-dialog-shield {
  background-color: black;
}

/* Slideshow controls */

.slideshow-toolbar {
  bottom: 16px;
  display: none;
  justify-content: center;
  left: 0;
  padding-bottom: 6px;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.gallery[tools][slideshow] .slideshow-toolbar {
  display: flex;
}

.slideshow-toolbar > div {
  background-position: center;
  background-repeat: no-repeat;
  height: 48px;
  opacity: 0.8;
  pointer-events: auto;
  width: 48px;
}

.slideshow-toolbar > div:hover {
  opacity: 1;
}

.slideshow-toolbar > .slideshow-play {
  background-image: -webkit-image-set(
      url(../images/100/slideshow_play.png) 1x,
      url(../images/200/slideshow_play.png) 2x);
}

.gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play {
  background-image: -webkit-image-set(
      url(../images/100/slideshow_pause.png) 1x,
      url(../images/200/slideshow_pause.png) 2x);
}

.slideshow-toolbar > .slideshow-end {
  -webkit-margin-start: 4px;
  background-image: -webkit-image-set(
      url(../images/100/slideshow_close.png) 1x,
      url(../images/200/slideshow_close.png) 2x);
}

.debug-me .load-target-content-metadata::before,
.debug-me .load-target-external-metadata::before,
.debug-me .load-target-file-entry::before {
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.debug-me .load-target-content-metadata::before {
  background-color: rgba(255, 0, 0, 0.3);
}

.debug-me .load-target-external-metadata::before {
  background-color: rgba(0, 255, 0, 0.3);
}

.debug-me .load-target-file-entry::before {
  background-color: rgba(0, 0, 255, 0.3);
}

/**
 * Thumbnail view.
 */
.thumbnail-view {
  display: block;
  height: 100%;
  outline: none;
  overflow-y: scroll;
}

.thumbnail-view ul {
  -webkit-padding-end: 4px;
  -webkit-padding-start: 0;
  margin: 0;
  padding-top: 52px; /* Toolbar height (48px) + Margin (4px) */
  padding-bottom: 0;
}

.thumbnail-view .thumbnail {
  -webkit-margin-start: 4px;
  display: block;
  margin-bottom: 4px;
  position: relative;
}

html[dir='ltr'] .thumbnail-view .thumbnail {
  float: left;
}

html[dir='rtl'] .thumbnail-view .thumbnail {
  float: right;
}

.thumbnail-view .thumbnail.selected:focus {
  outline: none;
}

.thumbnail-view::-webkit-scrollbar {
  width: 0;
}

.thumbnail-view .scrollbar {
  bottom: 4px;
  opacity: 1;
  position: absolute;
  top: 52px; /* Toolbar height (48px) + Margin (4px) */
  transition: opacity 1s;
  width: 8px;
}

.thumbnail-view .scrollbar.transparent {
  opacity: 0;
  pointer-events: none;
}

html[dir='ltr'] .thumbnail-view .scrollbar {
  right: 0;
}

html[dir='rtl'] .thumbnail-view .scrollbar {
  left: 0;
}

.thumbnail-view .scrollbar .thumb {
  -webkit-margin-end: 4px;
  background-color: white;
  border-radius: 2px;
  opacity: 0.4;
  width: 4px;
}

.thumbnail-view .thumbnail > .frame {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.thumbnail-view .thumbnail > .frame.image {
  background-repeat: no-repeat;
  background-size: cover;
}

.thumbnail-view .thumbnail.selected > .frame.selection {
  border: solid 2px rgb(27, 168, 243);
}

.thumbnail-view .thumbnail.error {
  display: none;
}

.thumbnail-view .thumbnail.transparent {
  opacity: 0;
}

.thumbnail-view .animation-thumbnail {
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
}

.thumbnail-view .animation-thumbnail.animating {
  display: block;
}