nutty-tools/now-playing/style.css

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 20px;
    color: white;
    margin: 0;
}

#main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 1em;
    box-sizing: border-box;
}


@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-in-from-top {
    0% {
        transform: translateY(-1em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-from-top {
    0% {
        transform: translateY(-1em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-out-top {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-1em);
        opacity: 0;
    }
}

@keyframes slide-in-from-bottom {
    0% {
        transform: translateY(1em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-out-bottom {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(1em);
        opacity: 0;
    }
}

@keyframes slide-in-from-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slide-in-from-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}



@property --mask-left {
    syntax: '<color>';
    inherits: false;
    initial-value: black;
}

@property --mask-right {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.text-label {
    --fade-width: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%;
    mask-image: var(--trailing-fade);
    -webkit-mask-image: var(--trailing-fade);
    transition: opacity 0.25s ease-in-out;
}

.text-label:empty {
    display: none !important;
}

.text-label:has(.scroll-content:empty),
.text-label:has(#track-label:empty) {
    display: none !important;
}

.text-label .scroll-content {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

.text-label.is-overflowing {    
    /* Static gradient structure referencing dynamic color variables */
    mask-image: linear-gradient(
        to right, 
        var(--mask-left) 0px, 
        black var(--fade-width), 
        black calc(100% - var(--fade-width)), 
        var(--mask-right) 100%
    );
    -webkit-mask-image: linear-gradient(
        to right, 
        var(--mask-left) 0px, 
        black var(--fade-width), 
        black calc(100% - var(--fade-width)), 
        var(--mask-right) 100%
    );
}