benivo-ui-library/splashScreen.less

Benivo UI library

@keyframes moveBounceRotate {
    0% {
        transform: scale(1.8) rotate(0deg);
        opacity: 0;
    }

    40% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.1) rotate(0deg);
        opacity: 1;
    }

    55% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(45deg);
        opacity: 1;
    }
}


.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--gp-splash-background, var(--gp-main));
    box-sizing: border-box;

    .rotate-box {
        width: 100%;
        height: 100%;
        max-height: calc(100vh - 100px);
        max-width: calc(100vh - 100px);
        position: absolute;
        top: 50px;
        bottom: 50px;
        border: 100px solid var(--gp-splash-border, rgba(255, 255, 255, 0.2));
        animation: moveBounceRotate 3s linear forwards;

        &::before {
            content: '';
            position: absolute;
            z-index: 1;
            top: -101px;
            left: 25%;
            width: 50%;
            height: 102px;
            background-color: var(--gp-splash-background, var(--gp-main));
        }

        @media @lg-max {
            max-height: 660px;
            max-width: 660px;
            top: calc((100vh - 660px) / 2);
            left: calc((100vw - 660px) / 2);
            bottom: inherit;
        }

        @media @sm-max {
            max-height: 320px;
            max-width: 320px;
            top: calc((100vh - 320px) / 2);
            left: calc((100vw - 320px) / 2);
            bottom: inherit;
            border: 50px solid var(--gp-splash-border, rgba(255, 255, 255, 0.2));

            &::before {
                top: -51px;
                height: 52px;
            }
        }
    }

    .splash-logo {
        width: auto;
        height: auto;
        max-width: 350px;
        max-height: 350px;
        object-fit: contain;
    }

    .footer-logo {
        position: absolute;
        bottom: 35px;
        left: 50%;
        transform: translateX(-50%);
        display: var(--gp-hide-splash-footer, block);

        .bnv-logo {
            width: 280px;
            height: 48px;

            @media @lg-max {
                width: 244px;
                height: 42px;
            }

            @media @sm-max {
                width: 210px;
                height: 36px;
            }

            & when (@footer-is-logo-dark =true) {
                background-image: @bnv-powered-dark;
            }

            & when (@footer-is-logo-dark =false) {
                background-image: @bnv-powered-light;
            }

            &.dark {
                background-image: @bnv-powered-dark;
            }

            &.light {
                background-image: @bnv-powered-light;
            }
        }
    }
}