@zohodesk/dot/es/AttachmentViewer/AttachmentViewer.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.header {
    height: var(--zd_size40) ;
    position: relative;
    z-index: 1;
    composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
    background-color: var(--zdt_attachmentviewer_header_bg);
    padding: 0 var(--zd_size15) ;
    border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
}

.title {
    max-width: 50% ;
    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
}

[dir=ltr] .title {
    padding-right: var(--zd_size15) ;
}

[dir=rtl] .title {
    padding-left: var(--zd_size15) ;
}

.count {
    position: absolute;
    composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
    padding: 0 var(--zd_size10) ;
}

.title,
.count {
    color: var(--zdt_attachmentviewer_title_text);
    font-size: var(--zd_font_size15) ;
}

[dir=ltr] .menuBar {
    padding-left: var(--zd_size5) ;
}

[dir=rtl] .menuBar {
    padding-right: var(--zd_size5) ;
}

.mbleMenuBar {
    align-self: baseline;
    margin-top: var(--zd_size8) ;
}

[dir=ltr] .menu+.menu {
    margin-left: var(--zd_size22) ;
}

[dir=rtl] .menu+.menu {
    margin-right: var(--zd_size22) ;
}

.mobileMenu+.mobileMenu {
    margin-bottom: var(--zd_size22) ;
}

.menuIcon {
    --iconColor: var(--zdt_attachmentviewer_title_text);
}

.nrmlArrowBox {
    width: var(--zd_size80) ;
}

.mbleArrowBox {
    width: var(--zd_size50) ;
}

.arrowBox:hover {
    background-color: var(--zdt_attachmentviewer_arrow_bg_hover);
}

.arrow {
    color: var(--zdt_attachmentviewer_title_text);
    font-size: var(--zd_font_size22) ;
    height: var(--zd_size38) ;
    width: var(--zd_size38) ;
    line-height: 1.6364;
    border-radius: 50%;
    cursor: pointer;
}

.preview {
    composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
    text-align: center;
    margin: var(--zd_size20) 0 ;
}

.zoomIn {
    max-height: 100% ;
    max-width: 90% ;
    position: absolute;
    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
}

.zoomOut {
    cursor: zoom-out;
}

.button {
    position: absolute;
    bottom: var(--zd_size23) ;
    z-index: 3;
    border: 1px solid var(--zdt_attachmentviewer_button_border);
}

[dir=ltr] .button {
    right: var(--zd_size20) ;
}

[dir=rtl] .button {
    left: var(--zd_size20) ;
}

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

.footer {
    width: 100% ;
    overflow: hidden;
    transition: height var(--zd_transition3);
    background-color: var(--zdt_attachmentviewer_footer_bg)
}

[dir=ltr] .footer {
    padding-right: var(--zd_size68) 
}

[dir=rtl] .footer {
    padding-left: var(--zd_size68) 
}

.footerHeight {
    height: var(--zd_size75) ;
}

.footerHide {
    height: 0 ;
}

.listContainer {
    padding: 0 var(--zd_size18) ;
}

.imgItem {
    height: var(--zd_size60) ;
    min-width: var(--zd_size40) ;
    position: relative;
    transition: border var(--zd_transition3);
    border-width: 2px;
    border-style: solid;
    border-color: var(--dot_mirror);
    border-radius: 3px;
    padding: var(--zd_size2) ;
    cursor: pointer;
}

.imgItem:hover {
    border-color: var(--zdt_attachmentviewer_hover_border);
}

[dir=ltr] .imgItem+.imgItem {
    margin-left: var(--zd_size12) ;
}

[dir=rtl] .imgItem+.imgItem {
    margin-right: var(--zd_size12) ;
}

.image, .crsrPointer {
    cursor: pointer;
}

.altText {
    color: var(--zdt_attachmentviewer_title_text);
    font-size: var(--zd_font_size13) ;
}

.selected, .selected:hover {
    border-color: var(--zdt_attachmentviewer_selected_border);
}

.selected::after {
    content: '';
    position: absolute;
    top: 0 ;
    width: 100% ;
    height: 100% ;
    opacity: 0.3;
    background-color: var(--zdt_attachmentviewer_selected_after_bg);
    box-shadow: var(--zd_bs_attachmentviewer_selected);
}

[dir=ltr] .selected::after {
    left: 0 ;
}

[dir=rtl] .selected::after {
    right: 0 ;
}

.zoomIcon {
    font-size: var(--zd_font_size15) ;
}

.newTabIcon {
    font-size: var(--zd_font_size12) ;
}

.appIcon {
    font-size: var(--zd_font_size9) ;
}

.thumpIcon {
    color: var(--zdt_attachmentviewer_title_text);
    transition: transform var(--zd_transition3);
    transform: rotateX(180deg);
}

.thumpIconActive {
    transform: rotateX(0deg);
}

.isAudio {
    composes: audioImage from '../common/dot_common.module.css';
    width: var(--zd_size100) ;
    background-size: 100% 100%;
}

.isAudio .image {
    opacity: 0;
}

.video {
    position: absolute;
    top: 0 ;
    bottom: 0 ;
    margin: auto ;
}

[dir=ltr] .video {
    left: 0 ;
    right: 0 ;
}

[dir=rtl] .video {
    right: 0 ;
    left: 0 ;
}

.imgBox {
    position: absolute;
    transition: var(--zd_transition3) ease-in-out;
    opacity: 0;
    overflow: auto;
}

.imgBox>img {
    object-fit: contain;
}

.imgRef {
    width: 100% ;
    height: 100% ;
    max-width: 100% ;
    max-height: 100% ;
    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
}

.img {
    transition: var(--zd_transition3) ease-in-out;
    margin: auto ;
}

.zoomInCursor {
    cursor: zoom-in;
}

.zoomOutCursor {
    cursor: zoom-out;
}

.imgRef .normalImg {
    max-width: inherit ;
    max-height: inherit ;
}

.imgRef .zoomedImg {
    max-width: initial ;
    max-height: initial ;
}

.previewBox {
    position: relative;
    overflow: hidden;
}

.spinLoad {
    position: absolute;
    composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
    height: var(--zd_size18) ;
    width: var(--zd_size18) ;
    cursor: progress
}

.loader {
    height: 100% ;
    width: 100% ;
    composes: rotate from '../common/dot_animation.module.css';
    composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
    border: 2px solid var(--zdt_attachmentviewer_loader_border);
    border-top-color: var(--zdt_attachmentviewer_loader_border_top);
    border-radius: 50%;
}

[dir=ltr] .loader {
    animation-duration: var(--zd_transition8);
    animation-timing-function: linear;
}

[dir=rtl] .loader {
    animation-duration: var(--zd_transition8);
    animation-timing-function: linear;
}

.hide {
    opacity: 0;
    visibility: hidden;
}

.author {
    max-width: var(--zd_size200) ;
}

[dir=ltr] .author {
    padding-left: var(--zd_size15) ;
}

[dir=rtl] .author {
    padding-right: var(--zd_size15) ;
}

.authorName {
    font-size: var(--zd_font_size15) ;
    color: var(--zdt_attachmentviewer_title_text);
    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
    margin: 0 var(--zd_size10) ;
}

.btn {
    height: 100% ;
    width: 100% ;
    background-color: var(--dot_mirror);
    border: 0;
    cursor: pointer;
}