Something went wrong. Try again.
a full redesign for last.fm bleh.katelyn.moe
bleh lastfm
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217.view-buttons-wrapper { display: flex; justify-content: end;
.info { flex: 1; height: 32px; display: flex; align-items: center;
.alert { margin: unset; } }}
.tab-container,.view-buttons { display: flex; align-items: center !important; gap: 2px; padding: 4px; background-color: var(--view-buttons); box-shadow: var(--view-buttons-shadow); border-radius: calc(var(--button-radius) + 4px);
width: fit-content;
&.blend { background: transparent; box-shadow: unset; padding: unset; border-radius: unset; margin: unset !important; gap: var(--button-list-gap); }
&.view-buttons-middle { margin: 0 auto; justify-content: center; }
&:not(.glacier-library-buttons, .colour-buttons) { margin-bottom: var(--card-gap); }
&.colour-buttons { width: fit-content; }
& > form { display: flex; align-items: center; gap: inherit; }
&.listen-container { width: fit-content; }
.footer-language { display: flex; }
.view-item { position: relative; }
&:not(.blend) { :is(.btn, a, button):not(.not-a-view-button, .toggle, .reset, .select-button, .btn-primary, .js-close, .blend-v2-btn, .dropdown-menu-clickable-item) { --bg: var(--cards-overlay-image-subtlest, none), oklch(var(--h3)); --bg-hov: var(--cards-overlay-image-subtlest, none), color-mix(in oklch, oklch(var(--h4)), oklch(var(--h3)) 80%); --bg-atv: var(--cards-overlay-image-subtlest, none), color-mix(in oklch, oklch(var(--h4)), oklch(var(--h3)) 60%); --col: oklch(var(--b7)); --mask-colour: oklch(var(--b7) / 70%); --shadow: var(--primary-shadow), var(--primary-glow), var(--interactable-outer); --force-font-weight: var(--font-weight-medium); text-shadow: var(--button-text-shadow-primary, none); position: relative; }
&.tab-container button:not(.tab--selected), .footer-language .mimic-link, .btn:not(.not-a-view-button, .toggle, [aria-checked="true"], .love-button--loved, [data-toggle-button-current-state="loved"] > form > .btn, [data-toggle-button-current-state="bookmarked"] > form > .btn, [data-analytics-action="UnfollowUser"], [data-is-shortcut="true"], .attendance-btn--turn-off) { --bg: transparent; --bg-hov: var(--view-buttons-hov); --bg-atv: var(--view-buttons-atv); --shadow: none; --col: oklch(var(--c2)); --mask-colour: color-mix(in oklch, oklch(var(--c2)), oklch(var(--c3)) 50%); --force-font-weight: var(--font-weight); text-shadow: var(--button-text-shadow, none);
&.delete-icon { --bg-hov: oklch(var(--h4) / 15%); --bg-atv: oklch(var(--h4) / 25%); --col: oklch(var(--l3-c)); --mask-colour: color-mix(in oklch, oklch(var(--l3-c)), oklch(var(--l4-c)) 30%); } }
.view-item:not(.blend-v2-btn) { display: flex; align-items: center; position: relative; margin: unset; /*--font-size: 0; --left: 7px; width: 32px;*/
width: fit-content; min-width: var(--button-height) !important; height: var(--button-height);
.view-item-avatar { width: 20px; height: 20px; border-radius: var(--avatar-radius);
--mask-size: var(--cover-size-32);
margin: -2px 0; margin-right: 6px !important;
position: relative; z-index: 10;
transition-property: margin-right; transition-duration: var(--trans); transition-timing-function: var(--trans-function);
& + .view-item-avatar { margin-left: -12px; border-left: 1px solid oklch(var(--b5)); } }
&.dropdown-menu-clickable-button { &:before { --show-icon: none; } } }
.video-item { &.video-item--play { --btn-left: calc(var(--button-sides-icon) + var(--icon-size) + var(--icon-gap)); --mask: var(--icon-16-external); }
&.video-item--edit { --font-size: 0; --mask: var(--icon-16-edit); } }
.listen-divider { display: block; width: 1px; height: 10px; margin: 0 2px; background: var(--card-border-base);
& + .listen-divider { display: none; } }
&.user-buttons { height: 100%; justify-content: center; align-items: unset; padding: unset; background: unset; box-shadow: unset; border-radius: unset; margin: unset;
.user-button { /*&:not(:hover) { --btn-left: 12px !important; --font-size: 0; }*/
--btn-left: var(--button-sides) !important; --show-icon: block; --font-size: 0; color: inherit !important; --left: 50%; --margin-left: -10px;
&.view-profile-btn { --mask: var(--icon-16-user); }
&.view-library-btn { --mask: var(--icon-16-library); }
&.leave-shout-btn { --mask: var(--icon-16-shoutbox); } } } }}