From ca01b3d5af1f194df78f7a20172b25624303d8ec Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Thu, 12 Mar 2026 17:38:44 -0600
Subject: [PATCH 1/6] refactor(listenbrainz): init rewrite

---
 styles/listenbrainz/catppuccin.user.less | 858 +++++++----------------
 1 file changed, 258 insertions(+), 600 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index f1872cf8ca..669272faf9 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -13,11 +13,15 @@
 @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"]
+
+@var checkbox visitedLinks "Show lavender visited links" 0
+
 ==/UserStyle== */
 
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
 @-moz-document domain("listenbrainz.org") {
+
   :root {
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
@@ -27,668 +31,322 @@
     }
   }
 
+  
   #catppuccin(@flavor) {
     #lib.palette();
     #lib.defaults();
 
-    // We can't control which theme is passed to Toastify's props from CSS, but
-    // we can replace the default theme with whatever colours we want.
-    --toastify-color-light: @overlay0;
-    --toastify-text-color-light: @text;
-    --toastify-color-info: @blue;
-    --toastify-color-success: @green;
-    --toastify-color-warning: @yellow;
-    --toastify-color-error: @red;
-
-    body {
-      color: @text;
-      background-color: @base;
-
-      nav[role="navigation"] {
-        .navbar-header .navbar-toggle {
-          border-color: @accent;
-          .icon-bar {
-            background-color: @accent;
-          }
-        }
-
-        .navbar-logo > img {
-          @svg: escape(
-            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><path fill="@{mauve}" d="M13 1 1 8v14l12 7z"/><path fill="@{peach}" d="m14 1 12 7v14l-12 7z"/></svg>'
-          );
-          content: url("data:image/svg+xml,@{svg}");
-        }
-
-        #side-nav {
-          background-color: @mantle;
-          a,
-          a:visited {
-            color: @blue;
-            &:hover {
-              color: @sky;
-            }
-          }
-
-          .search-bar input {
-            background-color: @surface0;
-            color: @text;
-            &:focus {
-              box-shadow: inset 1px 2px 4px @surface1;
-              ~ button {
-                box-shadow: inset -3px 2px 4px @surface2;
-              }
-            }
-            ~ button {
-              background-color: @surface1;
-              color: @text;
-            }
-          }
-
-          .mobile-nav-fix {
-            background-color: transparent;
-          }
-        }
-
-        #side-nav-overlay {
-          background-color: @crust;
-        }
-      }
-    }
-
+    --bs-body-bg: @base;
+    --bs-body-color: @text;    
+    --bs-heading-color: @text;
+    --bs-secondary-color: @text;
+    --bs-navbar-color: @text;
+    
+    .btn {
+      --bs-btn-color: @accent;
+      --bs-btn-hover-bg: @accent;
+      --bs-btn-hover-color: @base;
+      --bs-btn-border-color: @accent;
+      --bs-btn-hover-border-color: @accent;
+    }
+    
+    // the little pill shaped buttons
+    .btn-info {
+      --bs-btn-bg: @accent;
+      --bs-btn-color: @base;
+      --bs-btn-active-bg: @accent;   // we don't do no tints and shades business,
+      --bs-btn-active-color: @base;  // so the active colours are the same
+    }
+    
     a {
-      color: @blue;
-      &:hover {
-        color: @sky;
-      }
-      &:visited:not(.btn) {
-        color: @lavender;
-        &:hover {
-          color: @sky;
-        }
-      }
-    }
-
-    h2,
-    h3,
-    h4 {
-      color: @text;
+      color: @accent;
     }
-
-    .text-muted,
-    .help-block {
-      color: @subtext0;
+    
+    a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) when (@visitedLinks = 1) {
+      color: @lavender;
     }
-
-    .text-success {
-      color: @green;
+    
+    a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
+      color: @sapphire;
     }
-
-    .text-danger {
-      color: @red;
-    }
-
-    a > svg.fa-link {
-      color: @text;
-    }
-
-    .form-control {
-      border-color: @base;
-      background-color: @surface0;
-      color: @text;
-    }
-
-    .panel {
-      background-color: @surface0;
-      color: @text;
-      border-color: @surface1;
-      .panel-heading {
-        background-color: @surface1;
-        outline-color: @surface2;
-      }
-    }
-
-    .well {
-      background-color: @surface0;
-      border-color: @mantle;
-    }
-
-    .toggle-switch {
-      background-color: @surface0;
-      &::before {
-        background-color: @overlay0;
-      }
-    }
-    .toggle-checkbox:checked + .toggle-switch {
-      background-color: @surface1;
-      &::before {
-        background-color: @accent;
-      }
-    }
-
-    .table {
-      tr {
-        > td,
-        > th {
-          border-color: @surface1;
+    
+    body nav[role="navigation"] {
+      .search-bar {
+        background-color: transparent;
+          
+        input, button {
+          background-color: fade(@lavender, 50%);
         }
-      }
-
-      &.table-striped > tbody > tr:nth-of-type(2n+1) {
-        background-color: @surface0;
-      }
-    }
-
-    .music-service-selection .music-service-option {
-      label {
-        background-color: @surface1;
-        border-color: fade(@green, 50%);
-      }
-
-      input[type="radio"]:checked + label {
-        background-color: fade(@green, 50%);
-        &::after {
-          color: @green;
-          border-color: @green;
-          background-color: @surface1;
+        
+        button {
+          color: @text;
         }
       }
-    }
-
-    .pill.secondary {
-      color: @text;
-      border-color: @subtext0;
-    }
-
-    .btn-primary,
-    .btn-info,
-    .btn-outline,
-    .musicbrainz-profile-button,
-    .lb-follow-button.block,
-    .pill.secondary.active {
-      color: @crust;
-      background-color: @accent;
-      border-color: transparent;
-
-      &:hover {
-        color: @crust;
-        background-color: darken(@accent, 5%);
-      }
-    }
-
-    .open > .dropdown-toggle.btn-info {
-      color: @crust;
-      background-color: darken(@accent, 10%);
-    }
-
-    .secondary-nav > ol.breadcrumb {
-      background-color: @mantle;
-      border-color: @crust;
-      > li.active {
-        color: @text;
-        border-color: transparent;
-      }
-    }
-
-    .secondary-nav .nav.nav-tabs {
-      background-color: @mantle;
-      border-color: @crust;
-      > li {
-        background-color: @mantle;
-        border-color: @crust;
-        > a {
-          background-color: transparent;
-          border-color: @crust;
-          color: @subtext1;
-          &.active {
-            border-bottom-color: transparent;
-          }
-        }
-        &:hover {
-          background-color: @surface0;
+      
+      #side-nav {
+        border-image: linear-gradient(180deg,@lavender,@peach) 1 100%;
+        
+        a {
+          color: @text;
         }
-
-        &.active {
+        
+        .sidebar-nav {
           background-color: @base;
-          border-bottom-color: transparent;
+          
+          .navbar-logo img {
+            @svg: escape('<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><span xmlns="" id="uas-port"/><defs><style>.b{fill:@{lavender};}.c{fill:@{peach};}</style></defs><polygon class="b" points="13 1 1 8 1 22 13 29 13 1"/><polygon class="c" points="14 1 26 8 26 22 14 29 14 1"/></svg>');
+            content: url('data:image/svg+xml,@{svg}');
+          }
         }
       }
-    }
-
-    @media (max-width: 991px) {
-      .secondary-nav::after {
-        background: linear-gradient(270deg, @crust, transparent);
-      }
-    }
-
-    .listen-header h3 {
-      color: @subtext0;
-      &::after {
-        border-top-color: @surface1;
-      }
-    }
-
-    .webSocket-box {
-      border-bottom-color: @mantle;
-      .read-more {
-        background-image: linear-gradient(to bottom, transparent, @base);
+      
+      #side-nav-overlay {
+        background: @base;
       }
     }
-
-    .heart-actions() {
-      .love {
-        stroke: @text;
-        &.loved {
-          color: @red;
-          stroke: transparent;
-        }
-        &:hover {
-          color: transparent;
-          stroke: @red;
-        }
+    
+    body nav[role="navigation"] .navbar-header {
+      border-image: linear-gradient(90deg, @lavender, @peach) 100% 1;
+      
+      .navbar-toggler {
+        border-color: @overlay0;
+        color: @text;
       }
-
-      .hate {
-        stroke: @text;
-        &.hated {
-          color: @mauve;
-          stroke: transparent;
-        }
-        &:hover {
-          color: transparent;
-          stroke: @mauve;
-        }
+      
+      .navbar-logo img {
+        @svg: escape('<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="215.7px" height="30px" viewBox="0 0 215.7 30" style="enable-background:new 0 0 215.7 30;" xml:space="preserve"><span xmlns="" id="uas-port"/><style type="text/css">	.st0{fill:@{lavender};}	.st1{fill:@{peach};}</style><g>	<g>		<polygon class="st0" points="14.4,1.1 2.4,8.1 2.4,22.1 14.4,29.1   "/>		<polygon class="st1" points="15.4,1.1 27.4,8.1 27.4,22.1 15.4,29.1   "/>	</g>	<g>		<path class="st0" d="M41.6,22.9h9.5v4.2h-15V4.4h5.5V22.9L41.6,22.9z"/>		<path class="st0" d="M53.2,5.9c0-0.8,0.3-1.4,0.8-1.9s1.2-0.7,2.1-0.7s1.6,0.2,2.1,0.7C58.8,4.5,59,5.1,59,5.9s-0.3,1.4-0.8,1.8    c-0.5,0.5-1.2,0.7-2.1,0.7S54.5,8.2,54,7.7S53.2,6.6,53.2,5.9z M58.8,27.1h-5.3V10.2h5.3V27.1L58.8,27.1z"/>		<path class="st0" d="M70.9,22.4c0-0.5-0.2-0.8-0.7-1.1c-0.5-0.3-1.4-0.5-2.7-0.8s-2.4-0.7-3.2-1.1c-0.8-0.5-1.5-1-2-1.7    s-0.7-1.5-0.7-2.3c0-1.6,0.6-2.8,1.9-3.8c1.3-1,3-1.5,5-1.5c2.2,0,4,0.5,5.4,1.5c1.3,1,2,2.3,2,4h-5.3c0-1.4-0.7-2-2.1-2    c-0.6,0-1,0.1-1.4,0.5c-0.4,0.3-0.6,0.7-0.6,1.1s0.2,0.9,0.7,1.1s1.2,0.5,2.2,0.7s1.9,0.4,2.6,0.7c2.5,0.9,3.8,2.4,3.8,4.7    c0,1.5-0.7,2.8-2.1,3.8s-3.1,1.5-5.3,1.5c-1.4,0-2.7-0.3-3.9-0.8c-1.1-0.5-2-1.2-2.7-2.1s-1-1.8-1-2.8H66c0,0.8,0.3,1.4,0.8,1.7    s1.1,0.5,1.9,0.5c0.7,0,1.3-0.1,1.6-0.4S70.9,22.8,70.9,22.4L70.9,22.4z"/>		<path class="st0" d="M84.5,6v4.2h2.8v3.6h-2.8v7.7c0,0.6,0.1,1.1,0.3,1.3c0.2,0.2,0.7,0.4,1.4,0.4c0.5,0,1,0,1.3-0.1V27    c-0.9,0.3-1.9,0.5-3,0.5c-1.8,0-3.2-0.4-4-1.3s-1.3-2.1-1.3-3.9v-8.4H77v-3.7h2.2V6H84.5L84.5,6z"/>		<path class="st0" d="M97.5,27.4c-2.6,0-4.7-0.8-6.3-2.3c-1.6-1.5-2.4-3.6-2.4-6v-0.4c0-1.7,0.3-3.2,1-4.6s1.6-2.3,2.8-3.1    c1.2-0.7,2.7-1.1,4.4-1.1c2.4,0,4.2,0.7,5.6,2.2s2.1,3.5,2.1,6.2v2H94.2c0.2,1,0.6,1.7,1.2,2.2s1.5,0.8,2.5,0.8    c1.7,0,3-0.6,3.9-1.8l2.4,2.8c-0.7,0.9-1.6,1.6-2.8,2.2C100.2,27.2,98.9,27.4,97.5,27.4L97.5,27.4z M96.9,14c-1.5,0-2.5,1-2.8,3.1    h5.3v-0.4c0-0.8-0.2-1.5-0.6-2S97.8,14,96.9,14L96.9,14z"/>		<path class="st0" d="M111.6,10.2l0.2,2c1.2-1.5,2.8-2.3,4.8-2.3c1.8,0,3.1,0.5,3.9,1.6s1.3,2.6,1.3,4.8v10.9h-5.3V16.5    c0-0.9-0.2-1.5-0.5-1.9s-1-0.6-1.9-0.6c-1,0-1.8,0.4-2.3,1.2v11.9h-5.3V10.2H111.6L111.6,10.2z"/>		<path class="st1" d="M125,27.1V4.4h8.2c2.9,0,5.1,0.5,6.7,1.6c1.5,1.1,2.3,2.6,2.3,4.7c0,1.2-0.3,2.2-0.8,3s-1.3,1.4-2.4,1.8    c1.2,0.3,2.1,0.9,2.7,1.8c0.6,0.9,1,1.9,1,3.1c0,2.2-0.7,3.9-2.1,5s-3.5,1.7-6.3,1.7H125L125,27.1z M130.5,13.9h2.9    c1.2,0,2-0.2,2.6-0.7c0.5-0.4,0.8-1.1,0.8-1.9c0-1-0.3-1.6-0.8-2.1c-0.6-0.4-1.4-0.6-2.7-0.6h-2.7v5.3H130.5z M130.5,17.5v5.4h3.6    c1,0,1.8-0.2,2.3-0.7s0.8-1.1,0.8-1.9c0-1.9-0.9-2.9-2.8-2.9C134.3,17.5,130.5,17.5,130.5,17.5z"/>		<path class="st1" d="M155.6,15l-1.7-0.1c-1.6,0-2.7,0.5-3.2,1.6v10.7h-5.3v-17h4.9l0.2,2.2c0.9-1.6,2.1-2.5,3.7-2.5    c0.6,0,1,0.1,1.5,0.2L155.6,15L155.6,15z"/>		<path class="st1" d="M166.6,27.1c-0.2-0.3-0.4-0.9-0.5-1.5c-1,1.2-2.3,1.8-4.1,1.8c-1.6,0-2.9-0.5-4.1-1.4c-1.1-1-1.7-2.2-1.7-3.6    c0-1.8,0.7-3.2,2-4.1c1.4-0.9,3.3-1.4,5.9-1.4h1.6V16c0-1.6-0.7-2.3-2-2.3c-1.2,0-1.9,0.6-1.9,1.9h-5.3c0-1.6,0.7-3,2.1-4    c1.4-1,3.2-1.5,5.3-1.5s3.9,0.5,5.1,1.6c1.2,1.1,1.9,2.5,1.9,4.3v7.5c0,1.5,0.3,2.7,0.7,3.6v0.3L166.6,27.1L166.6,27.1z     M163.3,23.7c0.7,0,1.2-0.1,1.6-0.4s0.7-0.6,0.9-1v-2.7h-1.5c-1.8,0-2.8,0.8-2.8,2.5c0,0.5,0.2,0.9,0.5,1.2    C162.3,23.5,162.8,23.7,163.3,23.7L163.3,23.7z"/>		<path class="st1" d="M174,5.9c0-0.8,0.3-1.4,0.8-1.9s1.2-0.7,2.1-0.7s1.6,0.2,2.1,0.7s0.8,1.1,0.8,1.9s-0.3,1.4-0.8,1.8    c-0.5,0.5-1.2,0.7-2.1,0.7s-1.6-0.2-2.1-0.7C174.2,7.2,174,6.6,174,5.9z M179.6,27.1h-5.3V10.2h5.3V27.1L179.6,27.1z"/>		<path class="st1" d="M187.6,10.2l0.2,2c1.2-1.5,2.8-2.3,4.8-2.3c1.8,0,3.1,0.5,3.9,1.6s1.3,2.6,1.4,4.8v10.9h-5.3V16.5    c0-0.9-0.2-1.5-0.5-1.9s-1-0.6-1.9-0.6c-1,0-1.8,0.4-2.3,1.2v11.9h-5.3V10.2H187.6L187.6,10.2z"/>		<path class="st1" d="M207,23.1h7.7v4.1h-14.3v-2.9l7.5-9.9h-7.2v-4.1h13.8v2.8L207,23.1L207,23.1z"/>	</g></g></svg>');
+        content: url('data:image/svg+xml,@{svg}');
       }
     }
-
-    .card {
-      background-color: @surface0;
-      border-color: transparent;
-      box-shadow:
-        fade(@surface0, 10%) 0 1px 1px,
-        fade(@surface0, 15%) 0 2px 2px,
-        fade(@surface0, 20%) 0 4px 4px;
-
-      &#listen-count-card {
-        margin-bottom: 5px;
-        border-color: @surface1;
+    
+    .secondary-nav {
+      &::after {
+        background: linear-gradient(270deg,@base,transparent);
       }
-
-      &.listen-card {
-        .listen-thumbnail > div {
-          color: @accent;
-          background-color: @surface1;
-          border-top-left-radius: 7px;
-          border-bottom-left-radius: 7px;
+      
+      .nav.nav-tabs {
+        background-color: @mantle;
+        
+        li {
+          background-color: @mantle;
+          border-bottom-color: @surface0;
+          
+          a {
+            color: @text;
+            border-left-color: @surface0;
+            border-right-color: @surface0;
+          }          
         }
-
-        .listen-time {
-          color: @subtext0;
+        
+        li.active {
+          background-color: @base;
+          
+          a {
+            border-bottom-color: @overlay0;
+          }
         }
-        .listen-controls {
-          .btn.dropdown-toggle,
-          .btn.play-button,
-          .btn-transparent[title="Reset"] {
-            color: @text;
-            &:hover,
-            &.playing {
-              color: @accent;
-            }
+        
+        li:not(.active) {
+          a:hover {
+            background-color: @surface0;
           }
-
-          .heart-actions();
         }
-
-        &.playing-now,
-        &.current-listen {
-          background-color: @surface1 !important;
-
-          .listen-thumbnail > div {
-            background-color: @surface2;
-            height: 100%;
+        
+        li.username {
+          background: linear-gradient(288deg, @peach 16.96%, @lavender 98.91%);
+          color: @text;
+          
+          a {
+            color: @base;
           }
         }
       }
     }
-
-    hr,
-    #listen-count-card hr,
-    .card-user-sn hr {
-      border-top-color: @surface1;
-    }
-
-    .follower-following-list,
-    .similar-users-list {
-      box-shadow: inset 0 11px 8px -10px @base;
-      > :not(:first-child) {
-        border-color: @surface1;
-      }
-    }
-
-    .progress {
-      background-color: @surface1;
-
-      .progress-bar.purple {
-        background-color: @mauve;
-      }
-
-      .progress-bar.orange {
-        background-color: @peach;
-      }
-
-      .progress-bar.red {
-        background-color: @red;
-      }
-    }
-
-    .dropdown-menu {
-      background-color: @overlay0;
-      button,
-      a {
-        color: @text !important;
-        &:visited {
-          color: @text !important;
-        }
-        &:hover {
-          background-color: fade(@accent, 30%) !important;
-        }
+    
+    .musicbrainz-profile-button {
+      background-color: @accent;
+      color: @base;
+      
+      img {
+        @svg: escape('<?xml version="1.0" encoding="UTF-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 27 30" enable-background="new 0 0 27 30" xml:space="preserve"><span xmlns="" id="uas-port"/><metadata>	<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">		<slices/>		<sliceSourceBounds height="28" width="25" y="-914" x="2963" bottomLeftOrigin="true"/>	</sfw></metadata><g></g><g>	<g>		<polygon fill="@{mauve}" points="13,1 1,8 1,22 13,29   "/>		<polygon fill="@{peach}" points="14,1 26,8 26,22 14,29   "/>	</g></g></svg>');
+        content: url('data:image/svg+xml,@{svg}');
       }
     }
-
-    .pager li {
-      > a,
-      > a:focus,
-      > a:visited,
-      a:active,
-      > span {
-        background-color: @surface0;
-        border-color: @surface1;
-
-        &:hover {
-          background-color: @surface1;
-        }
-      }
-
-      > a,
-      > a:focus,
-      > a:visited,
-      > a:active {
-        color: @blue;
-        &:hover {
-          color: @sky;
+    
+    .card {
+      border-color: @surface0;
+      --bs-card-box-shadow: 0px 1px 1px fade(@crust, 40%), 
+                            0px 2px 2px fade(@crust, 45%),
+                            0px 4px 4px fade(@crust, 50%);
+    }
+    
+    #listen-count-card hr {
+      border-color: @surface2;
+    }
+    
+    .listen-card {
+      &.playing-now {
+        background-color: fade(@accent, 20%) !important;
+      }
+      
+      .main-content {
+        .listen-time {
+          color: @subtext0
         }
-      }
-
-      &.disabled {
-        > a,
-        > a:focus,
-        > a:visited,
-        > a:active,
-        > span {
-          color: @text;
-          background-color: @surface0;
-          &:hover {
-            background-color: inherit;
+        
+        .listen-controls {
+          .btn {
+            background-color: transparent !important;
+            border-color: transparent !important;
           }
-        }
-      }
-    }
-
-    .react-datetime-picker {
-      .react-datetime-picker__wrapper {
-        border-color: @mantle;
-      }
-      .react-calendar {
-        background-color: @surface0;
-        border-color: @surface1;
-
-        .react-calendar__navigation,
-        .react-calendar__viewContainer {
-          button:disabled {
-            background-color: @surface2;
+          
+          .love, .hate {
+            stroke: @subtext0;
           }
-          button:enabled:hover {
-            background-color: @surface1;
+
+          .love:hover {
+            stroke: @maroon;
           }
-          button:enabled:focus {
-            background-color: transparent;
+          
+          .hate:hover {
+            stroke: @lavender;
           }
-
-          .react-calendar__tile--now {
-            background-color: @peach;
-            color: @crust;
-            &:enabled:hover {
-              background-color: @yellow;
-            }
+          
+          .dropdown-toggle {
+            color: @subtext0;
           }
-
-          .react-calendar__tile--hasActive,
-          .react-calendar__tile--active {
-            color: @text;
-            background-color: fade(@accent, 40%);
-            &:enabled:hover {
-              background-color: fade(@accent, 50%);
-            }
+          
+          .dropdown-toggle:hover {
+            color: @accent;
           }
         }
 
-        .react-calendar__month-view__days__day--neighboringMonth {
-          color: @subtext0;
-        }
-
-        .react-calendar__month-view__days__day--weekend {
-          color: @red;
-        }
-      }
-    }
-
-    .stats-full-width-graph {
-      line {
-        stroke: @subtext0 !important;
-      }
-
-      text {
-        fill: @text !important;
-      }
-
-      &.user-artist-map > div + div > div,
-      svg + div > div {
-        background-color: @overlay0 !important;
-        color: @text !important;
+        
       }
     }
-    rect[fill="#353070"] {
-      fill: @mauve;
-    }
-    rect[fill="#eb743b"] {
-      fill: @peach;
-    }
-    .badge-info {
-      background-color: @surface1;
-      color: @text;
-    }
-
-    .modal-content {
-      background-color: @mantle;
-      button.close {
-        color: @text;
-        opacity: 1;
-        text-shadow: none;
-      }
-
-      .track-search {
-        #recording-mbid,
-        .track-search-dropdown {
-          background-color: @surface0;
-          color: @text;
-          border-color: @crust;
-        }
-      }
 
-      .modal-header,
-      .modal-footer {
-        border-color: @crust;
-      }
+    .listen-thumbnail .not-mapped {
+      background-color: @surface0 !important;
+      color: @text !important;
     }
-
-    .explore-card {
-      background-color: @surface0;
-      filter: drop-shadow(0 4px 4px fade(@overlay0, 25%));
-      .explore-card-img {
-        border-color: @surface0;
-      }
-      .explore-card-text {
-        background-color: @surface0;
-      }
+    
+    // see more fresh listens overlay
+    .webSocket-box .read-more {
+      background-image: linear-gradient(180deg,transparent, @base 80%)
     }
-
-    .sidebar {
-      background-color: @mantle;
-      .sidebar-header {
-        background-color: @crust;
-        color: @text;
+    
+    .pill {
+      border-color: @subtext0;
+      color: @subtext0;
+      
+      &.secondary.active {
+        background-color: @accent;
+        color: @base;
       }
-      .sidenav-content-grid {
-        background: transparent;
+      
+      &.active {
+        border-color: transparent;
       }
     }
-    .rc-slider-rail {
-      background-color: @surface1;
-    }
-    .rc-slider-handle {
+    
+    .lb-follow-button {
       background-color: @accent;
-      &.rc-slider-handle-dragging {
-        background-color: @accent;
+      color: @base;
+      border-color: @accent;
+      
+      &:hover {
+        background-color: @base;
         border-color: @accent;
+        color: @accent;
       }
-    }
-    .rc-slider-mark-text {
-      color: @subtext0;
-    }
-    .release-card-grid-title {
-      background-color: transparent;
-      &::before,
-      &::after {
-        border-color: @surface0;
+      
+      &.following {
+        background-color: @base;
+        border-color: @accent;
+        color: @accent;
       }
     }
-
-    #homepage-container {
-      @homepage-bg: linear-gradient(288deg, @peach 16.96%, @mauve 98.91%);
-      @flipped-blue: if(
-        @flavor = latte,
-        @catppuccin[@mocha][@blue],
-        @catppuccin[@latte][@blue]
-      );
-      @flipped-sky: if(
-        @flavor = latte,
-        @catppuccin[@mocha][@sky],
-        @catppuccin[@latte][@sky]
-      );
-
-      .homepage-upper {
-        background: @homepage-bg;
-
-        h1 {
-          color: @crust;
-        }
-        .homepage-info {
-          h1 {
-            color: @text;
-          }
-
-          .homepage-info-links > a {
-            color: @blue;
-            &:hover {
-              color: @sky;
-            }
-          }
-        }
-
-        .homepage-upper-grey-box {
-          background-color: @base;
-        }
-      }
-
-      .homepage-lower {
-        background: @homepage-bg;
-        h1 {
-          color: @text;
-        }
-
-        .homepage-info {
-          color: @crust;
-          h1 {
-            color: @crust;
-          }
-
-          .homepage-info-links > a {
-            color: @flipped-blue;
-            &:hover {
-              color: @flipped-sky;
-            }
-          }
-        }
-
-        .homepage-lower-grey-box {
-          background-color: @base;
-        }
-      }
-
-      .homepage-info {
-        color: @text;
-        .create-account-button {
-          background-color: @accent;
-          color: @crust;
-          &:hover {
-            background-color: darken(@accent, 5%);
-          }
-        }
-      }
+    
+    .follower-following-list > :not(:first-child),
+    .similar-users-list > :not(:first-child) {
+      border-color: @surface2;
     }
-
-    #brainz-player {
-      background-color: @mantle;
-      border-color: @crust;
-
+    
+    .similarity-score {
       .progress {
-        background-color: @surface1;
-        > .progress-bar {
-          background-color: @accent;
-        }
-      }
-
-      .no-album-art {
-        background-color: transparent;
-      }
-
-      .controls > .btn-link,
-      .actions > a {
-        color: @accent;
+        background-color: @surface2;
       }
-
-      .actions {
-        .heart-actions();
-
-        .fa-ellipsis-vertical {
-          stroke: @accent;
+      
+      .progress-bar {
+        &.orange {
+          background-color: @peach;
+        }
+        
+        &.red {
+          background-color: @red;
         }
       }
-
-      .dropup-content {
-        .dropdown-menu();
+      
+      p.text-muted {
+        color: @subtext0 !important;
       }
     }
-
-    .footer {
-      background-color: @mantle;
-      color: @text;
-      border-color: @crust;
-      .color-gray {
-        color: @subtext0;
+    
+    // bar graphs and various other graphs
+    rect[fill="#353070"] {
+      fill: @lavender;
+    }
+    
+    rect[fill="#eb743b"] {
+      fill: @peach;
+    }
+    
+    rect[fill="#f47560"],
+    circle[fill="#f47560"],
+    path[fill="rgba(244, 117, 96, 1)"] {
+      fill: @red;
+    }
+    
+    rect[fill="#e8c1a0"], 
+    circle[fill="#e8c1a0"], 
+    path[fill="rgba(232, 193, 160, 1)"] {
+      fill: @mauve;
+    }
+    
+    rect[fill="#f1e15b"], 
+    circle[fill="#f1e15b"], 
+    path[fill="rgba(241, 225, 91, 1)"] {
+      fill: @yellow;
+    }
+    
+    rect[fill="#61cdbb"],
+    circle[fill="#61cdbb"],
+    path[fill="rgba(97, 205, 187, 1)"] {
+      fill: @green;
+    }
+    
+    rect[fill="#97e3d5"],
+    circle[fill="#97e3d5"],
+    path[fill="rgba(151, 227, 213, 1)"] {
+      fill: @blue;
+    }
+    
+    rect[fill="#e8a838"],
+    circle[fill="#e8a838"],
+    path[fill="rgba(232, 168, 56, 1)"] {
+      fill: @peach;
+    }
+    
+    // the little overlay at the bottom of cover arts
+    g.caption {
+      rect[fill="#0000007a"] {
+        fill: fade(@base, 90%);
       }
-      .section-line {
-        border-color: @crust;
+      text[fill="white"] {
+        fill: @text;
       }
     }
+
+    
   }
 }

From ccdf6b29c12aa75f43364585747ae115c333fad6 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Thu, 12 Mar 2026 17:44:58 -0600
Subject: [PATCH 2/6] styles(listenbrainz): lint and format

---
 styles/listenbrainz/catppuccin.user.less | 171 ++++++++++++-----------
 1 file changed, 86 insertions(+), 85 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index 669272faf9..45197dba24 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -21,7 +21,6 @@
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
 @-moz-document domain("listenbrainz.org") {
-
   :root {
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
@@ -31,17 +30,16 @@
     }
   }
 
-  
   #catppuccin(@flavor) {
     #lib.palette();
     #lib.defaults();
 
     --bs-body-bg: @base;
-    --bs-body-color: @text;    
+    --bs-body-color: @text;
     --bs-heading-color: @text;
     --bs-secondary-color: @text;
     --bs-navbar-color: @text;
-    
+
     .btn {
       --bs-btn-color: @accent;
       --bs-btn-hover-bg: @accent;
@@ -49,157 +47,164 @@
       --bs-btn-border-color: @accent;
       --bs-btn-hover-border-color: @accent;
     }
-    
+
     // the little pill shaped buttons
     .btn-info {
       --bs-btn-bg: @accent;
       --bs-btn-color: @base;
-      --bs-btn-active-bg: @accent;   // we don't do no tints and shades business,
-      --bs-btn-active-color: @base;  // so the active colours are the same
+      --bs-btn-active-bg: @accent; // we don't do no tints and shades business,
+      --bs-btn-active-color: @base; // so the active colours are the same
     }
-    
+
     a {
       color: @accent;
     }
-    
-    a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) when (@visitedLinks = 1) {
+
+    a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item)
+    when (@visitedLinks = 1) {
       color: @lavender;
     }
-    
+
     a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
       color: @sapphire;
     }
-    
+
     body nav[role="navigation"] {
       .search-bar {
         background-color: transparent;
-          
+
         input, button {
           background-color: fade(@lavender, 50%);
         }
-        
+
         button {
           color: @text;
         }
       }
-      
+
       #side-nav {
-        border-image: linear-gradient(180deg,@lavender,@peach) 1 100%;
-        
+        border-image: linear-gradient(180deg, @lavender, @peach) 1 100%;
+
         a {
           color: @text;
         }
-        
+
         .sidebar-nav {
           background-color: @base;
-          
+
           .navbar-logo img {
-            @svg: escape('<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><span xmlns="" id="uas-port"/><defs><style>.b{fill:@{lavender};}.c{fill:@{peach};}</style></defs><polygon class="b" points="13 1 1 8 1 22 13 29 13 1"/><polygon class="c" points="14 1 26 8 26 22 14 29 14 1"/></svg>');
-            content: url('data:image/svg+xml,@{svg}');
+            @svg: escape(
+              '<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><span xmlns="" id="uas-port"/><defs><style>.b{fill:@{lavender};}.c{fill:@{peach};}</style></defs><polygon class="b" points="13 1 1 8 1 22 13 29 13 1"/><polygon class="c" points="14 1 26 8 26 22 14 29 14 1"/></svg>'
+            );
+            content: url("data:image/svg+xml,@{svg}");
           }
         }
       }
-      
+
       #side-nav-overlay {
         background: @base;
       }
     }
-    
+
     body nav[role="navigation"] .navbar-header {
       border-image: linear-gradient(90deg, @lavender, @peach) 100% 1;
-      
+
       .navbar-toggler {
         border-color: @overlay0;
         color: @text;
       }
-      
+
       .navbar-logo img {
-        @svg: escape('<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="215.7px" height="30px" viewBox="0 0 215.7 30" style="enable-background:new 0 0 215.7 30;" xml:space="preserve"><span xmlns="" id="uas-port"/><style type="text/css">	.st0{fill:@{lavender};}	.st1{fill:@{peach};}</style><g>	<g>		<polygon class="st0" points="14.4,1.1 2.4,8.1 2.4,22.1 14.4,29.1   "/>		<polygon class="st1" points="15.4,1.1 27.4,8.1 27.4,22.1 15.4,29.1   "/>	</g>	<g>		<path class="st0" d="M41.6,22.9h9.5v4.2h-15V4.4h5.5V22.9L41.6,22.9z"/>		<path class="st0" d="M53.2,5.9c0-0.8,0.3-1.4,0.8-1.9s1.2-0.7,2.1-0.7s1.6,0.2,2.1,0.7C58.8,4.5,59,5.1,59,5.9s-0.3,1.4-0.8,1.8    c-0.5,0.5-1.2,0.7-2.1,0.7S54.5,8.2,54,7.7S53.2,6.6,53.2,5.9z M58.8,27.1h-5.3V10.2h5.3V27.1L58.8,27.1z"/>		<path class="st0" d="M70.9,22.4c0-0.5-0.2-0.8-0.7-1.1c-0.5-0.3-1.4-0.5-2.7-0.8s-2.4-0.7-3.2-1.1c-0.8-0.5-1.5-1-2-1.7    s-0.7-1.5-0.7-2.3c0-1.6,0.6-2.8,1.9-3.8c1.3-1,3-1.5,5-1.5c2.2,0,4,0.5,5.4,1.5c1.3,1,2,2.3,2,4h-5.3c0-1.4-0.7-2-2.1-2    c-0.6,0-1,0.1-1.4,0.5c-0.4,0.3-0.6,0.7-0.6,1.1s0.2,0.9,0.7,1.1s1.2,0.5,2.2,0.7s1.9,0.4,2.6,0.7c2.5,0.9,3.8,2.4,3.8,4.7    c0,1.5-0.7,2.8-2.1,3.8s-3.1,1.5-5.3,1.5c-1.4,0-2.7-0.3-3.9-0.8c-1.1-0.5-2-1.2-2.7-2.1s-1-1.8-1-2.8H66c0,0.8,0.3,1.4,0.8,1.7    s1.1,0.5,1.9,0.5c0.7,0,1.3-0.1,1.6-0.4S70.9,22.8,70.9,22.4L70.9,22.4z"/>		<path class="st0" d="M84.5,6v4.2h2.8v3.6h-2.8v7.7c0,0.6,0.1,1.1,0.3,1.3c0.2,0.2,0.7,0.4,1.4,0.4c0.5,0,1,0,1.3-0.1V27    c-0.9,0.3-1.9,0.5-3,0.5c-1.8,0-3.2-0.4-4-1.3s-1.3-2.1-1.3-3.9v-8.4H77v-3.7h2.2V6H84.5L84.5,6z"/>		<path class="st0" d="M97.5,27.4c-2.6,0-4.7-0.8-6.3-2.3c-1.6-1.5-2.4-3.6-2.4-6v-0.4c0-1.7,0.3-3.2,1-4.6s1.6-2.3,2.8-3.1    c1.2-0.7,2.7-1.1,4.4-1.1c2.4,0,4.2,0.7,5.6,2.2s2.1,3.5,2.1,6.2v2H94.2c0.2,1,0.6,1.7,1.2,2.2s1.5,0.8,2.5,0.8    c1.7,0,3-0.6,3.9-1.8l2.4,2.8c-0.7,0.9-1.6,1.6-2.8,2.2C100.2,27.2,98.9,27.4,97.5,27.4L97.5,27.4z M96.9,14c-1.5,0-2.5,1-2.8,3.1    h5.3v-0.4c0-0.8-0.2-1.5-0.6-2S97.8,14,96.9,14L96.9,14z"/>		<path class="st0" d="M111.6,10.2l0.2,2c1.2-1.5,2.8-2.3,4.8-2.3c1.8,0,3.1,0.5,3.9,1.6s1.3,2.6,1.3,4.8v10.9h-5.3V16.5    c0-0.9-0.2-1.5-0.5-1.9s-1-0.6-1.9-0.6c-1,0-1.8,0.4-2.3,1.2v11.9h-5.3V10.2H111.6L111.6,10.2z"/>		<path class="st1" d="M125,27.1V4.4h8.2c2.9,0,5.1,0.5,6.7,1.6c1.5,1.1,2.3,2.6,2.3,4.7c0,1.2-0.3,2.2-0.8,3s-1.3,1.4-2.4,1.8    c1.2,0.3,2.1,0.9,2.7,1.8c0.6,0.9,1,1.9,1,3.1c0,2.2-0.7,3.9-2.1,5s-3.5,1.7-6.3,1.7H125L125,27.1z M130.5,13.9h2.9    c1.2,0,2-0.2,2.6-0.7c0.5-0.4,0.8-1.1,0.8-1.9c0-1-0.3-1.6-0.8-2.1c-0.6-0.4-1.4-0.6-2.7-0.6h-2.7v5.3H130.5z M130.5,17.5v5.4h3.6    c1,0,1.8-0.2,2.3-0.7s0.8-1.1,0.8-1.9c0-1.9-0.9-2.9-2.8-2.9C134.3,17.5,130.5,17.5,130.5,17.5z"/>		<path class="st1" d="M155.6,15l-1.7-0.1c-1.6,0-2.7,0.5-3.2,1.6v10.7h-5.3v-17h4.9l0.2,2.2c0.9-1.6,2.1-2.5,3.7-2.5    c0.6,0,1,0.1,1.5,0.2L155.6,15L155.6,15z"/>		<path class="st1" d="M166.6,27.1c-0.2-0.3-0.4-0.9-0.5-1.5c-1,1.2-2.3,1.8-4.1,1.8c-1.6,0-2.9-0.5-4.1-1.4c-1.1-1-1.7-2.2-1.7-3.6    c0-1.8,0.7-3.2,2-4.1c1.4-0.9,3.3-1.4,5.9-1.4h1.6V16c0-1.6-0.7-2.3-2-2.3c-1.2,0-1.9,0.6-1.9,1.9h-5.3c0-1.6,0.7-3,2.1-4    c1.4-1,3.2-1.5,5.3-1.5s3.9,0.5,5.1,1.6c1.2,1.1,1.9,2.5,1.9,4.3v7.5c0,1.5,0.3,2.7,0.7,3.6v0.3L166.6,27.1L166.6,27.1z     M163.3,23.7c0.7,0,1.2-0.1,1.6-0.4s0.7-0.6,0.9-1v-2.7h-1.5c-1.8,0-2.8,0.8-2.8,2.5c0,0.5,0.2,0.9,0.5,1.2    C162.3,23.5,162.8,23.7,163.3,23.7L163.3,23.7z"/>		<path class="st1" d="M174,5.9c0-0.8,0.3-1.4,0.8-1.9s1.2-0.7,2.1-0.7s1.6,0.2,2.1,0.7s0.8,1.1,0.8,1.9s-0.3,1.4-0.8,1.8    c-0.5,0.5-1.2,0.7-2.1,0.7s-1.6-0.2-2.1-0.7C174.2,7.2,174,6.6,174,5.9z M179.6,27.1h-5.3V10.2h5.3V27.1L179.6,27.1z"/>		<path class="st1" d="M187.6,10.2l0.2,2c1.2-1.5,2.8-2.3,4.8-2.3c1.8,0,3.1,0.5,3.9,1.6s1.3,2.6,1.4,4.8v10.9h-5.3V16.5    c0-0.9-0.2-1.5-0.5-1.9s-1-0.6-1.9-0.6c-1,0-1.8,0.4-2.3,1.2v11.9h-5.3V10.2H187.6L187.6,10.2z"/>		<path class="st1" d="M207,23.1h7.7v4.1h-14.3v-2.9l7.5-9.9h-7.2v-4.1h13.8v2.8L207,23.1L207,23.1z"/>	</g></g></svg>');
-        content: url('data:image/svg+xml,@{svg}');
+        @svg: escape(
+          '<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="215.7px" height="30px" viewBox="0 0 215.7 30" xml:space="preserve" enable-background="new 0 0 215.7 30"><span xmlns="" id="uas-port"/><style type="text/css">.st0{fill:@{lavender};}	.st1{fill:@{peach};}</style><polygon class="st0" points="14.4,1.1 2.4,8.1 2.4,22.1 14.4,29.1"/><polygon class="st1" points="15.4,1.1 27.4,8.1 27.4,22.1 15.4,29.1"/><path class="st0" d="M41.6 22.9h9.5v4.2h-15V4.4h5.5zm11.6-17c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7c.6.5.8 1.1.8 1.9s-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm12.1-4.7c0-.5-.2-.8-.7-1.1s-1.4-.5-2.7-.8-2.4-.7-3.2-1.1c-.8-.5-1.5-1-2-1.7s-.7-1.5-.7-2.3c0-1.6.6-2.8 1.9-3.8s3-1.5 5-1.5q3.3 0 5.4 1.5c1.3 1 2 2.3 2 4h-5.3c0-1.4-.7-2-2.1-2-.6 0-1 .1-1.4.5-.4.3-.6.7-.6 1.1s.2.9.7 1.1 1.2.5 2.2.7 1.9.4 2.6.7c2.5.9 3.8 2.4 3.8 4.7 0 1.5-.7 2.8-2.1 3.8s-3.1 1.5-5.3 1.5c-1.4 0-2.7-.3-3.9-.8q-1.65-.75-2.7-2.1c-1.05-1.35-1-1.8-1-2.8H66c0 .8.3 1.4.8 1.7s1.1.5 1.9.5c.7 0 1.3-.1 1.6-.4s.6-1 .6-1.4M84.5 6v4.2h2.8v3.6h-2.8v7.7c0 .6.1 1.1.3 1.3s.7.4 1.4.4c.5 0 1 0 1.3-.1V27c-.9.3-1.9.5-3 .5-1.8 0-3.2-.4-4-1.3s-1.3-2.1-1.3-3.9v-8.4H77v-3.7h2.2V6zm13 21.4c-2.6 0-4.7-.8-6.3-2.3s-2.4-3.6-2.4-6v-.4c0-1.7.3-3.2 1-4.6s1.6-2.3 2.8-3.1c1.2-.7 2.7-1.1 4.4-1.1 2.4 0 4.2.7 5.6 2.2s2.1 3.5 2.1 6.2v2H94.2c.2 1 .6 1.7 1.2 2.2s1.5.8 2.5.8q2.55 0 3.9-1.8l2.4 2.8c-.7.9-1.6 1.6-2.8 2.2-1.2.7-2.5.9-3.9.9M96.9 14c-1.5 0-2.5 1-2.8 3.1h5.3v-.4c0-.8-.2-1.5-.6-2s-1-.7-1.9-.7m14.7-3.8.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.3 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2z"/><path class="st1" d="M125 27.1V4.4h8.2c2.9 0 5.1.5 6.7 1.6 1.5 1.1 2.3 2.6 2.3 4.7 0 1.2-.3 2.2-.8 3s-1.3 1.4-2.4 1.8q1.8.45 2.7 1.8c.6.9 1 1.9 1 3.1 0 2.2-.7 3.9-2.1 5s-3.5 1.7-6.3 1.7zm5.5-13.2h2.9c1.2 0 2-.2 2.6-.7.5-.4.8-1.1.8-1.9 0-1-.3-1.6-.8-2.1-.6-.4-1.4-.6-2.7-.6h-2.7v5.3zm0 3.6v5.4h3.6c1 0 1.8-.2 2.3-.7s.8-1.1.8-1.9c0-1.9-.9-2.9-2.8-2.9-.1.1-3.9.1-3.9.1m25.1-2.5-1.7-.1c-1.6 0-2.7.5-3.2 1.6v10.7h-5.3v-17h4.9l.2 2.2c.9-1.6 2.1-2.5 3.7-2.5.6 0 1 .1 1.5.2zm11 12.1c-.2-.3-.4-.9-.5-1.5-1 1.2-2.3 1.8-4.1 1.8-1.6 0-2.9-.5-4.1-1.4-1.1-1-1.7-2.2-1.7-3.6 0-1.8.7-3.2 2-4.1 1.4-.9 3.3-1.4 5.9-1.4h1.6V16c0-1.6-.7-2.3-2-2.3-1.2 0-1.9.6-1.9 1.9h-5.3c0-1.6.7-3 2.1-4s3.2-1.5 5.3-1.5 3.9.5 5.1 1.6 1.9 2.5 1.9 4.3v7.5c0 1.5.3 2.7.7 3.6v.3zm-3.3-3.4c.7 0 1.2-.1 1.6-.4s.7-.6.9-1v-2.7h-1.5c-1.8 0-2.8.8-2.8 2.5 0 .5.2.9.5 1.2.3.2.8.4 1.3.4M174 5.9c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7.8 1.1.8 1.9-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7c-.6-.5-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm8-16.9.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.4 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2zM207 23.1h7.7v4.1h-14.3v-2.9l7.5-9.9h-7.2v-4.1h13.8v2.8z"/></svg>'
+        );
+        content: url("data:image/svg+xml,@{svg}");
       }
     }
-    
+
     .secondary-nav {
       &::after {
-        background: linear-gradient(270deg,@base,transparent);
+        background: linear-gradient(270deg, @base, transparent);
       }
-      
+
       .nav.nav-tabs {
         background-color: @mantle;
-        
+
         li {
           background-color: @mantle;
           border-bottom-color: @surface0;
-          
+
           a {
             color: @text;
             border-left-color: @surface0;
             border-right-color: @surface0;
-          }          
+          }
         }
-        
+
         li.active {
           background-color: @base;
-          
+
           a {
             border-bottom-color: @overlay0;
           }
         }
-        
+
         li:not(.active) {
           a:hover {
             background-color: @surface0;
           }
         }
-        
+
         li.username {
           background: linear-gradient(288deg, @peach 16.96%, @lavender 98.91%);
           color: @text;
-          
+
           a {
             color: @base;
           }
         }
       }
     }
-    
+
     .musicbrainz-profile-button {
       background-color: @accent;
       color: @base;
-      
+
       img {
-        @svg: escape('<?xml version="1.0" encoding="UTF-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 27 30" enable-background="new 0 0 27 30" xml:space="preserve"><span xmlns="" id="uas-port"/><metadata>	<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">		<slices/>		<sliceSourceBounds height="28" width="25" y="-914" x="2963" bottomLeftOrigin="true"/>	</sfw></metadata><g></g><g>	<g>		<polygon fill="@{mauve}" points="13,1 1,8 1,22 13,29   "/>		<polygon fill="@{peach}" points="14,1 26,8 26,22 14,29   "/>	</g></g></svg>');
-        content: url('data:image/svg+xml,@{svg}');
+        @svg: escape(
+          '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 27 30" enable-background="new 0 0 27 30" xml:space="preserve"><span xmlns=""/><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds height="28" width="25" y="-914" x="2963" bottomLeftOrigin="true"/></sfw></metadata><g/><polygon fill="@{mauve}" points="13,1 1,8 1,22 13,29"/><polygon fill="@{peach}" points="14,1 26,8 26,22 14,29"/></svg>'
+        );
+        content: url("data:image/svg+xml,@{svg}");
       }
     }
-    
+
     .card {
       border-color: @surface0;
-      --bs-card-box-shadow: 0px 1px 1px fade(@crust, 40%), 
-                            0px 2px 2px fade(@crust, 45%),
-                            0px 4px 4px fade(@crust, 50%);
+      --bs-card-box-shadow:
+        0px 1px 1px fade(@crust, 40%), 0px 2px 2px fade(@crust, 45%), 0px 4px
+        4px fade(@crust, 50%);
     }
-    
+
     #listen-count-card hr {
       border-color: @surface2;
     }
-    
+
     .listen-card {
       &.playing-now {
         background-color: fade(@accent, 20%) !important;
       }
-      
+
       .main-content {
         .listen-time {
-          color: @subtext0
+          color: @subtext0;
         }
-        
+
         .listen-controls {
           .btn {
             background-color: transparent !important;
             border-color: transparent !important;
           }
-          
+
           .love, .hate {
             stroke: @subtext0;
           }
@@ -207,21 +212,19 @@
           .love:hover {
             stroke: @maroon;
           }
-          
+
           .hate:hover {
             stroke: @lavender;
           }
-          
+
           .dropdown-toggle {
             color: @subtext0;
           }
-          
+
           .dropdown-toggle:hover {
             color: @accent;
           }
         }
-
-        
       }
     }
 
@@ -229,114 +232,114 @@
       background-color: @surface0 !important;
       color: @text !important;
     }
-    
+
     // see more fresh listens overlay
     .webSocket-box .read-more {
-      background-image: linear-gradient(180deg,transparent, @base 80%)
+      background-image: linear-gradient(180deg, transparent, @base 80%);
     }
-    
+
     .pill {
       border-color: @subtext0;
       color: @subtext0;
-      
+
       &.secondary.active {
         background-color: @accent;
         color: @base;
       }
-      
+
       &.active {
         border-color: transparent;
       }
     }
-    
+
     .lb-follow-button {
       background-color: @accent;
       color: @base;
       border-color: @accent;
-      
+
       &:hover {
         background-color: @base;
         border-color: @accent;
         color: @accent;
       }
-      
+
       &.following {
         background-color: @base;
         border-color: @accent;
         color: @accent;
       }
     }
-    
+
     .follower-following-list > :not(:first-child),
     .similar-users-list > :not(:first-child) {
       border-color: @surface2;
     }
-    
+
     .similarity-score {
       .progress {
         background-color: @surface2;
       }
-      
+
       .progress-bar {
         &.orange {
           background-color: @peach;
         }
-        
+
         &.red {
           background-color: @red;
         }
       }
-      
+
       p.text-muted {
         color: @subtext0 !important;
       }
     }
-    
+
     // bar graphs and various other graphs
     rect[fill="#353070"] {
       fill: @lavender;
     }
-    
+
     rect[fill="#eb743b"] {
       fill: @peach;
     }
-    
+
     rect[fill="#f47560"],
     circle[fill="#f47560"],
     path[fill="rgba(244, 117, 96, 1)"] {
       fill: @red;
     }
-    
-    rect[fill="#e8c1a0"], 
-    circle[fill="#e8c1a0"], 
+
+    rect[fill="#e8c1a0"],
+    circle[fill="#e8c1a0"],
     path[fill="rgba(232, 193, 160, 1)"] {
       fill: @mauve;
     }
-    
-    rect[fill="#f1e15b"], 
-    circle[fill="#f1e15b"], 
+
+    rect[fill="#f1e15b"],
+    circle[fill="#f1e15b"],
     path[fill="rgba(241, 225, 91, 1)"] {
       fill: @yellow;
     }
-    
+
     rect[fill="#61cdbb"],
     circle[fill="#61cdbb"],
     path[fill="rgba(97, 205, 187, 1)"] {
       fill: @green;
     }
-    
+
     rect[fill="#97e3d5"],
     circle[fill="#97e3d5"],
     path[fill="rgba(151, 227, 213, 1)"] {
       fill: @blue;
     }
-    
+
     rect[fill="#e8a838"],
     circle[fill="#e8a838"],
     path[fill="rgba(232, 168, 56, 1)"] {
       fill: @peach;
     }
-    
+
     // the little overlay at the bottom of cover arts
     g.caption {
       rect[fill="#0000007a"] {
@@ -346,7 +349,5 @@
         fill: @text;
       }
     }
-
-    
   }
 }

From 0966fd0876b654ce44d0e693f9d58f5abe889b01 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Fri, 13 Mar 2026 17:44:33 -0600
Subject: [PATCH 3/6] refactor(listenbrainz): remove lavender links option

---
 styles/listenbrainz/catppuccin.user.less | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index 45197dba24..4194712557 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -14,8 +14,6 @@
 @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"]
 
-@var checkbox visitedLinks "Show lavender visited links" 0
-
 ==/UserStyle== */
 
 @import "https://userstyles.catppuccin.com/lib/lib.less";
@@ -60,13 +58,9 @@
       color: @accent;
     }
 
-    a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item)
-    when (@visitedLinks = 1) {
-      color: @lavender;
-    }
-
+    
     a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
-      color: @sapphire;
+      color: @lavender;
     }
 
     body nav[role="navigation"] {

From b12fefc616772f087a722a329bbdda17ad358e3a Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Fri, 13 Mar 2026 17:46:09 -0600
Subject: [PATCH 4/6] fix(listenbrainz): add darkened styles for active and
 hovered buttons

---
 styles/listenbrainz/catppuccin.user.less | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index 4194712557..50d4ad9478 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -50,8 +50,12 @@
     .btn-info {
       --bs-btn-bg: @accent;
       --bs-btn-color: @base;
-      --bs-btn-active-bg: @accent; // we don't do no tints and shades business,
-      --bs-btn-active-color: @base; // so the active colours are the same
+      --bs-btn-border-color: @accent;
+      --bs-btn-active-bg: darken(@accent, 5%); 
+      --bs-btn-active-color: @base;
+      --bs-btn-hover-bg: darken(@accent, 5%);
+      --bs-btn-hover-color: @base;
+      --bs-btn-hover-border-color: @accent;
     }
 
     a {

From a3f359084a37bd107e2d608bc30459748f70f327 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Fri, 13 Mar 2026 17:48:03 -0600
Subject: [PATCH 5/6] fix(listenbrainz): isolate button styling to each button
 type

---
 styles/listenbrainz/catppuccin.user.less | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index 50d4ad9478..166cfcc4e5 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -38,13 +38,6 @@
     --bs-secondary-color: @text;
     --bs-navbar-color: @text;
 
-    .btn {
-      --bs-btn-color: @accent;
-      --bs-btn-hover-bg: @accent;
-      --bs-btn-hover-color: @base;
-      --bs-btn-border-color: @accent;
-      --bs-btn-hover-border-color: @accent;
-    }
 
     // the little pill shaped buttons
     .btn-info {
@@ -198,10 +191,6 @@
         }
 
         .listen-controls {
-          .btn {
-            background-color: transparent !important;
-            border-color: transparent !important;
-          }
 
           .love, .hate {
             stroke: @subtext0;

From 071dd2ee422c043ac910c16081ea1ed8eedd8799 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Fri, 13 Mar 2026 17:50:04 -0600
Subject: [PATCH 6/6] style(listenbrainz): whitespace etc

---
 styles/listenbrainz/catppuccin.user.less | 154 +++++++++++------------
 1 file changed, 74 insertions(+), 80 deletions(-)

diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index 166cfcc4e5..d3c5bf6d14 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -19,6 +19,7 @@
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
 @-moz-document domain("listenbrainz.org") {
+
   :root {
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
@@ -28,17 +29,17 @@
     }
   }
 
+  
   #catppuccin(@flavor) {
     #lib.palette();
     #lib.defaults();
 
     --bs-body-bg: @base;
-    --bs-body-color: @text;
+    --bs-body-color: @text;    
     --bs-heading-color: @text;
     --bs-secondary-color: @text;
     --bs-navbar-color: @text;
-
-
+    
     // the little pill shaped buttons
     .btn-info {
       --bs-btn-bg: @accent;
@@ -50,148 +51,141 @@
       --bs-btn-hover-color: @base;
       --bs-btn-hover-border-color: @accent;
     }
-
+    
     a {
       color: @accent;
     }
-
     
     a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
       color: @lavender;
     }
-
+    
+    
     body nav[role="navigation"] {
       .search-bar {
         background-color: transparent;
-
+          
         input, button {
           background-color: fade(@lavender, 50%);
         }
-
+        
         button {
           color: @text;
         }
       }
-
+      
       #side-nav {
-        border-image: linear-gradient(180deg, @lavender, @peach) 1 100%;
-
+        border-image: linear-gradient(180deg,@lavender,@peach) 1 100%;
+        
         a {
           color: @text;
         }
-
+        
         .sidebar-nav {
           background-color: @base;
-
+          
           .navbar-logo img {
-            @svg: escape(
-              '<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><span xmlns="" id="uas-port"/><defs><style>.b{fill:@{lavender};}.c{fill:@{peach};}</style></defs><polygon class="b" points="13 1 1 8 1 22 13 29 13 1"/><polygon class="c" points="14 1 26 8 26 22 14 29 14 1"/></svg>'
-            );
-            content: url("data:image/svg+xml,@{svg}");
+            @svg: escape('<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 30"><span xmlns="" id="uas-port"/><defs><style>.b{fill:@{lavender};}.c{fill:@{peach};}</style></defs><polygon class="b" points="13 1 1 8 1 22 13 29 13 1"/><polygon class="c" points="14 1 26 8 26 22 14 29 14 1"/></svg>');
+            content: url('data:image/svg+xml,@{svg}');
           }
         }
       }
-
+      
       #side-nav-overlay {
         background: @base;
       }
     }
-
+    
     body nav[role="navigation"] .navbar-header {
       border-image: linear-gradient(90deg, @lavender, @peach) 100% 1;
-
+      
       .navbar-toggler {
         border-color: @overlay0;
         color: @text;
       }
-
+      
       .navbar-logo img {
-        @svg: escape(
-          '<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="215.7px" height="30px" viewBox="0 0 215.7 30" xml:space="preserve" enable-background="new 0 0 215.7 30"><span xmlns="" id="uas-port"/><style type="text/css">.st0{fill:@{lavender};}	.st1{fill:@{peach};}</style><polygon class="st0" points="14.4,1.1 2.4,8.1 2.4,22.1 14.4,29.1"/><polygon class="st1" points="15.4,1.1 27.4,8.1 27.4,22.1 15.4,29.1"/><path class="st0" d="M41.6 22.9h9.5v4.2h-15V4.4h5.5zm11.6-17c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7c.6.5.8 1.1.8 1.9s-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm12.1-4.7c0-.5-.2-.8-.7-1.1s-1.4-.5-2.7-.8-2.4-.7-3.2-1.1c-.8-.5-1.5-1-2-1.7s-.7-1.5-.7-2.3c0-1.6.6-2.8 1.9-3.8s3-1.5 5-1.5q3.3 0 5.4 1.5c1.3 1 2 2.3 2 4h-5.3c0-1.4-.7-2-2.1-2-.6 0-1 .1-1.4.5-.4.3-.6.7-.6 1.1s.2.9.7 1.1 1.2.5 2.2.7 1.9.4 2.6.7c2.5.9 3.8 2.4 3.8 4.7 0 1.5-.7 2.8-2.1 3.8s-3.1 1.5-5.3 1.5c-1.4 0-2.7-.3-3.9-.8q-1.65-.75-2.7-2.1c-1.05-1.35-1-1.8-1-2.8H66c0 .8.3 1.4.8 1.7s1.1.5 1.9.5c.7 0 1.3-.1 1.6-.4s.6-1 .6-1.4M84.5 6v4.2h2.8v3.6h-2.8v7.7c0 .6.1 1.1.3 1.3s.7.4 1.4.4c.5 0 1 0 1.3-.1V27c-.9.3-1.9.5-3 .5-1.8 0-3.2-.4-4-1.3s-1.3-2.1-1.3-3.9v-8.4H77v-3.7h2.2V6zm13 21.4c-2.6 0-4.7-.8-6.3-2.3s-2.4-3.6-2.4-6v-.4c0-1.7.3-3.2 1-4.6s1.6-2.3 2.8-3.1c1.2-.7 2.7-1.1 4.4-1.1 2.4 0 4.2.7 5.6 2.2s2.1 3.5 2.1 6.2v2H94.2c.2 1 .6 1.7 1.2 2.2s1.5.8 2.5.8q2.55 0 3.9-1.8l2.4 2.8c-.7.9-1.6 1.6-2.8 2.2-1.2.7-2.5.9-3.9.9M96.9 14c-1.5 0-2.5 1-2.8 3.1h5.3v-.4c0-.8-.2-1.5-.6-2s-1-.7-1.9-.7m14.7-3.8.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.3 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2z"/><path class="st1" d="M125 27.1V4.4h8.2c2.9 0 5.1.5 6.7 1.6 1.5 1.1 2.3 2.6 2.3 4.7 0 1.2-.3 2.2-.8 3s-1.3 1.4-2.4 1.8q1.8.45 2.7 1.8c.6.9 1 1.9 1 3.1 0 2.2-.7 3.9-2.1 5s-3.5 1.7-6.3 1.7zm5.5-13.2h2.9c1.2 0 2-.2 2.6-.7.5-.4.8-1.1.8-1.9 0-1-.3-1.6-.8-2.1-.6-.4-1.4-.6-2.7-.6h-2.7v5.3zm0 3.6v5.4h3.6c1 0 1.8-.2 2.3-.7s.8-1.1.8-1.9c0-1.9-.9-2.9-2.8-2.9-.1.1-3.9.1-3.9.1m25.1-2.5-1.7-.1c-1.6 0-2.7.5-3.2 1.6v10.7h-5.3v-17h4.9l.2 2.2c.9-1.6 2.1-2.5 3.7-2.5.6 0 1 .1 1.5.2zm11 12.1c-.2-.3-.4-.9-.5-1.5-1 1.2-2.3 1.8-4.1 1.8-1.6 0-2.9-.5-4.1-1.4-1.1-1-1.7-2.2-1.7-3.6 0-1.8.7-3.2 2-4.1 1.4-.9 3.3-1.4 5.9-1.4h1.6V16c0-1.6-.7-2.3-2-2.3-1.2 0-1.9.6-1.9 1.9h-5.3c0-1.6.7-3 2.1-4s3.2-1.5 5.3-1.5 3.9.5 5.1 1.6 1.9 2.5 1.9 4.3v7.5c0 1.5.3 2.7.7 3.6v.3zm-3.3-3.4c.7 0 1.2-.1 1.6-.4s.7-.6.9-1v-2.7h-1.5c-1.8 0-2.8.8-2.8 2.5 0 .5.2.9.5 1.2.3.2.8.4 1.3.4M174 5.9c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7.8 1.1.8 1.9-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7c-.6-.5-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm8-16.9.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.4 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2zM207 23.1h7.7v4.1h-14.3v-2.9l7.5-9.9h-7.2v-4.1h13.8v2.8z"/></svg>'
-        );
-        content: url("data:image/svg+xml,@{svg}");
+        @svg: escape('<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="215.7px" height="30px" viewBox="0 0 215.7 30" xml:space="preserve" enable-background="new 0 0 215.7 30"><span xmlns="" id="uas-port"/><style type="text/css">.st0{fill:@{lavender};}	.st1{fill:@{peach};}</style><polygon class="st0" points="14.4,1.1 2.4,8.1 2.4,22.1 14.4,29.1"/><polygon class="st1" points="15.4,1.1 27.4,8.1 27.4,22.1 15.4,29.1"/><path class="st0" d="M41.6 22.9h9.5v4.2h-15V4.4h5.5zm11.6-17c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7c.6.5.8 1.1.8 1.9s-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm12.1-4.7c0-.5-.2-.8-.7-1.1s-1.4-.5-2.7-.8-2.4-.7-3.2-1.1c-.8-.5-1.5-1-2-1.7s-.7-1.5-.7-2.3c0-1.6.6-2.8 1.9-3.8s3-1.5 5-1.5q3.3 0 5.4 1.5c1.3 1 2 2.3 2 4h-5.3c0-1.4-.7-2-2.1-2-.6 0-1 .1-1.4.5-.4.3-.6.7-.6 1.1s.2.9.7 1.1 1.2.5 2.2.7 1.9.4 2.6.7c2.5.9 3.8 2.4 3.8 4.7 0 1.5-.7 2.8-2.1 3.8s-3.1 1.5-5.3 1.5c-1.4 0-2.7-.3-3.9-.8q-1.65-.75-2.7-2.1c-1.05-1.35-1-1.8-1-2.8H66c0 .8.3 1.4.8 1.7s1.1.5 1.9.5c.7 0 1.3-.1 1.6-.4s.6-1 .6-1.4M84.5 6v4.2h2.8v3.6h-2.8v7.7c0 .6.1 1.1.3 1.3s.7.4 1.4.4c.5 0 1 0 1.3-.1V27c-.9.3-1.9.5-3 .5-1.8 0-3.2-.4-4-1.3s-1.3-2.1-1.3-3.9v-8.4H77v-3.7h2.2V6zm13 21.4c-2.6 0-4.7-.8-6.3-2.3s-2.4-3.6-2.4-6v-.4c0-1.7.3-3.2 1-4.6s1.6-2.3 2.8-3.1c1.2-.7 2.7-1.1 4.4-1.1 2.4 0 4.2.7 5.6 2.2s2.1 3.5 2.1 6.2v2H94.2c.2 1 .6 1.7 1.2 2.2s1.5.8 2.5.8q2.55 0 3.9-1.8l2.4 2.8c-.7.9-1.6 1.6-2.8 2.2-1.2.7-2.5.9-3.9.9M96.9 14c-1.5 0-2.5 1-2.8 3.1h5.3v-.4c0-.8-.2-1.5-.6-2s-1-.7-1.9-.7m14.7-3.8.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.3 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2z"/><path class="st1" d="M125 27.1V4.4h8.2c2.9 0 5.1.5 6.7 1.6 1.5 1.1 2.3 2.6 2.3 4.7 0 1.2-.3 2.2-.8 3s-1.3 1.4-2.4 1.8q1.8.45 2.7 1.8c.6.9 1 1.9 1 3.1 0 2.2-.7 3.9-2.1 5s-3.5 1.7-6.3 1.7zm5.5-13.2h2.9c1.2 0 2-.2 2.6-.7.5-.4.8-1.1.8-1.9 0-1-.3-1.6-.8-2.1-.6-.4-1.4-.6-2.7-.6h-2.7v5.3zm0 3.6v5.4h3.6c1 0 1.8-.2 2.3-.7s.8-1.1.8-1.9c0-1.9-.9-2.9-2.8-2.9-.1.1-3.9.1-3.9.1m25.1-2.5-1.7-.1c-1.6 0-2.7.5-3.2 1.6v10.7h-5.3v-17h4.9l.2 2.2c.9-1.6 2.1-2.5 3.7-2.5.6 0 1 .1 1.5.2zm11 12.1c-.2-.3-.4-.9-.5-1.5-1 1.2-2.3 1.8-4.1 1.8-1.6 0-2.9-.5-4.1-1.4-1.1-1-1.7-2.2-1.7-3.6 0-1.8.7-3.2 2-4.1 1.4-.9 3.3-1.4 5.9-1.4h1.6V16c0-1.6-.7-2.3-2-2.3-1.2 0-1.9.6-1.9 1.9h-5.3c0-1.6.7-3 2.1-4s3.2-1.5 5.3-1.5 3.9.5 5.1 1.6 1.9 2.5 1.9 4.3v7.5c0 1.5.3 2.7.7 3.6v.3zm-3.3-3.4c.7 0 1.2-.1 1.6-.4s.7-.6.9-1v-2.7h-1.5c-1.8 0-2.8.8-2.8 2.5 0 .5.2.9.5 1.2.3.2.8.4 1.3.4M174 5.9c0-.8.3-1.4.8-1.9s1.2-.7 2.1-.7 1.6.2 2.1.7.8 1.1.8 1.9-.3 1.4-.8 1.8c-.5.5-1.2.7-2.1.7s-1.6-.2-2.1-.7c-.6-.5-.8-1.1-.8-1.8m5.6 21.2h-5.3V10.2h5.3zm8-16.9.2 2c1.2-1.5 2.8-2.3 4.8-2.3 1.8 0 3.1.5 3.9 1.6s1.3 2.6 1.4 4.8v10.9h-5.3V16.5c0-.9-.2-1.5-.5-1.9s-1-.6-1.9-.6c-1 0-1.8.4-2.3 1.2v11.9h-5.3V10.2zM207 23.1h7.7v4.1h-14.3v-2.9l7.5-9.9h-7.2v-4.1h13.8v2.8z"/></svg>');
+        content: url('data:image/svg+xml,@{svg}');
       }
     }
-
+    
     .secondary-nav {
       &::after {
         background: linear-gradient(270deg, @base, transparent);
       }
-
+      
       .nav.nav-tabs {
         background-color: @mantle;
-
+        
         li {
           background-color: @mantle;
           border-bottom-color: @surface0;
-
+          
           a {
             color: @text;
             border-left-color: @surface0;
             border-right-color: @surface0;
-          }
+          }          
         }
-
+        
         li.active {
           background-color: @base;
-
+          
           a {
             border-bottom-color: @overlay0;
           }
         }
-
+        
         li:not(.active) {
           a:hover {
             background-color: @surface0;
           }
         }
-
+        
         li.username {
           background: linear-gradient(288deg, @peach 16.96%, @lavender 98.91%);
           color: @text;
-
+          
           a {
             color: @base;
           }
         }
       }
     }
-
+    
     .musicbrainz-profile-button {
       background-color: @accent;
       color: @base;
-
+      
       img {
-        @svg: escape(
-          '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 27 30" enable-background="new 0 0 27 30" xml:space="preserve"><span xmlns=""/><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds height="28" width="25" y="-914" x="2963" bottomLeftOrigin="true"/></sfw></metadata><g/><polygon fill="@{mauve}" points="13,1 1,8 1,22 13,29"/><polygon fill="@{peach}" points="14,1 26,8 26,22 14,29"/></svg>'
-        );
-        content: url("data:image/svg+xml,@{svg}");
+        @svg: escape('<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 27 30" enable-background="new 0 0 27 30" xml:space="preserve"><span xmlns=""/><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds height="28" width="25" y="-914" x="2963" bottomLeftOrigin="true"/></sfw></metadata><g/><polygon fill="@{mauve}" points="13,1 1,8 1,22 13,29"/><polygon fill="@{peach}" points="14,1 26,8 26,22 14,29"/></svg>');
+        content: url('data:image/svg+xml,@{svg}');
       }
     }
-
+    
     .card {
       border-color: @surface0;
-      --bs-card-box-shadow:
-        0px 1px 1px fade(@crust, 40%), 0px 2px 2px fade(@crust, 45%), 0px 4px
-        4px fade(@crust, 50%);
+      --bs-card-box-shadow: 0px 1px 1px fade(@crust, 40%), 
+                            0px 2px 2px fade(@crust, 45%),
+                            0px 4px 4px fade(@crust, 50%);
     }
-
+    
     #listen-count-card hr {
       border-color: @surface2;
     }
-
+    
     .listen-card {
       &.playing-now {
         background-color: fade(@accent, 20%) !important;
       }
-
+      
       .main-content {
         .listen-time {
-          color: @subtext0;
+          color: @subtext0
         }
-
+        
         .listen-controls {
-
           .love, .hate {
             stroke: @subtext0;
           }
@@ -199,15 +193,15 @@
           .love:hover {
             stroke: @maroon;
           }
-
+          
           .hate:hover {
             stroke: @lavender;
           }
-
+          
           .dropdown-toggle {
             color: @subtext0;
           }
-
+          
           .dropdown-toggle:hover {
             color: @accent;
           }
@@ -219,114 +213,114 @@
       background-color: @surface0 !important;
       color: @text !important;
     }
-
+    
     // see more fresh listens overlay
     .webSocket-box .read-more {
-      background-image: linear-gradient(180deg, transparent, @base 80%);
+      background-image: linear-gradient(180deg, transparent, @base 80%)
     }
-
+    
     .pill {
       border-color: @subtext0;
       color: @subtext0;
-
+      
       &.secondary.active {
         background-color: @accent;
         color: @base;
       }
-
+      
       &.active {
         border-color: transparent;
       }
     }
-
+    
     .lb-follow-button {
       background-color: @accent;
       color: @base;
       border-color: @accent;
-
+      
       &:hover {
         background-color: @base;
         border-color: @accent;
         color: @accent;
       }
-
+      
       &.following {
         background-color: @base;
         border-color: @accent;
         color: @accent;
       }
     }
-
+    
     .follower-following-list > :not(:first-child),
     .similar-users-list > :not(:first-child) {
       border-color: @surface2;
     }
-
+    
     .similarity-score {
       .progress {
         background-color: @surface2;
       }
-
+      
       .progress-bar {
         &.orange {
           background-color: @peach;
         }
-
+        
         &.red {
           background-color: @red;
         }
       }
-
+      
       p.text-muted {
         color: @subtext0 !important;
       }
     }
-
+    
     // bar graphs and various other graphs
     rect[fill="#353070"] {
       fill: @lavender;
     }
-
+    
     rect[fill="#eb743b"] {
       fill: @peach;
     }
-
+    
     rect[fill="#f47560"],
     circle[fill="#f47560"],
     path[fill="rgba(244, 117, 96, 1)"] {
       fill: @red;
     }
-
-    rect[fill="#e8c1a0"],
-    circle[fill="#e8c1a0"],
+    
+    rect[fill="#e8c1a0"], 
+    circle[fill="#e8c1a0"], 
     path[fill="rgba(232, 193, 160, 1)"] {
       fill: @mauve;
     }
-
-    rect[fill="#f1e15b"],
-    circle[fill="#f1e15b"],
+    
+    rect[fill="#f1e15b"], 
+    circle[fill="#f1e15b"], 
     path[fill="rgba(241, 225, 91, 1)"] {
       fill: @yellow;
     }
-
+    
     rect[fill="#61cdbb"],
     circle[fill="#61cdbb"],
     path[fill="rgba(97, 205, 187, 1)"] {
       fill: @green;
     }
-
+    
     rect[fill="#97e3d5"],
     circle[fill="#97e3d5"],
     path[fill="rgba(151, 227, 213, 1)"] {
       fill: @blue;
     }
-
+    
     rect[fill="#e8a838"],
     circle[fill="#e8a838"],
     path[fill="rgba(232, 168, 56, 1)"] {
       fill: @peach;
     }
-
+    
     // the little overlay at the bottom of cover arts
     g.caption {
       rect[fill="#0000007a"] {