diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less
index f1872cf8ca..d3c5bf6d14 100644
--- a/styles/listenbrainz/catppuccin.user.less
+++ b/styles/listenbrainz/catppuccin.user.less
@@ -13,11 +13,13 @@
@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("listenbrainz.org") {
+
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
@@ -27,667 +29,305 @@
}
}
+
#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(
- ''
- );
- 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;
+
+ // the little pill shaped buttons
+ .btn-info {
+ --bs-btn-bg: @accent;
+ --bs-btn-color: @base;
+ --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 {
- color: @blue;
- &:hover {
- color: @sky;
- }
- &:visited:not(.btn) {
- color: @lavender;
- &:hover {
- color: @sky;
- }
- }
- }
-
- h2,
- h3,
- h4 {
- color: @text;
- }
-
- .text-muted,
- .help-block {
- color: @subtext0;
+ color: @accent;
}
-
- .text-success {
- color: @green;
- }
-
- .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;
- }
+
+ a:visited:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
+ color: @lavender;
}
-
- .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('');
+ 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('');
+ 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('');
+ 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 {
+ .love, .hate {
+ stroke: @subtext0;
}
- }
- }
- }
-
- .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;
- }
- 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;
}
}
}