formstone/src/less/themes/light/lightbox.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Lightbox
 */

.fs-lightbox {

    @import "_config.less";

  @theme_name: fs-light;

  // Overlay

  @fs-lightbox-overlay-background: @fs-light-black;
  @fs-lightbox-overlay-opacity: 0.75;

  // Transition

  @fs-lightbox-transition-duration: 0.25s;
  @fs-lightbox-transition-timing: ease;

  // Lightbox

  @fs-lightbox-background: @fs-light-white;
  @fs-lightbox-padding: 10px;
  @fs-lightbox-z-index: 100;

  @fs-lightbox-border-radius: 2px;
  @fs-lightbox-box-shadow: 0 0 25px @fs-light-black;

  // Close Button

  @fs-lightbox-close-background: @fs-light-white;
  @fs-lightbox-close-font-family: "Helvetica", Arial, sans-serif;
  @fs-lightbox-close-font-size: 22px;
  @fs-lightbox-close-font-weight: 700;
  @fs-lightbox-close-color: @fs-light-primary_900;
  @fs-lightbox-close-border-radius: 100%;
  @fs-lightbox-close-width: 30px;
  @fs-lightbox-close-height: 30px;

  // Container

  @fs-lightbox-container-background: @fs-light-white;

  // Content

  @fs-lightbox-content-background: @fs-light-white;

  // Controls

  @fs-lightbox-control-background: @fs-light-white;
  @fs-lightbox-control-opacity: 1;
  @fs-lightbox-control-height: 40px;
  @fs-lightbox-control-width: 40px;

  @fs-lightbox-control-transition-duration: 0.15s;
  @fs-lightbox-control-box-shadow: 0 0 5px fade(@fs-light-black, 25);

  @fs-lightbox-control-border-radius: 100%;

  @fs-lightbox-control-previous-left: 20px;
  @fs-lightbox-control-next-right: 20px;

  @fs-lightbox-control-hover-background: @fs-light-primary_100;

  // Control Carets

  @fs-lightbox-control-caret-color: @fs-light-primary_900;
  @fs-lightbox-control-caret-size: 8px;

  @fs-lightbox-control-caret-width: (@fs-lightbox-control-caret-size * 1.3);
  @fs-lightbox-control-caret-margin: (@fs-lightbox-control-width - (@fs-lightbox-control-caret-size * 1.5)) / 2;

  // Loading Icons

  @fs-lightbox-loading-width: 50px;
  @fs-lightbox-loading-height: 50px;
  @fs-lightbox-loading-color: @fs-light-primary_900;
  @fs-lightbox-loading-size: 5px;
  @fs-lightbox-loading-animation-duration: 0.75s;

  // Inline

  @fs-lightbox-inline-padding: 30px;

  // Meta

  @fs-lightbox-meta-padding: 10px 10px 0;

  // Position

  @fs-lightbox-position-font-size: 12px;
  @fs-lightbox-position-text-color: @fs-light-primary_400;

  @fs-lightbox-position-margin: 5px 0;
  @fs-lightbox-position-padding: 0;

  // Caption

  @fs-lightbox-caption-font-size: 14px;
  @fs-lightbox-caption-line-height: 1.6;
  @fs-lightbox-caption-text-color: @fs-light-primary_600;

  @fs-lightbox-caption-margin: 5px 0;
  @fs-lightbox-caption-padding: 0;

  // Error

  @fs-lightbox-error-font-size: 14px;
  @fs-lightbox-error-text-color: #900;

  @fs-lightbox-error-width: 250px;
  @fs-lightbox-error-margin: 0;
  @fs-lightbox-error-padding: 25px;

  // Mobile

  @fs-lightbox-mobile-background: @fs-light-black;
  @fs-lightbox-mobile-box-shadow: 0 0 10px @fs-light-black;

  // Mobile Close

  @fs-lightbox-mobile-close-font-size: 28px;
  @fs-lightbox-mobile-close-font-weight: 700;
  @fs-lightbox-mobile-close-text-color: @fs-light-primary_400;
  @fs-lightbox-mobile-close-background: @fs-light-black;
  @fs-lightbox-mobile-close-width: 40px;
  @fs-lightbox-mobile-close-height: 40px;

  // Mobile Container

  @fs-lightbox-mobile-container-background: @fs-light-black;

  // Mobile Content

  @fs-lightbox-mobile-content-background: @fs-light-black;
  @fs-lightbox-mobile-content-padding: 0 15px;

  // Mobile Controls

  @fs-lightbox-mobile-control-size: 50px;
  @fs-lightbox-mobile-control-background: @fs-light-primary_900;

  // Control Carets

  @fs-lightbox-mobile-control-caret-color: @fs-light-primary_300;
  @fs-lightbox-mobile-control-caret-margin: (@fs-lightbox-mobile-control-size - (@fs-lightbox-control-caret-size * 1.5)) / 2;

  // Mobile Meta

  @fs-lightbox-mobile-meta-background: @fs-light-primary_900;
  @fs-lightbox-mobile-meta-padding: 15px;

  // Mobile Position

  @fs-lightbox-mobile-position-font-size: 12px;
  @fs-lightbox-mobile-position-text-color: @fs-light-primary_300;

  @fs-lightbox-mobile-position-margin: 0 0 5px;
  @fs-lightbox-mobile-position-padding: 0 15px 0 0;

  // Mobile Caption

  @fs-lightbox-mobile-caption-background: @fs-light-primary_800;
  @fs-lightbox-mobile-caption-font-size: 14px;
  @fs-lightbox-mobile-caption-line-height: 1.6;
  @fs-lightbox-mobile-caption-text-color: @fs-light-primary_100;

  @fs-lightbox-mobile-caption-margin: 0;
  @fs-lightbox-mobile-caption-padding: 0;

  // Mobile Loading Icon

  @fs-lightbox-mobile-loading-color: @fs-light-primary_300;

  // Mobile Toggle Button

  @fs-lightbox-mobile-toggle-button-font-size: 12px;
  @fs-lightbox-mobile-toggle-button-text-color: @fs-light-primary_300;

  // Mobile Thumbnails

  @fs-lightbox-thumbnail-size: 50px;
  @fs-lightbox-thumbnail-margin: 0 10px 0 0;
  @fs-lightbox-thumbnail-opacity: 0.25;
  @fs-lightbox-thumbnail-padding: 10px;
  @fs-lightbox-thumbnail-scrollbar-size: 30px;

  @fs-lightbox-mobile-thumbnail-background: @fs-light-primary_800;
  @fs-lightbox-mobile-thumbnail-padding: 15px;


  &.@{theme_name} {
    z-index: (@fs-lightbox-z-index + 1);

    background: @fs-lightbox-background;
    border-radius: @fs-lightbox-border-radius;
    box-shadow: @fs-lightbox-box-shadow;
    padding: @fs-lightbox-padding;
  }

  .@{theme_name}&-inline {
    padding: @fs-lightbox-inline-padding;
  }

  .@{theme_name}&-animating {
    transition:
      height  @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
      width   @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
      opacity @fs-lightbox-transition-duration linear,
      top     @fs-lightbox-transition-duration @fs-lightbox-transition-timing;
  }

  // .@{theme_name}&-animating &-container {
  .@{theme_name}&-animating &-content,
  .@{theme_name}&-animating &-thumbnails,
  .@{theme_name}&-animating &-tools,
  .@{theme_name}&-animating &-meta,
  .@{theme_name}&-animating &-control {
    transition:
      opacity    @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration,
      visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration;
  }

  // .@{theme_name}&-mobile &-image_container {
  //   transition:
  //     top    @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     left   @fs-lightbox-transition-duration @fs-lightbox-transition-timing;
  // }
  //
  // .@{theme_name}&-mobile &-image {
  //   transition:
  //     height @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     width  @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     top    @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     left   @fs-lightbox-transition-duration @fs-lightbox-transition-timing;
  // }

  // // Scaling
  //
  // .@{theme_name}&-mobile&-scaling &-image_container {
  //   transition: none !important;
  // }
  //
  // .@{theme_name}&-mobile&-scaling &-image {
  //   transition: none !important;
  // }

  // // Zooming
  //
  // .@{theme_name}&-mobile&-zooming &-image_container {
  //   transition:
  //     top    @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     left   @fs-lightbox-transition-duration @fs-lightbox-transition-timing !important;
  // }
  //
  // .@{theme_name}&-mobile&-zooming &-image {
  //   transition:
  //     height @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     width  @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     top    @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
  //     left   @fs-lightbox-transition-duration @fs-lightbox-transition-timing !important;
  // }

  // Overlay

  .@{theme_name}&-overlay {
    z-index: @fs-lightbox-z-index;

    background: @fs-lightbox-overlay-background;
    transition: opacity @fs-lightbox-transition-duration linear;
  }

  .@{theme_name}&-overlay&-open {
    opacity: @fs-lightbox-overlay-opacity;
  }

  &.@{theme_name} &-close {
    width: @fs-lightbox-close-height;
    height: @fs-lightbox-close-height;

    top: -@fs-lightbox-close-height / 4;
    right: -@fs-lightbox-close-width / 4;
    z-index: (@fs-lightbox-z-index + 5);

    background: @fs-lightbox-close-background;
    border-radius: @fs-lightbox-close-border-radius;
    text-indent: 200%;
    white-space: nowrap;

    &:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      color: @fs-lightbox-close-color;
      content: "\00d7";
      display: block;
      font-family: @fs-lightbox-close-font-family;
      font-size: @fs-lightbox-close-font-size;
      font-weight: @fs-lightbox-close-font-weight;
      line-height: @fs-lightbox-close-height;
      margin: auto;
      text-align: center;
      text-indent: 0;
      transition: color 0.15s linear;
    }
  }

  &.@{theme_name} &-loading_icon {
    width: @fs-lightbox-loading-width;
    height: @fs-lightbox-loading-height;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: (@fs-lightbox-z-index + 5);

    display: block;
    margin: auto;
    opacity: 0;
    transition:
      opacity    @fs-lightbox-transition-duration linear,
      visibility @fs-lightbox-transition-duration linear;
    visibility: hidden;

    &:before,
    &:after {
      width: 100%;
      height: 100%;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      border-radius: 110%;
      content: '';
      display: block;
    }

    &:before {
      border: @fs-lightbox-loading-size solid fade(@fs-lightbox-loading-color, 25);
    }

    &:after {
      animation: fs-lightbox-loading-spin @fs-lightbox-loading-animation-duration linear infinite;
      border: @fs-lightbox-loading-size solid transparent;
      border-top-color: @fs-lightbox-loading-color;
    }
  }

  @keyframes fs-lightbox-loading-spin {

    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  &.@{theme_name} &-container {
    z-index: (@fs-lightbox-z-index + 3);

    background: @fs-lightbox-container-background;
  }

  &.@{theme_name} &-content {
    background: @fs-lightbox-content-background;
  }

  &.@{theme_name} &-meta {
    padding: @fs-lightbox-meta-padding;
  }

  &.@{theme_name} &-control {
    width: @fs-lightbox-control-width;
    height: @fs-lightbox-control-height;

    z-index: (@fs-lightbox-z-index + 5);

    background: @fs-lightbox-control-background;
    border-radius: @fs-lightbox-control-border-radius;
    box-shadow: @fs-lightbox-control-box-shadow;
    opacity: @fs-lightbox-control-opacity;
    overflow: hidden;
    text-indent: 200%;
    transition:
      opacity    @fs-lightbox-control-transition-duration linear,
      visibility @fs-lightbox-control-transition-duration linear;
    visibility: visible;

    &:before {
      width: 0;
      height: 0;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      content: '';
      margin: auto;
    }

    .no-touchevents &:hover {
      background: @fs-lightbox-control-hover-background;
    }
  }

  &.@{theme_name} &-control_previous {
    left: @fs-lightbox-control-previous-left;

    &:before {
      border-top: @fs-lightbox-control-caret-size solid transparent;
      border-bottom: @fs-lightbox-control-caret-size solid transparent;
      border-right: @fs-lightbox-control-caret-width solid @fs-lightbox-control-caret-color;
      margin-left: @fs-lightbox-control-caret-margin;
    }
  }

  &.@{theme_name} &-control_next {
    right: @fs-lightbox-control-next-right;

    &:before {
      border-top: @fs-lightbox-control-caret-size solid transparent;
      border-bottom: @fs-lightbox-control-caret-size solid transparent;
      border-left: @fs-lightbox-control-caret-width solid @fs-lightbox-control-caret-color;
      margin-right: @fs-lightbox-control-caret-margin;
    }
  }

  .no-touchevents &.@{theme_name} &-control {
    opacity: 0;
    visibility: hidden;
  }

  .no-touchevents &.@{theme_name}:hover &-control {
    opacity: @fs-lightbox-control-opacity;
    visibility: visible;
  }

  .no-touchevents &.@{theme_name} &-control_disabled,
  .no-touchevents &.@{theme_name}:hover &-control_disabled {
    opacity: 0;
    cursor: default;
    visibility: hidden;
  }

  &.@{theme_name} &-position {
    color: @fs-lightbox-position-text-color;
    font-size: @fs-lightbox-position-font-size;
    margin: @fs-lightbox-position-margin;
    padding: @fs-lightbox-position-padding;
  }

  &.@{theme_name} &-caption {

    & p {
      color: @fs-lightbox-caption-text-color;
      font-size: @fs-lightbox-caption-font-size;
      line-height: @fs-lightbox-caption-line-height;
      margin: @fs-lightbox-caption-margin;
      padding: @fs-lightbox-caption-padding;
    }
  }

  &.@{theme_name} &-error {
    width: @fs-lightbox-error-width;

    p {
      color: @fs-lightbox-error-text-color;
      font-size: @fs-lightbox-error-font-size;
      margin: @fs-lightbox-error-margin;
      padding: @fs-lightbox-error-padding;
      text-align: center;
      text-transform: uppercase;
    }
  }

  // thumbnail

  &-thumbnails {
    height: @fs-lightbox-thumbnail-size + @fs-lightbox-thumbnail-padding;
  }

  &-thumbnail_container {
    height: @fs-lightbox-thumbnail-size + @fs-lightbox-thumbnail-scrollbar-size;

    padding: 0 0 @fs-lightbox-thumbnail-scrollbar-size;
  }

  &.@{theme_name} &-thumbnail_item {
    width: @fs-lightbox-thumbnail-size;
    height: @fs-lightbox-thumbnail-size;

    margin: @fs-lightbox-thumbnail-margin;
    opacity: @fs-lightbox-thumbnail-opacity;
    transition: opacity @fs-lightbox-transition-duration linear;

    &:last-child {
      margin: 0;
    }
  }

  &.@{theme_name} &-thumbnail_item&-active,
  .no-touchevents &.@{theme_name} &-thumbnail_item:hover {
    opacity: 1;
  }

  // loading

  // .@{theme_name}&-loading &-container {
  .@{theme_name}&-loading &-content,
  .@{theme_name}&-loading &-thumbnails,
  .@{theme_name}&-loading &-tools,
  .@{theme_name}&-loading &-meta,
  .@{theme_name}&-loading &-control {
    opacity: 0;
    transition:
      opacity @fs-lightbox-transition-duration linear,
      visibility @fs-lightbox-transition-duration linear;
    visibility: hidden;
  }

  .@{theme_name}&-loading &-loading_icon,
  .@{theme_name}&-ready&-loading &-thumbnails,
  .@{theme_name}&-ready&-loading &-tools {
    opacity: 1;
    visibility: visible;
  }

  // Mobile

  .@{theme_name}&-mobile {
    background: @fs-lightbox-mobile-background;
    border-radius: 0;
    padding: @fs-lightbox-mobile-close-height 0 0;
  }

  .@{theme_name}&-mobile &-loading_icon {
    top: 0;
    bottom: 0;
  }

  .@{theme_name}&-mobile &-close {
    height: @fs-lightbox-mobile-close-height;
    width: @fs-lightbox-mobile-close-width;

    top: 0;
    right: 0;

    background: @fs-lightbox-mobile-close-background;
    border-radius: 0;
  }

  .@{theme_name}&-mobile &-close:before {
    color: @fs-lightbox-mobile-close-text-color;
    font-size: @fs-lightbox-mobile-close-font-size;
    font-weight: @fs-lightbox-mobile-close-font-weight;
    line-height: @fs-lightbox-mobile-close-height - 4px;
  }

  .@{theme_name}&-mobile &-loading_icon:before {
    border-color: fade(@fs-lightbox-mobile-loading-color, 25);
  }

  .@{theme_name}&-mobile &-loading_icon:after {
    border-top-color: @fs-lightbox-mobile-loading-color;
  }

  .@{theme_name}&-mobile &-container {
    background: @fs-lightbox-mobile-container-background;
  }

  .@{theme_name}&-mobile &-content {
    background-color: @fs-lightbox-mobile-content-background;
    padding: @fs-lightbox-mobile-content-padding;
  }

  .@{theme_name}&-mobile &-tools {
    background-color: @fs-lightbox-mobile-meta-background;
  }

  .@{theme_name}&-mobile &-control {
    width: @fs-lightbox-mobile-control-size;
    height: 100%;
    min-height: @fs-lightbox-mobile-control-size;

    background: @fs-lightbox-mobile-control-background;
    border-radius: 0;
    box-shadow: none;

    .no-touchevents &:hover {
      background: @fs-lightbox-mobile-control-background;
    }
  }

  .@{theme_name}&-mobile &-control_previous {
    left: 0;

    &:before {
      border-right-color: @fs-lightbox-mobile-control-caret-color;
      margin-left: @fs-lightbox-mobile-control-caret-margin;
    }
  }

  .@{theme_name}&-mobile &-control_next {
    right: 0;

    &:before {
      border-left-color: @fs-lightbox-mobile-control-caret-color;
      margin-right: @fs-lightbox-mobile-control-caret-margin;
    }
  }

  .no-touchevents .@{theme_name}&-mobile &-control,
  .no-touchevents .@{theme_name}&-mobile:hover &-control {
    opacity: @fs-lightbox-control-opacity;
    visibility: visible;
  }

  .@{theme_name}&-mobile &-control_disabled,
  .no-touchevents .@{theme_name}&-mobile &-control_disabled,
  .no-touchevents .@{theme_name}&-mobile:hover &-control_disabled {
    cursor: default !important;
    opacity: 0;
    visibility: hidden;
  }

  .@{theme_name}&-mobile &-meta {
    padding: @fs-lightbox-mobile-meta-padding (@fs-lightbox-mobile-control-size + @fs-lightbox-mobile-meta-padding);
  }

  .@{theme_name}&-mobile &-position {
    color: @fs-lightbox-mobile-position-text-color;
    font-size: @fs-lightbox-mobile-position-font-size;
    margin: @fs-lightbox-mobile-position-margin;
    padding: @fs-lightbox-mobile-position-padding;
  }

  .@{theme_name}&-mobile &-caption {

    p {
      color: @fs-lightbox-mobile-caption-text-color;
      font-size: @fs-lightbox-mobile-caption-font-size;
      line-height: @fs-lightbox-mobile-caption-line-height;
      margin: @fs-lightbox-mobile-caption-margin;
      padding: @fs-lightbox-mobile-caption-padding;
    }
  }

  .@{theme_name}&-mobile &-image {
  }

  .@{theme_name}&-mobile&-inline &-content,
  .@{theme_name}&-mobile&-iframe &-content {
    height: 100%;
  }

  .@{theme_name}&-mobile &-thumbnail_item {

    &:first-child {
      margin-left: @fs-lightbox-mobile-thumbnail-padding;
    }

    &:last-child {
      margin-right: @fs-lightbox-mobile-thumbnail-padding;
    }
  }

  // Touch

  .@{theme_name}&-mobile&-touch &-tools {
    width: auto;

    position: static;

    background: transparent;
  }

  .@{theme_name}&-mobile&-touch &-controls {
    width: 100%;
    height: @fs-lightbox-mobile-control-size;

    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: (@fs-lightbox-z-index + 5);

    background-color: @fs-lightbox-mobile-meta-background;
    padding: 0 (@fs-lightbox-mobile-meta-padding + @fs-lightbox-mobile-control-size);
  }

  .@{theme_name}&-mobile&-touch &-toggle {
    background: transparent;
    color: @fs-lightbox-mobile-toggle-button-text-color;
    display: inline-block;
    font-size: @fs-lightbox-mobile-toggle-button-font-size;
    line-height: @fs-lightbox-mobile-control-size;
  }

  .@{theme_name}&-mobile&-touch &-meta {
    z-index: (@fs-lightbox-z-index + 4);

    background: @fs-lightbox-mobile-caption-background;
    box-shadow: @fs-lightbox-box-shadow;
    padding: @fs-lightbox-mobile-meta-padding @fs-lightbox-mobile-meta-padding (@fs-lightbox-mobile-meta-padding + @fs-lightbox-mobile-control-size);
    transition:
      transform @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
      opacity    @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration,
      visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration;
  }

  // caption open

  .@{theme_name}&-touch&-caption_open &-meta {
  }

  // thumbnails

  .@{theme_name}&-touch &-thumbnails {
    width: 100%;
    height: @fs-lightbox-thumbnail-size + (@fs-lightbox-mobile-thumbnail-padding * 2) + @fs-lightbox-mobile-control-size;

    z-index: (@fs-lightbox-z-index + 4);

    background: @fs-lightbox-mobile-thumbnail-background;
    box-shadow: @fs-lightbox-box-shadow;
    padding: @fs-lightbox-mobile-thumbnail-padding 0 (@fs-lightbox-mobile-thumbnail-padding + @fs-lightbox-mobile-control-size);
    transition:
      transform @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
      opacity    @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration,
      visibility @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration;
  }

  .@{theme_name}&-mobile&-touch &-thumbnail_container {
    height: (@fs-lightbox-thumbnail-size * 2);
  }

  .@{theme_name}&-touch &-thumbnail_item {

    &:first-child {
      margin-left: @fs-lightbox-mobile-thumbnail-padding;
    }

    &:last-child {
      margin-right: @fs-lightbox-mobile-thumbnail-padding;
    }
  }

  // thumbnails open

  .@{theme_name}&-touch&-thumbnails_open &-thumbnails {
  }


  // Viewer support

  &.@{theme_name}&-mobile &-container,
  &.@{theme_name}&-mobile &-content {
    overflow: visible;
  }

  &.@{theme_name}&-mobile &-content {
    position: relative;
  }

  &.@{theme_name} .fs-viewer,
  &.@{theme_name} .fs-viewer .fs-viewer-wrapper {
    height: auto;
    width: auto;

    position: absolute;
    right: 0;
    left: 0;

    background: @fs-lightbox-mobile-background;
  }

  &.@{theme_name} .fs-viewer {
    top: 0;
    bottom: 0;
  }

  &.@{theme_name}&-thumbnailed .fs-viewer {
    bottom: @fs-lightbox-thumbnail-size + @fs-lightbox-thumbnail-padding;
  }

  &.@{theme_name}&-touch .fs-viewer,
  &.@{theme_name}&-touch&-thumbnailed .fs-viewer {
    bottom: @fs-lightbox-mobile-control-size;
  }

  &.@{theme_name} .fs-viewer .fs-viewer-wrapper {
    top: 0;
    bottom: 0;
  }

  &.@{theme_name} .fs-viewer .fs-viewer-loading_icon {
    display: none !important;
  }

  &.@{theme_name} .fs-viewer .fs-viewer-viewport {
    top:    5px;
    right:  15px;
    bottom: 15px;
    left:   15px;
  }

  &.@{theme_name} .fs-viewer .fs-viewer-controls {
    height: 40px;
    width: 80px;

    background: @fs-lightbox-mobile-close-background;
    padding: 0;
  }

  &.@{theme_name} .fs-viewer .fs-viewer-control,
  .no-touchevents &.@{theme_name} .fs-viewer .fs-viewer-control:hover {
    height: 40px;
    width:  40px;

    background: @fs-lightbox-mobile-close-background;
    border-radius: 0;
    padding: 0;
  }
}