zmp-ui/image-viewer/styles/index.less

Zalo Mini App framework

@import './variables.less';
@import './mixins.less';

.@{image-viewer-prefix-cls} {
  .@{image-prefix-cls}-container {
    width: 100%;
    height: 100%;
    background-color: transparent;

    .@{image-prefix-cls} {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      overflow: hidden;
      object-position: center;
      touch-action: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -webkit-touch-callout: none;
    }
  }

  &-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  &-images {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &-swiper {
    position: absolute;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;

    .zaui-swiper-wrapper {
      height: 100%;
    }
  }

  &-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
    padding: @header-spacing;
    color: @wht-a100;
    background-color: @blk-a50;

    .@{image-viewer-prefix-cls}-close-button {
      color: @wht-a100;
      min-width: unset;
      width: auto;
      padding: 8px;
      cursor: pointer;
      font-size: 14px;
      line-height: 18px;
      font-weight: 500;
    }
  }

  &-nav-btn {
    position: absolute;
    z-index: 10000;
    top: 50%;
    transform: translateY(-50%);
    background-color: @blk-a50;
    color: @wht-a100;

    &:focus,
    &:active,
    &:hover {
      background-color: @blk-a50;
    }


    &:disabled,
    &.zaui-btn-disabled:disabled {
      background-color: @blk-a20;
      color: @wht-a50;
    }

    &-next {
      right: 8px;
    }

    &-prev {
      left: 8px;
    }
  }

}

.if-dark-theme( {
    .@{image-viewer-prefix-cls} {
      &-nav-btn {
        background-color: @blk-a50;
        color: @wht-a100;

        &:focus,
        &:active,
        &:hover {
          background-color: @blk-a50;
        }

        &:disabled {
          background-color: @blk-a20;
          color: @wht-a50;
        }
      }

    }
  }

);