photos/frontend/src/Photos/Overview.scss

@import "~@blueprintjs/core/lib/scss/variables";

:root {
    --photoOverlayDrawerWidth: 5rem;
}

.operationsOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: $pt-navbar-height;
    transition: all 0.3s;

    &.bp4-ovarlay-open {
        z-index: 99;
    }

    &.bp4-overlay-enter {
        opacity: 0;
    }

    &.bp4-overlay-enter-active {
        opacity: 1;
    }

    &.bp4-overlay-exit {
        opacity: 1;
    }

    &.bp4-overlay-exit-active {
        opacity: 0;
    }
}

.operationsOverlay,
#photoOverlayContainer {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: 0.3s;

    #photo {
        width: calc(100vw - var(--photoOverlayDrawerWidth));
        height: 100%;

        #photoView {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            #photoImg {
                object-fit: contain;
                max-height: 100%;
                max-width: 100%;
                box-shadow: $pt-elevation-shadow-4;
                transition: all 0.3s;

                &.notLoaded {
                    opacity: 0;
                }

                &.loaded {
                    opacity: 1;
                }
            }
        }
    }

    #photoOverlayDrawer {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--photoOverlayDrawerWidth);
        height: 100vh;
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
        background-color: $light-gray5;
        box-shadow: $pt-elevation-shadow-4;
        transition: transform 0.3s;
    }
}

.bp4-overlay-enter,
.bp4-overlay-appear {
    opacity: 0;

    #photoImg {
        transform: scale(0.95, 0.95);
    }

    #photoOverlayDrawer {
        transform: translate(10rem);
    }
}

.bp4-overlay-enter-active,
.bp4-overlay-appear-active {
    opacity: 1;

    #photoImg {
        transform: scale(1, 1);
    }

    #photoOverlayDrawer {
        transform: translate(0rem);
    }
}

.bp4-overlay-exit {
    opacity: 1;

    #photoImg {
        transform: scale(1, 1);
    }

    #photoOverlayDrawer {
        transform: translate(0rem);
    }
}

.bp4-overlay-exit-active {
    opacity: 0;

    #photoImg {
        transform: scale(0.95, 0.95);
    }

    #photoOverlayDrawer {
        transform: translate(10rem);
    }
}

#overviewContainer {
    padding-top: 2rem;
    width: 100%;
    height: 100%;
    overflow: auto;

    #overview {
        width: 80%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;

        .photosLoader {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        #actionbar {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            width: 100%;

            button {
                margin: 0.25rem;
            }
        }

        .month,
        .year {
            h3,
            h2 {
                margin-top: 1rem;
                margin-left: 0.25rem;
            }
        }

        .list {
            display: flex;
            flex-shrink: 0;
            flex-grow: 0;
            flex-wrap: wrap;

            // 400px is the minimal width for 2 cards to fit
            @media (max-width: 400px) {
                justify-content: center;
            }

            .photoPadding {
                flex-grow: 1;
            }

            .photoCard {
                display: flex;
                justify-content: center;
                align-items: center;

                transition: all 0.3s;

                transition: 0.3s;
                user-select: none;
                height: 15rem;
                margin: 0.25rem;
                padding: 0rem;
                overflow: hidden;

                img {
                    min-height: 100%;
                    max-width: 100%;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    object-fit: contain;
                }
            }

            .photoStub {
                flex-grow: 100;
            }
        }
    }
}

.bp4-dark {
    #overview {
    }
}