d7f460f308
Co-authored-by: winston <hey@winston.sh> Co-authored-by: Hamothy <58985301+sgoudham@users.noreply.github.com>
1731 lines
52 KiB
CSS
1731 lines
52 KiB
CSS
/* ==UserStyle==
|
|
@name Last.fm Catppuccin
|
|
@namespace github.com/catppuccin/userstyles/styles/lastfm
|
|
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm
|
|
@version 1.1.1
|
|
@description Soothing pastel theme for Last.fm
|
|
@author Catppuccin
|
|
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.css
|
|
@license MIT
|
|
|
|
@preprocessor less
|
|
@var select flavor "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 removepromos "Remove Advertisements" 1
|
|
==/UserStyle== */
|
|
@-moz-document domain("last.fm") {
|
|
|
|
#catppuccin(@flavor, @accentColor);
|
|
|
|
@catppuccin: {
|
|
@latte: {
|
|
@rosewater: #dc8a78;
|
|
@flamingo: #dd7878;
|
|
@pink: #ea76cb;
|
|
@mauve: #8839ef;
|
|
@red: #d20f39;
|
|
@maroon: #e64553;
|
|
@peach: #fe640b;
|
|
@yellow: #df8e1d;
|
|
@green: #40a02b;
|
|
@teal: #179299;
|
|
@sky: #04a5e5;
|
|
@sapphire: #209fb5;
|
|
@blue: #1e66f5;
|
|
@lavender: #7287fd;
|
|
@text: #4c4f69;
|
|
@subtext1: #5c5f77;
|
|
@subtext0: #6c6f85;
|
|
@overlay2: #7c7f93;
|
|
@overlay1: #8c8fa1;
|
|
@overlay0: #9ca0b0;
|
|
@surface2: #acb0be;
|
|
@surface1: #bcc0cc;
|
|
@surface0: #ccd0da;
|
|
@base: #eff1f5;
|
|
@mantle: #e6e9ef;
|
|
@crust: #dce0e8;
|
|
}
|
|
@frappe: {
|
|
@rosewater: #f2d5cf;
|
|
@flamingo: #eebebe;
|
|
@pink: #f4b8e4;
|
|
@mauve: #ca9ee6;
|
|
@red: #e78284;
|
|
@maroon: #ea999c;
|
|
@peach: #ef9f76;
|
|
@yellow: #e5c890;
|
|
@green: #a6d189;
|
|
@teal: #81c8be;
|
|
@sky: #99d1db;
|
|
@sapphire: #85c1dc;
|
|
@blue: #8caaee;
|
|
@lavender: #babbf1;
|
|
@text: #c6d0f5;
|
|
@subtext1: #b5bfe2;
|
|
@subtext0: #a5adce;
|
|
@overlay2: #949cbb;
|
|
@overlay1: #838ba7;
|
|
@overlay0: #737994;
|
|
@surface2: #626880;
|
|
@surface1: #51576d;
|
|
@surface0: #414559;
|
|
@base: #303446;
|
|
@mantle: #292c3c;
|
|
@crust: #232634;
|
|
}
|
|
@macchiato: {
|
|
@rosewater: #f4dbd6;
|
|
@flamingo: #f0c6c6;
|
|
@pink: #f5bde6;
|
|
@mauve: #c6a0f6;
|
|
@red: #ed8796;
|
|
@maroon: #ee99a0;
|
|
@peach: #f5a97f;
|
|
@yellow: #eed49f;
|
|
@green: #a6da95;
|
|
@teal: #8bd5ca;
|
|
@sky: #91d7e3;
|
|
@sapphire: #7dc4e4;
|
|
@blue: #8aadf4;
|
|
@lavender: #b7bdf8;
|
|
@text: #cad3f5;
|
|
@subtext1: #b8c0e0;
|
|
@subtext0: #a5adcb;
|
|
@overlay2: #939ab7;
|
|
@overlay1: #8087a2;
|
|
@overlay0: #6e738d;
|
|
@surface2: #5b6078;
|
|
@surface1: #494d64;
|
|
@surface0: #363a4f;
|
|
@base: #24273a;
|
|
@mantle: #1e2030;
|
|
@crust: #181926;
|
|
}
|
|
@mocha: {
|
|
@rosewater: #f5e0dc;
|
|
@flamingo: #f2cdcd;
|
|
@pink: #f5c2e7;
|
|
@mauve: #cba6f7;
|
|
@red: #f38ba8;
|
|
@maroon: #eba0ac;
|
|
@peach: #fab387;
|
|
@yellow: #f9e2af;
|
|
@green: #a6e3a1;
|
|
@teal: #94e2d5;
|
|
@sky: #89dceb;
|
|
@sapphire: #74c7ec;
|
|
@blue: #89b4fa;
|
|
@lavender: #b4befe;
|
|
@text: #cdd6f4;
|
|
@subtext1: #bac2de;
|
|
@subtext0: #a6adc8;
|
|
@overlay2: #9399b2;
|
|
@overlay1: #7f849c;
|
|
@overlay0: #6c7086;
|
|
@surface2: #585b70;
|
|
@surface1: #45475a;
|
|
@surface0: #313244;
|
|
@base: #1e1e2e;
|
|
@mantle: #181825;
|
|
@crust: #11111b;
|
|
}
|
|
}
|
|
|
|
@rgb-raw: #fff;
|
|
#rgbify(@color) {
|
|
@rgb-raw: red(@color) green(@color) blue(@color);
|
|
}
|
|
|
|
#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: @catppuccin[@@lookup][@@accentColor];
|
|
|
|
@accent-dim: fadeout(@accent, 0.5);
|
|
|
|
& not when (@lookup = latte) {
|
|
color-scheme: dark;
|
|
.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;
|
|
}
|
|
h1 {
|
|
color: @accent;
|
|
}
|
|
.mimic-link {
|
|
color: @sapphire;
|
|
}
|
|
/*-----------CHECKBOXES AND RADIOS----------*/
|
|
.lfm-form-radio input[type=radio]:checked + label:before {
|
|
border: 1px solid @accent;
|
|
box-shadow: inset 0 0 0 4px @accent;
|
|
background-color: @base;
|
|
}
|
|
.lfm-form-radio input[type=radio] + label:before {
|
|
background-color: @crust;
|
|
border: 2px solid @surface1;
|
|
}
|
|
/*-----------REMOVE PRO SUBSCRIPTION REMINDERS------*/
|
|
if removepromos {
|
|
.your-progress .buffer-2,
|
|
.secondary-nav-item--month,
|
|
.secondary-nav-item--year,
|
|
.auth-dropdown-pro-text {
|
|
display: none !important;
|
|
}
|
|
.listening-report-promo--month,
|
|
.listening-report-promo--year {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 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: 1px solid @accent-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 .secondary-nav-item-link:hover::after,
|
|
.homefeed .content-top .secondary-nav-item--albums .secondary-nav-item-link:hover::after,
|
|
.homefeed .content-top .secondary-nav-item--tracks .secondary-nav-item-link:hover::after,
|
|
.homefeed .content-top .secondary-nav-item--events .secondary-nav-item-link:hover::after,
|
|
.homefeed--artists .content-top .secondary-nav-item-link--active::after,
|
|
.homefeed--albums .content-top .secondary-nav-item-link--active::after,
|
|
.homefeed--tracks .content-top .secondary-nav-item-link--active::after,
|
|
.homefeed--events .content-top .secondary-nav-item-link--active::after {
|
|
background-color: @accent-dim;
|
|
}
|
|
.recs-feed .recs-feed-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;
|
|
box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust;
|
|
color: @text;
|
|
}
|
|
.recs-feed .recs-feed-item {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
a {
|
|
color: @accent;
|
|
}
|
|
.stationlink-list .stationlink {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.stationlink-list .stationlink:focus,
|
|
.stationlink-list .stationlink:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.stationlink-list .stationlink::after {
|
|
border-bottom: 1px solid @accent-dim;
|
|
}
|
|
|
|
.stationlink-list .stationlink::before {
|
|
background-color: @accent;
|
|
-webkit-filter: invert(0%);
|
|
filter: invert(0%);
|
|
}
|
|
|
|
|
|
|
|
.stationlink-list .stationlink:focus::before,
|
|
.stationlink-list .stationlink:hover::before {
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.subscribe-cta,
|
|
.mpu-subscription-upsell,
|
|
.mpu-subscription-upsell--mpu {
|
|
display: none;
|
|
}
|
|
.join-cta {
|
|
background-color: transparent;
|
|
}
|
|
.join-cta h3 {
|
|
color: @accent;
|
|
}
|
|
|
|
|
|
.lazy-features-footer {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* LIVE */
|
|
/* MUSIC */
|
|
.content-top-header {
|
|
color: @accent;
|
|
}
|
|
|
|
.minimal-navigation-item-link,
|
|
.minimal-navigation-item-link:focus,
|
|
.minimal-navigation-item-link:hover {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.minimal-navigation-item-link--active,
|
|
.minimal-navigation-item-link--active:focus,
|
|
.minimal-navigation-item-link--active:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.music-section-heading {
|
|
color: @text;
|
|
}
|
|
|
|
.music-more-artists-item-name a,
|
|
.music-more-artists-item-name a:focus,
|
|
.music-more-artists-item-name a:hover,
|
|
.music-releases-item-name a,
|
|
.music-releases-item-name a:focus,
|
|
.music-releases-item-name a: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 {
|
|
color: @text;
|
|
}
|
|
|
|
.album-result-heading {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
/* RECOMMENDATIONS */
|
|
.recs-feed-title a {
|
|
color: @text !important;
|
|
}
|
|
if (theme=="Latte") {
|
|
.recs-feed-title a {
|
|
color: @crust !important;
|
|
}
|
|
}
|
|
.recs-feed .context {
|
|
background: @mantle;
|
|
box-shadow: none;
|
|
color: @subtext1;
|
|
}
|
|
.recs-feed-item--artist .context:after,
|
|
.recs-feed .recs-feed-item--artist .recs-feed-avatar:after {
|
|
background-color: fadeout(@yellow, 1) !important;
|
|
}
|
|
.recs-feed-item--album .context:after,
|
|
.recs-feed .recs-feed-item--album .recs-feed-avatar:after {
|
|
background-color: fadeout(@green, 1) !important;
|
|
}
|
|
.recs-feed-item--track .context:after,
|
|
.recs-feed .recs-feed-item--track .recs-feed-avatar:after {
|
|
background-color: fadeout(@blue, 1) !important;
|
|
}
|
|
.secondary-nav {
|
|
box-shadow: inset 0 -1px @accent;
|
|
}
|
|
.music-recommended-artists-artist-name,
|
|
.music-recommended-artists-context,
|
|
.pagination-page,
|
|
.pagination-next {
|
|
color: @text;
|
|
}
|
|
|
|
.music-recommended-albums-item-name,
|
|
.music-recommended-albums-album-artist,
|
|
.music-recommended-albums-album-context {
|
|
color: @text;
|
|
}
|
|
|
|
.recommended-tracks-item-name,
|
|
.recommended-tracks-item-artist {
|
|
color: @text;
|
|
}
|
|
|
|
.big-tags-item-context {
|
|
color: @text;
|
|
}
|
|
|
|
p {
|
|
color: @subtext0;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* CHARTS */
|
|
.adaptive-skin-wrapper,
|
|
.row {
|
|
background-color: @base;
|
|
}
|
|
|
|
.two-column-layout .container {
|
|
background-size: 0;
|
|
background-position: 0 0;
|
|
background-color: @base;
|
|
}
|
|
|
|
._buffer-reset,
|
|
.sidebar-heading {
|
|
color: @accent;
|
|
}
|
|
|
|
.sidebar-group-heading {
|
|
color: @text;
|
|
}
|
|
|
|
.resource-list--sidebar-item-name {
|
|
color: @text;
|
|
}
|
|
.js-link-block.globalchart-item {
|
|
background-color: @crust;
|
|
box-shadow: 0 1px @base, inset 0 -1px @base;
|
|
}
|
|
.globalchart a,
|
|
.globalchart a:focus,
|
|
.globalchart a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.footer-top-row {
|
|
background-color: @mantle;
|
|
}
|
|
.two-column-layout .container {
|
|
background-color: #00000000;
|
|
}
|
|
|
|
/* EVENTS */
|
|
.events-filter,
|
|
.events-filter-recommended,
|
|
.dropdown-menu-clickable-button:focus,
|
|
.dropdown-menu-clickable-button:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.events-filters {
|
|
border-bottom: 1px solid @accent;
|
|
}
|
|
|
|
.events-list-item-venue--address,
|
|
.events-list-item-event--lineup {
|
|
color: @subtext0;
|
|
}
|
|
.events-list-anhv1 a,
|
|
.events-list-anhv1 a:focus,
|
|
.events-list-anhv1 a:hover,
|
|
.events-list-item-event--title,
|
|
.events-list-item-venue--title {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FEATURES */
|
|
.features-header .features-teaser-body,
|
|
.features-teaser-wrap--promoted .features-teaser-body {
|
|
background: @base;
|
|
}
|
|
|
|
.features-teaser-title a,
|
|
.features-teaser-title a:focus,
|
|
.features-teaser-title a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* FEATURES POST */
|
|
.features-post-header-body {
|
|
background-color: @base;
|
|
}
|
|
|
|
.features-post-header-title {
|
|
color: @accent;
|
|
}
|
|
|
|
.features-post-artist {
|
|
color: @text;
|
|
}
|
|
|
|
.features-post-byline-item.features-post-author {
|
|
color: @text
|
|
}
|
|
|
|
|
|
|
|
|
|
/* PROFILE */
|
|
.header-avatar-add,
|
|
.header-avatar-add:not(.cta--inactive):focus,
|
|
.header-avatar-add:not(.cta--inactive):hover {
|
|
background-color: @accent-dim;
|
|
}
|
|
.dropdown-menu-clickable,
|
|
#share-library-artist,
|
|
.dropdown-menu-clickable-item:active,
|
|
body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:focus,
|
|
body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:hover {
|
|
background-color: @base;
|
|
}
|
|
.header--overview {
|
|
background-color: @mantle;
|
|
}
|
|
.header-metadata .header-metadata-title,
|
|
.header-scrobble-since,
|
|
.header-title-display-name {
|
|
color: @subtext1;
|
|
}
|
|
.chartlist-play-button::before {
|
|
background-color: @accent;
|
|
-webkit-filter: invert(0%);
|
|
filter: invert(0%);
|
|
}
|
|
|
|
.chartlist-play-button:focus:focus::before,
|
|
.chartlist-play-button:focus:hover::before,
|
|
.chartlist-play-button:hover:focus::before,
|
|
.chartlist-play-button:hover:hover::before {
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.text-Color-link,
|
|
h2,
|
|
.dropdown-menu-clickable-item--selected,
|
|
.dropdown-menu-clickable-item--selected:focus,
|
|
.dropdown-menu-clickable-item--selected:hover,
|
|
.dropdown-menu-clickable-button,
|
|
.dropdown-menu-clickable-button:hover,
|
|
.dropdown-menu-clickable-button:active,
|
|
.dropdown-menu-clickable-button.disclose-active {
|
|
color: @accent;
|
|
}
|
|
.dropdown-menu-clickable-item,
|
|
.dropdown-menu-clickable-item:active,
|
|
body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:focus,
|
|
body:not([data-whatinput=touch]) .dropdown-menu-clickable-item:hover {
|
|
color: @text;
|
|
}
|
|
.btn-secondary {
|
|
background-color: @accent-dim;
|
|
color: @crust;
|
|
}
|
|
|
|
body:not(.js-focus-visible) body:not([data-whatinput="touch"]) .btn-secondary:focus,
|
|
body:not([data-whatinput="touch"]) .btn-secondary .focus-visible,
|
|
body:not([data-whatinput="touch"]) .btn-secondary:hover {
|
|
background-color: @accent;
|
|
color: @crust;
|
|
}
|
|
input[type=password] {
|
|
background-color: @crust !important;
|
|
border-color: @crust !important;
|
|
}
|
|
|
|
|
|
@-webkit-keyframes AnimationName {
|
|
0% {
|
|
background-position: 0% 50%
|
|
}
|
|
50% {
|
|
background-position: 100% 51%
|
|
}
|
|
100% {
|
|
background-position: 0% 50%
|
|
}
|
|
}
|
|
@-moz-keyframes AnimationName {
|
|
0% {
|
|
background-position: 0% 50%
|
|
}
|
|
50% {
|
|
background-position: 100% 51%
|
|
}
|
|
100% {
|
|
background-position: 0% 50%
|
|
}
|
|
}
|
|
@keyframes AnimationName {
|
|
0% {
|
|
background-position: 0% 50%
|
|
}
|
|
50% {
|
|
background-position: 100% 51%
|
|
}
|
|
100% {
|
|
background-position: 0% 50%
|
|
}
|
|
}
|
|
|
|
.chartlist-row--highlight,
|
|
.chartlist-row--now-scrobbling {
|
|
/*background-color: #5a1717;*/
|
|
background: linear-gradient(270deg, @base 60%, rgba(@accent, 0.2));
|
|
background-size: 200% 200%;
|
|
-webkit-animation: AnimationName 10s ease infinite;
|
|
-moz-animation: AnimationName 10s ease infinite;
|
|
animation: AnimationName 10s ease infinite;
|
|
}
|
|
|
|
.chartlist-name,
|
|
.chartlist-artist {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.chartlist-break::after,
|
|
.chartlist-row::after {
|
|
border-bottom: 1px solid @surface0;
|
|
}
|
|
|
|
.chartlist-row:hover {
|
|
background-color: @crust;
|
|
}
|
|
.chartlist-count-bar-slug {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.chartlist-count-bar-slug {
|
|
background-image: linear-gradient(to right, @accent, @accent);
|
|
color: @crust;
|
|
}
|
|
.chartlist-count-bar-value {
|
|
color: @crust;
|
|
}
|
|
a:focus .chartlist-count-bar-slug,
|
|
a:hover .chartlist-count-bar-slug {
|
|
background-color: @accent-dim;
|
|
}
|
|
|
|
.chartlist-count-bar-link,
|
|
.chartlist-count-bar-link:focus,
|
|
.chartlist-count-bar-link:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.listening-report-promo {
|
|
background-color: @mantle;
|
|
}
|
|
.listening-report-promo:focus,
|
|
.listening-report-promo:hover {
|
|
background-color: @crust;
|
|
}
|
|
.listening-report-promo-title {
|
|
color: @subtext0;
|
|
}
|
|
.listening-report-promo-date {
|
|
color: @accent-dim;
|
|
}
|
|
|
|
.shout-form textarea {
|
|
background-color: @crust;
|
|
}
|
|
|
|
.chartlist-index {
|
|
color: @text;
|
|
}
|
|
|
|
.chartlist tr:nth-child(1) td.chartlist-index {
|
|
font-weight: bold;
|
|
color: @accent;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* LISTENING REPORT */
|
|
.user-dashboard-module {
|
|
background-color: @base !important;
|
|
}
|
|
.highcharts-background {
|
|
fill: @base !important;
|
|
}
|
|
.header-metadata-display,
|
|
.scrobble-stats-info {
|
|
color: @text;
|
|
}
|
|
.user-dashboard-legend-item:before {
|
|
background: transparent !important;
|
|
}
|
|
.user-dashboard-legend-item--current::before {
|
|
background-image: linear-gradient(159deg, @accent, @accent) !important;
|
|
}
|
|
.user-dashboard-legend-item--comparison::before {
|
|
background-image: linear-gradient(159deg, @accent-dim, @accent-dim) !important;
|
|
}
|
|
.header-metadata-title,
|
|
.user-dashboard-scrobble-stats-meta-description,
|
|
.user-dashboard-scrobble-stats-previous {
|
|
color: var(--subtext1);
|
|
}
|
|
.user-dashboard-heading {
|
|
color: @accent;
|
|
}
|
|
|
|
.listening-report-top .secondary-nav {
|
|
border-bottom: 1px solid @overlay0;
|
|
}
|
|
.listening-report-brick {
|
|
border: 1px solid @overlay0;
|
|
&:focus,
|
|
&:hover {
|
|
border: 1px solid @overlay0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
.listening-report-library-link {
|
|
&,
|
|
&:hover {
|
|
color: @crust !important;
|
|
background-color: @accent !important;
|
|
}
|
|
}
|
|
.user-dashboard-history-subscribe-banner-cta {
|
|
display: none;
|
|
}
|
|
|
|
.duration-data,
|
|
.duration-data-value > .js-ticker,
|
|
.user-dashboard-small-data-point-value > .js-ticker,
|
|
.user-dashboard-small-data-point-value > .js-ticker {
|
|
color: @text;
|
|
}
|
|
|
|
.highcharts-series.highcharts-series-1.highcharts-column-series.highcharts-color-undefined.highcharts-tracker > a > rect {
|
|
fill: @accent;
|
|
}
|
|
|
|
.user-dashboard-module {
|
|
background: @crust;
|
|
border-color: @accent-dim;
|
|
}
|
|
|
|
.user-dashboard-loved-tracks .user-dashboard-big-datapoint-value a {
|
|
color: @crust;
|
|
}
|
|
|
|
.user-dashboard-catalogue-item-total a {
|
|
text-shadow: -1px -1px 0 @crust, 1px -1px 0 @crust, -1px 1px 0 @crust, 1px 1px 0 @crust;
|
|
}
|
|
|
|
.user-dashboard-module .user-dashboard-module-share:hover,
|
|
body:not([data-whatinput="mouse"]) .user-dashboard-module .user-dashboard-module-share:focus,
|
|
.user-dashboard-module:hover .user-dashboard-module-share,
|
|
body:not([data-whatinput="mouse"]) .user-dashboard-module:focus .user-dashboard-module-share {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.highcharts-text-outline {
|
|
fill: @crust;
|
|
stroke: @crust;
|
|
}
|
|
|
|
tspan {
|
|
color: @text;
|
|
fill: @text;
|
|
}
|
|
|
|
.user-dashboard-catalogue-item-name.user-dashboard-catalogue-item-link.link-block-target {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
.user-dashboard-catalogue-item-artist-name.user-dashboard-catalogue-item-link {
|
|
color: @subtext0;
|
|
}
|
|
|
|
|
|
|
|
.highcharts-background {
|
|
fill: @crust;
|
|
}
|
|
|
|
.user-dashboard-module-title.js-user-dashboard-module-title {
|
|
color: @accent;
|
|
}
|
|
|
|
.discovery-stat-top-item-name a,
|
|
.discovery-stat-top-item-name a:focus,
|
|
.discovery-stat-top-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
.discovery-stat-top-item-artist:focus,
|
|
.discovery-stat-top-item-artist:hover,
|
|
.discovery-stat-top-item-artist a,
|
|
.discovery-stat-top-item-artist a:focus,
|
|
.discovery-stat-top-item-artist a:hover {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.link-block-target.user-dashboard-leaderboard-profile-link {
|
|
color: @text;
|
|
}
|
|
|
|
.user-dashboard-leaderboard-item--highlight .user-dashboard-leaderboard-stat {
|
|
color: @subtext0;
|
|
}
|
|
|
|
|
|
|
|
/* Listening Clock*/
|
|
#SvgjsG1144 {
|
|
stroke: @crust;
|
|
}
|
|
#SvgjsCircle1169 {
|
|
fill: @crust;
|
|
}
|
|
#SvgjsText1199,
|
|
#SvgjsText1200,
|
|
#SvgjsText1201,
|
|
#SvgjsText1202 {
|
|
fill: @subtext0;
|
|
}
|
|
#SvgjsSvg1203 #Layer_1 g path {
|
|
fill: @accent;
|
|
}
|
|
#SvgjsG1023 g circle {
|
|
fill: @accent;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* LIBRARY */
|
|
.col-sidebar._buffer-sidebar > figure > div > div > svg > .highcharts-background {
|
|
fill: @base;
|
|
}
|
|
|
|
.highcharts-point {
|
|
fill: @accent-dim;
|
|
}
|
|
|
|
.highcharts-axis-labels > text {
|
|
fill: @text !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* FOLLOWING */
|
|
.user-list-name {
|
|
color: @text;
|
|
}
|
|
.user-follow,
|
|
.user-follow:after {
|
|
color: @accent;
|
|
background-color: @surface0;
|
|
}
|
|
|
|
/* FOLLOW BUTTON*/
|
|
[data-toggle-button-current-state=unfollowed] .header-follower-btn:before {
|
|
background-color: @red;
|
|
color: @text;
|
|
}
|
|
[data-toggle-button-current-state=followed] .header-follower-btn:before {
|
|
background-color: @green;
|
|
color: @text;
|
|
}
|
|
[data-toggle-button-current-state=followed] .header-follower-btn:hover:before {
|
|
background-color: @red;
|
|
color: @text;
|
|
}
|
|
|
|
.header-follower-btn {
|
|
color: @accent;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* BOOKMARKS */
|
|
.music-bookmarks-artists-item-name {
|
|
color: @text;
|
|
}
|
|
|
|
/* TASTE-O-METER COLORS */
|
|
.tasteometer-donut-base {
|
|
fill: @surface1;
|
|
}
|
|
.tasteometer-avatar img {
|
|
border: 2px solid @surface1;
|
|
}
|
|
.tasteometer-compat-very_low .tasteometer-compat-Color {
|
|
color: @subtext0;
|
|
fill: @subtext0;
|
|
}
|
|
.tasteometer-compat-low .tasteometer-compat-Color {
|
|
color: @mauve;
|
|
fill: @mauve;
|
|
}
|
|
.tasteometer-compat-medium .tasteometer-compat-Color {
|
|
color: @green;
|
|
fill: @green;
|
|
}
|
|
.tasteometer-compat-very_high .tasteometer-compat-Color {
|
|
color: @peach;
|
|
fill: @peach;
|
|
}
|
|
.tasteometer-compat-super .tasteometer-compat-Color {
|
|
color: @red;
|
|
fill: @red;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ARTIST */
|
|
.section-with-separator::after {
|
|
background-color: @base;
|
|
}
|
|
.header-new-bookmark-button,
|
|
.header-new-download-button,
|
|
.header-new-love-button,
|
|
.header-new-more-button,
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-bookmark-button:focus,
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-download-button:focus,
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-love-button:focus,
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .header-new-more-button:focus,
|
|
body:not([data-whatinput=touch]) .header-new-bookmark-button .focus-visible,
|
|
body:not([data-whatinput=touch]) .header-new-bookmark-button:hover,
|
|
body:not([data-whatinput=touch]) .header-new-download-button .focus-visible,
|
|
body:not([data-whatinput=touch]) .header-new-download-button:hover,
|
|
body:not([data-whatinput=touch]) .header-new-love-button .focus-visible,
|
|
body:not([data-whatinput=touch]) .header-new-love-button:hover,
|
|
body:not([data-whatinput=touch]) .header-new-more-button .focus-visible,
|
|
body:not([data-whatinput=touch]) .header-new-more-button:hover {
|
|
color: @base;
|
|
background-color: @accent;
|
|
}
|
|
.wiki-block-inner,
|
|
.catalogue-metadata-heading,
|
|
.catalogue-metadata-description,
|
|
.header-metadata-tnew-title {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.similar-albums-item-name a,
|
|
.similar-albums-item-name a:focus,
|
|
.similar-albums-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.text-18 {
|
|
color: @accent;
|
|
}
|
|
|
|
.artist-similar-artists-sidebar-item-name a,
|
|
.artist-similar-artists-sidebar-item-name a:focus,
|
|
.artist-similar-artists-sidebar-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.events-list-item-event-name.link-block-target > span {
|
|
color: @text;
|
|
}
|
|
|
|
.events-list-item-venue > span {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.artist-top-albums-item-name a,
|
|
.artist-top-albums-item-name a:focus,
|
|
.artist-top-albums-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.listeners-section-item-name a,
|
|
.listeners-section-item-name a:focus,
|
|
.listeners-section-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.catalogue-overview-similar-artists-full-width-item-name a,
|
|
.catalogue-overview-similar-artists-full-width-item-name a:focus,
|
|
.catalogue-overview-similar-artists-full-width-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.resource-external-link,
|
|
.resource-external-link:hover {
|
|
color: @text;
|
|
}
|
|
.shout {
|
|
border-bottom: 1px solid @surface0;
|
|
}
|
|
.shout-container--active {
|
|
background-color: fadeout(@surface1, 0.3);
|
|
}
|
|
.shout-user a {
|
|
color: @text;
|
|
}
|
|
.shout-form {
|
|
border: none;
|
|
}
|
|
.js-playlink-station.desktop-playlink.inline-section-control.stationlink {
|
|
color: @text;
|
|
}
|
|
.section-with-settings .section-control:before {
|
|
border-right: 1px solid @subtext0;
|
|
}
|
|
|
|
.header-metadata .header-metadata-display a {
|
|
color: @accent;
|
|
}
|
|
|
|
.big-artist-list-title a {
|
|
color: var(--subtext1);
|
|
}
|
|
.big-artist-list-title a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
/* SIMILAR ARTISTS */
|
|
.similar-artists-item-name {
|
|
color: @text;
|
|
}
|
|
|
|
.similar-artists-item-wiki-inner-2 {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.section-playlink::before {
|
|
background-color: @accent;
|
|
-webkit-filter: invert(0%);
|
|
filter: invert(0%);
|
|
}
|
|
|
|
.section-playlink:hover::before {
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.section-playlink.js-playlink-station {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* TRACK */
|
|
.source-album-artist a,
|
|
.source-album-artist a:focus,
|
|
.source-album-artist a:hover,
|
|
.source-album-name a,
|
|
.source-album-name a:focus,
|
|
.source-album-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.track-similar-tracks-item-name a,
|
|
.track-similar-tracks-item-name a:focus,
|
|
.track-similar-tracks-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.about-artist-name a,
|
|
.about-artist-name a:focus,
|
|
.about-artist-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.catalogue-overview-similar-artists-item-name a,
|
|
.catalogue-overview-similar-artists-item-name a:focus,
|
|
.catalogue-overview-similar-artists-item-name a:hover {
|
|
color: @text;
|
|
}
|
|
|
|
.stationlink::before {
|
|
background-color: @accent;
|
|
-webkit-filter: invert(0%);
|
|
filter: invert(0%);
|
|
}
|
|
|
|
.stationlink:focus::before,
|
|
.stationlink:hover::before {
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.video-preview-upload-cta {
|
|
background-color: @crust;
|
|
box-shadow: 0 0 0 2px @accent-dim;
|
|
}
|
|
|
|
.video-preview-upload-cta:not(.cta--inactive):focus,
|
|
.video-preview-upload-cta:not(.cta--inactive):hover {
|
|
background-color: @base;
|
|
}
|
|
|
|
.highcharts-plot-bands-0 > path {
|
|
fill: @overlay0;
|
|
}
|
|
|
|
.listener-trend .highcharts-area {
|
|
fill: fadeout(@red, 0.1);
|
|
}
|
|
|
|
.listener-trend .highcharts-graph {
|
|
stroke: @red;
|
|
}
|
|
|
|
.Colored-cta {
|
|
background-color: fadeout(@surface2, 0.3);
|
|
}
|
|
.Colored-cta:not(.cta--inactive):focus,
|
|
.Colored-cta:not(.cta--inactive):hover {
|
|
background-color: fadeout(@surface2, 0.7);
|
|
}
|
|
.similar-items-sidebar-item-name {
|
|
color: @text;
|
|
}
|
|
.resource-list--release-list-item-name {
|
|
color: @text;
|
|
}
|
|
.shout--deleted,
|
|
.shout--reported {
|
|
background: @base;
|
|
}
|
|
.play-this-track-playlinks {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* WIKI */
|
|
.factbox-item,
|
|
#factbox-more-members {
|
|
color: @subtext0;
|
|
}
|
|
|
|
|
|
.factbox-item > h4 {
|
|
color: @accent;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: @peach;
|
|
background-color: @crust;
|
|
}
|
|
|
|
.content-form .form-control,
|
|
.content-form input[type=date],
|
|
.content-form input[type=email],
|
|
.content-form input[type=number],
|
|
.content-form input[type=password],
|
|
.content-form input[type=text],
|
|
.content-form input[type=url],
|
|
.content-form select,
|
|
.content-form textarea {
|
|
background-color: @crust;
|
|
border: 1px solid @crust;
|
|
color: @subtext0;
|
|
}
|
|
|
|
.content-form .form-control:focus,
|
|
.content-form input[type=date]:focus,
|
|
.content-form input[type=email]:focus,
|
|
.content-form input[type=number]:focus,
|
|
.content-form input[type=password]:focus,
|
|
.content-form input[type=text]:focus,
|
|
.content-form input[type=url]:focus,
|
|
.content-form select:focus,
|
|
.content-form textarea:focus {
|
|
box-shadow: none;
|
|
border: 1px solid @crust;
|
|
}
|
|
.content-form .form-control:hover:not([disabled]),
|
|
.content-form input[type=date]:hover:not([disabled]),
|
|
.content-form input[type=email]:hover:not([disabled]),
|
|
.content-form input[type=number]:hover:not([disabled]),
|
|
.content-form input[type=password]:hover:not([disabled]),
|
|
.content-form input[type=text]:hover:not([disabled]),
|
|
.content-form input[type=url]:hover:not([disabled]),
|
|
.content-form select:hover:not([disabled]),
|
|
.content-form textarea:hover:not([disabled]),
|
|
.content-form .inplace-field,
|
|
.inplace-field {
|
|
border: 1px solid @crust;
|
|
color: @text
|
|
}
|
|
.control-label {
|
|
color: @accent;
|
|
}
|
|
.join-form .form-row-help-text {
|
|
color: @text;
|
|
background-color: @surface1;
|
|
}
|
|
#stylerules {
|
|
background-color: @overlay0;
|
|
color: @subtext0;
|
|
}
|
|
.secondary-nav-item-link--active:after,
|
|
a.secondary-nav-item-link:focus:after,
|
|
a.secondary-nav-item-link:hover:after {
|
|
background-color: @accent;
|
|
}
|
|
|
|
|
|
|
|
/* OBSESSIONS */
|
|
.obsession-history-play-all::before {
|
|
background-color: @accent;
|
|
-webkit-filter: invert(0%);
|
|
filter: invert(0%);
|
|
color: @text;
|
|
}
|
|
|
|
.obsession-history-play-all.js-playlink-station.inline-section-control {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
.obsession-history-play-all:hover::before {
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.obsession-search-result-header {
|
|
color: @accent;
|
|
}
|
|
|
|
.obsession-candidate-heading {
|
|
color: @text;
|
|
}
|
|
|
|
.modal-dialog.popup_content,
|
|
.modal-content {
|
|
background-color: @mantle;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.modal-body {
|
|
background-color: @base;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.content-form textarea:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.content-form textarea:hover:not([disabled]) {
|
|
border-color: @accent;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* MESSAGES */
|
|
.inbox-notifications .inbox-notifications__item {
|
|
color: @subtext0;
|
|
}
|
|
|
|
.inbox-notifications .inbox-notifications__item--highlight {
|
|
background-color: @overlay0;
|
|
}
|
|
.inbox-notifications .inbox-notifications__item--hover {
|
|
box-shadow: none;
|
|
}
|
|
.inbox-notifications__item--highlight-hover:hover {
|
|
background-color: @crust;
|
|
}
|
|
|
|
.inbox-message-subject {
|
|
color: @accent;
|
|
}
|
|
|
|
.inbox-message-message {
|
|
color: @text;
|
|
}
|
|
|
|
.inbox-message-view .inbox-message-message blockquote {
|
|
background: @crust;
|
|
border: 1px solid @accent;
|
|
}
|
|
|
|
body:not([data-whatinput="touch"]) .inbox-notifications .inbox-notifications__item--hover:hover {
|
|
background-color: @crust;
|
|
}
|
|
|
|
.inbox .inbox-message {
|
|
background-color: @crust;
|
|
}
|
|
|
|
.inbox .inbox-message--unviewed {
|
|
background-color: @overlay0;
|
|
}
|
|
|
|
.inbox .inbox-message--unviewed .inbox-message-status::after {
|
|
background-color: @accent;
|
|
}
|
|
|
|
/* ADS */
|
|
.lastfm-ad {
|
|
display: none;
|
|
}
|
|
.full-bleed-ad-container,
|
|
.sidebar-ad-container {
|
|
background-color: @base;
|
|
}
|
|
|
|
/* RECOMMENDATIONS ON PROFILE */
|
|
.profile-card-content {
|
|
background: @surface0 !important;
|
|
}
|
|
/* UPGRADE TO PRO */
|
|
.btn-subscribe,
|
|
.btn-subscribe:hover,
|
|
.btn-subscribe:active {
|
|
background-color: @accent !important;
|
|
}
|
|
.listening-report-brick--upsell {
|
|
display: none;
|
|
}
|
|
.your-progress {
|
|
color: @text;
|
|
}
|
|
/*----Profile Cards Hide-------*/
|
|
.profile-cards-container {
|
|
display: none !important;
|
|
}
|
|
/* HEADER */
|
|
.header--overview,
|
|
.header--sub-page {
|
|
color: @text;
|
|
}
|
|
/*-----Primary Button------*/
|
|
.btn-primary,
|
|
.btn-primary:hover,
|
|
.btn-primary:active,
|
|
.no-data-message-button,
|
|
.no-data-message-button:hover,
|
|
.no-data-message-button:active,
|
|
.api-session-connect,
|
|
.api-session-disconnect:hover,
|
|
.api-session-disconnect:active,
|
|
.clipboard-button,
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .clipboard-button:focus,
|
|
body:not([data-whatinput=touch]) .clipboard-button .focus-visible,
|
|
body:not([data-whatinput=touch]) .clipboard-button:hover {
|
|
background-color: @accent !important;
|
|
color: @base !important;
|
|
}
|
|
.api-session-disconnect {
|
|
background-color: @accent-dim !important;
|
|
color: @base !important;
|
|
}
|
|
/*-----Shortcut Button------*/
|
|
.btn-shortcut,
|
|
.btn-shortcut:hover,
|
|
.btn-shortcut:active {
|
|
background-color: @accent-dim !important;
|
|
color: @text !important;
|
|
}
|
|
/*------FOOTER-----*/
|
|
.footer .footer-heading {
|
|
color: @subtext1;
|
|
}
|
|
.footer {
|
|
background-color: @mantle;
|
|
color: @text;
|
|
}
|
|
.footer .footer-bottom {
|
|
border-top: none;
|
|
}
|
|
.footer .footer-bottom .row {
|
|
background-color: @mantle;
|
|
}
|
|
.footer .footer-language--active,
|
|
.footer-timezone strong,
|
|
.footer .footer-language--active strong {
|
|
color: @text;
|
|
}
|
|
.footer .footer-language,
|
|
.footer-timezone,
|
|
.footer .footer-legal {
|
|
color: @overlay0;
|
|
}
|
|
/*--------TOP BAR----------*/
|
|
.top-bar,
|
|
.player-bar,
|
|
.main-content:before,
|
|
.masthead-nav {
|
|
background: @mantle;
|
|
color: @text !important;
|
|
}
|
|
.masthead-nav-control,
|
|
.site-auth-control,
|
|
.site-auth--anon:before,
|
|
.masthead-nav .navlist-more {
|
|
color: @text !important;
|
|
}
|
|
.auth-dropdown-menu {
|
|
background-color: @base !important;
|
|
}
|
|
.auth-dropdown-menu-item {
|
|
color: @text !important;
|
|
}
|
|
.auth-dropdown-menu-item:hover,
|
|
.auth-dropdown-menu-item:active {
|
|
background-color: @overlay0 !important;
|
|
color: @text !important;
|
|
}
|
|
.masthead-nav .masthead-nav-control:focus,
|
|
.masthead-nav .masthead-nav-control:hover,
|
|
.masthead-nav .navlist-more:focus,
|
|
.masthead-nav .navlist-more:hover,
|
|
.site-auth-control:focus,
|
|
.site-auth-control:hover {
|
|
background-color: transparent;
|
|
color: @accent !important;
|
|
}
|
|
.site-auth-control.btn-secondary {
|
|
color: @base !important;
|
|
}
|
|
.masthead-search-form {
|
|
background-color: @mantle;
|
|
}
|
|
.masthead-search-submit {
|
|
background-color: @accent;
|
|
color: @base;
|
|
}
|
|
body:not(.js-focus-visible) body:not([data-whatinput=touch]) .masthead-search-submit:focus,
|
|
body:not([data-whatinput=touch]) .masthead-search-submit .focus-visible,
|
|
body:not([data-whatinput=touch]) .masthead-search-submit:hover {
|
|
background-color: @accent;
|
|
color: @base;
|
|
}
|
|
.masthead-search-field {
|
|
color: @text;
|
|
}
|
|
/*-------PLAYLISTS---------*/
|
|
.chartlist-timestamp {
|
|
color: @subtext0;
|
|
}
|
|
/*-----GENRES TODAY-----*/
|
|
.genretodaybar,
|
|
.rolling_no {
|
|
background: @mantle !important;
|
|
}
|
|
/*-----NAV ITEMS-----*/
|
|
.library-controls .secondary-nav .secondary-nav-item-link--active,
|
|
.date-range-picker-button-inner,
|
|
.library-controls .secondary-nav .secondary-nav-item-link--active:focus,
|
|
.library-controls .secondary-nav .secondary-nav-item-link--active:hover,
|
|
body:not([data-whatinput=touch]) .catalogue-tags .tag a:hover {
|
|
color: @accent !important;
|
|
}
|
|
/*------ARTIST TAGS-----*/
|
|
.catalogue-tags .tag a,
|
|
.catalogue-tags .tags-add,
|
|
.catalogue-tags .tags-add-cta,
|
|
body:not([data-whatinput=touch]) .catalogue-tags .tag a:hover {
|
|
color: @accent;
|
|
box-shadow: inset 0 0 0 1px @accent-dim;
|
|
}
|
|
/*-----HIDE PLAY BUTTON ON TOP TRACK------*/
|
|
.image-overlay-playlink-link:before {
|
|
display: none;
|
|
}
|
|
/*---------CHARTS FIX---------*/
|
|
.globalchart .globalchart-item:first-child {
|
|
background-color: fadeout(@mantle, 0.8);
|
|
}
|
|
.globalchart-item:first-child .globalchart-rank {
|
|
color: @accent !important;
|
|
}
|
|
.globalchart-item .globalchart-rank {
|
|
color: @text;
|
|
}
|
|
/*-------LOG IN PAGE-------*/
|
|
.auth-container > .auth-container-animation {
|
|
background-color: transparent;
|
|
}
|
|
#join-animation-container {
|
|
display: none !important;
|
|
}
|
|
h1.text-24 {
|
|
color: @accent;
|
|
}
|
|
.checkbox {
|
|
color: @text;
|
|
}
|
|
|
|
/*----ICONS----*/
|
|
.lazy-buylinks-toggle::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png");
|
|
-webkit-mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.chartlist-more-button::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png");
|
|
-webkit-mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.lazy-buylinks-toggle:hover:before,
|
|
.lazy-buylinks-toggle:focus:before,
|
|
.chartlist-more-button:hover:before,
|
|
.chartlist-more-button:focus:before {
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.chartlist-love-button::before,
|
|
.header-new-love-button::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png");
|
|
-webkit-mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png");
|
|
background-color: @text;
|
|
mask-position: 0 0;
|
|
-webkit-mask-position: 0 0;
|
|
}
|
|
|
|
.chartlist-love-button:focus:before,
|
|
.chartlist-love-button:hover:before,
|
|
.header-new-love-button:focus::before,
|
|
.header-new-love-button:hover::before {
|
|
mask-position: -24px 0;
|
|
background-color: @red;
|
|
}
|
|
|
|
[data-toggle-button-current-state=loved] .chartlist-love-button:before,
|
|
[data-toggle-button-current-state=loved] .header-new-love-button:before {
|
|
mask-position: -552px 0;
|
|
transition: mask-position .7s steps(23) !important;
|
|
-webkit-transition: -webkit-mask-position .7s steps(23) !important;
|
|
background-color: @red;
|
|
}
|
|
|
|
[data-toggle-button-current-state=loved] .chartlist-love-button:focus:before,
|
|
[data-toggle-button-current-state=loved] .chartlist-love-button:hover:before,
|
|
[data-toggle-button-current-state=loved] .header-new-love-button:focus::before,
|
|
[data-toggle-button-current-state=loved] .header-new-love-button:hover::before {
|
|
transition: mask-position .7s steps(22) !important;
|
|
-webkit-transition: -webkit-mask-position .7s steps(22) !important;
|
|
}
|
|
|
|
.section-settings-toggle::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png");
|
|
-webkit-mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.share-button-profile::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png");
|
|
-webkit-mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.section-settings-toggle:hover:before,
|
|
.section-settings-toggle:focus:before,
|
|
.share-button-profile:hover:before,
|
|
.share-button-profile:focus:before {
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.cta-link::before,
|
|
.lyrics-snippet-more-link ::before,
|
|
.trending-tracks-more-link ::before,
|
|
.more-link-fullwidth-right ::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png");
|
|
-webkit-mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png");
|
|
background-color: @accent;
|
|
}
|
|
|
|
.play-this-track-playlink--itunes::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png");
|
|
-webkit-mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.resource-external-link--homepage::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png");
|
|
-webkit-mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.alert-warning::before {
|
|
background-image: none;
|
|
mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png");
|
|
-webkit-mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png");
|
|
background-color: @peach;
|
|
}
|
|
|
|
.masthead-search-toggle::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/search_16.bde37072495a.png");
|
|
-webkit-mask-image: url("/static/images/icons/search_16.bde37072495a.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.masthead-search-toggle:hover:before,
|
|
.masthead-search-toggle:focus:before {
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.masthead-search-toggle.disclose-active::before {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png");
|
|
-webkit-mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png");
|
|
background-color: @text;
|
|
}
|
|
|
|
.masthead-search-toggle.disclose-active:hover:before,
|
|
.masthead-search-toggle.disclose-active:focus:before {
|
|
background-color: @subtext0;
|
|
}
|
|
|
|
.masthead-logo {
|
|
background-image: none !important;
|
|
mask-image: url("/static/images/logo_static.adb61955725c.png");
|
|
-webkit-mask-image: url("/static/images/logo_static.adb61955725c.png");
|
|
mask-position: 50% 50%;
|
|
-webkit-mask-position: 50% 50%;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: @red;
|
|
}
|
|
|
|
.catalogue-tags .tags-add::before {
|
|
background-image: none;
|
|
mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png");
|
|
-webkit-mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png");
|
|
background-color: @accent;
|
|
}
|
|
|
|
.masthead-logo-loading {
|
|
-webkit-mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif");
|
|
mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif");
|
|
-webkit-mask-size: contain;
|
|
mask-position: 50% 50%;
|
|
-webkit-mask-position: 50% 50%;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-repeat: no-repeat;
|
|
background: @accent !important;
|
|
}
|
|
|
|
.layout-image {
|
|
background: @crust;
|
|
.layout-image-image {
|
|
mix-blend-mode: screen;
|
|
}
|
|
}
|
|
}
|
|
}
|