Something went wrong. Try again.
a full redesign for last.fm bleh.katelyn.moe
bleh lastfm
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465.tippy-box,.tooltip-dark { background-color: oklch(var(--tooltip) / var(--solarium-opacity, 80%)); backdrop-filter: var(--solarium); -webkit-backdrop-filter: var(--solarium); border-radius: var(--radius-s); box-shadow: var(--avatar-shadow); padding: 3px 5px; font-size: calc(var(--font-size) - 1px); font-weight: var(--font-weight); line-height: calc(var(--line-height) - 1px); color: oklch(var(--c2));
text-align: center;
max-width: var(--max-tooltip-width) !important; z-index: 9999;
.tooltip-sub { font-size: var(--font-size-sm); color: oklch(var(--c3)); }
&[data-animation="bleh"] { transition-property: visibility, opacity, translate, transform !important; transition-duration: 0.22s !important; transition-timing-function: var(--trans-function-ani);
opacity: 0 !important;
&[data-placement="bottom"] { translate: 0 -4px; }
&[data-placement="top"] { translate: 0 4px; }
&[data-state="visible"] { opacity: 1 !important; translate: 0 0 !important; } }
kbd, code { font-size: inherit; line-height: inherit; margin-left: 2px; }
&[data-theme="context-menu"], &[data-theme="auth-menu"], &[data-theme="select-menu"], &[data-theme="language-menu"], &[data-theme="menu"] { padding: var(--vertical-menu-padding, 4px) var(--horizontal-menu-padding, 4px) !important; background-color: oklch(var(--menu-bg) / var(--solarium-opacity, var(--menu-opacity))) !important; border-radius: var(--menu-radius) !important; box-shadow: var(--override-full-shadow, var(--menu-shadow)) !important; border: 1px solid var(--menu-border) !important; color: oklch(var(--c2));
/*[data-theme="window"] & { box-shadow: var(--highlight-shadow), var(--menu-shadow) !important; }*/
text-align: left;
font-size: var(--font-size);
animation: var(--motion, solarium_menu 0.22s var(--trans-function));
background-image: var(--cards-overlay-image-subtle, unset), var(--cards-overlay-mini) !important; background-repeat: repeat-x !important; background-position: 0 0 !important;
display: flex; flex-direction: column; gap: var(--menu-gap);
& > .tippy-content { 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); }
&[data-theme="select-menu"] { max-height: 500px; overflow-x: hidden; overflow-y: auto; scroll-behavior: unset;
.dropdown-menu-clickable-item:not(.v2) { --btn-left: calc(var(--button-sides) + var(--mask-size, 14px) + 6px) !important; }
.active { --mask: var(--icon-16-check); --mask-size: 14px; --margin-top: calc(-1 * (var(--mask-size, 14px) / 2)); } }
&[data-theme="context-menu"] { .menu-header { color: oklch(var(--c3)); font-weight: var(--font-weight-medium); padding: 3px var(--button-sides) 4px; cursor: default; }
li { &::marker { content: ""; } }
.dropdown-menu-clickable-item { display: flex; align-items: center;
&[data-menu-item="shared-artist"] { --show-icon: none; padding-left: var(--button-sides) !important; }
&[data-menu-item="expand"] { --mask: var(--icon-16-expand); }
&[data-menu-item="gallery"] { --mask: var(--icon-16-gallery-vertical); }
&[data-menu-item="album"] { --mask: var(--icon-16-album); }
&[data-menu-item="view_profile"] { --mask: var(--icon-16-profile); } } }
.sep { margin: 6px var(--button-sides); width: unset;
&:first-child { display: none; } } }
&[data-theme="mobile"] { padding: var(--card-gap) var(--card-gap) calc(var(--card-gap) * 3) !important; background: oklch(var(--b5) / var(--solarium-opacity, var(--menu-opacity))) !important; border-radius: var(--item-big-radius) !important; box-shadow: var(--override-full-shadow, var(--menu-shadow)) !important; border: 1px solid var(--menu-border) !important; color: oklch(var(--c2));
backdrop-filter: var(--solarium); -webkit-backdrop-filter: var(--solarium);
text-align: left;
font-size: var(--font-size);
[data-tippy-root]:has(> &) { position: fixed !important; transform: unset !important;
left: 0 !important; right: 0 !important; bottom: calc(58px - var(--card-gap)) !important; } }
&[data-theme="window"] { padding: var(--card-gap) !important; background-color: oklch(var(--menu-bg) / var(--solarium-opacity, var(--menu-opacity))) !important; border-radius: var(--item-big-radius) !important; box-shadow: var(--override-full-shadow, var(--menu-shadow)) !important; border: 1px solid var(--menu-border) !important; color: oklch(var(--c2));
backdrop-filter: var(--solarium); -webkit-backdrop-filter: var(--solarium);
text-align: left;
font-size: var(--font-size);
background-image: var(--cards-overlay-image-subtle, unset), var(--cards-overlay-mini) !important; background-repeat: repeat-x !important; background-position: 0 0 !important;
max-width: 630px !important;
@media (max-width: 980px) { width: 96vw !important; max-width: 96vw !important; }
& > .tippy-content { display: flex; }
.dialog-settings, form { display: flex !important; flex-direction: column; width: 100%;
&.full-width { width: 630px; }
.more-link { margin: unset !important; }
.hide-if-artist-list { display: var(--hide-if-artist-list, flex); }
.hide-if-artist-grid { display: var(--hide-if-artist-grid, flex); }
.hide-if-album-list { display: var(--hide-if-album-list, flex); }
.hide-if-album-grid { display: var(--hide-if-album-grid, flex); } } }
&[data-theme="stack"] { .tippy-content { display: flex; align-items: center; flex-direction: column;
.taste-badge { margin-left: 6px; }
.hint { font-size: var(--font-size-sm); color: oklch(var(--c3)); } } }
&[data-theme="seasonal-swatch"] { .tippy-content { display: flex; flex-direction: column;
.season-colour-name { color: oklch(var(--l3-c)); font-weight: var(--font-weight-medium); }
.season-exclusive { color: oklch(var(--c3));
.season-name { color: oklch(var(--c2)); } } } }
&[data-theme="badge"] { .tippy-content { display: flex; flex-direction: column; padding: 2px 0;
.badge-name { color: oklch(var(--l3-c)); text-shadow: 0 0 20px oklch(var(--h4)); font-weight: var(--font-weight-medium); }
.badge-reason { font-size: var(--font-size-sm); margin-top: -2px; color: oklch(var(--c3)); } } }
&[data-theme="key_value"] { & > .tippy-content { display: flex; gap: 10px;
.key { color: oklch(var(--c3)); }
.value { margin-left: 4px; font-family: var(--font-code); color: oklch(var(--c2)); } } }
&[data-theme="generic"] { pointer-events: none; }
&[data-theme="name-sister-combo"] { & > .tippy-content { display: flex; flex-direction: column; text-align: center;
& > .name { font-weight: var(--font-weight-medium);
& > .link { justify-content: center; } }
& > .sister { font-size: var(--font-size-sm); margin-top: -2px; color: oklch(var(--c3)); } } }}
.tippy-content { padding: unset;}
.tooltip-label { color: oklch(var(--c2) / 80%);}
.user-dashboard-controls-tooltip:before,.tooltip-dark:before { display: none;}
.user-dashboard-controls-tooltip { top: -40px !important;}
.date-picker-content,.dropdown-menu-clickable,.auth-dropdown-menu,.navlist-hidden-list,.modal-body,.library-search-results,.events-filter-location-dropdown { margin: unset !important; background: oklch(var(--menu-bg) / var(--solarium-opacity, var(--menu-opacity))) !important; border-radius: var(--menu-radius) !important; box-shadow: var(--override-full-shadow, var(--menu-shadow)) !important; border: 1px solid var(--menu-border) !important; color: oklch(var(--c2));
&:not(.date-range-picker-content) { overflow: hidden; }
&:not(.date-range-picker-content, .modal-body) { backdrop-filter: var(--solarium); -webkit-backdrop-filter: var(--solarium); }
&:before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: var(--cards-overlay-height); max-height: 100%; display: var(--cards-overlay-display);
background-image: var(--cards-overlay-image, unset), var(--cards-overlay) !important; background-size: 100px; background-repeat: repeat-x !important; background-position: 0 -60px !important; opacity: 0.9; border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); pointer-events: none;
/* fix for no-data-message overriding and stuff */ margin: unset; width: unset; }
&.modal-body { background: oklch(var(--b5) / var(--solarium-opacity, 90%)) !important; box-shadow: var(--override-full-shadow, var(--overlay-shadow)) !important; border-radius: var(--item-big-radius) !important;
backdrop-filter: var(--solarium); -webkit-backdrop-filter: var(--solarium); }}
.tippy-box[data-theme="popup"] { padding: 12px;
& > .tippy-content { display: flex; flex-direction: column; gap: 6px;
text-align: left; }}