AlchemyCMS/alchemy_cms

$picture-overlay-handle-width: 24px;
$image-overlay-form-width: 350px - $picture-overlay-handle-width;
$image-overlay-transition-duration: $transition-duration;
$image-overlay-transition-easing: ease-in;

.alchemy-image-overlay {
  &.open {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.alchemy-image-overlay-container,
.alchemy-image-overlay-dialog {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

.alchemy-image-overlay-dialog {
  &.hide-form {
    .picture-details-overlay {
      right: -$image-overlay-form-width;
    }

    .zoomed-picture-background {
      padding-right: 2 * $default-padding;
    }

    .alchemy-image-overlay-close {
      right: $picture-overlay-handle-width + 2 * $default-padding;
    }

    .next-picture {
      right: $picture-overlay-handle-width;
    }

    .picture-overlay-handle {
      right: 0;

      .icon {
        transform: rotate(180deg) translate(50%, 50%);
      }
    }
  }
}

.alchemy-image-overlay-body {
  width: 100%;
  height: 100%;

  > .message {
    margin: 2 * $default-margin;
    max-width: 400px;
  }
}

.alchemy-image-overlay-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  top: 2 * $default-padding;
  right: 2 * $default-padding + $picture-overlay-handle-width +
    $image-overlay-form-width;
  cursor: pointer;
  transition: right $image-overlay-transition-duration
    $image-overlay-transition-easing;

  .icon {
    font-size: 2em;
    color: $medium-gray;
    text-shadow: 0 0 $default-padding $text-color;
    transition: color $image-overlay-transition-duration linear;

    &:hover {
      color: $white;
    }
  }
}

.picture-details-overlay,
.picture-overlay-handle {
  position: absolute;
  top: 0;
  background-color: $medium-gray;
  box-shadow: -2px 0 $default-padding -2px $text-color;
  transition: right $image-overlay-transition-duration
    $image-overlay-transition-easing;
}

.picture-details-overlay {
  right: 0;
  width: $image-overlay-form-width;
  height: 100%;
  padding: 2 * $default-padding 4 * $default-padding 2 * $default-padding
    $default-padding;
  overflow: auto;

  form .control-label,
  .resource_info .value label {
    text-align: left;
  }

  form .input .hint {
    margin-left: 0;
  }

  form .input .select2-container,
  form .input input[type="text"],
  form .input textarea,
  .resource_info .value p {
    width: 100%;
  }
}

.picture-overlay-handle {
  width: $picture-overlay-handle-width;
  height: 100%;
  right: $image-overlay-form-width;
  cursor: pointer;

  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: $text-color;
    transition: transform $image-overlay-transition-duration
      $image-overlay-transition-easing;
  }

  &:hover {
    background-color: darken($medium-gray, 5%);
  }
}

.zoomed-picture-background {
  width: 100%;
  height: 100%;
  padding-top: 2 * $default-padding;
  padding-right: $image-overlay-form-width + 2 * $default-padding +
    $picture-overlay-handle-width;
  padding-bottom: 2 * $default-padding;
  padding-left: 2 * $default-padding;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  transition: padding-right $image-overlay-transition-duration
    $image-overlay-transition-easing;

  &:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    margin-left: -4px;
  }

  img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 2 * $default-margin $text-color;
    background: $thumbnail-background;
    vertical-align: middle;
    cursor: default;
  }
}

.picture-file-infos,
.picture-usage-info {
  padding: 2 * $default-padding 0;

  .message {
    margin: 2 * $default-padding 0;
  }
}

#pictures_page_list {
  h3 {
    display: flex;
    align-items: center;
    gap: $default-padding;
    padding: 4px 8px 0;
    margin: 0;
  }

  ul {
    padding-left: 0;
    list-style-type: none;
  }

  .list {
    margin: 2 * $default-margin 0;

    li {
      display: flex;
      align-items: center;
      gap: $default-padding;
      padding: 2 * $default-padding;
      border-radius: $default-border-radius;
      white-space: normal;
      margin-bottom: 1em;
    }
  }

  p {
    margin: 0;
  }
}

.picture-overlay-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;

  .previous-picture,
  .next-picture {
    display: flex;
    position: absolute;
    top: 0;
    width: 64px;
    height: 128px;
    margin-top: -64px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color $image-overlay-transition-duration linear;

    .icon {
      width: 32px;
      height: 32px;
      fill: $white;
      filter: drop-shadow(0 0 1px $very-dark-gray);
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.3);

      .icon {
        transition: fill $image-overlay-transition-duration linear;
      }
    }
  }

  .icon {
    --icon-size: 4em;
    fill: $medium-gray;
    filter: drop-shadow(0 0 $default-padding $text-color);
    transition: all $image-overlay-transition-duration linear;
    vertical-align: middle;
  }

  .previous-picture {
    left: 0;
    @include border-right-radius($default-border-radius);
  }

  .next-picture {
    right: $image-overlay-form-width + $picture-overlay-handle-width;
    @include border-left-radius($default-border-radius);
  }
}