Something went wrong. Try again.
a full redesign for last.fm (OUTDATED, view site or go to github/codeberg) bleh.katelyn.moe
bleh lastfm
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439.library-search-results,.player-bar-playback-options-wrap,.dropdown-menu-clickable,.auth-dropdown-menu,.navlist-hidden-list-wrap .navlist-hidden-list { padding: var(--vertical-menu-padding, 4px) var(--horizontal-menu-padding, 4px) !important; animation: solarium_menu 0.25s var(--trans-function);
display: flex; flex-direction: column; gap: var(--menu-gap);
&:before, &:after { content: ''; position: absolute; display: var(--menu-lines-display, none); background-color: var(--menu-lines); height: var(--menu-lines-height); left: var(--menu-lines-horizontal) !important; right: var(--menu-lines-horizontal) !important; }
&:before { top: var(--menu-lines-vertical); }
&:after { bottom: var(--menu-lines-vertical); }}
.dropdown-menu-item-dark,.dropdown-menu-clickable-item,.display-options-clickable-item,.library-search-results li,.date-picker-preset-item { --bg: transparent !important; --bg-hov: var(--menu-item-hov) !important; --bg-atv: var(--menu-item-atv) !important; --shadow: none !important; --shadow-hov: none !important; --col: oklch(var(--c2)) !important; --radius: var(--menu-item-radius); position: relative !important; min-width: 170px !important; --show-icon: block;
--button-height: var(--menu-item-height); --button-sides: var(--menu-item-sides); --btn-top: var(--menu-item-verts); --btn-bottom: var(--menu-item-verts);
--button-sides-icon: var(--button-sides); --left: var(--button-sides); --right: none;
--icon-size: var(--menu-item-icon-size, 14px); --icon-width: var(--menu-item-icon-size, 14px); --mask-size: var(--icon-size) !important;
display: flex; align-items: center; gap: 6px;
&:not(.chibi) { font-size: var(--menu-item-font-size, var(--font-size)) !important; }
&[aria-checked="true"], &[aria-selected="true"], .date-range-picker-preset--selected > &, &.dropdown-menu-clickable-item--selected, &.display-options-clickable-item--selected, &.active { --bg: var(--menu-item-hov) !important; --bg-hov: var(--bg) !important; --bg-atv: var(--bg) !important; --force-font-weight: var(--font-weight-medium) !important;
&:not(.candidate) { --bg: oklch(var(--h4) / 20%) !important; --bg-hov: oklch(var(--h4) / 30%) !important; --bg-atv: oklch(var(--h4) / 40%) !important; --col: oklch(var(--l3-c)) !important; --mask-colour: color-mix(in oklch, oklch(var(--l3-c)), oklch(var(--l4-c)) 40%); } }
/* mobile separator */ &:after { display: none !important; }
&.v2 { display: flex; align-items: center; gap: var(--icon-gap);
&.opens-further { --left: none; --mask: var(--icon-16-arrow-right); --mask-size: 12px; --margin-top: -6px; --right: 10px; } }}
.dropdown-menu-clickable-item { --selected-icon: var(--icon-16-check);
&.radio-menu-item { --selected-icon: var(--icon-16-radio-dot); }}
.dropdown-menu-clickable-item[aria-checked="true"],.dropdown-menu-clickable-item--selected { --mask: var(--selected-icon) !important; --mask-size: 12px !important; /*--btn-left: calc(var(--button-sides) + 12px + 4px) !important;*/ --margin-top: calc(-1 * (var(--mask-size) / 2)) !important; --left: calc(var(--button-sides) + 2px) !important;
&.candidate { --mask: var(--icon-16-arrow-right) !important;
&:before { animation: candidate 1.5s var(--trans-function) infinite !important; } }}
@keyframes candidate { from, to { opacity: 0; }
60% { opacity: 1; }}
.dropdown-menu-clickable-item { & > .new-badge { cursor: inherit; margin-left: unset !important; }
.auth-dropdown-item-row { display: flex; justify-content: space-between; gap: var(--card-gap); overflow: hidden;
.auth-dropdown-item-left { display: flex; flex-wrap: wrap; flex: 1; gap: var(--icon-gap); overflow: hidden; }
.auth-dropdown-item-right { display: flex; justify-content: center; align-items: center; color: oklch(var(--c3)); min-width: 14px;
& > .notification-count-badge { margin: unset !important; } } }}
.date-picker-preset-item { min-width: unset !important; width: 100%; justify-content: center;}
.auth-dropdown-menu-wrap { padding-top: unset !important;}
.auth-dropdown-menu:before { display: none !important;}
.auth-dropdown-item-secondary { display: none;}
li:first-child .more-item--delete { margin-top: unset !important;
&:after { display: none !important; }}
/* TRACK BUY MENU */
.track-preview { max-width: 500px !important; display: flex; flex-direction: column; gap: 6px; position: relative;
/* bulk edit */ order: -10;
&.user-preview { & > .track-preview-image > .inner-image { border-radius: var(--avatar-radius); } }
.track-preview-image { flex-shrink: 0; margin-top: -30px; pointer-events: none;
& > .inner-image { width: 48px; height: 48px; background: color-mix(in oklch, oklch(var(--b2)), oklch(var(--b5)) 70%); outline: 1px solid oklch(var(--b8) / 60%); box-shadow: var(--card-shadow); border-radius: var(--radius-s); overflow: hidden; pointer-events: auto;
& > img { width: 100%; } } }
.track-preview-info { display: flex; flex-direction: column; flex: 1; font-size: calc(var(--font-size) - 1px); line-height: calc(var(--line-height) - 1px); position: relative;
& > .hoshino-marker { position: absolute; top: 2px; left: calc(-1 * (48px + 8px));
background: oklch(var(--b5));
display: flex; justify-content: center; align-items: center;
padding: 1px; border-radius: var(--item-med-radius);
--icon: var(--icon-16-hoshino); --icon-colour: oklch(var(--l3-c)); --icon-size: 10px; } }
padding: calc(var(--button-sides) - 4px) 0 calc(var(--button-sides) + 2px); border-bottom: 1px solid var(--separator-base); margin: 2px var(--button-sides) 6px;
& + .track-preview { display: none; }}
.track-preview-badges { flex-direction: row !important; justify-content: start; align-items: end; margin-top: 4px;
gap: 8px;}
.extra-badges-text { color: oklch(var(--c3)); cursor: default; font-size: var(--font-size-sm); line-height: 16px; order: 100;}
.track-preview-text { cursor: default; margin: unset; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.track-preview-title { color: oklch(var(--c2)); font-weight: var(--font-weight-medium); margin: unset;}
.track-preview-artist { color: oklch(var(--c2) / 80%);}
.track-preview-album,.track-preview-tags { color: oklch(var(--c2) / 70%);}
.track-preview-timestamp { color: oklch(var(--c3));}
.track-preview-timestamp { font-size: calc(var(--font-size) - 2px);}
/* DANGEROUS */.accented-menu-item,.dropdown-menu-clickable-item[data-starred="true"]:not(.no-colour),.dropdown-menu-clickable-item.update,.dropdown-menu-clickable-item.swatch,.dropdown-menu-clickable-item.colourful,.more-item--obsession,.more-item--delete,.more-item--report { --bg-hov: var(--menu-item-accent-hov) !important; --bg-atv: var(--menu-item-accent-atv) !important; --col: oklch(var(--l3-c)) !important; --mask-colour: color-mix(in oklch, oklch(var(--l3-c)), oklch(var(--l4-c)) 40%);}
.delete,.more-item--delete,.more-item--report,.logout { --hue-over: var(--hue-neg); --sat-over: var(--sat-neg); --lit-over: var(--lit-neg);}
.dropdown-menu-clickable { display: flex; flex-direction: column;
& > .sep { margin: 6px var(--button-sides); width: unset !important; }}
.date-range-picker-content { display: none !important;}
.date-range-picker-content-inner { display: block !important;}
.menu-avatar { width: var(--icon-size); height: var(--icon-size); border-radius: var(--avatar-radius); overflow: hidden;
background: var(--avatar-generic-background); --mask-size: var(--icon-size);
margin: 0 var(--icon-gap) 0 0 !important;
position: relative; left: -1px; top: -1px; z-index: 10;
display: flex;
& > img { width: 100%; height: 100%; }}
.menu-item-body { display: flex; flex-direction: column; max-width: 100%;}
.menu-item-head { font-weight: inherit;}
.menu-item-text { opacity: 0.8; font-size: calc(var(--font-size) - 1px); margin-top: -4px; overflow: hidden; text-overflow: ellipsis; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.menu-item-description { color: oklch(var(--c3)); cursor: default; font-size: calc(var(--font-size) - 1px); overflow: hidden; text-overflow: ellipsis; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 3px var(--button-sides) 4px;
max-width: 250px;
margin-top: 4px;}