magento-test/lib/web/mage/gallery/gallery.less

// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */

@import 'module/_variables.less'; //Default gallery variables
@import '../../css/source/lib/_lib.less'; // Global lib
@import '../../css/source/_theme.less'; // Theme overrides
@import '../../css/source/_variables.less'; // Local theme variables
@import 'module/_mixins.less'; //Mixins in gallery
@import 'module/_extends.less';
@import 'module/_focus.less';
@import 'module/_fullscreen.less';

.fotorama__zoom-in,
.fotorama__zoom-out {
    display: none;
}

.fotorama {
    min-width: 1px;
    overflow: hidden;
}

.fotorama__wrap {
    &:extend(.fotorama-no-select);
    -webkit-text-size-adjust: 100%;
    direction: ltr;
    position: relative;
    z-index: 0;
}

.fotorama__wrap--rtl {
    .fotorama__stage__frame {
        direction: rtl;
    }
}

.fotorama__stage,
.fotorama__nav {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.fotorama__wrap--pan-y {
    -ms-touch-action: pan-y;
}

.fotorama__stage__shaft {
    &:extend(.fotorama-stretch);
    &:extend(.fotorama-no-tap);
    position: relative;
}

.fotorama__wrap {
    .fotorama__pointer {
        cursor: pointer;
    }

    .fotorama__grab {
        &:extend(.fotorama-grab-cursor);
    }
}

.fotorama__wrap--slide {
    .fotorama__stage__frame {
        opacity: 1 !important;
    }
}

.fotorama__grabbing * {
    &:extend(.fotorama-grabbing-cursor);
}

.fotorama__stage__frame {
    &:extend(.fotorama-no-tap);
    &:extend(.fotorama-stretch);
    overflow: hidden;
    &.fotorama__active {
        z-index: 8;
    }
}

.fotorama__wrap--fade {
    .fotorama__stage__frame {
        display: none;
    }
    .fotorama__stage__frame.fotorama__active,
    .fotorama__fade-front,
    .fotorama__fade-rear {
        display: block;
        left: 0;
        top: 0;
    }
    .fotorama__fade-front {
        z-index: 8;
    }
    .fotorama__fade-rear {
        z-index: 7;
        &.fotorama__active {
            z-index: 9;
        }
    }
    .fotorama__stage .fotorama__shadow {
        display: none;
    }
}

.fotorama__img {
    border: none !important;
    max-width: inherit;
    opacity: 0;
    .fotorama__loaded &,
    .fotorama__error & {
        opacity: 1;
    }
}

.fotorama__img--full {
    display: none;
}

.fotorama__html {
    &:extend(.fotorama-stretch);
}

.fotorama__nav {
    &:extend(.fotorama-auto-margin);
    &:extend(.fotorama-no-tap);
    display: none;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    z-index: 5;
}

.fotorama__nav__shaft {
    &:extend(.fotorama-inline-block);
    &:extend(.fotorama-no-tap);
    left: 0;
    position: relative;
    text-align: left;
    top: 0;
}

.fotorama__nav__frame {
    &:extend(.fotorama-auto-margin);
    &:extend(.fotorama-content-box);
    &:extend(.fotorama-focus);
    &:extend(.fotorama-inline-block);
    &:extend(.fotorama-no-tap);
    position: relative;
}

.fotorama__nav--dots {
    display: block;
    text-align: center;
    .fotorama__nav__frame {
        height: 30px;
        width: 18px;
    }
    .fotorama__nav__frame--thumb,
    .fotorama__thumb-border {
        display: none;
    }
}

.fotorama__nav--thumbs {
    display: block;
    .fotorama__nav__frame {
        padding-left: 0 !important;
        &:last-child {
            padding-right: 0 !important;
        }
    }
    .fotorama__nav__frame--dot {
        display: none;
    }
}

.fotorama__active {
    .fotorama__dot {
        background-color: @active__color;
        border-color: @active__color;
    }
}

.fotorama__nav__frame {
    &.fotorama__active & {
        border-width: 3px;
        height: 0;
        width: 0;
        &:after {
            left: -3px;
            padding: 3px;
            top: -3px;
        }
    }
}

.fotorama__nav__frame:focus & {
    &:extend(.fotorama-focus-overlay);
    box-shadow: none;
    &:after {
        left: -1px;
        padding: 1px;
        top: -1px;
    }
}

.fotorama__dot {
    border-radius: 6px;
    border: 1px solid @color-gray52;
    display: block;
    height: 4px;
    left: 6px;
    position: relative;
    top: 12px;
    width: 4px;
}

.fotorama__thumb {
    background-color: @color-gray92;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    .fotorama__nav__frame:focus & {
        &:extend(.fotorama-focus-overlay);
        z-index: 2;
    }
}

.fotorama__thumb-border {
    &:extend(.fotorama-border-box);
    &:extend(.fotorama-print-background);
    backface-visibility: hidden;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(64, 64, 64, 0.1));
    border: 1px solid @active__color;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 9;
}

.fotorama__caption {
    &:extend(.fotorama-gpu);
    bottom: 0;
    color: @color-black;
    font-size: 14px;
    left: 0;
    line-height: 1.5;
    position: absolute;
    right: 0;
    z-index: 12;
    a {
        border-bottom: 1px solid;
        border-color: fade(@color-black, 0.5);
        color: @color-black;
        text-decoration: none;
        &:hover {
            border-color: fade(@color-black, 0.5);
            color: @color-black;
        }
    }

    .fotorama__wrap--rtl & {
        left: auto;
        right: 0;
    }

    .fotorama__wrap--video &,
    .fotorama__wrap--no-captions & {
        display: none;
    }
}

.fotorama__caption__wrap {
    &:extend(.fotorama-border-box);
    &:extend(.fotorama-inline-block);
    background-color: @color-white;
    padding: 5px 10px;
}

.fotorama--hidden {
    &:extend(.fotorama-hidden);
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fotorama__spinner {
    .fotorama-abs-center();
}

.fotorama__wrap--css3 {
    .fotorama__stage__shaft,
    .fotorama__nav__shaft,
    .fotorama__thumb-border {
        &:extend(.fotorama-transition-for-slide);
    }
    .fotorama__spinner {
        &:extend(.fotorama-gpu);
        animation: spinner 24s infinite linear;
    }
    .fotorama__stage,
    .fotorama__nav,
    .fotorama__stage__frame {
        &:extend(.fotorama-gpu);
    }
    .fotorama__html {
        &:extend(.fotorama-gpu);
        transition-duration: @fotorama-duration-time;
        transition-property: opacity;
        transition-timing-function: linear;
    }
}

.fotorama__wrap--video {
    .fotorama__stage__shaft,
    .fotorama__stage,
    .fotorama__stage__frame--video {
        &:extend(.fotorama-transform-disabled);
    }
    .fotorama__stage__frame--video {
        .fotorama__img,
        .fotorama__html {
            &:extend(.fotorama-transform-disabled);
            opacity: 0;
        }
    }
}

.fotorama__select {
    &:extend(.fotorama-select);
    cursor: auto;
}

.fotorama__no-select {
    &:extend(.fotorama-no-select);
}

.fotorama__load {
    &:extend(.fotorama-hidden);
}

.fotorama__video {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 10;
    iframe {
        &:extend(.fotorama-stretch);
    }
}

@-moz-document url-prefix() {
    .fotorama__active {
        box-shadow: 0 0 0 transparent;
    }
}

.fotorama__arr,
.fotorama__fullscreen-icon,
.fotorama__video-close {
    &:extend(.fotorama-no-select);
    &:extend(.fotorama-no-tap);
    cursor: pointer;
    position: absolute;
}

.fotorama__arr {
    z-index: @z-index-9;

}
.fotorama__fullscreen-icon,
.fotorama__zoom-out,
.fotorama__zoom-in,
.fotorama__video-close {
    z-index: @z-index-10;
}

.fotorama__arr {
    &:extend(.fotorama-border-box);
    bottom: 0;
    position: absolute;
    top: 0;
    width: @fotorama-arw-size;

    ._block-content-loading & {
        opacity: 0;
    }

    .fotorama__arr__arr {
        &:extend(.fotorama-sprite);
        .fotorama-abs-center();
        height: @size-fotorama-block;
        width: @size-fotorama-block;
    }
}

.fotorama__arr--prev {
    left: 0;
    .fotorama__arr__arr {
        background-position: -@size-fotorama-block -@size-fotorama-block;
    }
}

.fotorama__arr--next {
    right: 0;
    .fotorama__arr__arr {
        background-position: (-@size-fotorama-block*2) (-@size-fotorama-block);
    }
}

.fotorama__arr--disabled {
    cursor: default;
    opacity: 0;
    pointer-events: none;
}

.fotorama__fullscreen-icon {
    &:extend(.fotorama-sprite);
    background-position: 0 0;
    display:  none;
    height: @size-fotorama-block;
    right: 0;
    top: 0;
    width: @size-fotorama-block;
    z-index: @z-index-10;
}

.fotorama--fullscreen-icons {
    .fotorama__fullscreen-icon {
        display: none;
    }
}

.fotorama__fullscreen-icon,
.fotorama__zoom-out,
.fotorama__zoom-in {
    &:focus {
        &:extend(.fotorama-focus);
    }
}

.fotorama--fullscreen {
    .fotorama__fullscreen-icon {
        background-position: (-@size-fotorama-block) 0;
        display: inline-block;
    }
}

.fotorama__video-play {
    &:extend(.fotorama-sprite);
    .fotorama-abs-center();
    background-position: (-@size-fotorama-block) (-@size-fotorama-block*2);
    height: @size-fotorama-block * 2;
    width: @size-fotorama-block * 2;

    .fotorama__wrap--css2 &,
    .fotorama__wrap--video .fotorama__stage & {
        display: none;
    }

    .fotorama__loaded &,
    .fotorama__error &,
    .fotorama__nav__frame & {
        display: block;
        opacity: 1;
    }

    .fotorama__nav__frame & {
        background-position: 0 (-@size-fotorama-block*3);
        height: @size-fotorama-block;
        width: @size-fotorama-block;
    }
}

.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows {
    .fotorama__arr,
    .fotorama__fullscreen-icon {
        opacity: 0;
        &:focus {
            opacity: 1;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &:not(.fotorama__wrap--video) {
        .fotorama__video-close {
            display: none;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &.fotorama__wrap--video {
        .fotorama__video-close {
            opacity: 1;
            right: 93px;
            top: 97px;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &:not(.fotorama__wrap--video) {
        .fotorama__video-close {
            display: none;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &.fotorama__wrap--video {
        .fotorama__video-close {
            opacity: 1;
            right: 93px;
            top: 97px;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &:not(.fotorama__wrap--video) {
        .fotorama__video-close {
            display: none;
        }
    }
}

.fotorama__wrap--toggle-arrows {
    &.fotorama__wrap--video {
        .fotorama__video-close {
            opacity: 1;
            right: 93px;
            top: 97px;
        }
    }
}

.fotorama__wrap--video {
    .fotorama__arr,
    .fotorama__fullscreen-icon {
        opacity: 0 !important;
    }
}

.fotorama__wrap--css2 {
    &.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows {
        .fotorama__arr,
        .fotorama__fullscreen-icon {
            display: none;
            &:focus {
                display: block;
            }
        }
    }
    &.fotorama__wrap--video {
        .fotorama__arr,
        .fotorama__fullscreen-icon {
            display: none !important;
        }
    }
}

.fotorama__wrap--css3 {
    &.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows {
        .fotorama__fullscreen-icon:not(:focus) {
            .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
        }
        .fotorama__arr--prev:not(:focus) {
            .fotorama-translate3d(-@fotorama-arw-size * 1.5, 0, 0);
        }
        .fotorama__arr--next:not(:focus) {
            .fotorama-translate3d(@fotorama-arw-size * 1.5, 0, 0);
        }
    }
    &.fotorama__wrap--video {
        .fotorama__fullscreen-icon {
            .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0) !important;
        }
        .fotorama__arr--prev {
            .fotorama-translate3d(-@fotorama-arw-size * 1.5, 0, 0) !important;
        }
        .fotorama__arr--next {
            .fotorama-translate3d(@fotorama-arw-size * 1.5, 0, 0) !important;
        }
    }
}

.fotorama__wrap--css3 {
    .fotorama__arr:not(:focus),
    .fotorama__fullscreen-icon:not(:focus),
    .fotorama__video-play:not(:focus),
    .fotorama__video-close:not(:focus) {
        transition-duration: @fotorama-duration-time;
        transition-property: transform, opacity, background-color;
    }
}

.fotorama__stage,
.fotorama__nav {
    &:before,
    &:after {
        &:extend(.fotorama-gpu);
        background-repeat: no-repeat;
        content: '';
        display: block;
        pointer-events: none;
        position: absolute;
        text-decoration: none;
        z-index: 10;
    }
    &:before {
        left: -10px;
        top: -10px;
    }
    &:after {
        right: -10px;
        bottom: -10px;
    }
    &.fotorama__shadows--left:before,
    &.fotorama__shadows--right:after {
        background-size: 1px 100%, 5px 100%;
        bottom: 0;
        height: auto;
        top: 0;
        width: 10px;
    }
    &.fotorama__shadows--top:before,
    &.fotorama__shadows--bottom:after {
        background-size: 100% 1px, 100% 5px ;
        height:10px;
        left: 0;
        right:0;
        width:auto;
    }
    &.fotorama__shadows--left:before {
        .fotorama-shadow-gradient(0, 50%);
        background-position: 0 0, 0 0;
        left: 0;
    }

    &.fotorama__shadows--right:after {
        .fotorama-shadow-gradient(100%, 50%);
        background-position: 100% 0, 100% 0;
        right: 0;
    }
    &.fotorama__shadows--top:before {
        .fotorama-shadow-gradient(50%, 0);
        background-position: 0 0, 0 0;
        top:0;

    }
    &.fotorama__shadows--bottom:after {
        .fotorama-shadow-gradient(50%, 100%);
        background-position: 0 100%, 0 100%;
        bottom:0;
    }
}

.fotorama--fullscreen .fotorama__stage,
.fotorama--fullscreen .fotorama__nav,
.fotorama__wrap--no-shadows .fotorama__stage,
.fotorama__wrap--no-shadows .fotorama__nav,
.fotorama__wrap--fade .fotorama__stage {
    &:before,
    &:after {
        display: none;
    }
}

.fotorama-abs-center() {
    .fotorama-translate3d(-50%, -50%, 0);
    left: 50%;
    position: absolute;
    top: 50%;
}

.fotorama__nav-wrap {
    .fotorama_vertical_ratio {
        .fotorama__img {
            .translateY(-50%);
            height: auto;
            position: absolute;
            top: 50%;
            width: 100%;
        }
    }
    .fotorama_horizontal_ratio {
        .fotorama__img {
            .translate(-50%, -50%);
            top: 50%;
            left: 50%;
            position: absolute;
            width: auto;
        }
    }
}

.magnifier-thumb-wrapper {
    display: block;
    left: 0;
    position: relative;
    top: 0;
}

.magnifier-lens {
    border: solid 1px @color-gray-light2;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: @z-index-8;
}

.magnify-lens {
    background: rgba(255, 255, 255, 0.5);
    border: solid 1px @color-gray-light2;
    color: @color-white;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: @z-index-10;
    overflow: hidden;

    .magnifier-large {
        width: auto;
        height: auto;
        max-height: none;
        max-width: none;
        border: none;
        position: absolute;
        z-index: @z-index-1;
    }
}

.magnifier-loader-text {
    margin-top: 10px;
}

.magnifier-preview {
    bottom: 0;
    left: 58%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 2;
    top: 215px;
    &:not(.hidden) {
        background-color: @color-white;
    }
    img {
        left: 0;
        max-width: inherit;
        max-height: inherit;
        position: absolute;
        top: 0;
        object-fit: scale-down;
    }
}

.fotorama__stage__frame {
    text-align: center;
    .fotorama__img {
        height: auto;
        left: 50%;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        top: 50%;
        @media all and (min-width: 768px) {
            top:49.5%;
        }
        .fotorama-translate3d(-50%, -50%, 0);
        transition-duration: @fotorama-fullscreen-zoom-time;
        transition-property: width, height, top, left;
        vertical-align: middle;
        width: auto;
    }
}

.magnify-opaque {
    opacity: .5;
}

.magnify-hidden {
    display: none;
}

.fotorama__nav-wrap--vertical {
    &.fotorama__nav-wrap {
        display: inline-block;
        left: 0;
        position: absolute;
        top: 0;
    }

    .fotorama__nav__shaft {
        background-color: white;
        width: 100%;
        .fotorama__nav__frame--thumb {
            display: block;
            padding-bottom: inherit !important;
        }
    }
}

.fotorama--fullscreen {
    .fotorama__stage__frame {
        .fotorama__img {
            display: none;
        }
        .fotorama__img,
        .fotorama__img--full {
            bottom: 0;
            left: 0;
            margin: auto;
            max-height: inherit;
            max-width: inherit;
            position: absolute;
            right: 0;
            top: 0;
        }
        .fotorama__img--full {
            cursor: default;
            display: block;
            height: auto;
            left: 0;
            margin: auto;
            max-height: 100%;
            max-width: 100%;
            top: 0;
            transition: @fotorama-fullscreen-zoom-time linear;
            vertical-align: middle;
            width: auto;
            &:extend(.fotorama-gpu);
            &.fotorama__img--zoommable {
                cursor: pointer;
                max-height: none;
                max-width: none;
                transition-property: width, height, bottom, right, top, left;
            }
            &.fotorama__img--draggable {
                cursor: move;
                transition-property: none;
            }
        }
        iframe {
            left: @fotorama-arw-size;
            width: calc(~'100% - @{fotorama-arw-size} * 2');
        }
    }
}

.fotorama__nav-wrap--horizontal {
    .fotorama__thumb__arr--left,
    .fotorama__thumb__arr--right {
        bottom: 0;
        cursor: pointer;
        position: absolute;
        top: 0;
        width: @fotorama-thumb-arrow;
        z-index: @z-index-10;
        .fotorama__thumb--icon {
            .fotorama-abs-center();
            width: 100%;
        }
    }
    .fotorama__thumb__arr--left {
        left: 0;
    }
    .fotorama__thumb__arr--right {
        right: 0;


    }
}

.fotorama__nav-wrap--vertical {
    .fotorama__thumb__arr--left,
    .fotorama__thumb__arr--right {
        cursor: pointer;
        height: @fotorama-thumb-arrow;
        left: 0;
        position: absolute;
        right: 0;
        z-index: @z-index-10;
        .fotorama__thumb--icon {
            .fotorama-rotate(90deg);
            margin: auto;
            width: @fotorama-thumb-arrow;
        }
    }
    .fotorama__thumb__arr--left {
        top: 0;
    }
    .fotorama__thumb__arr--right {
        bottom: 0;
    }
}

.fotorama__wrap--only-active {
    .fotorama__stage,
    .fotorama__nav {
        max-width: 99999px !important;
    }
    .fotorama__stage__frame {
        visibility: hidden;
    }
    .fotorama__stage__frame.fotorama__active {
        visibility: visible;
    }
}

.fotorama__thumb--icon {
    &:extend(.fotorama-sprite);
    font-size: 0.001px;
    padding-bottom: @fotorama-thumb-arrow;
}

.fotorama__thumb__arr--left {
    .fotorama__thumb--icon {
        background-position: -25px -265px;
    }
}

.fotorama__thumb__arr--right {
    .fotorama__thumb--icon {
        background-position: -25px -350px;
    }
}

.magnify-fullimage {
    display: none;
}

.fotorama__arr,
.fotorama__thumb__arr {
    .fotorama-button-background();
}

.fotorama__wrap:not(.fotorama__wrap--toggle-arrows) {
    .fotorama__fullscreen-icon,
    .fotorama__zoom-out,
    .fotorama__zoom-in{
        .fotorama-button-background();
    }
}

.fotorama__video-close {
    &:extend(.fotorama-sprite);
    background-position: (-@fotorama_close_button) 0;
    height: @fotorama_close_button;
    opacity: 0;
    right: 0;
    top: 0;
    transform: translate3d((@fotorama_close_button), (-@fotorama_close_button), 0);
    transition: opacity 0.3s ease-in-out;
    width: @fotorama_close_button;
    @media all and (max-width: 768px) {
        background-position: -100px -20px;
        top: 10px;
        height: 40px;
        width: 40px;
    }
    &.fotorama-show-control {
        opacity: 1;
        transform: translate3d(0, -10px, 0);
    }
}

// While first time init
.gallery-placeholder {
    &__image {
        display: block;
        margin: auto;
    }
}

// Styles for spinner in gallery.
.fotorama__spinner {
    background-image: url('@{baseDir}../images/loader-1.gif');
    bottom: 0;
    display: none;
    height: @fotorama-spinner-size;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: @fotorama-spinner-size;
    z-index: @z-index-1;
    &.fotorama__spinner--show {
        display: block;
    }
}

.fotorama__product-video--loaded {
    .fotorama__img, .fotorama__img--full {
        display: none !important;
    }
}

.fotorama__stage {
    .fotorama__arr--shown {
        display: block !important;
    }

    .fotorama__arr--hidden {
        display: none !important;
    }
}