Something went wrong. Try again.
a full redesign for last.fm bleh.katelyn.moe
bleh lastfm
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573.user-list .link-block-cover-link { width: 32px; height: 32px;}
.listeners-section-item-image,.top-listeners-item-image,.user-list-avatar { box-shadow: var(--card-shadow); border-radius: var(--avatar-radius); width: 32px; height: 32px; --mask-size: var(--cover-size-32); margin-top: unset; background: var(--avatar-generic-background);}
.col-main-is-primary>.col-main>.pagination { margin-top: var(--card-gap);}
.user-list-inner-wrap { padding-left: calc(32px + var(--card-gap)); padding-right: unset; margin: var(--item-list-gap) 0; min-height: unset; height: 32px;
.link-block-cover-link { display: none; }
&.staff-user { --hue-over: 360; --sat-over: 1.325; --lit-over: 0.825; }}
.user-list-item-mobile-ad { display: none !important;}
.user-list-item { width: var(--user-list-item-width, 100%); padding: var(--user-list-item-padding, 0 var(--item-list-gap)); border-radius: var(--user-list-item-radius, unset); margin: unset;
&.listener-list-item { .listener-list-position { font-size: calc(var(--font-size) - 1px); color: oklch(var(--c3)); cursor: pointer; } }
.user-list-follower-btn { top: 50%; margin-top: -16px; }
--follow-button-bg: oklch(var(--b4) / 40%); --follow-button-bg-hov: oklch(var(--b4) / 60%); --follow-button-bg-atv: oklch(var(--b4) / 80%); --follow-button-col: oklch(var(--c2));
&:not(:hover, :focus-within) { --follow-button-opacity: 0.4; }
animation: var(--motion, chartlist 0.4s var(--trans-function-ani)) !important; animation-delay: var(--delay, 0s) !important; animation-fill-mode: backwards !important;}
.user-background { display: none;}
.user-list-follower-btn { --bg: var(--follow-button-bg); --bg-hov: var(--follow-button-bg-hov); --bg-atv: var(--follow-button-bg-atv); --shadow: none; --shadow-hov: none; --col: var(--follow-button-col); --button-height: var(--follow-button-size); --left: 50%; --margin-left: calc(-1 * (var(--icon-size) / 2)); --radius: 50%;
width: var(--button-height) !important; height: var(--button-height) !important;
opacity: var(--follow-button-opacity, 1);}
.user-list { display: flex; flex-direction: column; margin: unset;
&:before, &:after { display: none; }
.user-follow { --mask-size: 18px; width: calc(18px + 2px) !important; height: calc(18px + 2px) !important; padding: 1px !important; border-radius: 50px !important;
background-color: oklch(var(--b6), calc(var(--solarium-opacity, 1) * 80%)) !important;
min-width: unset;
--margin-top: -9px !important; --left: 1px !important; }
.user-list-inner-wrap {
&:before, &:after { display: none; } }
&[data-list-view="list"] { .user-list-item { border-bottom: 1px solid var(--separator-base);
&[data-is-followed="true"], &[data-position="1"] { background: linear-gradient(90deg, oklch(var(--h4) / 20%) 0%, transparent 28%); } }
.user-list-avatar { top: var(--item-list-gap); left: var(--item-list-gap); }
.username-combo { text-align: left; flex-direction: row; }
.user-list-name { max-width: 200px; } }
&[data-list-view="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: var(--item-list-gap); margin: 0 calc(-1 * var(--item-list-gap));
@media (max-width: 980px) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
--user-list-item-padding: var(--item-list-gap); --user-list-item-radius: var(--item-big-radius);
.user-list-item {
&[data-is-followed="true"], &[data-position="1"] { background: oklch(var(--h4) / 15%); --follow-button-bg: oklch(var(--h3) / 5%); --follow-button-bg-hov: oklch(var(--h3) / 10%); --follow-button-bg-atv: oklch(var(--h3) / 20%); --follow-button-col: oklch(var(--l3-c)); } }
.username-combo { text-align: left; flex-direction: row; }
.user-list-inner-wrap { flex-direction: column; align-items: unset; gap: 0; margin: unset; height: 56px; padding-left: calc(56px + 10px); padding-right: calc(var(--follow-button-size) + 10px); position: relative;
.user-list-avatar { position: absolute; top: 0; left: 0; width: 56px; height: 56px; --mask-size: var(--cover-size-50);
.avatar-status-dot { width: 18px; height: 18px; --mask-size: 18px; } }
.top-listeners-item-name, .user-list-name { margin: unset !important; }
.top-listeners-track, .user-list-description { overflow: visible; padding-right: unset; flex-direction: column; gap: 0; }
.user-follow { position: absolute; bottom: calc(56px - 18px); left: calc(56px - 18px); z-index: 12; }
.user-list-follower-btn { top: 50%; margin-top: calc(-1 * (var(--button-height) / 2)); } } }
&[data-list-view="cards"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--item-list-gap);
@media (max-width: 439px) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
--user-list-item-padding: var(--item-list-gap); --user-list-item-radius: var(--item-med-radius); --user-list-item-width: 100%;
.user-list-name { min-width: unset; max-width: 90%; }
.user-list-item { display: flex; flex-direction: column; justify-content: center; height: 280px; overflow: hidden;
.user-background { position: absolute; inset: 0; display: block; z-index: 0; border-radius: var(--user-list-item-radius); background-size: cover; background-position: center;
--mask: linear-gradient(0deg, transparent, white); mask-image: var(--mask); -webkit-mask-image: var(--mask);
opacity: 0.1; scale: 1.1;
transition-property: scale, opacity; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); }
&:hover { .user-background { scale: 1.2; opacity: 0.6; }
.user-list-avatar, .user-follow { scale: 0.9; opacity: 0; }
.listener-list-position, .user-list-name, .user-list-description { translate: 0 40px !important; }
.user-list-shared-artists, .user-list-about-me:not(.has-featured-track) { opacity: 0; pointer-events: none; } }
background-color: oklch(var(--b4) / 40%);
&[data-is-followed="true"], &[data-position="1"] { background-color: oklch(var(--h4) / 20%); --follow-button-bg: oklch(var(--h3) / 10%); --follow-button-bg-hov: oklch(var(--h3) / 20%); --follow-button-bg-atv: oklch(var(--h3) / 30%); --follow-button-col: oklch(var(--l3-c)); }
.user-list-inner-wrap { flex-direction: column; height: unset; text-align: center; padding: calc(var(--w) + var(--g)) 0 0 0; margin: unset; --w: 80px; --g: 10px; z-index: 1; gap: 4px;
.link-block-cover-link { display: block; width: unset; height: unset; inset: -50px calc(-1 * var(--item-list-gap)); }
.user-list-avatar { width: var(--w); height: var(--w); --mask-size: var(--cover-size-100);
top: 36px; left: 50%; margin-left: calc(-1 * (var(--w) / 2));
transition-property: scale, opacity; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); }
.user-follow { position: absolute; top: 36px; right: 50%; margin-right: calc((-1 * var(--w)) + 25px);
transition-property: scale, opacity; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); }
.user-list-name { translate: 0; transition-property: translate; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); filter: var(--header-filter-shadow) !important;
margin-right: unset; }
.listener-list-position { transition-property: translate; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); filter: var(--header-filter-shadow) !important; }
.user-list-description { flex-direction: column; padding: unset; align-items: center; gap: 0; max-width: 100%; height: 72px;
translate: 0; transition-property: translate; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); filter: var(--header-filter-shadow) !important;
z-index: 3;
&>p { max-width: 100%; overflow: hidden;
text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; white-space: wrap;
/* i have to override last.fm's :first-child thing :( */ p { white-space: wrap; } } }
.user-list-shared-artists, .user-list-about-me { transition-property: opacity; transition-duration: 0.4s; transition-timing-function: var(--trans-function-ani); }
.user-list-follower-btn { top: var(--item-list-gap); right: var(--item-list-gap); margin-top: unset;
z-index: 3; } } } }}
.user-list-about-me { color: inherit; overflow: hidden;}
.user-list-about-me>.markdown-body { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
&>p, &>p>div, &>div, &>p> :is(h1, h2, h3, h4, h5) { display: inline; font-size: var(--font-size); line-height: var(--line-height); margin: unset !important; }
&>p:not(:last-child) { margin-right: 4px !important; }
&>p:has(> .markdown-image), br { display: none; }}
.user-list-inner-wrap { display: flex !important; align-items: center; gap: var(--card-gap); position: static;}
.user-list-item[data-followed="false"]:not(.listener-list-item) { .user-list-name { margin-left: calc(16px + var(--card-gap)); }}
.user-list-name { min-width: 200px;
&>a { color: oklch(var(--l3-c)) !important; }}
.user-list-inner-wrap>.label { order: -1; width: 18px; text-align: center; font-size: 0; padding: 0; position: relative; --mask: var(--icon-16-followers); --left: 0; color: oklch(var(--c3)) !important;}
.user-list-avatar { position: absolute; --show-icon: none;
.avatar-status-dot { width: 18px; height: 18px; --mask-size: 18px; }}
.user-list-follower-btn { top: 0; left: unset; right: 0;}
/*.user-list-item:hover .user-list-follower-btn { transition-property: none !important;}*/
.user-list-description { max-width: fit-content; overflow: hidden; display: flex; gap: var(--card-gap); padding-right: var(--card-gap);}
.user-list-description .text-light { flex-shrink: 0; font-weight: var(--font-weight-medium);}
.user-list-item .class { order: 1;}
.user-list-shared-artists { padding-top: unset; margin-top: unset !important; border: unset; color: oklch(var(--c3)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; white-space: wrap !important; flex-shrink: 0;}
.neighbours-items-section .user-list-about-me { display: none;}
/* TOP ARTIST LISTENERS */.top-listeners { margin: unset;}
.user-list-follower-btn { --font-size: 0; --mask: var(--icon-16-plus);
&:before { background-color: currentColor !important; }
div[data-toggle-button-current-state="followed"]>form>& { --mask: var(--icon-16-check); }}
.user-list-link { gap: 0;}