last.fm.user.styl

/* ==UserStyle==
@name           last.fm
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    A new userstyle
@author         Me

@preprocessor stylus

@var text avatar-size "Avatar size" 32px
==/UserStyle== */

// Variables
vendors = official;
$small-screen = 768px;
$select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
$select-size = 16px;
$i = !important;

// Stylus
svar(var) {
	s('var(--%s)', var);
}

cond(n, yes, no) {
	(n == 0 ? no : yes) $i;
}

sel-cond(sel, pos) {
	pos ? s('%s-%s', sel, pos) : sel;
}

color-a(n, bright = true) {
	s = bright ? -2 : null;
	n = n > 6 ? n - 8 : n;

	s('hsla(var(--color%s-h),	var(--color-s%s),	var(--color-l%s), var(--bg-opacity))', n, s, s);
}

// Appearance
bg(n =) {
	background-color: s('var(--bg%s)', n) $i;

	if (n == -tr || n == -tr2 || n == -tr3) {
		backdrop-filter: var(--popup-filter) $i;
	}
}

fg(n =) {
	color: s('var(--fg%s)', n) $i;
}

bgc(n1 =, n2 =) {
	bg(n1);
	fg(n2);
}

hl() {
	background-color: var(--hl) $i;
	color: var(--hl-fg) $i;
}

accent() {
	background-color: var(--accent) $i;
	color: var(--accent-fg) $i;
}

clr(n) {
	color: s('var(--color%s)', n) $i;
}

lnh() {
	line-height: var(--line-height) $i;
}

pad(pos =, n = 1) {
	{sel-cond(padding, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

mar(pos =, n = 1) {
	{sel-cond(margin, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

shd(n) {
	box-shadow: cond(n, s('var(--shadow-%s)', n), none);
}

rad(n = 1) {
	border-radius: cond(n, var(--border-radius), 0);
}

brd(pos =, color = border) {
	if (color) {
		color = svar(color);
	}

	{sel-cond(border, pos)}: \
		(color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
	if (!pos) {
		rad(pos);
	}
}

// Position
box(w, h = w) {
	width: w $i;
	height: h $i;
}

flex(display = flex, alignment = center, justification =) {
	display: display $i;
	align-items: alignment $i;
	justify-content: justification $i;
}

// Animation
anim(name =, func = ) {
	@media (prefers-reduced-motion: no-preference) {
		{name ? animation : transition}: name var(--trans-dur) func $i;
	}
}

dropfade() {
	anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
}

// Focus
focus(p = focus) {
	anim();

	&:{p} {
		border-color: var(--hl) $i;
		box-shadow: var(--shadow-ins) var(--hl) $i;
		outline: none $i;
	}
}

header-focus(class = page-focus) {
	.{class} & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}

	// Stylus is unable to recognise :where()
	:root:not(:-moz-window-inactive) & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}
}

// Text
replace-text(content =, text-color = fg, pos = after) {
	color: transparent $i;
	letter-spacing: -9999px $i;

	if (content) { // Replace
		&::{pos} {
			content: content $i;
			letter-spacing: 0 $i;
			color: svar(text-color) $i;
		}
	} else { // Hide
		* {
			letter-spacing: 0 $i;
			color: svar(text-color) $i;
		}
	}
}

hide-chars(amount, pos, bg =) {
	margin-{pos}: s('-%sch', amount) $i;
	position: relative $i;

	element = pos == left ? before : after;
	&::{element} {
		content: '' $i;
		position: absolute $i;
		inset: 0;
		box(s('%sch', amount), calc(1em * var(--line-height)));
		bg(bg);
	}
}

// Normalisation
disabled() {
	&:disabled {
		opacity: 0.5 $i;
		cursor: not-allowed $i;
	}
}

normalise-select() {
	appearance: none $i;
	bgc(2);
	lnh();
	background-image:
		linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
		linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
		linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
	background-size: 20px 20px $i;
	background-repeat: no-repeat $i;
	background-position: right 50% $i;
	pad();
	padding-right: calc(var(--pad) + 20px) $i;
	brd();
	focus();
	disabled();
}

normalise-input() {
	bgc(2);
	lnh();
	pad();
	brd();
	focus();
	disabled();

	&::placeholder {
		fg(2);
	}
}

normalise-button() {
	bgc(2);
	lnh();
	background-image: none $i;
	padding: var(--pad) calc(var(--pad) * 2) $i;
	brd();
	cursor: pointer $i;
	focus();
	disabled();
}

normalise-color() {
	bg(2);
	pad(0);
	brd();
	box($select-size);
	focus();
	disabled();

	&::-webkit-color-swatch {
		brd(0);
		// Prevent from making it look like a radio input
		border-radius: calc(var(--border-radius) * 0.33) $i;

		&-wrapper {
			pad(0);
		}
	}
}

normalise-checkbox(label = true) {
	if (label) {
		/label {
			lnh();
			flex();
			gap: 1ch $i;
		}
	}

	appearance: none $i;
	bg(2);
	brd();
	// Prevent from making it look like a radio input
	border-radius: calc(var(--border-radius) * 0.33) $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	min-width: $select-size $i;
	focus();

	&::before,
	&::after {
		content: '';
		position: absolute $i;
		inset: 0;
		background-color: var(--hl) $i;
		transform-origin: 0 0 $i;
	}
	&:disabled {
		&::before,
		&::after {
			background-color: var(--fg2) $i;
		}
	}

	&::before {
		transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
	}
	&:indeterminate::before {
		transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
		transition-duration: 33.3ms $i;
	}
	&::after {
		transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
	}

	&:checked {
		&::before {
			transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
			transition-duration: 33.3ms $i;
		}
		&::after {
			transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
			transition-delay: 33.3ms $i;
			anim();
		}
	}
}

normalise-radio() {
	appearance: none $i;
	bg(2);
	brd();
	border-radius: 50% $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	focus();

	&::before {
		content: '';
		position: absolute $i;
		inset: $select-size / 5;
		background-color: var(--hl) $i;
		border-radius: 50% $i;
		transition: transform var(--trans-dur) linear $i;
		transform: scale(0) $i;
	}
	&:disabled::before {
		background-color: var(--fg2) $i;
	}
	&:checked::before {
		transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
		transform: scale(1) $i;
		anim();
	}
}

normalise-header(first = true) {
	fg();
	lnh();
	text-transform: uppercase $i;
	letter-spacing: 1px $i;
	pad(0);
	pad(bottom);
	brd(bottom);
	mar(0);
	mar(bottom);
	if (!first) {
		margin-top: calc(var(--pad) * 2) $i;
	}
}

@-moz-document domain("last.fm") {
	/**
	 * Global
	**/
	body {
		bgc();
		lnh();
		margin-bottom: var(--body-pad);
	}
	a {
		color: var(--fg-link);

		&:hover {
			text-decoration: underline;
		}
	}
	.main-content,
	.container,
	.header {
		bg();
		background-image: none $i;
	}
	.btn-primary,
	.btn-secondary {
		normalise-button();
		bg();
		letter-spacing: unset;
		text-transform: unset;
		mar(0);
		min-height: unset;
	}
	input {
		&[type="email"],
		&[type="tel"],
		&[type="text"],
		&[type="password"],
		&[type="url"],
		&[type="number"],
		&[type="search"],
		/textarea {
			normalise-input();
		}
		&[type="color"] {
			normalise-color();
		}
		&[type="checkbox"] {
			normalise-checkbox(false);
			pad(0);
		}
		&[type="radio"] {
			normalise-radio();
		}
		&[type="date"],
		/select:not(.unit) {
			normalise-select();
		}
	}
	label {
		pad(0);
		mar(0);

		.checkbox & {
			flex(inline-flex);
			gap: 1ch;
		}
	}
	select {
		normalise-select();
	}
	.search-field,
	.inplace-field {
		normalise-input();
	}
	input,
	textarea,
	select,
	button {
		--bg2: var(--bg);
		height: unset $i;
	}
	::after {
		.avatar&,
		.cover-art&,
		.imsge-list-item&,
		.video-thumbnail& {
			shd(0);
		}
	}

	/**
	 * Hide elements
	**/
	.footer, .lazy-features-footer,
	.scrobble-stats-info-toggle,
	.shout-more-actions,

	// Not logged in
	[href="/join"],
	[href^="/login"],
	.chartlist-loved,
	.site-auth--anon,
	.catalogue-callout,
	.shouting-unavailable,

	// Play artist
	//.player-bar-progress,
	//.player-bar-inner-wrap,
	//.player-bar-progress-wrap,
	.header-new-info-desktop,
	.section-playlink,
	.chartlist-play,
	.stationlink
	{
		display: none $i;
	}

	/**
	 * Header
	**/
	.top-bar {
		bgc(2);
		header-focus();
		brd(bottom);
	}
	.player-bar {
		bgc(2);
		height: unset;
	}
	.top-bar/*,
	.player-bar*/ {
		height: var(--header-h);
	}
	.masthead {
		&-logo {
			height: calc(var(--header-h) - var(--pad));
			top: calc(var(--pad) / 2);

			a {
				color: transparent;
			}
		}
		&-inner-wrap {
			pad(0);
		}
		&-search-toggle,
		&-nav-control,
		&-nav {
			lnh();
		}
		&-search-toggle {
			fg(-link);
			opacity: 1;
			padding: var(--pad) 0 $i;
			margin-right: 1ch;
			box(unset, fit-content);

			&::before {
				display: none;
			}
		}
		&-nav {
			&,
			&-item {
				mar(left, 0);
			}
			&-item {
				margin-right: 1ch $i;
			}
			&-control {
				fg(-link);
				opacity: 1 $i;
				padding: var(--pad) 0 $i;

				&:hover {
					text-decoration: underline $i;
				}
			}
		}
	}
	.player-bar {
		&-artwork {
			mar(right);
			box(var(--header-h));
		}
	}
	.header-new,
	.content-top {
		brd(bottom);
		margin-bottom: var(--body-pad);
	}
	.header-new {
		&-content {
			pad(left, 0);
		}
		&-title {
			line-height: unset;
			letter-spacing: unset;
		}
	}
	.content-top {
		&::after {
			display: none;
		}

		&,
		&-inner-wrap > .container {
			bg(2);
			pad(left, 0);
			pad(right, 0);
		}
	}
	.secondary-nav-item {
		mar(0);

		&-link {
			fg(2);
			opacity: unset $i;
			pad();
			mar(0);

			&:not(&--active):hover {
				color: #fff $i;

				.content-top & {
					fg();
				}
			}

			&--active {
				hl();

				&::after {
					display: none;
				}
			}
		}
	}
	.main-content {
		padding-top: calc(var(--header-h) + var(--border-width));
	}

	/**
	 * Content
	**/
	// Main
	.page-content {
		bg(2);
		pad();
		brd();
		brd(bottom, 0);

		header ~ & {
			brd(top);
		}
	}
	.row {
		mar(0);
		display: flex;
		gap: var(--pad);

		&::before,
		&::after {
			display: none;
		}
	}
	.col {
		&-main,
		&-sidebar {
			pad(0);
		}
		.anhv1 &-main {
			width: 100%;
		}
		&-sidebar {
			pad(left);
			brd(left);

			.anhv1 & {
				display: none;
			}
		}
		&-sm-2 {
			width: 152px $i;
		}
	}
	[class^="col-"] {
		pad(0);
	}
	.buffer-standard {
		mar(0);
	}
	section {
		mar(top, 0);
	}
	.section-with-separator {
		pad(bottom, 0);
		mar(top, 0);

		&::after {
			display: none;
		}
	}
	.more-link-fullwidth-right {
		mar(top);
	}
	.more-items {
		fg(-link);
		mar(top);
	}
	.dropdown-menu-clickable {
		bg(-tr);
		text-transform: none $i;
		pad(0);
		brd();
		shd(big);

		@media (prefers-color-scheme: dark) {
			&::before {
				filter: invert();
			}
		}

		&-item {
			fg();
			pad();

			&:hover {
				hl();
			}
		}
		&-button {
			fg();
			pad(top, 0);
			letter-spacing: 0 $i;

			@media (prefers-color-scheme: dark) {
				&::after {
					filter: invert();
				}
			}
		}
	}
	section {
		& > h2,
		& > h3,
		/.col-main > h2,
		/.section-controls {
			normalise-header(false);
			width: 100%;
		}
	}
	.section-with-separator {
		&:first-of-type > h2,
		&:first-of-type > h3,
		&:first-of-type > .section-controls,
		/.col-main > section:first-of-type > .section-controls,
		/.col-main > h2:first-of-type,
		/.col-sidebar > section:first-of-type > h3,
		.artist-similar-sidebar > h3 {
			mar(top, 0);
		}
	}
	.inline-section-control {
		margin-left: auto;
		mar(right, 0);
	}
	.subpage-title {
		letter-spacing: unset;
	}
	.text-18,
	.subpage-title {
		lnh();
	}

	// Artist
	.catalogue-tags {
		margin-left: calc(var(--pad) * -1);
		mar(top);

		.tag {
			&,
			&s-add {
				mar(left);
				mar(bottom, 0);
			}
			&s-add,
			a {
				lnh();
				letter-spacing: 0;
				pad();
				brd(,color4);
				shd(0);
				min-height: unset;
				anim();

				&:hover {
					border-color: var(--color13) $i;
				}
			}
			&s-add {
				box(unset);
				replace-text('+',, after);

				&::before {
					display: none;
				}
			}
			&s-view-all {
				margin-left: 1ch;
			}

			a {
				fg();
			}
		}
	}
	.chartlist {
		brd();

		&-row {
			pad(0);
			brd(bottom);

			&::after {
				display: none;
			}

			&,
			&:hover {
				bg();
			}
			&:last-child {
				brd(0);
			}
		}
		&-buylinks,
		&-index,
		&-more {
			display: none $i;
		}
		&-bar,
		&-image {
			mar(0);
		}
		&-name {
			mar(left);
			mar(right);
		}
		&-count-bar {
			lnh();

			&-link {
				display: unset;
			}
			&-value {
				padding: 0 var(--pad);
			}
			&-slug {
				background-color: color-a(4);
			}
		}
	}
	.shout {
		pad(bottom);
		brd(bottom);

		&-container {
			pad(top);
		}
		&box,
		&-list,
		&-list-item {
			mar(top);
		}
		&-form {
			pad(bottom);
			brd(bottom, 0);
		}
		&-form + &-list {
			brd(top);
			mar(top, 0);
		}
		&box-sort-toggle {
			top: calc(var(--pad) * 2);
		}
		&-user {
			mar(bottom);

			a {
				fg();
			}
		}
		&-timestamp {
			fg(2);
		}
		&-action {
			fg();
			lnh();

			&s {
				mar(0);
			}
		}
		&--deleted {
			bg();
			pad();
			brd();
			mar(0);
		}
	}
	.metadata-and-wiki-row {
		mar(0);

		.wiki-column {
			pad(0);
		}
	}
	.wiki {
		&-block-cta .cta-link {
			mar(0);
		}
		&-container {
			mar(top, 0);
		}
		/.metadata,
		&-content,
		&-legal {
			lnh();
		}
		&-author
		&-legal {
			fg(2);
			pad(top);
			pad(bottom, 0);
			brd(top);
			mar(top);
		}
	}
	.artist-similar-sidebar-more {
		top: 0;
	}
	.catalogue-overview-similar-artists-full-width,
	.artist-similar-artists-sidebar,
	.similar-items-sidebar,
	.artist-top-albums {
		mar(top);
		margin-left: calc(var(--pad) * -1) $i;
		margin-right: calc(var(--pad) * -1) $i;

		&-item {
			&-wrap {
				pad(left);
				pad(right);
			}
			&-name {
				lnh();
				mar(top);
			}
			&-aux-text,
			&-regular-tags {
				fg(2);
				lnh();
				mar(top, 0);
			}
		}
	}
	.similar-items-sidebar {
		mar(top);

		&-item {
			&-wrap {
				mar(top);
			}
			&-name {
				mar(top, 0);
			}
		}
	}

	// Search
	.search {
		&-form::after {
			display: none;
		}
		&-reset,
		&-submit {
			brd(left);
		}
		&-submit {
			opacity: 1;
		}
	}
	.grid-items {
		&,
		/.chartlist {
			mar(top, 0);
		}

		&-item {
			//brd();
			//mar();

			&-details {
				bg(-tr);
				text-shadow: none;
				lnh();
				pad();
				brd(top);
				right: 0;
				left: 0;
				bottom: 0;
			}
			&-main-text {
				mar(0);
			}
			&-aux-text {
				fg(2);
			}
		}
		&-cover-image {
			fg();

			&-image::after {
				display: none;
			}
		}
	}

	// Front page
	.home-welcome-header {
		normalise-header();
	}
	:root {
		@media (max-width: 1920px) { --items: 6; }
		@media (max-width: 1600px) { --items: 5; }
		@media (max-width: 1280px) { --items: 4; }
		@media (max-width: 960px) { --items: 3; }
		@media (max-width: 640px) { --items: 2; }
	}
	.recs-feed {
		lnh();
		mar(0);
		height: unset $i;
		display: grid;
		grid-gap: var(--pad);
		grid-template-columns: repeat(var(--items), 1fr);
		grid-auto-rows: min-content;

		&-inner-wrap {
			bg();
			brd();
		}
		&-item {
			pad(0);
			mar(0);
			position: unset $i;
			left: unset $i;
			top: unset $i;
			width: unset $i;
		}
		&-cover-image {
			&-wrap {
				text-shadow: none $i;
			}
			&-content {
				pad();
			}
		}
		&-playlink {
			left: var(--pad) $i;
			top: var(--pad) $i;
		}

		// Make artist image the same width
		&-inner-wrap,
		/.layout-image-image {
			height: 100%;
		}
		/.layout-image {
			padding-top: 100% $i;
		}

		.context {
			bgc();
			pad();
			brd(top);
			shd(0);

			&::after {
				right: var(--pad) $i;
				bg(-tr);

				@media (prefers-color-scheme: light) {
					//filter: invert();
				}
			}
		}

		context-colors = {
			album:  10,
			artist: 11,
			track:  14
		}
		for k, v in context-colors {
			&-item--{k} .context::after {
				background-color: color-a(v) $i;
			}
		}
	}

	// Settings
	.content-form {
		form {
			mar(top, 0);
		}
		legend {
			fg(2);
		}
		.control-label {
			lnh();
		}
	}
	.form {
		&-section:first-of-type > &-header {
			mar(top, 0);
		}
		&-group {
			mar(top);
		}
		&-row-help-text {
			fg(2);
			lnh();
			mar(top);
		}
	}
	.mimic-link {
		normalise-button();

		&.image-upload-remove {
			mar(top);
		}
	}
	.alert {
		lnh();
		pad();

		&::before {
			display: none;
		}

		colors = {
			success: 10,
			warning: 11,
			error:   12
		}
		for k, v in colors {
			&-{k} {
				background-color: color-a(v);
				fg();
				brd(,s('color%s', v));
			}
		}
	}
	.api-session {
		pad(0);
		brd(bottom);

		&::after {
			display: none;
		}

		&-body {
			padding-left: calc(40px + var(--pad));

			&-wrap {
				pad();
				pad(right, 0);
			}
		}
		&-details {
			mar(right);
		}
		&-connect,
		&-disconnect {
			normalise-button();
			text-transform: unset;
			mar(top, 0);
		}
		&-app {
			&-image {
				top: 3px; // ?
			}
			&-name {
				lnh();
			}
			&-last-used {
				fg(2);
				lnh();
				mar(top, 0);
			}
		}
		&s {
			mar(0);
		}
	}
}