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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261/* most of these should not be used anymore, they are only used by last.fm themselves */
.form-submit { display: flex; justify-content: center; align-items: center; gap: var(--card-gap); margin-left: unset !important;
button { margin: unset !important; }
.btn-secondary.js-close { order: -1; }
&.form-submit--align-right { justify-content: space-between; }}
.content-form .form-horizontal .form-group { margin: 4px 0 0 0; padding-top: 11px;}
.form-group--submit,.form-group:has(> .form-submit) { margin-top: var(--override-margin-top, var(--card-gap)) !important;}
.lfm-recaptcha { display: flex; justify-content: end; width: unset;}
.form-disclaimer { margin-bottom: var(--card-gap);}
.content-form { margin: unset;}
.bleh-modal-body textarea,.modal-body textarea { width: 100%; height: 150px; max-height: 150px; resize: none;}
.toggle-and-time { display: flex; flex-wrap: wrap;
@media (max-width: 980px) { flex-direction: column; }
& > .setting { min-height: var(--button-height); flex: 1;
& > .check { height: var(--button-height) !important; }
& > .heading { min-width: 200px; } }}
.bleh--panel form { margin: unset !important;}
.bleh--panel > form { display: flex; flex-direction: column; gap: var(--card-gap);}
.settings-footer { display: flex; justify-content: center; gap: var(--button-list-gap);
&.end { justify-content: end; }
&.gap { margin-top: var(--card-gap); }}
.modal-body .modal-buttons { align-items: center;
& > .modal-button { flex: 1;
&:has(.js-close) { display: flex; justify-content: start; }
& + .modal-button { justify-content: end !important; } }}
.modal-body .modal-buttons,.modal-footer { display: flex; gap: var(--button-list-gap); justify-content: center; flex-wrap: wrap; margin: var(--card-padding) 0 0 0;
/* native modal footer */ .modal-button { margin: unset; }
&.center { justify-content: center !important; }}
.modal-footer { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.modal-body .form-group--submit { padding-top: var(--card-gap) !important; border-top: 1px solid var(--card-border-base);}
@media (max-width: 980px) { .connector-footer, .settings-footer, .modal-footer, .setup-footer { flex-direction: column; align-items: stretch !important; gap: 10px; text-align: center;
& > form { display: flex;
& > button { flex: 1; } } }}
/* we can't use display: none as 'Last.fm Artwork Upload Helper' uses offsetParent, which doesnt find hidden elements - weird choice */.hidden-file-input { visibility: hidden; position: absolute; top: 0; left: 0; pointer-events: none;}
.content-top-header { color: oklch(var(--c1));}
.control-label + .form-group-controls { margin-top: 4px;}
.form-group--create_automatic_edit_rule .form-group-controls { flex-direction: column; align-items: unset !important; justify-content: center;}
.content-form .control-label,.events-filter-location-dropdown .control-label { color: oklch(var(--c3)) !important; font-size: var(--font-size); line-height: var(--line-height); font-weight: var(--font-weight-medium); text-transform: unset !important;}
.footnotes,.content-form .form-row-help-text { color: oklch(var(--c3)); font-size: calc(var(--font-size) - 1px); line-height: var(--line-height); cursor: default;}
.content-form .form-row-help-text { margin-top: var(--button-list-gap);}
/* this is used in the bleh avatar uploader modal still */.btn-file { --mask: var(--icon-16-upload); margin: unset;}
.btn-sm { min-height: var(--button-height); line-height: var(--line-height); padding: var(--button-verts) var(--button-sides);}
.content-form .form-group,.content-form form { margin-top: var(--card-gap);
&:first-child { margin-top: unset; }}
.content-form legend { color: oklch(var(--c1)); font-size: var(--font-size); line-height: var(--line-height); font-weight: var(--font-weight-medium);}
.modal-explain { max-width: 500px !important; cursor: default; margin-bottom: var(--card-gap);}
.change-username-form .form-row-help-text { background-color: oklch(var(--f4) / 20%); padding: 10px !important; border-radius: var(--radius-s); margin: unset !important;
&:after, &:before { display: none; }}
.change-username-form { margin-top: var(--card-padding);}