Last.fm Nord Theme by gonlad-x

/* ==UserStyle==
@name Last.fm Nord Theme 
@namespace https://github.com/nordtheme/nord
@homepageURL https://github.com/nordtheme/nord
@version 1.1.9
@supportURL https://github.com/nordtheme/nord
@description Soothing pastel theme for Last.fm
@author Mth
@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== */

@-moz-document domain("last.fm") {
  @media (prefers-color-scheme: light) {
    #catppuccin(@lightFlavor, @accentColor);
  }
  @media (prefers-color-scheme: dark) {
    #catppuccin(@darkFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    @accent-color-dim: darken(@accent-color, 3%);

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    & when not (@lookup = latte) {
      @accent-color-dim: fadeout(@accent-color, 50);
      .layout-image {
        background: @base;
        .layout-image-image {
          &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"],
                    &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"],
                    &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"]
          {
            mix-blend-mode: screen;
            filter: invert(1);
          }
        }
      }
      [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"],
            [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"],
            [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"]
      {
        mix-blend-mode: screen;
        filter: invert(1);
      }
      .cover-art {
        background: @base;
      }
      .avatar::after,
      .cover-art::after,
      .image-list-item::after,
      .video-thumbnail::after {
        box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%);
      }
    }

    /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */
    body {
      color: @text;
      background: @base;
    }
    h1 {
      color: @accent-color;
    }
    .mimic-link {
      color: @sapphire;
    }
    hr {
      border-color: @overlay1;
    }
    a {
      color: @accent-color;
      &:hover {
        color: @accent-color-dim;
      }
    }

    // Mixin to dynamically set colors of album, artist and track categories

    .category-colors() {
      &artist {
        --category-background: @yellow;
      }
      &album {
        --category-background: @green;
      }
      &track {
        --category-background: @blue;
      }
    }

    // Evil image mask hack
    // Use as follows:
    // .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat);
    // Setting any value to "skip" skips that attribute
    .mask-image(@mask-image: url(""), @mask-color: skip, @mask-position: skip, @mask-size: skip, @mask-repeat: skip) {
      & when not (@mask-color = skip) {
        background-image: none !important;
        background-color: @mask-color;
      }
      & when not (@mask-image = skip) {
        mask-image: @mask-image;
        -webkit-mask-image: @mask-image;
      }
      & when not (@mask-position = skip) {
        mask-position: @mask-position;
        -webkit-mask-position: @mask-position;
      }
      & when not (@mask-size = skip) {
        mask-size: @mask-size;
        -webkit-mask-size: @mask-size;
      }
      & when not (@mask-repeat = skip) {
        mask-repeat: @mask-repeat;
        -webkit-mask-repeat: @mask-repeat;
      }
    }
    /* -----------------SETTINGS------------------- */
    .content-form .form-row-help-text,
    .footnotes {
      color: @overlay0;
    }
    .content-form legend {
      color: @subtext1;
    }
    .change-username-upsell {
      background: @mantle;
    }
    .change-username-faded h2::after {
      .mask-image(url("/static/images/icons/lock_dark_24@2x.a7652d49d507.png"), @overlay0, skip, 24px 24px, no-repeat);
    }
    /* -----------CHECKBOXES, DROPDOWNS AND RADIOS---------- */
    .lfm-form-radio input[type="radio"]:checked + label::before {
      border-color: @accent-color;
      box-shadow: inset 0 0 0 4px @accent-color;
      background-color: @base;
    }
    .lfm-form-radio input[type="radio"] + label::before {
      background-color: @crust;
      border-color: @surface1;
    }
    .content-form select {
      background-image: none; // Tempfix
    }

    /* HOME PAGE */
    .main-content,
    .container,
    .content-top-has-nav .content-top,
    .two-column-layout .content-top {
      background-color: @base;
    }

    .content-top-has-nav .content-top::after,
    .two-column-layout .content-top::after {
      border-top-color: @accent-color-dim;
    }

    .homefeed .content-top .secondary-nav-item-link--active,
    .home-welcome-header {
      color: @text;
    }
    .secondary-nav-item-link {
      color: @subtext0;
    }

    .secondary-nav-item-link:focus,
    .secondary-nav-item-link:hover,
    .homefeed .content-top .secondary-nav-item-link--active,
    .homefeed .content-top .secondary-nav-item-link--active:focus,
    .homefeed .content-top .secondary-nav-item-link--active:hover {
      color: @text;
    }

    .homefeed {
      .content-top .secondary-nav-item {
        &--artists,
        &--albums,
        &--tracks,
        &--events {
          .secondary-nav-item-link:hover::after {
            background-color: @accent-color-dim;
          }
        }
      }
      &--artists,
      &--albums,
      &--tracks,
      &--events {
        .content-top .secondary-nav-item-link--active::after {
          background-color: @accent-color-dim;
        }
      }
    }
    .recs-feed .recs-feed,
    .grid-items {
      &-cover-image-wrap::after {
        background-image: linear-gradient(
          180deg,
          transparent 0,
          rgba(@mantle, 0.4) 50%,
          rgba(@mantle, 0.7) 50%,
          rgba(@mantle, 0.7) 100%
        );
      }
    }

    .recs-feed .context {
      background: @mantle;
      color: @text;
      box-shadow: none;
      box-shadow:
        inset 1px 0 darken(@mantle, 3%),
        inset -1px -1px @crust;
    }
    .recs-feed .recs-feed-item {
      background: transparent;
      box-shadow: none;
    }

    .stationlink-list .stationlink {
      color: @subtext0;
      &:focus,
      &:hover {
        color: @text;
        &::before {
          background-color: @subtext0;
        }
      }
      &::after {
        border-bottom-color: @accent-color-dim;
      }
      &::before {
        background-color: @accent-color;
        -webkit-filter: invert(0%);
        filter: invert(0%);
      }
    }

    .subscribe-cta,
    .mpu-subscription-upsell,
    .mpu-subscription-upsell--mpu {
      display: none;
    }
    .join-cta {
      background-color: transparent;
    }
    .join-cta h3 {
      color: @accent-color;
    }

    .lazy-features-footer {
      display: none;
    }
    /* ERROR */
    #error {
      color: @text;
    }

    /* LIVE */
    /* MUSIC */
    .content-top-header {
      color: @accent-color;
    }

    .minimal-navigation-item-link {
      &,
      &:focus,
      &:hover {
        color: @subtext0;
      }
    }

    .minimal-navigation-item-link--active,
    .music-section-heading,
    .music-more-artists-item-name a,
    .music-releases-item-name a {
      &,
      &:focus,
      &:hover {
        color: @text;
      }
    }

    .music-releases-item-artist,
    .column-tracks-item-name,
    .column-tracks-item-artist,
    .music-gallery-artist {
      color: @text;
    }

    .music-section-rediscover-subscribe-banner-cta {
      background-color: @base;
    }

    /* PROFILE */
    /* BANNER */
    .header--overview .header-background {
      opacity: 0.4;
    }

    /* SEARCH */
    .artist-result-heading,
    .album-result-heading {
      color: @text;
    }

    /* RECOMMENDATIONS */
    & when not (@lookup = "latte") {
      .recs-feed-title a {
        color: @text !important;
      }
    }
    & when (@lookup = "latte") {
      .recs-feed-title a {
        color: @crust !important;
      }
    }
    .recs-feed-item,
    .recs-feed .rec...