feishin/src/renderer/features/player/components/full-screen-player.module.css

.container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    padding: 2rem;

    @media screen and (orientation: portrait) {
        padding: 2rem 2rem 1rem;
    }
}

.responsive-container {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 2560px;
    margin-top: 5rem;

    @media screen and (orientation: portrait) {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }
}

.background-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--theme-overlay-header);
    backdrop-filter: blur(var(--image-blur));
}

.scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        transparent 0%,
        var(--album-color, rgb(0 255 255 / 15%)) 50%,
        transparent 100%
    );
    background-size: 100% 200%;
    animation: scanline 6s linear infinite;
}

@keyframes scanline {
    0% {
        background-position: 0 -100vh;
    }

    100% {
        background-position: 0 100vh;
    }
}