Something went wrong. Try again.
a full redesign for last.fm bleh.katelyn.moe
bleh lastfm
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137.friends { display: flex; flex-direction: column; gap: var(--card-gap);}
.user { display: flex; gap: 10px;
animation: activity 0.35s var(--trans-function);
transition-property: opacity; transition-duration: var(--trans); transition-timing-function: var(--trans-function);
&:hover { transition: none; }
&[data-live="true"] { order: -1; }
&[data-own="true"] { order: -2 !important; }
&[data-live="false"] { opacity: 0.6;
&:hover { opacity: unset; transition: none; } }
& > .user-avatar { --w: 40px; width: var(--w); height: var(--w); flex-shrink: 0;
background: var(--avatar-generic-background); border-radius: var(--avatar-radius); overflow: hidden; position: relative;
display: flex; justify-content: center; align-items: center;
&.cover-art { border-radius: var(--item-med-radius); }
& > img { width: var(--w); height: var(--w); } }
& > .user-info { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: hidden;
& > .user-name { display: flex; align-items: center; gap: 6px; --w: 18px; cursor: default; position: relative;
& > .user-name-inner { flex: 1; color: oklch(var(--l3-c) / 80%);
& > strong { color: oklch(var(--l3-c)); font-weight: var(--font-weight-medium); } }
& > .avatar { display: flex; width: var(--w); height: var(--w); overflow: hidden; }
margin-bottom: 4px; }
& > .user-about { display: flex; align-items: center; gap: 4px; color: oklch(var(--c2) / 80%); cursor: default; font-weight: var(--font-weight-medium);
& > .bleh-icon { --icon-size: 14px; } } }}
.track-time { font-size: calc(var(--font-size) - 1px); color: oklch(var(--c3)); cursor: default; flex-shrink: 0;
--show-icon: none; position: relative;
&[data-live="true"] { font-weight: var(--font-weight-medium);
--show-icon: block; padding-left: 16px;
&:before { --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtbG9hZGVyLWNpcmNsZSI+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDEgMS02LjIxOS04LjU2Ii8+PC9zdmc+"); --mask-size: 12px; --margin-top: -6px; --left: 0; animation: spinner 1s linear infinite; } }}