/* ==UserStyle==
@name Spotify Web Catppuccin
@namespace github.com/catppuccin/userstyles/styles/spotify-web
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/spotify-web
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aspotify-web
@description Soothing pastel theme for Spotify Web
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@import "https://userstyles.catppuccin.com/lib/lib.less";
@-moz-document domain("open.spotify.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    .encore-dark-theme,
    .encore-dark-theme .encore-base-set,
    .encore-light-theme,
    .encore-light-theme .encore-base-set,
    .encore-dark-theme .encore-inverted-light-set {
      --background-base: @base;
      --background-highlight: @surface0;
      --background-press: @crust;
      --background-elevated-base: @surface0;
      --background-elevated-highlight: @surface1;
      --background-elevated-press: @crust;
      --background-tinted-base: @crust;
      --background-tinted-highlight: @mantle;
      --background-tinted-press: @base;
      --background-unsafe-for-small-text-base: @base;
      --background-unsafe-for-small-text-highlight: @base;
      --background-unsafe-for-small-text-press: @base;
      --text-base: @text;
      --text-subdued: @subtext1;
      --text-bright-accent: @accent;
      --text-negative: @red;
      --text-warning: @yellow;
      --text-positive: @accent;
      --text-announcement: @sapphire;
      --essential-base: @text;
      --essential-subdued: @subtext1;
      --essential-bright-accent: @accent;
      --essential-negative: @red;
      --essential-warning: @yellow;
      --essential-positive: @green;
      --essential-announcement: @base;
      --decorative-base: @text;
      --decorative-subdued: @surface2;
    }
    .encore-dark-theme .encore-inverted-light-set {
      --background-base: @surface1;
      --background-highlight: @surface0;
      --background-press: @surface1;
    }
    .encore-dark-theme .encore-bright-accent-set {
      --background-base: @accent;
      --background-highlight: @accent;
      --background-press: @accent;
      --background-elevated-base: @accent;
      --background-elevated-highlight: @accent;
      --background-elevated-press: @accent;
      --background-tinted-base: @accent;
      --background-tinted-highlight: @accent;
      --background-tinted-press: @accent;
      --background-unsafe-for-small-text-base: @accent;
      --background-unsafe-for-small-text-highlight: @accent;
      --background-unsafe-for-small-text-press: @accent;
      --decorative-subdued: darken(@accent, 10%);
    }
    .encore-dark-theme .encore-over-media-set {
      --background-base: @mantle;
      --background-highlight: @crust;
      --background-press: @mantle;
      --background-unsafe-for-small-text-base: @mantle;
      --background-unsafe-for-small-text-highlight: @mantle;
      --background-unsafe-for-small-text-press: @mantle;
      --background-elevated-base: @crust;
      --background-elevated-highlight: @crust;
      --background-elevated-press: @mantle;
      --background-tinted-base: @mantle;
      --background-tinted-highlight: @mantle;
      --background-tinted-press: @mantle;
    }
    & when (@flavor = latte) {
      .T1xI1RTSFU7Wu94UuvE6 * {
        background: @surface0 !important;
      }
      .bQthUEx0_U98DJkT1saO,
      .RVRoa p {
        color: @base !important;
      }
    }
    .encore-text {
      color: @text;
    }
    .ydlidzq2hSQrvGXn7yni {
      background: @text;
      color: @crust;
    }
    .encore-dark-theme .encore-base-set > *,
    .encore-dark-theme > * {
      --parents-essential-base: @text;
    }
    .X8yW2lJbFCQfV5GjoRwL {
      --generic-tooltip-background-color: @mantle;
    }
    .SboKmDrCTZng7t4EgNoM {
      background-color: @mantle !important;
    }

    #main > * > *,
    .sqKERfoKl4KwrtHqcKOd,
    .HkbHLcqgUfXruL5xVi28,
    .uhDzVbFHyCQDH6WrWZaC,
    .pHrwZOFBdT8FNXnmcPPI {
      background: @crust !important;
    }

    /* some borders on the playlist details */
    .ePPpO_NuGDUxVRTw7y6W {
      border-color: @surface0;
    }

    // Some animated bar icon
    .uWvwXlS0Da1bWsRX6KOw,
    .n5XwsUqagSoVk8oMiw1x {
      filter: saturate(0) brightness(1.3) !important;
    }
    .eoWRdH,
    .in4OjUTflcsoj9RUpf05 *,
    .gpNta6i8q3KYJC6WBZQC * {
      color: @subtext0 !important;
    }
    ._EShSNaBK1wUIaZQFJJQ {
      box-shadow: 0 4px 20px @mantle;
    }
    .gHImFiUWOg93pvTefeAD,
    .CoLO4pdSl8LGWyVZA00t {
      background: @base !important;
    }
    .mjZrvVI3CxfHJXu7y0Lg,
    .coBkWVskipFo8KxLKief .T1xI1RTSFU7Wu94UuvE6 {
      background-color: @accent !important;
    }
    .ListRowTitle__LineClamp-sc-1xe2if1-0.lmgIvZ *,
    .EaTxqhHk6J4ecKHwpY5m *,
    .SboKmDrCTZng7t4EgNoM *,
    .MfVrtIzQJ7iZXfRWg6eM,
    .Ydwa1P5GkCggtLlSvphs,
    .Fb61sprjhh75aOITDnsJ *,
    .Ai_McRq9wJEYK21w8nX_ *,
    .QZhV0hWVKlExlKr266jo::placeholder,
    .JzZyf6OGCGtdscOZGt8Y.t6HIrX67Lp80Nj6tGauz *,
    .hfdkySA4kiUldFsPj9lD.ZcNcu7WZgOAz_Mkcoff3 *,
    .ListRowTitle__LineClamp-sc-1xe2if1-0 *,
    .FZhaXNtbN3Crwrgd0TA7.control-button,
    .COJ84QbXPrd4jkO1HU2N *,
    .zhQX2DOI2muMo8EKsZ6h,
    .MHIOvvlSYRmF7VAJDLWy,
    .JouuH90_RNAdTj0ZjcCA,
    .r9m6lHy7RyIPDzW1Youe,
    .PDPsYDh4ntfQE3B4duUI,
    .bfQ2S9bMXr_kJjqEfcwA *,
    .QO9loc33XC50mMRUCIvf,
    .G7zO58ORUHxcUw0sXktM,
    .rq2VQ5mb9SDAFWbBIUIn *,
    .lp9Tfm4rsM9_pfbIE0zd,
    .w6j_vX6SF5IxSXrrkYw5,
    .prGqQr33U0mG14TJ5V8a *,
    .BQD_pE0Nva_z6z7CvZww *,
    .W5cB_o0XkkU7Q8tlTGxq,
    .PGSe59fD1Hwc9yUM2d3U a,
    .jb9xD5ECTqKFK02qe3HZ *,
    .X8yW2lJbFCQfV5GjoRwL *,
    .tbvnCR3ZJxmAKY6nRPBe,
    .CmR9tHJ5ta6oWJlKBm3k *,
    .xgmjVLxjqfcXK5BV_XyN.fUYMR7LuRXv0KJWFvRZA,
    .DzWw3g4E_66wu9ktqn36 .home-active-icon,
    .Footer__StyledFooter-sc-xwm5vq-0 *,
    .DzWw3g4E_66wu9ktqn36 .search-active-icon,
    .dYnaPI,
    .home-active-icon,
    .zOsKPnD_9x3KJqQCSmAq,
    .beyOcd3p0PEzhrlKIbU1,
    .oORVTPvg6eTQflVKKgw8 {
      color: @text !important;
    }
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      .ObVor_8sQq5whKbtWs8a,
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      .PAqIqZXvse_3h6sDVxU0,
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      .UudGCx16EmBkuFPllvss
      a,
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      .W676nknusnBt8sz19YVV,
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      ._TH6YAXEzJtzSxhkGSqu,
    .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4)
      ._TH6YAXEzJtzSxhkGSqu
      a,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      .ObVor_8sQq5whKbtWs8a,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      .PAqIqZXvse_3h6sDVxU0,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      .UudGCx16EmBkuFPllvss
      a,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      .W676nknusnBt8sz19YVV,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      ._TH6YAXEzJtzSxhkGSqu,
    .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4)
      ._TH6YAXEzJtzSxhkGSqu
      a,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .PAqIqZXvse_3h6sDVxU0,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss a,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu a,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .ucB9avGYvzsmzXUOw0S7,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .PAqIqZXvse_3h6sDVxU0,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss a,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu a,
    .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .ucB9avGYvzsmzXUOw0S7,
    .NPv26QCDgdnwsPOlYJmQ div:nth-child(2) {
      color: @subtext1;
    }
    .VKCcyYujazVPj6VkksPM svg path {
      fill: @text;
    }
    .ThG4UqWk7ASXCMm69Opn,
    .BQD_pE0Nva_z6z7CvZww *,
    .k2ndSrHzhAsXBcLqRKYx * {
      color: @overlay2 !important;
    }
    .gqYYMz8DkhaT3e44LcHQ span {
      color: @base;
    }
    *[class*="ButtonInner-sc-14ud5tc-0 GBxjH encore-bright-accent-set vq0lsCoYrDUDvkuUIaRg"]
      * {
      color: @crust !important;
      fill: @crust !important;
    }
    .bk509U3ZhZc9YBJAmoPB {
      background: @mantle;
    }
    .HVCCFeUiHVwZVv74p34a *,
    .mXNT9H2GU7lDW4cGx0q1,
    .uV8q95GGAb2VDtL3gpYa {
      background: @surface0 !important;
    }
    ._VADS4mdajCt5Yuf6KjW,
    .uJjmxe0T11dUVeW6Biz8 {
      background-color: @base;
    }
    .QO9loc33XC50mMRUCIvf {
      background-color: @surface0;
    }
    .QO9loc33XC50mMRUCIvf:focus {
      -webkit-box-shadow: 0 0 0 2px @text;
      box-shadow: 0 0 0 2px @text;
    }
    .QO9loc33XC50mMRUCIvf:hover {
      background-color: @surface1;
    }
    .H6jh9Xd7DNOq3NsLDmCB:active,
    .H6jh9Xd7DNOq3NsLDmCB:focus,
    .H6jh9Xd7DNOq3NsLDmCB:hover {
      color: @text !important;
    }
    .NbcaczStd8vD2rHWwaKv,
    .QZhV0hWVKlExlKr266jo {
      background-color: @surface0;
      color: @text;
    }
    div[role*="menuitem"] {
      background-color: @surface0 !important;
    }
    .H6jh9Xd7DNOq3NsLDmCB,
    .htqz7Vb8mLJvGKTi1vrs,
    .dsbIME {
      color: @text;
    }
    .IconWrapper__Wrapper-sc-1hf1hjl-0 svg {
      color: @crust !important;
    }
    .kPpCsU {
      fill: @text;
    }
    .VgSbatGBB9XwTH2_dsxg .ql0zZd7giPXSnPg75NR0 {
      background: @base !important;
      color: @text;
    }
    .HsbczDqu9qjcYr7EIdHR,
    .rovbQsmAS_mwvpKHaVhQ * {
      background: transparent !important;
    }
    .Z35BWOA10YGn5uc9YgAp,
    .pQmF4tvRpUeLWgPKUcW7 {
      background-color: @crust;
    }
    .S4OmZ_IZexmZ5dasPqW5 {
      background-color: @accent !important;
    }
    .T1xI1RTSFU7Wu94UuvE6[style*="background-color:"] {
      background-color: @accent !important;
    }
    .fIvMht6B9HdROywMNJZ4.hIFR8WDm_54EEIa1gwpC {
      background-color: @accent !important;
    }
    // Explicit icon
    .kpGMQq1KFz620g_BD_dS {
      background-color: @overlay0;
    }
    .link-subtle {
      color: @subtext1;
      &:hover {
        color: @text;
      }
    }
    .c0KyMkxeMCWQGE7cR8s_,
    .s58sp4t3h1uU9n_42KqD,
    .TextForLabel-sc-1jqya9m-0 span {
      color: @base !important;
    }
    // Search cards
    .LunqxlFIupJw_Dkx6mNx {
      background: @mantle !important;
    }
    .bQthUEx0_U98DJkT1saO,
    .RVRoa p {
      color: @text;
    }
    // Social buttons
    .kmZeYl {
      background-color: @mantle;
      &:hover {
        background-color: @crust;
      }
    }
    // Cookie Banner
    #onetrust-banner-sdk {
      background-color: @base !important;
      color: @text !important;
    }
    #onetrust-policy-text,
    .ot-dpd-title,
    .onetrust-policy-title,
    .ot-text-bold {
      color: @text !important;
    }
    .ot-dpd-desc,
    .ot-link-btn {
      color: @text !important;
    }
    #onetrust-consent-sdk #onetrust-policy-title {
      color: @text !important;
    }
    #onetrust-banner-sdk button {
      color: @text !important;
    }
    #onetrust-pc-btn-handler {
      background-color: @base !important;
    }
    // Cookie Settings
    #onetrust-consent-sdk #onetrust-pc-sdk,
    .ot-acc-txt,
    .ot-acc-grpdesc {
      background-color: @base !important;
    }
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc,
    #onetrust-consent-sdk #onetrust-pc-sdk h3,
    #onetrust-consent-sdk #onetrust-pc-sdk h5,
    #onetrust-consent-sdk #onetrust-pc-sdk h4,
    #onetrust-consent-sdk #onetrust-pc-sdk h6,
    #onetrust-consent-sdk #onetrust-pc-sdk h2,
    #onetrust-pc-sdk .ot-always-active,
    .ot-acc-txt,
    .ot-acc-grpdesc,
    #onetrust-consent-sdk #onetrust-pc-sdk p {
      color: @text !important;
    }
    #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
      border-color: @accent !important;
      border-radius: 8px;
    }
    #onetrust-consent-sdk
      #onetrust-pc-sdk
      button:not(
        #clear-filters-handler,
        .ot-close-icon,
        #filter-btn-handler,
        .ot-remove-objection-handler,
        .ot-obj-leg-btn-handler,
        [aria-expanded],
        .ot-link-btn
      ) {
      background-color: @accent !important;
      border-color: @accent !important;
    }
    // Vendors List
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span {
      color: @text;
    }
    #onetrust-pc-sdk input[type="text"] {
      background-color: @mantle !important;
      border-color: @accent !important;
    }
    #onetrust-pc-sdk .ot-pc-header,
    #onetrust-pc-sdk ul li {
      border-bottom-color: @accent !important;
      border-top-color: @accent !important;
    }
    #ot-ven-lst {
      border-top-color: @accent !important;
    }
    .ot-pc-footer {
      border-top-color: @accent !important;
    }
    #onetrust-pc-sdk li > button {
      border-top-color: @accent !important;
    }
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk {
      background-color: @base !important;
    }
    // Sign Up Banner
    .dz_h98rH9nZCwfPdnKgr {
      background-image: none;
    }
    // Icon
    .RfidWIoz8FON2WhFoItU {
      color: @text;
    }
    // Playlist bottom
    .cuLHaM {
      background-color: @base;
    }
    // Left Sidebar
    #Desktop_LeftSidebar_Id {
      background-color: transparent;
    }
    // Sidebar top
    .y2UicQnlTq148rL8Y0jp {
      box-shadow: 0 6px 10px @mantle;
    }
    // Bottom player
    .vnCew8qzJq3cVGlYFXRI {
      background-color: @text;
    }
    .vnCew8qzJq3cVGlYFXRI * {
      fill: @crust;
    }

    .rovbQsmAS_mwvpKHaVhQ .PFgcCoJSWC3KjhZxHDYH * {
      fill: @text !important;
    }
    .TywOcKZEqNynWecCiATc {
      --bg-color: @surface1;
      --fg-color: @text;
      --is-active-fg-color: @accent;
    }
    a {
      color: @accent;
    }
    .Ng3dPPA2_1CFYkzPukjM {
      background: @blue;
    }
    .KAZD28usA1vPz5GVpm63.EHxL6K_6WWDlTCZP6x5w::after {
      background-color: @accent;
    }
    .tippy-box[data-theme~="activation"] {
      background-color: @accent;
      color: @crust;
      .c0KyMkxeMCWQGE7cR8s_ *,
      .TextForLabel-sc-1jqya9m-0.kIsEKW {
        color: @crust;
      }
    }
    .YIJxiTuPgMQav316cRqP {
      --generic-tooltip-background-color: @surface0;
    }
    .tippy-arrow {
      color: @surface0 !important;
    }
    .zrvvPyoxE6wQNqnu0yWA,
    .mjprSb2e1tKJpqwvgFSh,
    .jW4eWdr_LUeOXwPpKhWG {
      color: @text;
      background: @surface0;
    }
    input:checked ~ .Js64TOfWtHksI6TQ6knT {
      background: @accent !important;
    }
    .bXJ77rNIJ18Y0GfegQdr + label > :first-child {
      background: @text !important;
    }
    .Z35BWOA10YGn5uc9YgAp:focus-within,
    .Z35BWOA10YGn5uc9YgAp:hover,
    .Z35BWOA10YGn5uc9YgAp[data-context-menu-open="true"] {
      background: @mantle !important;
    }
    .wC9sIed7pfp47wZbmU6m:hover,
    .wC9sIed7pfp47wZbmU6m:not([aria-checked="true"]):focus {
      background: @surface0 !important;
    }
    .DuEPSADpSwCcO880xjUG:not(:first-child) > .QgtQw2NJz7giDZxap2BB::before {
      border-color: @surface0;
    }
    .pSxFsY9Fgcj5f8Gf05mh,
    .qyKJPLjz8o4jnbk92JOn {
      background-color: fade(@crust, 70%);
    }
    .eG930DCaQXDFqjhxRGIs > * {
      background: @crust !important;
    }
    .IconWrapper__Wrapper-sc-1hf1hjl-0.fIXqki svg {
      color: @text !important;
    }
    .IconWrapper__Wrapper-sc-1hf1hjl-0.bjlVXn svg.bneLcE {
      color: @base !important;
    }
    // Shuffle / Loop Icons
    .OF_3F0SQCsBtL1jSTlTA svg,
    .OF_3F0SQCsBtL1jSTlTA::after,
    .tP0mccyU1WAa7I9PevC1 svg,
    .tP0mccyU1WAa7I9PevC1::after {
      color: @accent !important;
    }
    // Full Screen Song Window
    .npv-up-next {
      background-color: @surface0 !important;
    }
    .mbUrqWP55sK6zhspiR72 button {
      color: @text !important;
    }
    .npv-lyrics__text-wrapper--previous p {
      color: @subtext1 !important;
    }
    .npv-lyrics__text-wrapper--current p {
      color: @text !important;
    }
    .npv-lyrics__text-wrapper--next p {
      color: @subtext0 !important;
    }
    .npv-lyrics__text--credits {
      color: @text !important;
    }
    // Context Menus
    div[data-tippy-root],
    #context-menu,
    #hover-or-focus-tooltip,
    .nYdM55iHFByRTzJUmx9X {
      border-radius: 8px;
      background-color: @surface0;
      color: @text;
    }
  }
}