filestash/client/pages/viewerpage/imageviewer.scss

body:not(.dark-mode) .component_imageviewer .component_image_container {
    &, .fullscreen .component_pager .wrapper > span { background: #525659; }
}
.component_imageviewer{
    &, .component_image_container > .images_wrapper, .component_image_container > .images_wrapper > span, .component_image_container > .images_wrapper > span > div{
        flex: 1;
        display: flex;
        overflow: hidden;
        width: 100%;
        flex-direction: column;
    }

    .component_image_container{
        &.fullscreen{
            background: var(--dark);
            .component_pager .wrapper > span{
                background: var(--dark);
            }
            img[srcset]{
                background: var(--color);
            }

        }
        display: flex;
        flex-grow: 1;
        height: 100%;
        width: 100%;
        text-align: center;
        overflow: hidden;
        padding: 15px 10px 65px 10px;
        @media screen and (max-height: 410px) {
            padding: 5px 0px 40px 10px;
            .component_pager .wrapper{
                > span{padding: 2px 5px;}
                padding: 5px 0;
            }
            .images_aside{
                margin: -5px -5px -40px 10px!important;
            }
        }

        height: 100%;
        box-sizing: border-box;

        .images_wrapper{
            width: 100%;
            position: relative;
            justify-content: center;
            > span{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .component_loader svg{width: 40px;}
        }
        .images_aside{
            flex: 0;
            text-align: left;
            width: 0;
            z-index: 1;
            min-width: 0px;
            transition: 0.3s ease min-width;
            border-left: 1px solid var(--color);
            &.open{
                min-width: 300px;
                @media screen and (max-width: 850px) {
                    min-width: 250px;
                    .header, .content{padding: 15px 15px 0px 15px;}
                    font-size: 0.94em;
                }
                @media screen and (max-width: 650px) {
                    min-width: 200px;
                }
                @media screen and (max-width: 580px) {
                    width: 0px;
                    min-width: 0;
                }
                transition: 0.5s ease min-width;
                .content{
                    transform: translateX(0px);
                    opacity: 1;
                }
            }
            .content{
                transition: 0.2s ease opacity, 0.3s ease transform;
                opacity: 0;
                transform: translateX(10px);
                transition-delay: 0.2s;
            }

            background: #949290;
            margin: -15px -10px -65px 10px;
            color: var(--dark);
            .header{
                display: flex;
                line-height: 25px;
                white-space: nowrap;
                padding: 20px 25px;
                font-size: 1.25em;
                .component_icon{
                    height: 18px;
                    float: right;
                    cursor: pointer;
                }
            }
            .content{
                padding: 10px 20px 0px 20px;
                .content_box{
                    clear: both;
                    > div{
                        margin: 3px 0;
                        width: calc(100% - 40px);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    opacity: 0.85;
                    margin-bottom: 20px;
                    .component_icon{
                        height: 30px;
                        width: 30px;
                        float: left;
                        padding: 5px 10px 5px 0;
                    }
                }
                .component_mapshot{margin-bottom: 10px;}
                .more, .meta_key{
                    text-align: right;
                    font-size: 0.9em;
                    margin: 10px 0;
                }
                .more_container{
                    margin: 10px 0 50px 0;
                    .meta_key{
                        margin: 5px 0;
                        border-top: 1px dashed var(--color);
                        padding-top: 5px;
                        clear: both;
                        .title{ float: left; margin-right: 5px; }
                        .value{ color: var(--bg-color);  }
                    }
                }
            }
        }
        img[srcset]{
            margin: auto;
            max-height: 100%;
            max-width: 100%;
            min-height: 100px;
            background: var(--dark);
            box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
            border-radius: 2px;
            &.idle{transition: 0.2s ease transform;}
        }
    }
    .loader{
        &, & > span{height: 100%; display: block;}

        .component_loader{
            margin: auto;
            display: flex;
            flex-direction: column;
            height: 100%;
            svg{margin: auto;}
        }
    }
    .error{
        display: flex;
        height: 100%;
        color: var(--dark);
        font-size: 1.5em;
        font-style: italic;
        .label{
            text-shadow: 1px 1px 5px rgba(255,255,255,0.1);
            display: block;
            margin: auto;
        }
    }
}

.image-enter, .image-appear{
    opacity: 0;
}
.image-enter.image-enter-active, .image-appear.image-appear-active{
    transition: top .3s,right .3s,bottom .3s,left .3s,max-width .3s,max-height .3s;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    animation-duration: .3s;
    -webkit-animation-timing-function: cubic-bezier(.51,.92,.24,1.15);
    animation-timing-function: cubic-bezier(.51,.92,.24,1.15);
    opacity: 1;
}


@keyframes zoomIn {
	0% { opacity: 0; transform: scale(.97); }
    1% { opacity: 1; }
	100% { opacity: 1; transform: scale(1); }
}