⋆ ˚｡⋆୨୧˚ blue and black spotify theme ˚୨୧⋆｡˚ ⋆ by sanitynotlost

/* ==UserStyle==
@name           ⋆ ˚｡⋆୨୧˚ blue and black spotify theme ˚୨୧⋆｡˚ ⋆
@namespace      USO Archive
@author         34rthly
@description    `.・。.・゜✭・.・✫・゜・。.dark mode with blue accents .・。.・゜✭・.・✫・゜・。.`
@version        20220110.16.5
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
/*
created by: 34rthly
*/
@-moz-document domain("open.spotify.com") {
    .control-button-heart[aria-checked=true] {
        color: #032640;
    }

    .rRF_r7EyCHjZv058JACi,
    .rRF_r7EyCHjZv058JACi:focus,
    .rRF_r7EyCHjZv058JACi:hover {
        color: #032640;
    }

    .d4u88Fc9OM6kXh7FYYRj.pp1ooFGqFEUG5ucC6_KW {
        color: #032640;
    }

    .d4u88Fc9OM6kXh7FYYRj {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        align-items: center;
        background: transparent;
        border: none;
        color: #b3b3b3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: var(--button-size);
        justify-content: center;
        min-width: var(--button-size);
        position: relative;
        width: var(--button-size);
    }

    .bQY5A9SJfdFiEvBMM6J5.yKo7LWUCQCEALszRxAaS {
        color: #032640;
    }

    .bQY5A9SJfdFiEvBMM6J5 {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        align-items: center;
        background: transparent;
        border: none;
        color: #b3b3b3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: var(--button-size);
        justify-content: center;
        min-width: var(--button-size);
        position: relative;
        width: var(--button-size);
    }

    .control-button {
        background-color: transparent;
        border: none;
        color: #032640;
        height: 32px;
        min-width: 32px;
        width: 32px;
    }

    .control-button--active {
        fill: #032640!important;
        color: #032640!important;
    }

    .control-button,
    .control-button-wrapper {
        position: relative;
    }

    .ZMXGDTbwxKJhbmEDZlYy {
        padding: 4px 0 0 2px;
    }

    .glAlQe {
        font-size: 0.875rem;
        line-height: 1rem;
        text-transform: none;
        letter-spacing: normal;
    }

    .glAlQe {
        box-sizing: border-box;
        font-family: spotify-circular, Helvetica, Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
        font-size: 0.8125rem;
        line-height: 1rem;
        font-weight: 700;
        background-color: transparent;
        border: 0px;
        border-radius: 500px;
        display: inline-block;
        position: relative;
        text-align: center;
        text-decoration: none;
        text-transform: none;
        touch-action: manipulation;
        transition-duration: 33ms;
        transition-property: background-color, border-color, color, box-shadow, filter, transform;
        user-select: none;
        vertical-align: middle;
        transform: translate3d(0px, 0px, 0px);
        color: #032640;
        padding: 8px;
    }

    .jO1u19LFzKZZJcoX4OdB > :not(:last-child) {
        margin-right: 24px;
    }

    .IeLnf2wUHVKqxhzBcBoM.KOoUMuC7IxI_1Pi4r4m5 {
        background-color: #032640;
        color: #fff;
    }

    .HxHEP8jIbqr1abwdA4bJ.mVVxN9ZfIRjiQfDuzPCZ {
        background-color: #032640;
        color: var(--text-base);
    }

    [dir=ltr] .HxHEP8jIbqr1abwdA4bJ {
        padding-right: var(--text-end-padding);
    }

    .connect-device-list-item {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #282828;
        border: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 15px;
        position: relative;
        width: 100%;
    }

    [dir=ltr] .connect-device-list-item__icon {
        padding-right: 15px;
    }

    .connect-device-list-item__icon {
        color: #032640;
    }

    .connect-device-list-item--active .connect-device-list-item__device-subtitle {
        color: #032640;
    }

    .connect-device-list-item .connect-device-list-item__device-subtitle {
        color: #032640;
    }

    [dir=ltr] .connect-device-list-item__icon {
        padding-right: 15px;
    }

    .connect-device-list-item--active .connect-device-list-item__icon {
        color: #032640;
    }

    .connect-device-list-item {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #282828;
        border: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 15px;
        position: relative;
        width: 100%;
    }

    .connect-device-list-item--active {
        color: #032640;
    }

    .TywOcKZEqNynWecCiATc {
        --bg-color: #535353;
        --fg-color: #b3b3b3;
        --is-active-fg-color: #032640;
        --progress-bar-transform: 0%;
        --progress-bar-height: 4px;
        --progress-bar-radius: calc(var(--progress-bar-height)/2);
        height: 100%;
        overflow: hidden;
        -ms-touch-action: none;
        touch-action: none;
        width: 100%;
    }

    .moDRd9td0KtitPDzR7OJ,
    .moDRd9td0KtitPDzR7OJ:focus,
    .moDRd9td0KtitPDzR7OJ:hover {
        color: #fff;
    }

    .moDRd9td0KtitPDzR7OJ {
        background-color: #032640;
    }

    .n4hTP7ZeAOT_UQEkRUR7:before,
    .RANLXG3qKB61Bh33I0r2:not(:first-child):before {
        content: "";
        margin: 0 4px;
    }

    .QO_OHdGt6X6luPH6_Lfg {
        margin-top: 3px;
    }

    .Ng3dPPA2_1CFYkzPukjM {
        -webkit-margin-end: 8px;
        -ms-flex-negative: 0;
        -ms-flex-item-align: start;
        align-self: flex-start;
        background: #032640;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
        height: 8px;
        margin-inline-end: 8px;
        margin-top: 8px;
        width: 8px;
    }

    .odcjv30UQnjaTv4sylc0 {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-margin-start: 16px;
        align-items: center;
        background-color: #032640;
        border: 0;
        border-radius: 23px;
        color: #fff;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8px;
        height: 32px;
        justify-content: center;
        margin-inline-start: 16px;
        padding: 2px;
        position: relative;
    }
}