Skip to content

spotify enhancements i can't live without by meow-d

Screenshot of spotify enhancements i can't live without

Details

Authormeow-d

LicenseCC Zero

Categoryopen.spotify.com

Created

Updated

Size3.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Things that should be in Spotify by default. Mostly deals with css transitions. It also hides bloat and makes the topbar blurry.

Notes

I may or may not update this section so it's probably better to check the css comments.

  • Transition when hovering/selecting the background of songs in playlists/albums
  • Hide stuff
    • install desktop app button
    • get premium
    • note: does not hide ads cause i already use adblock
  • Transitions and button active feedback in now playing bar
  • blurry topbar
  • Animated gradient in now playing bar (currently broken)

Yeah most of them are hard to convey in a screenshot...

Source code

/* ==UserStyle==
@name         spotify enhancements i can't live without
@version      1.1.0
@namespace    https://userstyles.world/user/meow-d
@description  Things that should be in Spotify by default.Includes: css transitions, hides bloat, blurred topbar.
@author       meow-d
@license      CC Zero
@preprocessor stylus
@var checkbox changeCurrentlyPlayingColor "change currently playing song color" 0
@var color    currentlyPlayingColor  "color"   #78ffd6
@var checkbox blur "enable topbar blur (currently broken)" 0
==/UserStyle== */
@-moz-document domain("open.spotify.com") {

    /* Transition when hovering/selecting the background of songs in playlists/albums */
    .h4HgbO_Uu1JYg5UGANeQ.eRuZMo_HNLjb1IalIeRb,
    .h4HgbO_Uu1JYg5UGANeQ.eRuZMo_HNLjb1IalIeRb:hover {
        transition: background 0.1s ease-out !important;
    }

    .h4HgbO_Uu1JYg5UGANeQ {
        transition: background .1s !important;
    }

    .h4HgbO_Uu1JYg5UGANeQ:hover {
        background-color: rgba(255, 255, 255, .15);
    }

    /* Hide stuff: install desktop app button, get premium */
    .Foyk_HJx16yh22JYmQ56 > .eNs6P3JYpf2LScgTDHc6 > .ATUzFKub89lzvkmvhpyE.link-subtle,
    .Button-y0gtbx-0 {
        display: none;
    }

    /* Animated gradient in now playing bar (currently broken) */
    /* .TywOcKZEqNynWecCiATc {
        --bg-color: hsla(0, 0%, 100%, 0.13);
        --progress-bar-radius: calc(var(--progress-bar-height));
    }

    .epWhU7hHGktzlO_dop6z {
        transition: transform 0.1s cubic-bezier(.79, .14, .15, .86) !important;
        background: linear-gradient(to right, #a8ff78, #78ffd6);
        /*     background: repeating-linear-gradient(to right,#fdeff9, #7302c0, #ec38bc, #fdeff9); */
    /*     background: linear-gradient(90deg, rgba(148, 187, 233, 1) 0%, rgba(238, 174, 202, 1) 100%); */
    /*    background-size: 400% 100%;
        animation: animatedGradient 2s linear infinite;
    }

    @keyframes animatedGradient {
        0% {
            background-position: 100% 50%
        }
        100% {
            background-position: -33% 50%
        }
    }

    .Root__now-playing-bar {
        background-color: #18181899;
    }*/
    /* Transitions and button active feedback in now playing bar */
    .Vis45PPawTyED7Lt2_LI {
        transition: left 0.1s cubic-bezier(.79, .14, .15, .86) !important;
    }

    .Vis45PPawTyED7Lt2_LI:active {
        background-color: #c7c7c7
    }

    if changeCurrentlyPlayingColor {
        /* song titles for currently playing songs in a playlist */
        .h4HgbO_Uu1JYg5UGANeQ.iSbqnFdjb1SuyJ3uWydl .VpYFchIiPg3tPhBGyynT,
        .h4HgbO_Uu1JYg5UGANeQ.iSbqnFdjb1SuyJ3uWydl .t_yrXoUO3qGsJS4Y6iXX {
            color: currentlyPlayingColor;
        }
    }

    /* blur topbar */
    /* (broken in playlists/albums, not sure if it's a firefox bug) */
    if blur {
        .EvIR4O7jOSbNmxtMdIQ0,
        .facDIsOQo9q7kiWc4jSg {
            backdrop-filter: blur(calc(var(--top-bar-opacity)*10px));
        }

        .qJOhHoRcFhHJpEQ2CwFT.koyeY6AgGRPmyPITi7yO,
        .fVB_YDdnaDlztX7CcWTA,
        .rX_OmqCngvY5ZCoYBZgb {
            backdrop-filter: blur(10px);
            background: rgba(0, 0, 0, .5);
        }

        .qJOhHoRcFhHJpEQ2CwFT .dZPmmYYhskhqHJCAruvI {
            border-bottom: 1px solid transparent !important;
        }

        .qJOhHoRcFhHJpEQ2CwFT.koyeY6AgGRPmyPITi7yO {
            border-bottom: 1px solid transparent !important;
        }

        .T1xI1RTSFU7Wu94UuvE6 {
            background: #0000 !important;
        }

        .QO9loc33XC50mMRUCIvf,
        .VgSbatGBB9XwTH2_dsxg .ql0zZd7giPXSnPg75NR0 {
            background: rgba(0, 0, 0, .5);
        }
    }
}

Reviews

No reviews yet.