comty/packages/app/src/pages/lyrics/index.less

.lyrics {
    position: relative;

    z-index: 100;

    display: flex;
    flex-direction: column;

    &.stopped {
        .lyrics-video {
            filter: blur(6px);
        }
    }

    .lyrics-video {
        z-index: 105;
        position: absolute;

        top: 0;
        left: 0;

        width: 100vw;
        height: 100vh;

        object-fit: cover;

        transition: all 150ms ease-out;
    }

    .lyrics-text-wrapper {
        z-index: 110;
        position: fixed;

        bottom: 0;
        left: 0;

        padding: 60px;

        .lyrics-text {
            display: flex;
            flex-direction: column;

            width: 600px;
            height: 200px;

            padding: 20px;
            gap: 30px;

            overflow: hidden;

            background-color: rgba(var(--background-color-accent-values), 0.6);
            border-radius: 12px;

            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            .line {
                font-size: 2rem;

                opacity: 0.1;

                margin: 0;

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

    .lyrics-player-controller-wrapper {
        position: fixed;
        z-index: 115;

        bottom: 0;
        right: 0;

        padding: 60px;

        transition: all 150ms ease-in-out;

        &.hidden {
            opacity: 0;
        }

        .lyrics-player-controller {
            position: relative;

            display: flex;
            flex-direction: column;

            align-items: center;

            gap: 10px;

            width: 300px;

            padding: 30px;

            border-radius: 12px;

            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            background-color: rgba(var(--background-color-accent-values), 0.8);

            transition: all 150ms ease-in-out;

            &:hover {
                gap: 20px;

                .player-controls {
                    opacity: 1;
                    height: 30px;
                }

                .lyrics-player-controller-tags {
                    opacity: 1;
                    height: 10px;
                }
            }

            .lyrics-player-controller-info {
                display: flex;
                flex-direction: column;

                width: 100%;

                gap: 10px;

                transition: all 150ms ease-in-out;

                .lyrics-player-controller-info-title {
                    font-size: 1.5rem;
                    font-weight: 600;

                    width: 100%;

                    color: var(--background-color-contrast);

                    h4 {
                        margin: 0;
                    }

                    .lyrics-player-controller-title-text {
                        transition: all 150ms ease-in-out;

                        width: 90%;

                        overflow: hidden;

                        // do not wrap text
                        white-space: nowrap;

                        &.overflown {
                            opacity: 0;
                            height: 0px;
                        }
                    }
                }

                .lyrics-player-controller-info-details {
                    display: flex;
                    flex-direction: row;

                    align-items: center;

                    gap: 7px;

                    font-size: 0.6rem;

                    font-weight: 400;

                    // do not wrap text
                    white-space: nowrap;

                    h3 {
                        margin: 0;
                    }
                }
            }

            .player-controls {
                opacity: 0;
                height: 0px;
                transition: all 150ms ease-in-out;
            }

            .lyrics-player-controller-progress-wrapper {
                width: 100%;

                .lyrics-player-controller-progress {
                    display: flex;
                    flex-direction: row;

                    align-items: center;

                    width: 100%;

                    margin: auto;

                    transition: all 150ms ease-in-out;

                    border-radius: 12px;

                    background-color: rgba(var(--background-color-accent-values), 0.8);

                    &:hover {
                        .lyrics-player-controller-progress-bar {
                            height: 10px;
                        }
                    }

                    .lyrics-player-controller-progress-bar {
                        height: 5px;

                        background-color: white;

                        border-radius: 12px;

                        transition: all 150ms ease-in-out;
                    }
                }
            }

            .lyrics-player-controller-tags {
                display: flex;
                flex-direction: row;

                align-items: center;

                justify-content: center;

                width: 100%;
                height: 0px;

                gap: 10px;

                opacity: 0;

                transition: all 150ms ease-in-out;
            }
        }
    }

    .videoDebugOverlay {
        position: fixed;

        top: 20px;
        right: 20px;

        z-index: 115;

        display: flex;

        flex-direction: column;

        padding: 10px;
        border-radius: 12px;

        background-color: rgba(var(--background-color-accent-values), 0.8);

        width: 200px;
        height: fit-content;

        transition: all 150ms ease-in-out;

        &.hidden {
            opacity: 0;
        }
    }
}