commit e7879907eefc5ca191ff105bc1cc339ef3f3b663 · zzstoatzz.io/plyr.fm

+10 -7

STATUS.md

··· 168 169 ## immediate priorities 170 171 - ### end-of-year sprint (Dec 20-31) 172 173 - see [sprint tracking issue #625](https://github.com/zzstoatzz/plyr.fm/issues/625) for details. 174 175 - | track | focus | status | 176 - |-------|-------|--------| 177 - | moderation | consolidate architecture, add rules engine | core cleanup shipped (PR #617), sensitive images moved (PR #644) | 178 - | atprotofans | supporter validation, content gating | shipped | 179 180 ### known issues 181 - playback auto-start on refresh (#225) ··· 335 336 --- 337 338 - this is a living document. last updated 2025-12-26.

··· 168 169 ## immediate priorities 170 171 + ### quality of life mode (Dec 29-31) 172 173 + end-of-year sprint [#625](https://github.com/zzstoatzz/plyr.fm/issues/625) complete. remaining days before 2026 are for minor polish and bug fixes as they arise. 174 + 175 + **what shipped in the sprint:** 176 + - moderation consolidation: sensitive images moved to moderation service (#644) 177 + - atprotofans: supporter badges (#627) and content gating (#637) 178 179 + **aspirational (deferred until scale justifies):** 180 + - configurable rules engine for moderation 181 + - time-release gating (#642) 182 183 ### known issues 184 - playback auto-start on refresh (#225) ··· 338 339 --- 340 341 + this is a living document. last updated 2025-12-29.

+8 -8

frontend/src/lib/components/AddToMenu.svelte

··· 439 justify-content: center; 440 background: transparent; 441 border: 1px solid var(--border-default); 442 - border-radius: 4px; 443 color: var(--text-tertiary); 444 cursor: pointer; 445 transition: all 0.2s; ··· 490 min-width: 200px; 491 background: var(--bg-secondary); 492 border: 1px solid var(--border-default); 493 - border-radius: 8px; 494 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); 495 overflow: hidden; 496 z-index: 10; ··· 567 568 .playlist-list::-webkit-scrollbar-track { 569 background: transparent; 570 - border-radius: 4px; 571 } 572 573 .playlist-list::-webkit-scrollbar-thumb { 574 background: var(--border-default); 575 - border-radius: 4px; 576 } 577 578 .playlist-list::-webkit-scrollbar-thumb:hover { ··· 607 .playlist-thumb-placeholder { 608 width: 32px; 609 height: 32px; 610 - border-radius: 4px; 611 flex-shrink: 0; 612 } 613 ··· 675 padding: 0.625rem 0.75rem; 676 background: var(--bg-tertiary); 677 border: 1px solid var(--border-default); 678 - border-radius: 6px; 679 color: var(--text-primary); 680 font-family: inherit; 681 font-size: 0.9rem; ··· 698 padding: 0.625rem 1rem; 699 background: var(--accent); 700 border: none; 701 - border-radius: 6px; 702 color: white; 703 font-family: inherit; 704 font-size: 0.9rem; ··· 721 height: 16px; 722 border: 2px solid var(--border-default); 723 border-top-color: var(--accent); 724 - border-radius: 50%; 725 animation: spin 0.8s linear infinite; 726 } 727

··· 439 justify-content: center; 440 background: transparent; 441 border: 1px solid var(--border-default); 442 + border-radius: var(--radius-sm); 443 color: var(--text-tertiary); 444 cursor: pointer; 445 transition: all 0.2s; ··· 490 min-width: 200px; 491 background: var(--bg-secondary); 492 border: 1px solid var(--border-default); 493 + border-radius: var(--radius-md); 494 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); 495 overflow: hidden; 496 z-index: 10; ··· 567 568 .playlist-list::-webkit-scrollbar-track { 569 background: transparent; 570 + border-radius: var(--radius-sm); 571 } 572 573 .playlist-list::-webkit-scrollbar-thumb { 574 background: var(--border-default); 575 + border-radius: var(--radius-sm); 576 } 577 578 .playlist-list::-webkit-scrollbar-thumb:hover { ··· 607 .playlist-thumb-placeholder { 608 width: 32px; 609 height: 32px; 610 + border-radius: var(--radius-sm); 611 flex-shrink: 0; 612 } 613 ··· 675 padding: 0.625rem 0.75rem; 676 background: var(--bg-tertiary); 677 border: 1px solid var(--border-default); 678 + border-radius: var(--radius-base); 679 color: var(--text-primary); 680 font-family: inherit; 681 font-size: 0.9rem; ··· 698 padding: 0.625rem 1rem; 699 background: var(--accent); 700 border: none; 701 + border-radius: var(--radius-base); 702 color: white; 703 font-family: inherit; 704 font-size: 0.9rem; ··· 721 height: 16px; 722 border: 2px solid var(--border-default); 723 border-top-color: var(--accent); 724 + border-radius: var(--radius-full); 725 animation: spin 0.8s linear infinite; 726 } 727

+4 -4

frontend/src/lib/components/AlbumSelect.svelte

··· 102 padding: 0.75rem; 103 background: var(--bg-primary); 104 border: 1px solid var(--border-default); 105 - border-radius: 4px; 106 color: var(--text-primary); 107 font-size: 1rem; 108 font-family: inherit; ··· 127 overflow-y: auto; 128 background: var(--bg-tertiary); 129 border: 1px solid var(--border-default); 130 - border-radius: 4px; 131 margin-top: 0.25rem; 132 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 133 } ··· 139 140 .album-results::-webkit-scrollbar-track { 141 background: var(--bg-primary); 142 - border-radius: 4px; 143 } 144 145 .album-results::-webkit-scrollbar-thumb { 146 background: var(--border-default); 147 - border-radius: 4px; 148 } 149 150 .album-results::-webkit-scrollbar-thumb:hover {

··· 102 padding: 0.75rem; 103 background: var(--bg-primary); 104 border: 1px solid var(--border-default); 105 + border-radius: var(--radius-sm); 106 color: var(--text-primary); 107 font-size: 1rem; 108 font-family: inherit; ··· 127 overflow-y: auto; 128 background: var(--bg-tertiary); 129 border: 1px solid var(--border-default); 130 + border-radius: var(--radius-sm); 131 margin-top: 0.25rem; 132 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 133 } ··· 139 140 .album-results::-webkit-scrollbar-track { 141 background: var(--bg-primary); 142 + border-radius: var(--radius-sm); 143 } 144 145 .album-results::-webkit-scrollbar-thumb { 146 background: var(--border-default); 147 + border-radius: var(--radius-sm); 148 } 149 150 .album-results::-webkit-scrollbar-thumb:hover {

+6 -6

frontend/src/lib/components/BrokenTracks.svelte

··· 194 margin-bottom: 3rem; 195 background: color-mix(in srgb, var(--warning) 5%, transparent); 196 border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); 197 - border-radius: 8px; 198 padding: 1.5rem; 199 } 200 ··· 222 padding: 0.5rem 1rem; 223 background: color-mix(in srgb, var(--warning) 20%, transparent); 224 border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); 225 - border-radius: 4px; 226 color: var(--warning); 227 font-family: inherit; 228 font-size: 0.9rem; ··· 248 background: color-mix(in srgb, var(--warning) 20%, transparent); 249 color: var(--warning); 250 padding: 0.25rem 0.6rem; 251 - border-radius: 12px; 252 font-size: 0.85rem; 253 font-weight: 600; 254 } ··· 263 .broken-track-item { 264 background: var(--bg-tertiary); 265 border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); 266 - border-radius: 6px; 267 padding: 1rem; 268 display: flex; 269 align-items: center; ··· 311 padding: 0.5rem 1rem; 312 background: color-mix(in srgb, var(--warning) 15%, transparent); 313 border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); 314 - border-radius: 4px; 315 color: var(--warning); 316 font-family: inherit; 317 font-size: 0.9rem; ··· 337 .info-box { 338 background: var(--bg-primary); 339 border: 1px solid var(--border-subtle); 340 - border-radius: 6px; 341 padding: 1rem; 342 font-size: 0.9rem; 343 color: var(--text-secondary);

··· 194 margin-bottom: 3rem; 195 background: color-mix(in srgb, var(--warning) 5%, transparent); 196 border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); 197 + border-radius: var(--radius-md); 198 padding: 1.5rem; 199 } 200 ··· 222 padding: 0.5rem 1rem; 223 background: color-mix(in srgb, var(--warning) 20%, transparent); 224 border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); 225 + border-radius: var(--radius-sm); 226 color: var(--warning); 227 font-family: inherit; 228 font-size: 0.9rem; ··· 248 background: color-mix(in srgb, var(--warning) 20%, transparent); 249 color: var(--warning); 250 padding: 0.25rem 0.6rem; 251 + border-radius: var(--radius-lg); 252 font-size: 0.85rem; 253 font-weight: 600; 254 } ··· 263 .broken-track-item { 264 background: var(--bg-tertiary); 265 border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); 266 + border-radius: var(--radius-base); 267 padding: 1rem; 268 display: flex; 269 align-items: center; ··· 311 padding: 0.5rem 1rem; 312 background: color-mix(in srgb, var(--warning) 15%, transparent); 313 border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); 314 + border-radius: var(--radius-sm); 315 color: var(--warning); 316 font-family: inherit; 317 font-size: 0.9rem; ··· 337 .info-box { 338 background: var(--bg-primary); 339 border: 1px solid var(--border-subtle); 340 + border-radius: var(--radius-base); 341 padding: 1rem; 342 font-size: 0.9rem; 343 color: var(--text-secondary);

+4 -4

frontend/src/lib/components/ColorSettings.svelte

··· 115 border: 1px solid var(--border-default); 116 color: var(--text-secondary); 117 padding: 0.5rem; 118 - border-radius: 4px; 119 cursor: pointer; 120 transition: all 0.2s; 121 display: flex; ··· 134 right: 0; 135 background: var(--bg-secondary); 136 border: 1px solid var(--border-default); 137 - border-radius: 6px; 138 padding: 1rem; 139 min-width: 240px; 140 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); ··· 182 width: 48px; 183 height: 32px; 184 border: 1px solid var(--border-default); 185 - border-radius: 4px; 186 cursor: pointer; 187 background: transparent; 188 } ··· 222 .preset-btn { 223 width: 32px; 224 height: 32px; 225 - border-radius: 4px; 226 border: 2px solid transparent; 227 cursor: pointer; 228 transition: all 0.2s;

··· 115 border: 1px solid var(--border-default); 116 color: var(--text-secondary); 117 padding: 0.5rem; 118 + border-radius: var(--radius-sm); 119 cursor: pointer; 120 transition: all 0.2s; 121 display: flex; ··· 134 right: 0; 135 background: var(--bg-secondary); 136 border: 1px solid var(--border-default); 137 + border-radius: var(--radius-base); 138 padding: 1rem; 139 min-width: 240px; 140 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); ··· 182 width: 48px; 183 height: 32px; 184 border: 1px solid var(--border-default); 185 + border-radius: var(--radius-sm); 186 cursor: pointer; 187 background: transparent; 188 } ··· 222 .preset-btn { 223 width: 32px; 224 height: 32px; 225 + border-radius: var(--radius-sm); 226 border: 2px solid transparent; 227 cursor: pointer; 228 transition: all 0.2s;

+6 -6

frontend/src/lib/components/HandleAutocomplete.svelte

··· 131 padding: 0.75rem; 132 background: var(--bg-primary); 133 border: 1px solid var(--border-default); 134 - border-radius: 4px; 135 color: var(--text-primary); 136 font-size: 1rem; 137 font-family: inherit; ··· 170 overflow-y: auto; 171 background: var(--bg-tertiary); 172 border: 1px solid var(--border-default); 173 - border-radius: 4px; 174 margin-top: 0.25rem; 175 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 176 scrollbar-width: thin; ··· 183 184 .results::-webkit-scrollbar-track { 185 background: var(--bg-primary); 186 - border-radius: 4px; 187 } 188 189 .results::-webkit-scrollbar-thumb { 190 background: var(--border-default); 191 - border-radius: 4px; 192 } 193 194 .results::-webkit-scrollbar-thumb:hover { ··· 222 .avatar { 223 width: 36px; 224 height: 36px; 225 - border-radius: 50%; 226 object-fit: cover; 227 border: 2px solid var(--border-default); 228 flex-shrink: 0; ··· 231 .avatar-placeholder { 232 width: 36px; 233 height: 36px; 234 - border-radius: 50%; 235 background: var(--border-default); 236 flex-shrink: 0; 237 }

··· 131 padding: 0.75rem; 132 background: var(--bg-primary); 133 border: 1px solid var(--border-default); 134 + border-radius: var(--radius-sm); 135 color: var(--text-primary); 136 font-size: 1rem; 137 font-family: inherit; ··· 170 overflow-y: auto; 171 background: var(--bg-tertiary); 172 border: 1px solid var(--border-default); 173 + border-radius: var(--radius-sm); 174 margin-top: 0.25rem; 175 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 176 scrollbar-width: thin; ··· 183 184 .results::-webkit-scrollbar-track { 185 background: var(--bg-primary); 186 + border-radius: var(--radius-sm); 187 } 188 189 .results::-webkit-scrollbar-thumb { 190 background: var(--border-default); 191 + border-radius: var(--radius-sm); 192 } 193 194 .results::-webkit-scrollbar-thumb:hover { ··· 222 .avatar { 223 width: 36px; 224 height: 36px; 225 + border-radius: var(--radius-full); 226 object-fit: cover; 227 border: 2px solid var(--border-default); 228 flex-shrink: 0; ··· 231 .avatar-placeholder { 232 width: 36px; 233 height: 36px; 234 + border-radius: var(--radius-full); 235 background: var(--border-default); 236 flex-shrink: 0; 237 }

+8 -8

frontend/src/lib/components/HandleSearch.svelte

··· 179 padding: 0.75rem; 180 background: var(--bg-primary); 181 border: 1px solid var(--border-default); 182 - border-radius: 4px; 183 color: var(--text-primary); 184 font-size: 1rem; 185 font-family: inherit; ··· 213 overflow-y: auto; 214 background: var(--bg-tertiary); 215 border: 1px solid var(--border-default); 216 - border-radius: 4px; 217 margin-top: 0.25rem; 218 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 219 } ··· 225 226 .search-results::-webkit-scrollbar-track { 227 background: var(--bg-primary); 228 - border-radius: 4px; 229 } 230 231 .search-results::-webkit-scrollbar-thumb { 232 background: var(--border-default); 233 - border-radius: 4px; 234 } 235 236 .search-results::-webkit-scrollbar-thumb:hover { ··· 277 .result-avatar { 278 width: 36px; 279 height: 36px; 280 - border-radius: 50%; 281 object-fit: cover; 282 border: 2px solid var(--border-default); 283 flex-shrink: 0; ··· 320 padding: 0.5rem 0.75rem; 321 background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary)); 322 border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle)); 323 - border-radius: 20px; 324 color: var(--text-primary); 325 font-size: 0.9rem; 326 } ··· 328 .chip-avatar { 329 width: 24px; 330 height: 24px; 331 - border-radius: 50%; 332 object-fit: cover; 333 border: 1px solid var(--border-default); 334 } ··· 374 padding: 0.75rem; 375 background: color-mix(in srgb, var(--warning) 10%, var(--bg-primary)); 376 border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--border-subtle)); 377 - border-radius: 4px; 378 color: var(--warning); 379 font-size: 0.9rem; 380 text-align: center;

··· 179 padding: 0.75rem; 180 background: var(--bg-primary); 181 border: 1px solid var(--border-default); 182 + border-radius: var(--radius-sm); 183 color: var(--text-primary); 184 font-size: 1rem; 185 font-family: inherit; ··· 213 overflow-y: auto; 214 background: var(--bg-tertiary); 215 border: 1px solid var(--border-default); 216 + border-radius: var(--radius-sm); 217 margin-top: 0.25rem; 218 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 219 } ··· 225 226 .search-results::-webkit-scrollbar-track { 227 background: var(--bg-primary); 228 + border-radius: var(--radius-sm); 229 } 230 231 .search-results::-webkit-scrollbar-thumb { 232 background: var(--border-default); 233 + border-radius: var(--radius-sm); 234 } 235 236 .search-results::-webkit-scrollbar-thumb:hover { ··· 277 .result-avatar { 278 width: 36px; 279 height: 36px; 280 + border-radius: var(--radius-full); 281 object-fit: cover; 282 border: 2px solid var(--border-default); 283 flex-shrink: 0; ··· 320 padding: 0.5rem 0.75rem; 321 background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary)); 322 border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle)); 323 + border-radius: var(--radius-xl); 324 color: var(--text-primary); 325 font-size: 0.9rem; 326 } ··· 328 .chip-avatar { 329 width: 24px; 330 height: 24px; 331 + border-radius: var(--radius-full); 332 object-fit: cover; 333 border: 1px solid var(--border-default); 334 } ··· 374 padding: 0.75rem; 375 background: color-mix(in srgb, var(--warning) 10%, var(--bg-primary)); 376 border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--border-subtle)); 377 + border-radius: var(--radius-sm); 378 color: var(--warning); 379 font-size: 0.9rem; 380 text-align: center;

+6 -6

frontend/src/lib/components/Header.svelte

··· 228 justify-content: center; 229 width: 44px; 230 height: 44px; 231 - border-radius: 10px; 232 background: transparent; 233 border: none; 234 color: var(--text-secondary); ··· 275 border: 1px solid var(--border-emphasis); 276 color: var(--text-secondary); 277 padding: 0.5rem 1rem; 278 - border-radius: 6px; 279 font-size: 0.9rem; 280 font-family: inherit; 281 cursor: pointer; ··· 309 } 310 311 .tangled-icon { 312 - border-radius: 4px; 313 opacity: 0.7; 314 transition: opacity 0.2s, box-shadow 0.2s; 315 } ··· 360 align-items: center; 361 gap: 0.4rem; 362 padding: 0.4rem 0.75rem; 363 - border-radius: 6px; 364 border: 1px solid transparent; 365 } 366 ··· 391 font-size: 0.9rem; 392 padding: 0.4rem 0.75rem; 393 background: var(--bg-tertiary); 394 - border-radius: 6px; 395 border: 1px solid var(--border-default); 396 transition: all 0.2s; 397 white-space: nowrap; ··· 408 border: 1px solid var(--accent); 409 color: var(--accent); 410 padding: 0.5rem 1rem; 411 - border-radius: 6px; 412 font-size: 0.9rem; 413 text-decoration: none; 414 transition: all 0.2s;

··· 228 justify-content: center; 229 width: 44px; 230 height: 44px; 231 + border-radius: var(--radius-md); 232 background: transparent; 233 border: none; 234 color: var(--text-secondary); ··· 275 border: 1px solid var(--border-emphasis); 276 color: var(--text-secondary); 277 padding: 0.5rem 1rem; 278 + border-radius: var(--radius-base); 279 font-size: 0.9rem; 280 font-family: inherit; 281 cursor: pointer; ··· 309 } 310 311 .tangled-icon { 312 + border-radius: var(--radius-sm); 313 opacity: 0.7; 314 transition: opacity 0.2s, box-shadow 0.2s; 315 } ··· 360 align-items: center; 361 gap: 0.4rem; 362 padding: 0.4rem 0.75rem; 363 + border-radius: var(--radius-base); 364 border: 1px solid transparent; 365 } 366 ··· 391 font-size: 0.9rem; 392 padding: 0.4rem 0.75rem; 393 background: var(--bg-tertiary); 394 + border-radius: var(--radius-base); 395 border: 1px solid var(--border-default); 396 transition: all 0.2s; 397 white-space: nowrap; ··· 408 border: 1px solid var(--accent); 409 color: var(--accent); 410 padding: 0.5rem 1rem; 411 + border-radius: var(--radius-base); 412 font-size: 0.9rem; 413 text-decoration: none; 414 transition: all 0.2s;

+4 -4

frontend/src/lib/components/HiddenTagsFilter.svelte

··· 139 color: var(--text-tertiary); 140 cursor: pointer; 141 transition: all 0.15s; 142 - border-radius: 6px; 143 } 144 145 .filter-toggle:hover { ··· 183 background: transparent; 184 border: 1px solid var(--border-default); 185 color: var(--text-secondary); 186 - border-radius: 3px; 187 font-size: 0.75rem; 188 font-family: inherit; 189 cursor: pointer; ··· 219 padding: 0; 220 background: transparent; 221 border: 1px dashed var(--border-default); 222 - border-radius: 3px; 223 color: var(--text-tertiary); 224 font-size: 0.8rem; 225 cursor: pointer; ··· 241 min-height: 24px; 242 width: 70px; 243 outline: none; 244 - border-radius: 3px; 245 } 246 247 .add-input:focus {

··· 139 color: var(--text-tertiary); 140 cursor: pointer; 141 transition: all 0.15s; 142 + border-radius: var(--radius-base); 143 } 144 145 .filter-toggle:hover { ··· 183 background: transparent; 184 border: 1px solid var(--border-default); 185 color: var(--text-secondary); 186 + border-radius: var(--radius-sm); 187 font-size: 0.75rem; 188 font-family: inherit; 189 cursor: pointer; ··· 219 padding: 0; 220 background: transparent; 221 border: 1px dashed var(--border-default); 222 + border-radius: var(--radius-sm); 223 color: var(--text-tertiary); 224 font-size: 0.8rem; 225 cursor: pointer; ··· 241 min-height: 24px; 242 width: 70px; 243 outline: none; 244 + border-radius: var(--radius-sm); 245 } 246 247 .add-input:focus {

+1 -1

frontend/src/lib/components/LikeButton.svelte

··· 84 justify-content: center; 85 background: transparent; 86 border: 1px solid var(--border-default); 87 - border-radius: 4px; 88 color: var(--text-tertiary); 89 cursor: pointer; 90 transition: all 0.2s;

··· 84 justify-content: center; 85 background: transparent; 86 border: 1px solid var(--border-default); 87 + border-radius: var(--radius-sm); 88 color: var(--text-tertiary); 89 cursor: pointer; 90 transition: all 0.2s;

+4 -4

frontend/src/lib/components/LikersTooltip.svelte

··· 134 margin-bottom: 0.5rem; 135 background: var(--bg-secondary); 136 border: 1px solid var(--border-default); 137 - border-radius: 8px; 138 padding: 0.75rem; 139 min-width: 240px; 140 max-width: 320px; ··· 177 align-items: center; 178 gap: 0.75rem; 179 padding: 0.5rem; 180 - border-radius: 6px; 181 text-decoration: none; 182 transition: background 0.2s; 183 } ··· 190 .avatar-placeholder { 191 width: 32px; 192 height: 32px; 193 - border-radius: 50%; 194 flex-shrink: 0; 195 } 196 ··· 248 249 .likers-list::-webkit-scrollbar-thumb { 250 background: var(--border-default); 251 - border-radius: 3px; 252 } 253 254 .likers-list::-webkit-scrollbar-thumb:hover {

··· 134 margin-bottom: 0.5rem; 135 background: var(--bg-secondary); 136 border: 1px solid var(--border-default); 137 + border-radius: var(--radius-md); 138 padding: 0.75rem; 139 min-width: 240px; 140 max-width: 320px; ··· 177 align-items: center; 178 gap: 0.75rem; 179 padding: 0.5rem; 180 + border-radius: var(--radius-base); 181 text-decoration: none; 182 transition: background 0.2s; 183 } ··· 190 .avatar-placeholder { 191 width: 32px; 192 height: 32px; 193 + border-radius: var(--radius-full); 194 flex-shrink: 0; 195 } 196 ··· 248 249 .likers-list::-webkit-scrollbar-thumb { 250 background: var(--border-default); 251 + border-radius: var(--radius-sm); 252 } 253 254 .likers-list::-webkit-scrollbar-thumb:hover {

+5 -5

frontend/src/lib/components/LinksMenu.svelte

··· 140 height: 32px; 141 background: transparent; 142 border: 1px solid var(--border-default); 143 - border-radius: 6px; 144 color: var(--text-secondary); 145 cursor: pointer; 146 transition: all 0.2s; ··· 171 width: min(320px, calc(100vw - 2rem)); 172 background: var(--bg-secondary); 173 border: 1px solid var(--border-default); 174 - border-radius: 12px; 175 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 176 z-index: 101; 177 animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); ··· 201 height: 28px; 202 background: transparent; 203 border: none; 204 - border-radius: 4px; 205 color: var(--text-secondary); 206 cursor: pointer; 207 transition: all 0.2s; ··· 224 gap: 1rem; 225 padding: 1rem; 226 background: transparent; 227 - border-radius: 8px; 228 text-decoration: none; 229 color: var(--text-primary); 230 transition: all 0.2s; ··· 245 } 246 247 .tangled-menu-icon { 248 - border-radius: 4px; 249 opacity: 0.7; 250 transition: opacity 0.2s, box-shadow 0.2s; 251 }

··· 140 height: 32px; 141 background: transparent; 142 border: 1px solid var(--border-default); 143 + border-radius: var(--radius-base); 144 color: var(--text-secondary); 145 cursor: pointer; 146 transition: all 0.2s; ··· 171 width: min(320px, calc(100vw - 2rem)); 172 background: var(--bg-secondary); 173 border: 1px solid var(--border-default); 174 + border-radius: var(--radius-lg); 175 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 176 z-index: 101; 177 animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); ··· 201 height: 28px; 202 background: transparent; 203 border: none; 204 + border-radius: var(--radius-sm); 205 color: var(--text-secondary); 206 cursor: pointer; 207 transition: all 0.2s; ··· 224 gap: 1rem; 225 padding: 1rem; 226 background: transparent; 227 + border-radius: var(--radius-md); 228 text-decoration: none; 229 color: var(--text-primary); 230 transition: all 0.2s; ··· 245 } 246 247 .tangled-menu-icon { 248 + border-radius: var(--radius-sm); 249 opacity: 0.7; 250 transition: opacity 0.2s, box-shadow 0.2s; 251 }

+4 -4

frontend/src/lib/components/MigrationBanner.svelte

··· 152 .migration-banner { 153 background: var(--bg-tertiary); 154 border: 1px solid var(--border-default); 155 - border-radius: 8px; 156 padding: 1rem; 157 margin-bottom: 1.5rem; 158 } ··· 190 gap: 1rem; 191 background: color-mix(in srgb, var(--success) 10%, transparent); 192 border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); 193 - border-radius: 6px; 194 padding: 1rem; 195 animation: slideIn 0.3s ease-out; 196 } ··· 239 .collection-name { 240 background: color-mix(in srgb, var(--text-primary) 5%, transparent); 241 padding: 0.15em 0.4em; 242 - border-radius: 3px; 243 font-family: monospace; 244 font-size: 0.95em; 245 color: var(--text-primary); ··· 265 .migrate-button, 266 .dismiss-button { 267 padding: 0.5rem 1rem; 268 - border-radius: 4px; 269 font-size: 0.9em; 270 font-family: inherit; 271 cursor: pointer;

··· 152 .migration-banner { 153 background: var(--bg-tertiary); 154 border: 1px solid var(--border-default); 155 + border-radius: var(--radius-md); 156 padding: 1rem; 157 margin-bottom: 1.5rem; 158 } ··· 190 gap: 1rem; 191 background: color-mix(in srgb, var(--success) 10%, transparent); 192 border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); 193 + border-radius: var(--radius-base); 194 padding: 1rem; 195 animation: slideIn 0.3s ease-out; 196 } ··· 239 .collection-name { 240 background: color-mix(in srgb, var(--text-primary) 5%, transparent); 241 padding: 0.15em 0.4em; 242 + border-radius: var(--radius-sm); 243 font-family: monospace; 244 font-size: 0.95em; 245 color: var(--text-primary); ··· 265 .migrate-button, 266 .dismiss-button { 267 padding: 0.5rem 1rem; 268 + border-radius: var(--radius-sm); 269 font-size: 0.9em; 270 font-family: inherit; 271 cursor: pointer;

+2 -2

frontend/src/lib/components/PlatformStats.svelte

··· 203 background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%); 204 background-size: 200% 100%; 205 animation: shimmer 1.5s ease-in-out infinite; 206 - border-radius: 6px; 207 } 208 209 .stats-menu-grid { ··· 219 gap: 0.15rem; 220 padding: 0.6rem 0.4rem; 221 background: var(--bg-tertiary, #1a1a1a); 222 - border-radius: 6px; 223 } 224 225 .menu-stat-icon {

··· 203 background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%); 204 background-size: 200% 100%; 205 animation: shimmer 1.5s ease-in-out infinite; 206 + border-radius: var(--radius-base); 207 } 208 209 .stats-menu-grid { ··· 219 gap: 0.15rem; 220 padding: 0.6rem 0.4rem; 221 background: var(--bg-tertiary, #1a1a1a); 222 + border-radius: var(--radius-base); 223 } 224 225 .menu-stat-icon {

+11 -11

frontend/src/lib/components/ProfileMenu.svelte

··· 276 height: 44px; 277 background: transparent; 278 border: 1px solid var(--border-default); 279 - border-radius: 8px; 280 color: var(--text-secondary); 281 cursor: pointer; 282 transition: all 0.15s; ··· 311 overflow-y: auto; 312 background: var(--bg-secondary); 313 border: 1px solid var(--border-default); 314 - border-radius: 16px; 315 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 316 z-index: 101; 317 animation: slideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); ··· 341 height: 36px; 342 background: transparent; 343 border: none; 344 - border-radius: 8px; 345 color: var(--text-secondary); 346 cursor: pointer; 347 transition: all 0.15s; ··· 371 min-height: 56px; 372 background: transparent; 373 border: none; 374 - border-radius: 12px; 375 text-decoration: none; 376 color: var(--text-primary); 377 font-family: inherit; ··· 440 padding: 0.5rem 0.75rem; 441 background: transparent; 442 border: none; 443 - border-radius: 6px; 444 color: var(--text-secondary); 445 font-family: inherit; 446 font-size: 0.85rem; ··· 490 min-height: 54px; 491 background: var(--bg-tertiary); 492 border: 1px solid var(--border-default); 493 - border-radius: 8px; 494 color: var(--text-secondary); 495 cursor: pointer; 496 transition: all 0.15s; ··· 533 width: 44px; 534 height: 44px; 535 border: 1px solid var(--border-default); 536 - border-radius: 8px; 537 cursor: pointer; 538 background: transparent; 539 flex-shrink: 0; ··· 544 } 545 546 .color-input::-webkit-color-swatch { 547 - border-radius: 4px; 548 border: none; 549 } 550 ··· 557 .preset-btn { 558 width: 36px; 559 height: 36px; 560 - border-radius: 6px; 561 border: 2px solid transparent; 562 cursor: pointer; 563 transition: all 0.15s; ··· 592 appearance: none; 593 width: 48px; 594 height: 28px; 595 - border-radius: 999px; 596 background: var(--border-default); 597 position: relative; 598 cursor: pointer; ··· 608 left: 3px; 609 width: 20px; 610 height: 20px; 611 - border-radius: 50%; 612 background: var(--text-secondary); 613 transition: transform 0.15s, background 0.15s; 614 }

··· 276 height: 44px; 277 background: transparent; 278 border: 1px solid var(--border-default); 279 + border-radius: var(--radius-md); 280 color: var(--text-secondary); 281 cursor: pointer; 282 transition: all 0.15s; ··· 311 overflow-y: auto; 312 background: var(--bg-secondary); 313 border: 1px solid var(--border-default); 314 + border-radius: var(--radius-xl); 315 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 316 z-index: 101; 317 animation: slideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); ··· 341 height: 36px; 342 background: transparent; 343 border: none; 344 + border-radius: var(--radius-md); 345 color: var(--text-secondary); 346 cursor: pointer; 347 transition: all 0.15s; ··· 371 min-height: 56px; 372 background: transparent; 373 border: none; 374 + border-radius: var(--radius-lg); 375 text-decoration: none; 376 color: var(--text-primary); 377 font-family: inherit; ··· 440 padding: 0.5rem 0.75rem; 441 background: transparent; 442 border: none; 443 + border-radius: var(--radius-base); 444 color: var(--text-secondary); 445 font-family: inherit; 446 font-size: 0.85rem; ··· 490 min-height: 54px; 491 background: var(--bg-tertiary); 492 border: 1px solid var(--border-default); 493 + border-radius: var(--radius-md); 494 color: var(--text-secondary); 495 cursor: pointer; 496 transition: all 0.15s; ··· 533 width: 44px; 534 height: 44px; 535 border: 1px solid var(--border-default); 536 + border-radius: var(--radius-md); 537 cursor: pointer; 538 background: transparent; 539 flex-shrink: 0; ··· 544 } 545 546 .color-input::-webkit-color-swatch { 547 + border-radius: var(--radius-sm); 548 border: none; 549 } 550 ··· 557 .preset-btn { 558 width: 36px; 559 height: 36px; 560 + border-radius: var(--radius-base); 561 border: 2px solid transparent; 562 cursor: pointer; 563 transition: all 0.15s; ··· 592 appearance: none; 593 width: 48px; 594 height: 28px; 595 + border-radius: var(--radius-full); 596 background: var(--border-default); 597 position: relative; 598 cursor: pointer; ··· 608 left: 3px; 609 width: 20px; 610 height: 20px; 611 + border-radius: var(--radius-full); 612 background: var(--text-secondary); 613 transition: transform 0.15s, background 0.15s; 614 }

+7 -7

frontend/src/lib/components/Queue.svelte

··· 270 background: transparent; 271 border: 1px solid var(--border-subtle); 272 color: var(--text-tertiary); 273 - border-radius: 4px; 274 cursor: pointer; 275 transition: all 0.15s ease; 276 } ··· 302 align-items: center; 303 justify-content: space-between; 304 padding: 1rem 1.1rem; 305 - border-radius: 10px; 306 background: var(--bg-secondary); 307 border: 1px solid var(--border-default); 308 gap: 1rem; ··· 372 align-items: center; 373 gap: 0.5rem; 374 padding: 0.85rem 0.9rem; 375 - border-radius: 8px; 376 cursor: pointer; 377 transition: all 0.2s; 378 border: 1px solid var(--border-subtle); ··· 412 color: var(--text-muted); 413 cursor: grab; 414 touch-action: none; 415 - border-radius: 4px; 416 transition: all 0.2s; 417 flex-shrink: 0; 418 } ··· 476 align-items: center; 477 justify-content: center; 478 transition: all 0.2s; 479 - border-radius: 4px; 480 opacity: 0; 481 flex-shrink: 0; 482 } ··· 499 500 .empty-up-next { 501 border: 1px dashed var(--border-subtle); 502 - border-radius: 6px; 503 padding: 1.25rem; 504 text-align: center; 505 color: var(--text-tertiary); ··· 542 543 .queue-tracks::-webkit-scrollbar-thumb { 544 background: var(--border-default); 545 - border-radius: 4px; 546 } 547 548 .queue-tracks::-webkit-scrollbar-thumb:hover {

··· 270 background: transparent; 271 border: 1px solid var(--border-subtle); 272 color: var(--text-tertiary); 273 + border-radius: var(--radius-sm); 274 cursor: pointer; 275 transition: all 0.15s ease; 276 } ··· 302 align-items: center; 303 justify-content: space-between; 304 padding: 1rem 1.1rem; 305 + border-radius: var(--radius-md); 306 background: var(--bg-secondary); 307 border: 1px solid var(--border-default); 308 gap: 1rem; ··· 372 align-items: center; 373 gap: 0.5rem; 374 padding: 0.85rem 0.9rem; 375 + border-radius: var(--radius-md); 376 cursor: pointer; 377 transition: all 0.2s; 378 border: 1px solid var(--border-subtle); ··· 412 color: var(--text-muted); 413 cursor: grab; 414 touch-action: none; 415 + border-radius: var(--radius-sm); 416 transition: all 0.2s; 417 flex-shrink: 0; 418 } ··· 476 align-items: center; 477 justify-content: center; 478 transition: all 0.2s; 479 + border-radius: var(--radius-sm); 480 opacity: 0; 481 flex-shrink: 0; 482 } ··· 499 500 .empty-up-next { 501 border: 1px dashed var(--border-subtle); 502 + border-radius: var(--radius-base); 503 padding: 1.25rem; 504 text-align: center; 505 color: var(--text-tertiary); ··· 542 543 .queue-tracks::-webkit-scrollbar-thumb { 544 background: var(--border-default); 545 + border-radius: var(--radius-sm); 546 } 547 548 .queue-tracks::-webkit-scrollbar-thumb:hover {

+10 -10

frontend/src/lib/components/SearchModal.svelte

··· 276 backdrop-filter: blur(20px) saturate(180%); 277 -webkit-backdrop-filter: blur(20px) saturate(180%); 278 border: 1px solid var(--border-subtle); 279 - border-radius: 16px; 280 box-shadow: 281 0 24px 80px color-mix(in srgb, var(--bg-primary) 50%, transparent), 282 0 0 1px var(--border-subtle) inset; ··· 317 padding: 0.25rem 0.5rem; 318 background: var(--bg-tertiary); 319 border: 1px solid var(--border-default); 320 - border-radius: 5px; 321 color: var(--text-muted); 322 font-family: inherit; 323 } ··· 327 height: 16px; 328 border: 2px solid var(--border-default); 329 border-top-color: var(--accent); 330 - border-radius: 50%; 331 animation: spin 0.6s linear infinite; 332 } 333 ··· 351 352 .search-results::-webkit-scrollbar-track { 353 background: transparent; 354 - border-radius: 4px; 355 } 356 357 .search-results::-webkit-scrollbar-thumb { 358 background: var(--border-default); 359 - border-radius: 4px; 360 } 361 362 .search-results::-webkit-scrollbar-thumb:hover { ··· 371 padding: 0.75rem; 372 background: transparent; 373 border: none; 374 - border-radius: 8px; 375 cursor: pointer; 376 text-align: left; 377 font-family: inherit; ··· 396 align-items: center; 397 justify-content: center; 398 background: var(--bg-tertiary); 399 - border-radius: 8px; 400 font-size: 0.9rem; 401 flex-shrink: 0; 402 position: relative; ··· 409 width: 100%; 410 height: 100%; 411 object-fit: cover; 412 - border-radius: 8px; 413 } 414 415 .result-icon[data-type='track'] { ··· 463 color: var(--text-muted); 464 padding: 0.2rem 0.45rem; 465 background: var(--bg-tertiary); 466 - border-radius: 4px; 467 flex-shrink: 0; 468 } 469 ··· 504 padding: 0.15rem 0.35rem; 505 background: var(--bg-tertiary); 506 border: 1px solid var(--border-default); 507 - border-radius: 4px; 508 font-family: inherit; 509 } 510

··· 276 backdrop-filter: blur(20px) saturate(180%); 277 -webkit-backdrop-filter: blur(20px) saturate(180%); 278 border: 1px solid var(--border-subtle); 279 + border-radius: var(--radius-xl); 280 box-shadow: 281 0 24px 80px color-mix(in srgb, var(--bg-primary) 50%, transparent), 282 0 0 1px var(--border-subtle) inset; ··· 317 padding: 0.25rem 0.5rem; 318 background: var(--bg-tertiary); 319 border: 1px solid var(--border-default); 320 + border-radius: var(--radius-sm); 321 color: var(--text-muted); 322 font-family: inherit; 323 } ··· 327 height: 16px; 328 border: 2px solid var(--border-default); 329 border-top-color: var(--accent); 330 + border-radius: var(--radius-full); 331 animation: spin 0.6s linear infinite; 332 } 333 ··· 351 352 .search-results::-webkit-scrollbar-track { 353 background: transparent; 354 + border-radius: var(--radius-sm); 355 } 356 357 .search-results::-webkit-scrollbar-thumb { 358 background: var(--border-default); 359 + border-radius: var(--radius-sm); 360 } 361 362 .search-results::-webkit-scrollbar-thumb:hover { ··· 371 padding: 0.75rem; 372 background: transparent; 373 border: none; 374 + border-radius: var(--radius-md); 375 cursor: pointer; 376 text-align: left; 377 font-family: inherit; ··· 396 align-items: center; 397 justify-content: center; 398 background: var(--bg-tertiary); 399 + border-radius: var(--radius-md); 400 font-size: 0.9rem; 401 flex-shrink: 0; 402 position: relative; ··· 409 width: 100%; 410 height: 100%; 411 object-fit: cover; 412 + border-radius: var(--radius-md); 413 } 414 415 .result-icon[data-type='track'] { ··· 463 color: var(--text-muted); 464 padding: 0.2rem 0.45rem; 465 background: var(--bg-tertiary); 466 + border-radius: var(--radius-sm); 467 flex-shrink: 0; 468 } 469 ··· 504 padding: 0.15rem 0.35rem; 505 background: var(--bg-tertiary); 506 border: 1px solid var(--border-default); 507 + border-radius: var(--radius-sm); 508 font-family: inherit; 509 } 510

+1 -1

frontend/src/lib/components/SearchTrigger.svelte

··· 24 border: 1px solid var(--border-default); 25 color: var(--text-secondary); 26 padding: 0.5rem; 27 - border-radius: 4px; 28 cursor: pointer; 29 transition: all 0.2s; 30 display: flex;

··· 24 border: 1px solid var(--border-default); 25 color: var(--text-secondary); 26 padding: 0.5rem; 27 + border-radius: var(--radius-sm); 28 cursor: pointer; 29 transition: all 0.2s; 30 display: flex;

+1 -1

frontend/src/lib/components/SensitiveImage.svelte

··· 70 margin-bottom: 4px; 71 background: var(--bg-primary); 72 border: 1px solid var(--border-default); 73 - border-radius: 4px; 74 padding: 0.25rem 0.5rem; 75 font-size: 0.7rem; 76 color: var(--text-tertiary);

··· 70 margin-bottom: 4px; 71 background: var(--bg-primary); 72 border: 1px solid var(--border-default); 73 + border-radius: var(--radius-sm); 74 padding: 0.25rem 0.5rem; 75 font-size: 0.7rem; 76 color: var(--text-tertiary);

+7 -7

frontend/src/lib/components/SettingsMenu.svelte

··· 181 border: 1px solid var(--border-default); 182 color: var(--text-secondary); 183 padding: 0.5rem; 184 - border-radius: 4px; 185 cursor: pointer; 186 transition: all 0.2s; 187 display: flex; ··· 200 right: 0; 201 background: var(--bg-secondary); 202 border: 1px solid var(--border-default); 203 - border-radius: 8px; 204 padding: 1.25rem; 205 min-width: 280px; 206 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); ··· 265 padding: 0.6rem 0.5rem; 266 background: var(--bg-tertiary); 267 border: 1px solid var(--border-default); 268 - border-radius: 6px; 269 color: var(--text-secondary); 270 cursor: pointer; 271 transition: all 0.2s; ··· 303 width: 48px; 304 height: 32px; 305 border: 1px solid var(--border-default); 306 - border-radius: 4px; 307 cursor: pointer; 308 background: transparent; 309 } ··· 332 .preset-btn { 333 width: 32px; 334 height: 32px; 335 - border-radius: 4px; 336 border: 2px solid transparent; 337 cursor: pointer; 338 transition: all 0.2s; ··· 361 appearance: none; 362 width: 42px; 363 height: 22px; 364 - border-radius: 999px; 365 background: var(--border-default); 366 position: relative; 367 cursor: pointer; ··· 377 left: 2px; 378 width: 16px; 379 height: 16px; 380 - border-radius: 50%; 381 background: var(--text-secondary); 382 transition: transform 0.2s, background 0.2s; 383 }

··· 181 border: 1px solid var(--border-default); 182 color: var(--text-secondary); 183 padding: 0.5rem; 184 + border-radius: var(--radius-sm); 185 cursor: pointer; 186 transition: all 0.2s; 187 display: flex; ··· 200 right: 0; 201 background: var(--bg-secondary); 202 border: 1px solid var(--border-default); 203 + border-radius: var(--radius-md); 204 padding: 1.25rem; 205 min-width: 280px; 206 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); ··· 265 padding: 0.6rem 0.5rem; 266 background: var(--bg-tertiary); 267 border: 1px solid var(--border-default); 268 + border-radius: var(--radius-base); 269 color: var(--text-secondary); 270 cursor: pointer; 271 transition: all 0.2s; ··· 303 width: 48px; 304 height: 32px; 305 border: 1px solid var(--border-default); 306 + border-radius: var(--radius-sm); 307 cursor: pointer; 308 background: transparent; 309 } ··· 332 .preset-btn { 333 width: 32px; 334 height: 32px; 335 + border-radius: var(--radius-sm); 336 border: 2px solid transparent; 337 cursor: pointer; 338 transition: all 0.2s; ··· 361 appearance: none; 362 width: 42px; 363 height: 22px; 364 + border-radius: var(--radius-full); 365 background: var(--border-default); 366 position: relative; 367 cursor: pointer; ··· 377 left: 2px; 378 width: 16px; 379 height: 16px; 380 + border-radius: var(--radius-full); 381 background: var(--text-secondary); 382 transition: transform 0.2s, background 0.2s; 383 }

+2 -2

frontend/src/lib/components/ShareButton.svelte

··· 38 .share-btn { 39 background: var(--glass-btn-bg, transparent); 40 border: 1px solid var(--glass-btn-border, var(--border-default)); 41 - border-radius: 6px; 42 width: 32px; 43 height: 32px; 44 padding: 0; ··· 67 border: 1px solid var(--accent); 68 color: var(--accent); 69 padding: 0.25rem 0.75rem; 70 - border-radius: 4px; 71 font-size: 0.75rem; 72 white-space: nowrap; 73 pointer-events: none;

··· 38 .share-btn { 39 background: var(--glass-btn-bg, transparent); 40 border: 1px solid var(--glass-btn-border, var(--border-default)); 41 + border-radius: var(--radius-base); 42 width: 32px; 43 height: 32px; 44 padding: 0; ··· 67 border: 1px solid var(--accent); 68 color: var(--accent); 69 padding: 0.25rem 0.75rem; 70 + border-radius: var(--radius-sm); 71 font-size: 0.75rem; 72 white-space: nowrap; 73 pointer-events: none;

+1 -1

frontend/src/lib/components/SupporterBadge.svelte

··· 22 padding: 0.2rem 0.5rem; 23 background: color-mix(in srgb, var(--accent) 15%, transparent); 24 border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); 25 - border-radius: 4px; 26 color: var(--accent); 27 font-size: 0.75rem; 28 font-weight: 500;

··· 22 padding: 0.2rem 0.5rem; 23 background: color-mix(in srgb, var(--accent) 15%, transparent); 24 border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); 25 + border-radius: var(--radius-sm); 26 color: var(--accent); 27 font-size: 0.75rem; 28 font-weight: 500;

+5 -5

frontend/src/lib/components/TagInput.svelte

··· 178 padding: 0.75rem; 179 background: var(--bg-primary); 180 border: 1px solid var(--border-default); 181 - border-radius: 4px; 182 min-height: 48px; 183 transition: all 0.2s; 184 } ··· 195 background: color-mix(in srgb, var(--accent) 10%, transparent); 196 border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); 197 color: var(--accent-hover); 198 - border-radius: 20px; 199 font-size: 0.9rem; 200 font-weight: 500; 201 } ··· 261 overflow-y: auto; 262 background: var(--bg-secondary); 263 border: 1px solid var(--border-default); 264 - border-radius: 4px; 265 margin-top: 0.25rem; 266 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 267 scrollbar-width: thin; ··· 274 275 .suggestions::-webkit-scrollbar-track { 276 background: var(--bg-primary); 277 - border-radius: 4px; 278 } 279 280 .suggestions::-webkit-scrollbar-thumb { 281 background: var(--border-default); 282 - border-radius: 4px; 283 } 284 285 .suggestions::-webkit-scrollbar-thumb:hover {

··· 178 padding: 0.75rem; 179 background: var(--bg-primary); 180 border: 1px solid var(--border-default); 181 + border-radius: var(--radius-sm); 182 min-height: 48px; 183 transition: all 0.2s; 184 } ··· 195 background: color-mix(in srgb, var(--accent) 10%, transparent); 196 border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); 197 color: var(--accent-hover); 198 + border-radius: var(--radius-xl); 199 font-size: 0.9rem; 200 font-weight: 500; 201 } ··· 261 overflow-y: auto; 262 background: var(--bg-secondary); 263 border: 1px solid var(--border-default); 264 + border-radius: var(--radius-sm); 265 margin-top: 0.25rem; 266 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 267 scrollbar-width: thin; ··· 274 275 .suggestions::-webkit-scrollbar-track { 276 background: var(--bg-primary); 277 + border-radius: var(--radius-sm); 278 } 279 280 .suggestions::-webkit-scrollbar-thumb { 281 background: var(--border-default); 282 + border-radius: var(--radius-sm); 283 } 284 285 .suggestions::-webkit-scrollbar-thumb:hover {

+1 -1

frontend/src/lib/components/Toast.svelte

··· 61 backdrop-filter: blur(12px); 62 -webkit-backdrop-filter: blur(12px); 63 border: 1px solid rgba(255, 255, 255, 0.06); 64 - border-radius: 8px; 65 pointer-events: none; 66 font-size: 0.85rem; 67 max-width: 450px;

··· 61 backdrop-filter: blur(12px); 62 -webkit-backdrop-filter: blur(12px); 63 border: 1px solid rgba(255, 255, 255, 0.06); 64 + border-radius: var(--radius-md); 65 pointer-events: none; 66 font-size: 0.85rem; 67 max-width: 450px;

+6 -6

frontend/src/lib/components/TrackActionsMenu.svelte

··· 402 justify-content: center; 403 background: transparent; 404 border: 1px solid var(--border-default); 405 - border-radius: 4px; 406 color: var(--text-tertiary); 407 cursor: pointer; 408 transition: all 0.2s; ··· 558 .playlist-thumb-placeholder { 559 width: 36px; 560 height: 36px; 561 - border-radius: 4px; 562 flex-shrink: 0; 563 } 564 ··· 627 padding: 0.75rem 1rem; 628 background: var(--bg-tertiary); 629 border: 1px solid var(--border-default); 630 - border-radius: 8px; 631 color: var(--text-primary); 632 font-family: inherit; 633 font-size: 1rem; ··· 650 padding: 0.75rem 1rem; 651 background: var(--accent); 652 border: none; 653 - border-radius: 8px; 654 color: white; 655 font-family: inherit; 656 font-size: 1rem; ··· 673 height: 18px; 674 border: 2px solid var(--border-default); 675 border-top-color: var(--accent); 676 - border-radius: 50%; 677 animation: spin 0.8s linear infinite; 678 } 679 ··· 700 top: 50%; 701 transform: translateY(-50%); 702 margin-right: 0.5rem; 703 - border-radius: 8px; 704 min-width: 180px; 705 max-height: none; 706 animation: slideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);

··· 402 justify-content: center; 403 background: transparent; 404 border: 1px solid var(--border-default); 405 + border-radius: var(--radius-sm); 406 color: var(--text-tertiary); 407 cursor: pointer; 408 transition: all 0.2s; ··· 558 .playlist-thumb-placeholder { 559 width: 36px; 560 height: 36px; 561 + border-radius: var(--radius-sm); 562 flex-shrink: 0; 563 } 564 ··· 627 padding: 0.75rem 1rem; 628 background: var(--bg-tertiary); 629 border: 1px solid var(--border-default); 630 + border-radius: var(--radius-md); 631 color: var(--text-primary); 632 font-family: inherit; 633 font-size: 1rem; ··· 650 padding: 0.75rem 1rem; 651 background: var(--accent); 652 border: none; 653 + border-radius: var(--radius-md); 654 color: white; 655 font-family: inherit; 656 font-size: 1rem; ··· 673 height: 18px; 674 border: 2px solid var(--border-default); 675 border-top-color: var(--accent); 676 + border-radius: var(--radius-full); 677 animation: spin 0.8s linear infinite; 678 } 679 ··· 700 top: 50%; 701 transform: translateY(-50%); 702 margin-right: 0.5rem; 703 + border-radius: var(--radius-md); 704 min-width: 180px; 705 max-height: none; 706 animation: slideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);

+8 -8

frontend/src/lib/components/TrackItem.svelte

··· 359 gap: 0.75rem; 360 background: var(--track-bg, var(--bg-secondary)); 361 border: 1px solid var(--track-border, var(--border-subtle)); 362 - border-radius: 8px; 363 padding: 1rem; 364 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); 365 transition: ··· 428 position: absolute; 429 inset: 0; 430 background: rgba(0, 0, 0, 0.3); 431 - border-radius: 4px; 432 pointer-events: none; 433 } 434 ··· 443 justify-content: center; 444 background: var(--accent); 445 border: 2px solid var(--bg-secondary); 446 - border-radius: 50%; 447 color: white; 448 z-index: 1; 449 } ··· 456 display: flex; 457 align-items: center; 458 justify-content: center; 459 - border-radius: 4px; 460 overflow: hidden; 461 background: var(--bg-tertiary); 462 border: 1px solid var(--border-subtle); ··· 490 } 491 492 .track-avatar img { 493 - border-radius: 50%; 494 border: 2px solid var(--border-default); 495 transition: border-color 0.2s; 496 } ··· 659 padding: 0.1rem 0.4rem; 660 background: color-mix(in srgb, var(--accent) 15%, transparent); 661 color: var(--accent-hover); 662 - border-radius: 3px; 663 font-size: 0.75rem; 664 font-weight: 500; 665 text-decoration: none; ··· 679 background: var(--bg-tertiary); 680 color: var(--text-muted); 681 border: none; 682 - border-radius: 3px; 683 font-size: 0.75rem; 684 font-weight: 500; 685 font-family: inherit; ··· 756 justify-content: center; 757 background: transparent; 758 border: 1px solid var(--border-default); 759 - border-radius: 4px; 760 color: var(--text-tertiary); 761 cursor: pointer; 762 transition: all 0.2s;

··· 359 gap: 0.75rem; 360 background: var(--track-bg, var(--bg-secondary)); 361 border: 1px solid var(--track-border, var(--border-subtle)); 362 + border-radius: var(--radius-md); 363 padding: 1rem; 364 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); 365 transition: ··· 428 position: absolute; 429 inset: 0; 430 background: rgba(0, 0, 0, 0.3); 431 + border-radius: var(--radius-sm); 432 pointer-events: none; 433 } 434 ··· 443 justify-content: center; 444 background: var(--accent); 445 border: 2px solid var(--bg-secondary); 446 + border-radius: var(--radius-full); 447 color: white; 448 z-index: 1; 449 } ··· 456 display: flex; 457 align-items: center; 458 justify-content: center; 459 + border-radius: var(--radius-sm); 460 overflow: hidden; 461 background: var(--bg-tertiary); 462 border: 1px solid var(--border-subtle); ··· 490 } 491 492 .track-avatar img { 493 + border-radius: var(--radius-full); 494 border: 2px solid var(--border-default); 495 transition: border-color 0.2s; 496 } ··· 659 padding: 0.1rem 0.4rem; 660 background: color-mix(in srgb, var(--accent) 15%, transparent); 661 color: var(--accent-hover); 662 + border-radius: var(--radius-sm); 663 font-size: 0.75rem; 664 font-weight: 500; 665 text-decoration: none; ··· 679 background: var(--bg-tertiary); 680 color: var(--text-muted); 681 border: none; 682 + border-radius: var(--radius-sm); 683 font-size: 0.75rem; 684 font-weight: 500; 685 font-family: inherit; ··· 756 justify-content: center; 757 background: transparent; 758 border: 1px solid var(--border-default); 759 + border-radius: var(--radius-sm); 760 color: var(--text-tertiary); 761 cursor: pointer; 762 transition: all 0.2s;

+4 -4

frontend/src/lib/components/player/PlaybackControls.svelte

··· 244 align-items: center; 245 justify-content: center; 246 transition: all 0.2s; 247 - border-radius: 50%; 248 } 249 250 .control-btn svg { ··· 282 display: flex; 283 align-items: center; 284 justify-content: center; 285 - border-radius: 6px; 286 transition: all 0.2s; 287 position: relative; 288 } ··· 382 background: var(--accent); 383 height: 14px; 384 width: 14px; 385 - border-radius: 50%; 386 margin-top: -5px; 387 transition: all 0.2s; 388 box-shadow: 0 0 0 8px transparent; ··· 419 background: var(--accent); 420 height: 14px; 421 width: 14px; 422 - border-radius: 50%; 423 border: none; 424 transition: all 0.2s; 425 box-shadow: 0 0 0 8px transparent;

··· 244 align-items: center; 245 justify-content: center; 246 transition: all 0.2s; 247 + border-radius: var(--radius-full); 248 } 249 250 .control-btn svg { ··· 282 display: flex; 283 align-items: center; 284 justify-content: center; 285 + border-radius: var(--radius-base); 286 transition: all 0.2s; 287 position: relative; 288 } ··· 382 background: var(--accent); 383 height: 14px; 384 width: 14px; 385 + border-radius: var(--radius-full); 386 margin-top: -5px; 387 transition: all 0.2s; 388 box-shadow: 0 0 0 8px transparent; ··· 419 background: var(--accent); 420 height: 14px; 421 width: 14px; 422 + border-radius: var(--radius-full); 423 border: none; 424 transition: all 0.2s; 425 box-shadow: 0 0 0 8px transparent;

+1 -1

frontend/src/lib/components/player/TrackInfo.svelte

··· 156 flex-shrink: 0; 157 width: 56px; 158 height: 56px; 159 - border-radius: 4px; 160 overflow: hidden; 161 background: var(--bg-tertiary); 162 border: 1px solid var(--border-default);

··· 156 flex-shrink: 0; 157 width: 56px; 158 height: 56px; 159 + border-radius: var(--radius-sm); 160 overflow: hidden; 161 background: var(--bg-tertiary); 162 border: 1px solid var(--border-default);

+1 -1

frontend/src/routes/+error.svelte

··· 79 font-size: 1.1rem; 80 padding: 0.75rem 1.5rem; 81 border: 1px solid var(--accent); 82 - border-radius: 6px; 83 transition: all 0.2s; 84 } 85

··· 79 font-size: 1.1rem; 80 padding: 0.75rem 1.5rem; 81 border: 1px solid var(--accent); 82 + border-radius: var(--radius-base); 83 transition: all 0.2s; 84 } 85

+10 -1

frontend/src/routes/+layout.svelte

··· 455 --text-body: 1rem; 456 --text-small: 0.9rem; 457 458 /* semantic */ 459 --success: #4ade80; 460 --warning: #fbbf24; ··· 589 right: 20px; 590 width: 48px; 591 height: 48px; 592 - border-radius: 50%; 593 background: var(--bg-secondary); 594 border: 1px solid var(--border-default); 595 color: var(--text-secondary);

··· 455 --text-body: 1rem; 456 --text-small: 0.9rem; 457 458 + /* border radius scale */ 459 + --radius-sm: 4px; 460 + --radius-base: 6px; 461 + --radius-md: 8px; 462 + --radius-lg: 12px; 463 + --radius-xl: 16px; 464 + --radius-2xl: 24px; 465 + --radius-full: 9999px; 466 + 467 /* semantic */ 468 --success: #4ade80; 469 --warning: #fbbf24; ··· 598 right: 20px; 599 width: 48px; 600 height: 48px; 601 + border-radius: var(--radius-full); 602 background: var(--bg-secondary); 603 border: 1px solid var(--border-default); 604 color: var(--text-secondary);

+11 -11

frontend/src/routes/costs/+page.svelte

··· 407 padding: 2rem; 408 background: var(--bg-tertiary); 409 border: 1px solid var(--border-subtle); 410 - border-radius: 12px; 411 } 412 413 .total-label { ··· 454 .cost-item { 455 background: var(--bg-tertiary); 456 border: 1px solid var(--border-subtle); 457 - border-radius: 8px; 458 padding: 1rem; 459 } 460 ··· 479 .cost-bar-bg { 480 height: 8px; 481 background: var(--bg-primary); 482 - border-radius: 4px; 483 overflow: hidden; 484 margin-bottom: 0.5rem; 485 } ··· 487 .cost-bar { 488 height: 100%; 489 background: var(--accent); 490 - border-radius: 4px; 491 transition: width 0.3s ease; 492 } 493 ··· 522 gap: 0.25rem; 523 background: var(--bg-tertiary); 524 border: 1px solid var(--border-subtle); 525 - border-radius: 6px; 526 padding: 0.25rem; 527 } 528 ··· 533 font-weight: 500; 534 background: transparent; 535 border: none; 536 - border-radius: 4px; 537 color: var(--text-secondary); 538 cursor: pointer; 539 transition: all 0.15s; ··· 555 padding: 2rem; 556 background: var(--bg-tertiary); 557 border: 1px solid var(--border-subtle); 558 - border-radius: 8px; 559 } 560 561 .audd-stats { ··· 583 padding: 1rem; 584 background: var(--bg-tertiary); 585 border: 1px solid var(--border-subtle); 586 - border-radius: 8px; 587 } 588 589 .stat-value { ··· 604 .daily-chart { 605 background: var(--bg-tertiary); 606 border: 1px solid var(--border-subtle); 607 - border-radius: 8px; 608 padding: 1rem; 609 overflow: hidden; 610 } ··· 673 var(--bg-tertiary) 674 ); 675 border: 1px solid var(--border-subtle); 676 - border-radius: 12px; 677 } 678 679 .support-icon { ··· 700 padding: 0.75rem 1.5rem; 701 background: var(--accent); 702 color: white; 703 - border-radius: 8px; 704 text-decoration: none; 705 font-weight: 600; 706 font-size: 0.9rem;

··· 407 padding: 2rem; 408 background: var(--bg-tertiary); 409 border: 1px solid var(--border-subtle); 410 + border-radius: var(--radius-lg); 411 } 412 413 .total-label { ··· 454 .cost-item { 455 background: var(--bg-tertiary); 456 border: 1px solid var(--border-subtle); 457 + border-radius: var(--radius-md); 458 padding: 1rem; 459 } 460 ··· 479 .cost-bar-bg { 480 height: 8px; 481 background: var(--bg-primary); 482 + border-radius: var(--radius-sm); 483 overflow: hidden; 484 margin-bottom: 0.5rem; 485 } ··· 487 .cost-bar { 488 height: 100%; 489 background: var(--accent); 490 + border-radius: var(--radius-sm); 491 transition: width 0.3s ease; 492 } 493 ··· 522 gap: 0.25rem; 523 background: var(--bg-tertiary); 524 border: 1px solid var(--border-subtle); 525 + border-radius: var(--radius-base); 526 padding: 0.25rem; 527 } 528 ··· 533 font-weight: 500; 534 background: transparent; 535 border: none; 536 + border-radius: var(--radius-sm); 537 color: var(--text-secondary); 538 cursor: pointer; 539 transition: all 0.15s; ··· 555 padding: 2rem; 556 background: var(--bg-tertiary); 557 border: 1px solid var(--border-subtle); 558 + border-radius: var(--radius-md); 559 } 560 561 .audd-stats { ··· 583 padding: 1rem; 584 background: var(--bg-tertiary); 585 border: 1px solid var(--border-subtle); 586 + border-radius: var(--radius-md); 587 } 588 589 .stat-value { ··· 604 .daily-chart { 605 background: var(--bg-tertiary); 606 border: 1px solid var(--border-subtle); 607 + border-radius: var(--radius-md); 608 padding: 1rem; 609 overflow: hidden; 610 } ··· 673 var(--bg-tertiary) 674 ); 675 border: 1px solid var(--border-subtle); 676 + border-radius: var(--radius-lg); 677 } 678 679 .support-icon { ··· 700 padding: 0.75rem 1.5rem; 701 background: var(--accent); 702 color: white; 703 + border-radius: var(--radius-md); 704 text-decoration: none; 705 font-weight: 600; 706 font-size: 0.9rem;

+1 -1

frontend/src/routes/embed/track/[id]/+page.svelte

··· 184 .play-btn { 185 width: 48px; 186 height: 48px; 187 - border-radius: 50%; 188 background: #fff; 189 color: #000; 190 border: none;

··· 184 .play-btn { 185 width: 48px; 186 height: 48px; 187 + border-radius: var(--radius-full); 188 background: #fff; 189 color: #000; 190 border: none;

+10 -10

frontend/src/routes/library/+page.svelte

··· 282 padding: 1rem 1.25rem; 283 background: var(--bg-secondary); 284 border: 1px solid var(--border-default); 285 - border-radius: 12px; 286 text-decoration: none; 287 color: inherit; 288 transition: all 0.15s; ··· 300 .collection-icon { 301 width: 48px; 302 height: 48px; 303 - border-radius: 10px; 304 display: flex; 305 align-items: center; 306 justify-content: center; ··· 320 .playlist-artwork { 321 width: 48px; 322 height: 48px; 323 - border-radius: 10px; 324 object-fit: cover; 325 flex-shrink: 0; 326 } ··· 384 background: var(--accent); 385 color: white; 386 border: none; 387 - border-radius: 8px; 388 font-family: inherit; 389 font-size: 0.875rem; 390 font-weight: 500; ··· 415 padding: 3rem 2rem; 416 background: var(--bg-secondary); 417 border: 1px dashed var(--border-default); 418 - border-radius: 12px; 419 text-align: center; 420 } 421 422 .empty-icon { 423 width: 64px; 424 height: 64px; 425 - border-radius: 16px; 426 display: flex; 427 align-items: center; 428 justify-content: center; ··· 461 .modal { 462 background: var(--bg-primary); 463 border: 1px solid var(--border-default); 464 - border-radius: 16px; 465 width: 100%; 466 max-width: 400px; 467 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); ··· 490 height: 32px; 491 background: transparent; 492 border: none; 493 - border-radius: 8px; 494 color: var(--text-secondary); 495 cursor: pointer; 496 transition: all 0.15s; ··· 518 padding: 0.75rem 1rem; 519 background: var(--bg-secondary); 520 border: 1px solid var(--border-default); 521 - border-radius: 8px; 522 font-family: inherit; 523 font-size: 1rem; 524 color: var(--text-primary); ··· 550 .cancel-btn, 551 .confirm-btn { 552 padding: 0.625rem 1.25rem; 553 - border-radius: 8px; 554 font-family: inherit; 555 font-size: 0.9rem; 556 font-weight: 500;

··· 282 padding: 1rem 1.25rem; 283 background: var(--bg-secondary); 284 border: 1px solid var(--border-default); 285 + border-radius: var(--radius-lg); 286 text-decoration: none; 287 color: inherit; 288 transition: all 0.15s; ··· 300 .collection-icon { 301 width: 48px; 302 height: 48px; 303 + border-radius: var(--radius-md); 304 display: flex; 305 align-items: center; 306 justify-content: center; ··· 320 .playlist-artwork { 321 width: 48px; 322 height: 48px; 323 + border-radius: var(--radius-md); 324 object-fit: cover; 325 flex-shrink: 0; 326 } ··· 384 background: var(--accent); 385 color: white; 386 border: none; 387 + border-radius: var(--radius-md); 388 font-family: inherit; 389 font-size: 0.875rem; 390 font-weight: 500; ··· 415 padding: 3rem 2rem; 416 background: var(--bg-secondary); 417 border: 1px dashed var(--border-default); 418 + border-radius: var(--radius-lg); 419 text-align: center; 420 } 421 422 .empty-icon { 423 width: 64px; 424 height: 64px; 425 + border-radius: var(--radius-xl); 426 display: flex; 427 align-items: center; 428 justify-content: center; ··· 461 .modal { 462 background: var(--bg-primary); 463 border: 1px solid var(--border-default); 464 + border-radius: var(--radius-xl); 465 width: 100%; 466 max-width: 400px; 467 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); ··· 490 height: 32px; 491 background: transparent; 492 border: none; 493 + border-radius: var(--radius-md); 494 color: var(--text-secondary); 495 cursor: pointer; 496 transition: all 0.15s; ··· 518 padding: 0.75rem 1rem; 519 background: var(--bg-secondary); 520 border: 1px solid var(--border-default); 521 + border-radius: var(--radius-md); 522 font-family: inherit; 523 font-size: 1rem; 524 color: var(--text-primary); ··· 550 .cancel-btn, 551 .confirm-btn { 552 padding: 0.625rem 1.25rem; 553 + border-radius: var(--radius-md); 554 font-family: inherit; 555 font-size: 0.9rem; 556 font-weight: 500;

+4 -4

frontend/src/routes/liked/+page.svelte

··· 350 color: var(--text-tertiary); 351 background: var(--bg-tertiary); 352 padding: 0.2rem 0.55rem; 353 - border-radius: 4px; 354 } 355 356 .header-actions { ··· 362 .queue-button, 363 .reorder-button { 364 padding: 0.75rem 1.5rem; 365 - border-radius: 24px; 366 font-weight: 600; 367 font-size: 0.95rem; 368 font-family: inherit; ··· 441 display: flex; 442 align-items: center; 443 gap: 0.5rem; 444 - border-radius: 8px; 445 transition: all 0.2s; 446 position: relative; 447 } ··· 473 color: var(--text-muted); 474 cursor: grab; 475 touch-action: none; 476 - border-radius: 4px; 477 transition: all 0.2s; 478 flex-shrink: 0; 479 }

··· 350 color: var(--text-tertiary); 351 background: var(--bg-tertiary); 352 padding: 0.2rem 0.55rem; 353 + border-radius: var(--radius-sm); 354 } 355 356 .header-actions { ··· 362 .queue-button, 363 .reorder-button { 364 padding: 0.75rem 1.5rem; 365 + border-radius: var(--radius-2xl); 366 font-weight: 600; 367 font-size: 0.95rem; 368 font-family: inherit; ··· 441 display: flex; 442 align-items: center; 443 gap: 0.5rem; 444 + border-radius: var(--radius-md); 445 transition: all 0.2s; 446 position: relative; 447 } ··· 473 color: var(--text-muted); 474 cursor: grab; 475 touch-action: none; 476 + border-radius: var(--radius-sm); 477 transition: all 0.2s; 478 flex-shrink: 0; 479 }

+2 -2

frontend/src/routes/liked/[handle]/+page.svelte

··· 126 .avatar { 127 width: 64px; 128 height: 64px; 129 - border-radius: 50%; 130 object-fit: cover; 131 flex-shrink: 0; 132 } ··· 208 background: transparent; 209 border: 1px solid var(--border-default); 210 color: var(--text-secondary); 211 - border-radius: 6px; 212 font-size: 0.85rem; 213 font-family: inherit; 214 cursor: pointer;

··· 126 .avatar { 127 width: 64px; 128 height: 64px; 129 + border-radius: var(--radius-full); 130 object-fit: cover; 131 flex-shrink: 0; 132 } ··· 208 background: transparent; 209 border: 1px solid var(--border-default); 210 color: var(--text-secondary); 211 + border-radius: var(--radius-base); 212 font-size: 0.85rem; 213 font-family: inherit; 214 cursor: pointer;

+3 -3

frontend/src/routes/login/+page.svelte

·········

+17 -17

frontend/src/routes/playlist/[id]/+page.svelte

··· 1341 .playlist-art { 1342 width: 200px; 1343 height: 200px; 1344 - border-radius: 8px; 1345 object-fit: cover; 1346 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 1347 } ··· 1349 .playlist-art-placeholder { 1350 width: 200px; 1351 height: 200px; 1352 - border-radius: 8px; 1353 background: var(--bg-tertiary); 1354 border: 1px solid var(--border-subtle); 1355 display: flex; ··· 1394 opacity: 0; 1395 transition: opacity 0.2s; 1396 pointer-events: none; 1397 - border-radius: 8px; 1398 font-family: inherit; 1399 } 1400 ··· 1526 height: 32px; 1527 background: var(--glass-btn-bg, rgba(18, 18, 18, 0.75)); 1528 border: 1px solid var(--glass-btn-border, rgba(255, 255, 255, 0.1)); 1529 - border-radius: 6px; 1530 color: var(--text-secondary); 1531 cursor: pointer; 1532 transition: all 0.15s; ··· 1560 .play-button, 1561 .queue-button { 1562 padding: 0.75rem 1.5rem; 1563 - border-radius: 24px; 1564 font-weight: 600; 1565 font-size: 0.95rem; 1566 font-family: inherit; ··· 1634 display: flex; 1635 align-items: center; 1636 gap: 0.5rem; 1637 - border-radius: 8px; 1638 transition: all 0.2s; 1639 position: relative; 1640 } ··· 1666 color: var(--text-muted); 1667 cursor: grab; 1668 touch-action: none; 1669 - border-radius: 4px; 1670 transition: all 0.2s; 1671 flex-shrink: 0; 1672 } ··· 1699 padding: 0.5rem; 1700 background: transparent; 1701 border: 1px solid var(--border-default); 1702 - border-radius: 4px; 1703 color: var(--text-muted); 1704 cursor: pointer; 1705 transition: all 0.2s; ··· 1732 margin-top: 0.5rem; 1733 background: transparent; 1734 border: 1px dashed var(--border-default); 1735 - border-radius: 8px; 1736 color: var(--text-tertiary); 1737 font-family: inherit; 1738 font-size: 0.9rem; ··· 1759 .empty-icon { 1760 width: 64px; 1761 height: 64px; 1762 - border-radius: 16px; 1763 display: flex; 1764 align-items: center; 1765 justify-content: center; ··· 1786 background: var(--accent); 1787 color: white; 1788 border: none; 1789 - border-radius: 8px; 1790 font-family: inherit; 1791 font-size: 0.9rem; 1792 font-weight: 500; ··· 1816 .modal { 1817 background: var(--bg-primary); 1818 border: 1px solid var(--border-default); 1819 - border-radius: 16px; 1820 width: 100%; 1821 max-width: 400px; 1822 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); ··· 1852 height: 32px; 1853 background: transparent; 1854 border: none; 1855 - border-radius: 8px; 1856 color: var(--text-secondary); 1857 cursor: pointer; 1858 transition: all 0.15s; ··· 1922 .result-image-placeholder { 1923 width: 40px; 1924 height: 40px; 1925 - border-radius: 6px; 1926 flex-shrink: 0; 1927 } 1928 ··· 1971 height: 36px; 1972 background: var(--accent); 1973 border: none; 1974 - border-radius: 8px; 1975 color: white; 1976 cursor: pointer; 1977 transition: all 0.15s; ··· 2008 .cancel-btn, 2009 .confirm-btn { 2010 padding: 0.625rem 1.25rem; 2011 - border-radius: 8px; 2012 font-family: inherit; 2013 font-size: 0.9rem; 2014 font-weight: 500; ··· 2053 height: 16px; 2054 border: 2px solid currentColor; 2055 border-top-color: transparent; 2056 - border-radius: 50%; 2057 animation: spin 0.6s linear infinite; 2058 } 2059

··· 1341 .playlist-art { 1342 width: 200px; 1343 height: 200px; 1344 + border-radius: var(--radius-md); 1345 object-fit: cover; 1346 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 1347 } ··· 1349 .playlist-art-placeholder { 1350 width: 200px; 1351 height: 200px; 1352 + border-radius: var(--radius-md); 1353 background: var(--bg-tertiary); 1354 border: 1px solid var(--border-subtle); 1355 display: flex; ··· 1394 opacity: 0; 1395 transition: opacity 0.2s; 1396 pointer-events: none; 1397 + border-radius: var(--radius-md); 1398 font-family: inherit; 1399 } 1400 ··· 1526 height: 32px; 1527 background: var(--glass-btn-bg, rgba(18, 18, 18, 0.75)); 1528 border: 1px solid var(--glass-btn-border, rgba(255, 255, 255, 0.1)); 1529 + border-radius: var(--radius-base); 1530 color: var(--text-secondary); 1531 cursor: pointer; 1532 transition: all 0.15s; ··· 1560 .play-button, 1561 .queue-button { 1562 padding: 0.75rem 1.5rem; 1563 + border-radius: var(--radius-2xl); 1564 font-weight: 600; 1565 font-size: 0.95rem; 1566 font-family: inherit; ··· 1634 display: flex; 1635 align-items: center; 1636 gap: 0.5rem; 1637 + border-radius: var(--radius-md); 1638 transition: all 0.2s; 1639 position: relative; 1640 } ··· 1666 color: var(--text-muted); 1667 cursor: grab; 1668 touch-action: none; 1669 + border-radius: var(--radius-sm); 1670 transition: all 0.2s; 1671 flex-shrink: 0; 1672 } ··· 1699 padding: 0.5rem; 1700 background: transparent; 1701 border: 1px solid var(--border-default); 1702 + border-radius: var(--radius-sm); 1703 color: var(--text-muted); 1704 cursor: pointer; 1705 transition: all 0.2s; ··· 1732 margin-top: 0.5rem; 1733 background: transparent; 1734 border: 1px dashed var(--border-default); 1735 + border-radius: var(--radius-md); 1736 color: var(--text-tertiary); 1737 font-family: inherit; 1738 font-size: 0.9rem; ··· 1759 .empty-icon { 1760 width: 64px; 1761 height: 64px; 1762 + border-radius: var(--radius-xl); 1763 display: flex; 1764 align-items: center; 1765 justify-content: center; ··· 1786 background: var(--accent); 1787 color: white; 1788 border: none; 1789 + border-radius: var(--radius-md); 1790 font-family: inherit; 1791 font-size: 0.9rem; 1792 font-weight: 500; ··· 1816 .modal { 1817 background: var(--bg-primary); 1818 border: 1px solid var(--border-default); 1819 + border-radius: var(--radius-xl); 1820 width: 100%; 1821 max-width: 400px; 1822 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); ··· 1852 height: 32px; 1853 background: transparent; 1854 border: none; 1855 + border-radius: var(--radius-md); 1856 color: var(--text-secondary); 1857 cursor: pointer; 1858 transition: all 0.15s; ··· 1922 .result-image-placeholder { 1923 width: 40px; 1924 height: 40px; 1925 + border-radius: var(--radius-base); 1926 flex-shrink: 0; 1927 } 1928 ··· 1971 height: 36px; 1972 background: var(--accent); 1973 border: none; 1974 + border-radius: var(--radius-md); 1975 color: white; 1976 cursor: pointer; 1977 transition: all 0.15s; ··· 2008 .cancel-btn, 2009 .confirm-btn { 2010 padding: 0.625rem 1.25rem; 2011 + border-radius: var(--radius-md); 2012 font-family: inherit; 2013 font-size: 0.9rem; 2014 font-weight: 500; ··· 2053 height: 16px; 2054 border: 2px solid currentColor; 2055 border-top-color: transparent; 2056 + border-radius: var(--radius-full); 2057 animation: spin 0.6s linear infinite; 2058 } 2059

+36 -36

frontend/src/routes/portal/+page.svelte

··· 1145 font-size: 0.8rem; 1146 padding: 0.35rem 0.6rem; 1147 background: var(--bg-tertiary); 1148 - border-radius: 5px; 1149 border: 1px solid var(--border-default); 1150 transition: all 0.15s; 1151 white-space: nowrap; ··· 1163 font-size: 0.8rem; 1164 padding: 0.35rem 0.6rem; 1165 background: var(--bg-tertiary); 1166 - border-radius: 5px; 1167 border: 1px solid var(--border-default); 1168 transition: all 0.15s; 1169 white-space: nowrap; ··· 1183 padding: 1rem 1.25rem; 1184 background: var(--bg-tertiary); 1185 border: 1px solid var(--border-default); 1186 - border-radius: 8px; 1187 text-decoration: none; 1188 color: var(--text-primary); 1189 transition: all 0.15s; ··· 1206 width: 44px; 1207 height: 44px; 1208 background: color-mix(in srgb, var(--accent) 15%, transparent); 1209 - border-radius: 10px; 1210 color: var(--accent); 1211 flex-shrink: 0; 1212 } ··· 1243 form { 1244 background: var(--bg-tertiary); 1245 padding: 1.25rem; 1246 - border-radius: 8px; 1247 border: 1px solid var(--border-subtle); 1248 } 1249 ··· 1267 padding: 0.6rem 0.75rem; 1268 background: var(--bg-primary); 1269 border: 1px solid var(--border-default); 1270 - border-radius: 4px; 1271 color: var(--text-primary); 1272 font-size: 0.95rem; 1273 font-family: inherit; ··· 1289 padding: 0.6rem 0.75rem; 1290 background: var(--bg-primary); 1291 border: 1px solid var(--border-default); 1292 - border-radius: 4px; 1293 color: var(--text-primary); 1294 font-size: 0.95rem; 1295 font-family: inherit; ··· 1345 padding: 0.6rem 0.75rem; 1346 background: var(--bg-primary); 1347 border: 1px solid var(--border-default); 1348 - border-radius: 6px; 1349 cursor: pointer; 1350 transition: all 0.15s; 1351 margin-bottom: 0; ··· 1412 padding: 0.6rem 0.75rem; 1413 background: var(--bg-primary); 1414 border: 1px solid var(--border-default); 1415 - border-radius: 4px; 1416 color: var(--text-primary); 1417 font-size: 0.95rem; 1418 font-family: inherit; ··· 1440 .avatar-preview img { 1441 width: 64px; 1442 height: 64px; 1443 - border-radius: 50%; 1444 object-fit: cover; 1445 border: 2px solid var(--border-default); 1446 } ··· 1450 padding: 0.75rem; 1451 background: var(--bg-primary); 1452 border: 1px solid var(--border-default); 1453 - border-radius: 4px; 1454 color: var(--text-primary); 1455 font-size: 0.9rem; 1456 font-family: inherit; ··· 1474 background: var(--accent); 1475 color: var(--text-primary); 1476 border: none; 1477 - border-radius: 4px; 1478 font-size: 1rem; 1479 font-weight: 600; 1480 font-family: inherit; ··· 1512 padding: 2rem; 1513 text-align: center; 1514 background: var(--bg-tertiary); 1515 - border-radius: 8px; 1516 border: 1px solid var(--border-subtle); 1517 } 1518 ··· 1529 gap: 1rem; 1530 background: var(--bg-tertiary); 1531 border: 1px solid var(--border-subtle); 1532 - border-radius: 6px; 1533 padding: 1rem; 1534 transition: all 0.2s; 1535 } ··· 1564 .track-artwork { 1565 width: 48px; 1566 height: 48px; 1567 - border-radius: 4px; 1568 overflow: hidden; 1569 background: var(--bg-primary); 1570 border: 1px solid var(--border-subtle); ··· 1773 padding: 0.1rem 0.4rem; 1774 background: color-mix(in srgb, var(--accent) 15%, transparent); 1775 color: var(--accent-hover); 1776 - border-radius: 3px; 1777 font-size: 0.8rem; 1778 font-weight: 500; 1779 text-decoration: none; ··· 1807 padding: 0; 1808 background: transparent; 1809 border: 1px solid var(--border-default); 1810 - border-radius: 6px; 1811 color: var(--text-tertiary); 1812 cursor: pointer; 1813 transition: all 0.15s; ··· 1852 padding: 0.5rem; 1853 background: var(--bg-primary); 1854 border: 1px solid var(--border-default); 1855 - border-radius: 4px; 1856 color: var(--text-primary); 1857 font-size: 0.9rem; 1858 font-family: inherit; ··· 1865 padding: 0.5rem; 1866 background: var(--bg-primary); 1867 border: 1px solid var(--border-default); 1868 - border-radius: 4px; 1869 margin-bottom: 0.5rem; 1870 } 1871 1872 .current-image-preview img { 1873 width: 48px; 1874 height: 48px; 1875 - border-radius: 4px; 1876 object-fit: cover; 1877 } 1878 ··· 1910 .album-card { 1911 background: var(--bg-tertiary); 1912 border: 1px solid var(--border-subtle); 1913 - border-radius: 8px; 1914 padding: 1rem; 1915 transition: all 0.2s; 1916 display: flex; ··· 1928 .album-cover { 1929 width: 100%; 1930 aspect-ratio: 1; 1931 - border-radius: 6px; 1932 object-fit: cover; 1933 } 1934 1935 .album-cover-placeholder { 1936 width: 100%; 1937 aspect-ratio: 1; 1938 - border-radius: 6px; 1939 background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05)); 1940 display: flex; 1941 align-items: center; ··· 1980 font-size: 0.8rem; 1981 padding: 0.35rem 0.6rem; 1982 background: var(--bg-tertiary); 1983 - border-radius: 5px; 1984 border: 1px solid var(--border-default); 1985 transition: all 0.15s; 1986 white-space: nowrap; ··· 2001 .playlist-card { 2002 background: var(--bg-tertiary); 2003 border: 1px solid var(--border-subtle); 2004 - border-radius: 8px; 2005 padding: 1rem; 2006 transition: all 0.2s; 2007 display: flex; ··· 2019 .playlist-cover { 2020 width: 100%; 2021 aspect-ratio: 1; 2022 - border-radius: 6px; 2023 object-fit: cover; 2024 } 2025 2026 .playlist-cover-placeholder { 2027 width: 100%; 2028 aspect-ratio: 1; 2029 - border-radius: 6px; 2030 background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05)); 2031 display: flex; 2032 align-items: center; ··· 2069 padding: 1rem 1.25rem; 2070 background: var(--bg-tertiary); 2071 border: 1px solid var(--border-subtle); 2072 - border-radius: 8px; 2073 display: flex; 2074 justify-content: space-between; 2075 align-items: center; ··· 2105 background: var(--accent); 2106 color: var(--text-primary); 2107 border: none; 2108 - border-radius: 6px; 2109 font-size: 0.9rem; 2110 font-weight: 600; 2111 cursor: pointer; ··· 2150 background: transparent; 2151 color: var(--error); 2152 border: 1px solid var(--error); 2153 - border-radius: 6px; 2154 font-family: inherit; 2155 font-size: 0.9rem; 2156 font-weight: 600; ··· 2168 padding: 1rem; 2169 background: var(--bg-primary); 2170 border: 1px solid var(--border-default); 2171 - border-radius: 8px; 2172 } 2173 2174 .delete-warning { ··· 2182 margin-bottom: 1rem; 2183 padding: 0.75rem; 2184 background: var(--bg-tertiary); 2185 - border-radius: 6px; 2186 } 2187 2188 .atproto-option { ··· 2219 margin: 0.5rem 0 0; 2220 padding: 0.5rem; 2221 background: color-mix(in srgb, var(--warning) 10%, transparent); 2222 - border-radius: 4px; 2223 font-size: 0.8rem; 2224 color: var(--warning); 2225 } ··· 2235 padding: 0.6rem 0.75rem; 2236 background: var(--bg-tertiary); 2237 border: 1px solid var(--border-default); 2238 - border-radius: 6px; 2239 color: var(--text-primary); 2240 font-size: 0.9rem; 2241 font-family: inherit; ··· 2257 padding: 0.6rem; 2258 background: transparent; 2259 border: 1px solid var(--border-default); 2260 - border-radius: 6px; 2261 color: var(--text-secondary); 2262 font-family: inherit; 2263 font-size: 0.9rem; ··· 2279 padding: 0.6rem; 2280 background: var(--error); 2281 border: none; 2282 - border-radius: 6px; 2283 color: white; 2284 font-family: inherit; 2285 font-size: 0.9rem;

··· 1145 font-size: 0.8rem; 1146 padding: 0.35rem 0.6rem; 1147 background: var(--bg-tertiary); 1148 + border-radius: var(--radius-sm); 1149 border: 1px solid var(--border-default); 1150 transition: all 0.15s; 1151 white-space: nowrap; ··· 1163 font-size: 0.8rem; 1164 padding: 0.35rem 0.6rem; 1165 background: var(--bg-tertiary); 1166 + border-radius: var(--radius-sm); 1167 border: 1px solid var(--border-default); 1168 transition: all 0.15s; 1169 white-space: nowrap; ··· 1183 padding: 1rem 1.25rem; 1184 background: var(--bg-tertiary); 1185 border: 1px solid var(--border-default); 1186 + border-radius: var(--radius-md); 1187 text-decoration: none; 1188 color: var(--text-primary); 1189 transition: all 0.15s; ··· 1206 width: 44px; 1207 height: 44px; 1208 background: color-mix(in srgb, var(--accent) 15%, transparent); 1209 + border-radius: var(--radius-md); 1210 color: var(--accent); 1211 flex-shrink: 0; 1212 } ··· 1243 form { 1244 background: var(--bg-tertiary); 1245 padding: 1.25rem; 1246 + border-radius: var(--radius-md); 1247 border: 1px solid var(--border-subtle); 1248 } 1249 ··· 1267 padding: 0.6rem 0.75rem; 1268 background: var(--bg-primary); 1269 border: 1px solid var(--border-default); 1270 + border-radius: var(--radius-sm); 1271 color: var(--text-primary); 1272 font-size: 0.95rem; 1273 font-family: inherit; ··· 1289 padding: 0.6rem 0.75rem; 1290 background: var(--bg-primary); 1291 border: 1px solid var(--border-default); 1292 + border-radius: var(--radius-sm); 1293 color: var(--text-primary); 1294 font-size: 0.95rem; 1295 font-family: inherit; ··· 1345 padding: 0.6rem 0.75rem; 1346 background: var(--bg-primary); 1347 border: 1px solid var(--border-default); 1348 + border-radius: var(--radius-base); 1349 cursor: pointer; 1350 transition: all 0.15s; 1351 margin-bottom: 0; ··· 1412 padding: 0.6rem 0.75rem; 1413 background: var(--bg-primary); 1414 border: 1px solid var(--border-default); 1415 + border-radius: var(--radius-sm); 1416 color: var(--text-primary); 1417 font-size: 0.95rem; 1418 font-family: inherit; ··· 1440 .avatar-preview img { 1441 width: 64px; 1442 height: 64px; 1443 + border-radius: var(--radius-full); 1444 object-fit: cover; 1445 border: 2px solid var(--border-default); 1446 } ··· 1450 padding: 0.75rem; 1451 background: var(--bg-primary); 1452 border: 1px solid var(--border-default); 1453 + border-radius: var(--radius-sm); 1454 color: var(--text-primary); 1455 font-size: 0.9rem; 1456 font-family: inherit; ··· 1474 background: var(--accent); 1475 color: var(--text-primary); 1476 border: none; 1477 + border-radius: var(--radius-sm); 1478 font-size: 1rem; 1479 font-weight: 600; 1480 font-family: inherit; ··· 1512 padding: 2rem; 1513 text-align: center; 1514 background: var(--bg-tertiary); 1515 + border-radius: var(--radius-md); 1516 border: 1px solid var(--border-subtle); 1517 } 1518 ··· 1529 gap: 1rem; 1530 background: var(--bg-tertiary); 1531 border: 1px solid var(--border-subtle); 1532 + border-radius: var(--radius-base); 1533 padding: 1rem; 1534 transition: all 0.2s; 1535 } ··· 1564 .track-artwork { 1565 width: 48px; 1566 height: 48px; 1567 + border-radius: var(--radius-sm); 1568 overflow: hidden; 1569 background: var(--bg-primary); 1570 border: 1px solid var(--border-subtle); ··· 1773 padding: 0.1rem 0.4rem; 1774 background: color-mix(in srgb, var(--accent) 15%, transparent); 1775 color: var(--accent-hover); 1776 + border-radius: var(--radius-sm); 1777 font-size: 0.8rem; 1778 font-weight: 500; 1779 text-decoration: none; ··· 1807 padding: 0; 1808 background: transparent; 1809 border: 1px solid var(--border-default); 1810 + border-radius: var(--radius-base); 1811 color: var(--text-tertiary); 1812 cursor: pointer; 1813 transition: all 0.15s; ··· 1852 padding: 0.5rem; 1853 background: var(--bg-primary); 1854 border: 1px solid var(--border-default); 1855 + border-radius: var(--radius-sm); 1856 color: var(--text-primary); 1857 font-size: 0.9rem; 1858 font-family: inherit; ··· 1865 padding: 0.5rem; 1866 background: var(--bg-primary); 1867 border: 1px solid var(--border-default); 1868 + border-radius: var(--radius-sm); 1869 margin-bottom: 0.5rem; 1870 } 1871 1872 .current-image-preview img { 1873 width: 48px; 1874 height: 48px; 1875 + border-radius: var(--radius-sm); 1876 object-fit: cover; 1877 } 1878 ··· 1910 .album-card { 1911 background: var(--bg-tertiary); 1912 border: 1px solid var(--border-subtle); 1913 + border-radius: var(--radius-md); 1914 padding: 1rem; 1915 transition: all 0.2s; 1916 display: flex; ··· 1928 .album-cover { 1929 width: 100%; 1930 aspect-ratio: 1; 1931 + border-radius: var(--radius-base); 1932 object-fit: cover; 1933 } 1934 1935 .album-cover-placeholder { 1936 width: 100%; 1937 aspect-ratio: 1; 1938 + border-radius: var(--radius-base); 1939 background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05)); 1940 display: flex; 1941 align-items: center; ··· 1980 font-size: 0.8rem; 1981 padding: 0.35rem 0.6rem; 1982 background: var(--bg-tertiary); 1983 + border-radius: var(--radius-sm); 1984 border: 1px solid var(--border-default); 1985 transition: all 0.15s; 1986 white-space: nowrap; ··· 2001 .playlist-card { 2002 background: var(--bg-tertiary); 2003 border: 1px solid var(--border-subtle); 2004 + border-radius: var(--radius-md); 2005 padding: 1rem; 2006 transition: all 0.2s; 2007 display: flex; ··· 2019 .playlist-cover { 2020 width: 100%; 2021 aspect-ratio: 1; 2022 + border-radius: var(--radius-base); 2023 object-fit: cover; 2024 } 2025 2026 .playlist-cover-placeholder { 2027 width: 100%; 2028 aspect-ratio: 1; 2029 + border-radius: var(--radius-base); 2030 background: linear-gradient(135deg, rgba(var(--accent-rgb, 139, 92, 246), 0.15), rgba(var(--accent-rgb, 139, 92, 246), 0.05)); 2031 display: flex; 2032 align-items: center; ··· 2069 padding: 1rem 1.25rem; 2070 background: var(--bg-tertiary); 2071 border: 1px solid var(--border-subtle); 2072 + border-radius: var(--radius-md); 2073 display: flex; 2074 justify-content: space-between; 2075 align-items: center; ··· 2105 background: var(--accent); 2106 color: var(--text-primary); 2107 border: none; 2108 + border-radius: var(--radius-base); 2109 font-size: 0.9rem; 2110 font-weight: 600; 2111 cursor: pointer; ··· 2150 background: transparent; 2151 color: var(--error); 2152 border: 1px solid var(--error); 2153 + border-radius: var(--radius-base); 2154 font-family: inherit; 2155 font-size: 0.9rem; 2156 font-weight: 600; ··· 2168 padding: 1rem; 2169 background: var(--bg-primary); 2170 border: 1px solid var(--border-default); 2171 + border-radius: var(--radius-md); 2172 } 2173 2174 .delete-warning { ··· 2182 margin-bottom: 1rem; 2183 padding: 0.75rem; 2184 background: var(--bg-tertiary); 2185 + border-radius: var(--radius-base); 2186 } 2187 2188 .atproto-option { ··· 2219 margin: 0.5rem 0 0; 2220 padding: 0.5rem; 2221 background: color-mix(in srgb, var(--warning) 10%, transparent); 2222 + border-radius: var(--radius-sm); 2223 font-size: 0.8rem; 2224 color: var(--warning); 2225 } ··· 2235 padding: 0.6rem 0.75rem; 2236 background: var(--bg-tertiary); 2237 border: 1px solid var(--border-default); 2238 + border-radius: var(--radius-base); 2239 color: var(--text-primary); 2240 font-size: 0.9rem; 2241 font-family: inherit; ··· 2257 padding: 0.6rem; 2258 background: transparent; 2259 border: 1px solid var(--border-default); 2260 + border-radius: var(--radius-base); 2261 color: var(--text-secondary); 2262 font-family: inherit; 2263 font-size: 0.9rem; ··· 2279 padding: 0.6rem; 2280 background: var(--error); 2281 border: none; 2282 + border-radius: var(--radius-base); 2283 color: white; 2284 font-family: inherit; 2285 font-size: 0.9rem;

+4 -4

frontend/src/routes/profile/setup/+page.svelte

··· 222 223 .error { 224 padding: 1rem; 225 - border-radius: 4px; 226 margin-bottom: 1.5rem; 227 background: color-mix(in srgb, var(--error) 10%, transparent); 228 border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); ··· 232 form { 233 background: var(--bg-tertiary); 234 padding: 2rem; 235 - border-radius: 8px; 236 border: 1px solid var(--border-subtle); 237 } 238 ··· 259 padding: 0.75rem; 260 background: var(--bg-primary); 261 border: 1px solid var(--border-default); 262 - border-radius: 4px; 263 color: var(--text-primary); 264 font-size: 1rem; 265 font-family: inherit; ··· 297 background: var(--accent); 298 color: white; 299 border: none; 300 - border-radius: 4px; 301 font-size: 1rem; 302 font-weight: 600; 303 cursor: pointer;

··· 222 223 .error { 224 padding: 1rem; 225 + border-radius: var(--radius-sm); 226 margin-bottom: 1.5rem; 227 background: color-mix(in srgb, var(--error) 10%, transparent); 228 border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); ··· 232 form { 233 background: var(--bg-tertiary); 234 padding: 2rem; 235 + border-radius: var(--radius-md); 236 border: 1px solid var(--border-subtle); 237 } 238 ··· 259 padding: 0.75rem; 260 background: var(--bg-primary); 261 border: 1px solid var(--border-default); 262 + border-radius: var(--radius-sm); 263 color: var(--text-primary); 264 font-size: 1rem; 265 font-family: inherit; ··· 297 background: var(--accent); 298 color: white; 299 border: none; 300 + border-radius: var(--radius-sm); 301 font-size: 1rem; 302 font-weight: 600; 303 cursor: pointer;

+21 -21

frontend/src/routes/settings/+page.svelte

··· 774 .token-overlay-content { 775 background: var(--bg-secondary); 776 border: 1px solid var(--border-default); 777 - border-radius: 16px; 778 padding: 2rem; 779 max-width: 500px; 780 width: 100%; ··· 804 gap: 0.5rem; 805 background: var(--bg-primary); 806 border: 1px solid var(--border-default); 807 - border-radius: 8px; 808 padding: 1rem; 809 margin-bottom: 1rem; 810 } ··· 822 padding: 0.5rem 1rem; 823 background: var(--accent); 824 border: none; 825 - border-radius: 6px; 826 color: var(--text-primary); 827 font-family: inherit; 828 font-size: 0.85rem; ··· 855 padding: 0.75rem 2rem; 856 background: var(--bg-tertiary); 857 border: 1px solid var(--border-default); 858 - border-radius: 8px; 859 color: var(--text-secondary); 860 font-family: inherit; 861 font-size: 0.9rem; ··· 904 font-size: 0.85rem; 905 padding: 0.4rem 0.75rem; 906 background: var(--bg-tertiary); 907 - border-radius: 6px; 908 border: 1px solid var(--border-default); 909 transition: all 0.15s; 910 } ··· 930 .settings-card { 931 background: var(--bg-tertiary); 932 border: 1px solid var(--border-subtle); 933 - border-radius: 10px; 934 padding: 1rem 1.25rem; 935 } 936 ··· 993 padding: 0.6rem 0.75rem; 994 background: var(--bg-primary); 995 border: 1px solid var(--border-default); 996 - border-radius: 8px; 997 color: var(--text-secondary); 998 cursor: pointer; 999 transition: all 0.15s; ··· 1034 width: 40px; 1035 height: 40px; 1036 border: 1px solid var(--border-default); 1037 - border-radius: 8px; 1038 cursor: pointer; 1039 background: transparent; 1040 } ··· 1044 } 1045 1046 .color-input::-webkit-color-swatch { 1047 - border-radius: 4px; 1048 border: none; 1049 } 1050 ··· 1056 .preset-btn { 1057 width: 32px; 1058 height: 32px; 1059 - border-radius: 6px; 1060 border: 2px solid transparent; 1061 cursor: pointer; 1062 transition: all 0.15s; ··· 1085 padding: 0.5rem 0.75rem; 1086 background: var(--bg-primary); 1087 border: 1px solid var(--border-default); 1088 - border-radius: 6px; 1089 color: var(--text-primary); 1090 font-size: 0.85rem; 1091 font-family: inherit; ··· 1132 width: 48px; 1133 height: 28px; 1134 background: var(--border-default); 1135 - border-radius: 999px; 1136 position: relative; 1137 cursor: pointer; 1138 transition: background 0.2s; ··· 1145 left: 4px; 1146 width: 20px; 1147 height: 20px; 1148 - border-radius: 50%; 1149 background: var(--text-secondary); 1150 transition: transform 0.2s, background 0.2s; 1151 } ··· 1167 padding: 0.75rem; 1168 background: color-mix(in srgb, var(--warning) 10%, transparent); 1169 border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); 1170 - border-radius: 6px; 1171 margin-top: 0.75rem; 1172 font-size: 0.8rem; 1173 color: var(--warning); ··· 1220 padding: 0.75rem; 1221 background: var(--bg-primary); 1222 border: 1px solid var(--border-default); 1223 - border-radius: 6px; 1224 } 1225 1226 .token-info { ··· 1245 padding: 0.4rem 0.75rem; 1246 background: transparent; 1247 border: 1px solid var(--border-emphasis); 1248 - border-radius: 4px; 1249 color: var(--text-secondary); 1250 font-family: inherit; 1251 font-size: 0.8rem; ··· 1272 padding: 0.75rem; 1273 background: var(--bg-primary); 1274 border: 1px solid var(--border-default); 1275 - border-radius: 6px; 1276 } 1277 1278 .token-value { ··· 1287 padding: 0.4rem 0.6rem; 1288 background: var(--bg-tertiary); 1289 border: 1px solid var(--border-default); 1290 - border-radius: 4px; 1291 color: var(--text-secondary); 1292 font-family: inherit; 1293 font-size: 0.8rem; ··· 1320 padding: 0.6rem 0.75rem; 1321 background: var(--bg-primary); 1322 border: 1px solid var(--border-default); 1323 - border-radius: 6px; 1324 color: var(--text-primary); 1325 font-size: 0.9rem; 1326 font-family: inherit; ··· 1343 padding: 0.5rem 0.75rem; 1344 background: var(--bg-primary); 1345 border: 1px solid var(--border-default); 1346 - border-radius: 6px; 1347 color: var(--text-primary); 1348 font-size: 0.85rem; 1349 font-family: inherit; ··· 1359 padding: 0.6rem 1rem; 1360 background: var(--accent); 1361 border: none; 1362 - border-radius: 6px; 1363 color: var(--text-primary); 1364 font-family: inherit; 1365 font-size: 0.9rem;

··· 774 .token-overlay-content { 775 background: var(--bg-secondary); 776 border: 1px solid var(--border-default); 777 + border-radius: var(--radius-xl); 778 padding: 2rem; 779 max-width: 500px; 780 width: 100%; ··· 804 gap: 0.5rem; 805 background: var(--bg-primary); 806 border: 1px solid var(--border-default); 807 + border-radius: var(--radius-md); 808 padding: 1rem; 809 margin-bottom: 1rem; 810 } ··· 822 padding: 0.5rem 1rem; 823 background: var(--accent); 824 border: none; 825 + border-radius: var(--radius-base); 826 color: var(--text-primary); 827 font-family: inherit; 828 font-size: 0.85rem; ··· 855 padding: 0.75rem 2rem; 856 background: var(--bg-tertiary); 857 border: 1px solid var(--border-default); 858 + border-radius: var(--radius-md); 859 color: var(--text-secondary); 860 font-family: inherit; 861 font-size: 0.9rem; ··· 904 font-size: 0.85rem; 905 padding: 0.4rem 0.75rem; 906 background: var(--bg-tertiary); 907 + border-radius: var(--radius-base); 908 border: 1px solid var(--border-default); 909 transition: all 0.15s; 910 } ··· 930 .settings-card { 931 background: var(--bg-tertiary); 932 border: 1px solid var(--border-subtle); 933 + border-radius: var(--radius-md); 934 padding: 1rem 1.25rem; 935 } 936 ··· 993 padding: 0.6rem 0.75rem; 994 background: var(--bg-primary); 995 border: 1px solid var(--border-default); 996 + border-radius: var(--radius-md); 997 color: var(--text-secondary); 998 cursor: pointer; 999 transition: all 0.15s; ··· 1034 width: 40px; 1035 height: 40px; 1036 border: 1px solid var(--border-default); 1037 + border-radius: var(--radius-md); 1038 cursor: pointer; 1039 background: transparent; 1040 } ··· 1044 } 1045 1046 .color-input::-webkit-color-swatch { 1047 + border-radius: var(--radius-sm); 1048 border: none; 1049 } 1050 ··· 1056 .preset-btn { 1057 width: 32px; 1058 height: 32px; 1059 + border-radius: var(--radius-base); 1060 border: 2px solid transparent; 1061 cursor: pointer; 1062 transition: all 0.15s; ··· 1085 padding: 0.5rem 0.75rem; 1086 background: var(--bg-primary); 1087 border: 1px solid var(--border-default); 1088 + border-radius: var(--radius-base); 1089 color: var(--text-primary); 1090 font-size: 0.85rem; 1091 font-family: inherit; ··· 1132 width: 48px; 1133 height: 28px; 1134 background: var(--border-default); 1135 + border-radius: var(--radius-full); 1136 position: relative; 1137 cursor: pointer; 1138 transition: background 0.2s; ··· 1145 left: 4px; 1146 width: 20px; 1147 height: 20px; 1148 + border-radius: var(--radius-full); 1149 background: var(--text-secondary); 1150 transition: transform 0.2s, background 0.2s; 1151 } ··· 1167 padding: 0.75rem; 1168 background: color-mix(in srgb, var(--warning) 10%, transparent); 1169 border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); 1170 + border-radius: var(--radius-base); 1171 margin-top: 0.75rem; 1172 font-size: 0.8rem; 1173 color: var(--warning); ··· 1220 padding: 0.75rem; 1221 background: var(--bg-primary); 1222 border: 1px solid var(--border-default); 1223 + border-radius: var(--radius-base); 1224 } 1225 1226 .token-info { ··· 1245 padding: 0.4rem 0.75rem; 1246 background: transparent; 1247 border: 1px solid var(--border-emphasis); 1248 + border-radius: var(--radius-sm); 1249 color: var(--text-secondary); 1250 font-family: inherit; 1251 font-size: 0.8rem; ··· 1272 padding: 0.75rem; 1273 background: var(--bg-primary); 1274 border: 1px solid var(--border-default); 1275 + border-radius: var(--radius-base); 1276 } 1277 1278 .token-value { ··· 1287 padding: 0.4rem 0.6rem; 1288 background: var(--bg-tertiary); 1289 border: 1px solid var(--border-default); 1290 + border-radius: var(--radius-sm); 1291 color: var(--text-secondary); 1292 font-family: inherit; 1293 font-size: 0.8rem; ··· 1320 padding: 0.6rem 0.75rem; 1321 background: var(--bg-primary); 1322 border: 1px solid var(--border-default); 1323 + border-radius: var(--radius-base); 1324 color: var(--text-primary); 1325 font-size: 0.9rem; 1326 font-family: inherit; ··· 1343 padding: 0.5rem 0.75rem; 1344 background: var(--bg-primary); 1345 border: 1px solid var(--border-default); 1346 + border-radius: var(--radius-base); 1347 color: var(--text-primary); 1348 font-size: 0.85rem; 1349 font-family: inherit; ··· 1359 padding: 0.6rem 1rem; 1360 background: var(--accent); 1361 border: none; 1362 + border-radius: var(--radius-base); 1363 color: var(--text-primary); 1364 font-family: inherit; 1365 font-size: 0.9rem;

+1 -1

frontend/src/routes/tag/[name]/+page.svelte

··· 211 background: var(--glass-btn-bg, transparent); 212 border: 1px solid var(--glass-btn-border, var(--accent)); 213 color: var(--accent); 214 - border-radius: 6px; 215 font-size: 0.9rem; 216 font-family: inherit; 217 cursor: pointer;

··· 211 background: var(--glass-btn-bg, transparent); 212 border: 1px solid var(--glass-btn-border, var(--accent)); 213 color: var(--accent); 214 + border-radius: var(--radius-base); 215 font-size: 0.9rem; 216 font-family: inherit; 217 cursor: pointer;

+16 -16

frontend/src/routes/track/[id]/+page.svelte

··· 697 width: 100%; 698 max-width: 300px; 699 aspect-ratio: 1; 700 - border-radius: 8px; 701 overflow: hidden; 702 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 703 } ··· 878 padding: 0.25rem 0.6rem; 879 background: color-mix(in srgb, var(--accent) 15%, transparent); 880 color: var(--accent-hover); 881 - border-radius: 4px; 882 font-size: 0.85rem; 883 font-weight: 500; 884 text-decoration: none; ··· 914 background: var(--accent); 915 color: var(--bg-primary); 916 border: none; 917 - border-radius: 24px; 918 font-size: 0.95rem; 919 font-weight: 600; 920 font-family: inherit; ··· 939 background: transparent; 940 color: var(--text-primary); 941 border: 1px solid var(--border-emphasis); 942 - border-radius: 24px; 943 font-size: 0.95rem; 944 font-weight: 500; 945 font-family: inherit; ··· 1067 padding: 0.6rem 0.8rem; 1068 background: var(--bg-tertiary); 1069 border: 1px solid var(--border-default); 1070 - border-radius: 6px; 1071 color: var(--text-primary); 1072 font-size: 0.9rem; 1073 font-family: inherit; ··· 1087 background: var(--accent); 1088 color: var(--bg-primary); 1089 border: none; 1090 - border-radius: 6px; 1091 font-size: 0.9rem; 1092 font-weight: 600; 1093 font-family: inherit; ··· 1142 1143 .comments-list::-webkit-scrollbar-track { 1144 background: var(--bg-primary); 1145 - border-radius: 4px; 1146 } 1147 1148 .comments-list::-webkit-scrollbar-thumb { 1149 background: var(--border-default); 1150 - border-radius: 4px; 1151 } 1152 1153 .comments-list::-webkit-scrollbar-thumb:hover { ··· 1160 gap: 0.6rem; 1161 padding: 0.5rem 0.6rem; 1162 background: var(--bg-tertiary); 1163 - border-radius: 6px; 1164 transition: background 0.15s; 1165 } 1166 ··· 1174 color: var(--accent); 1175 background: color-mix(in srgb, var(--accent) 10%, transparent); 1176 padding: 0.2rem 0.5rem; 1177 - border-radius: 4px; 1178 white-space: nowrap; 1179 height: fit-content; 1180 border: none; ··· 1214 .comment-avatar { 1215 width: 20px; 1216 height: 20px; 1217 - border-radius: 50%; 1218 object-fit: cover; 1219 } 1220 1221 .comment-avatar-placeholder { 1222 width: 20px; 1223 height: 20px; 1224 - border-radius: 50%; 1225 background: var(--border-default); 1226 } 1227 ··· 1310 padding: 0.5rem; 1311 background: var(--bg-primary); 1312 border: 1px solid var(--border-default); 1313 - border-radius: 4px; 1314 color: var(--text-primary); 1315 font-size: 0.9rem; 1316 font-family: inherit; ··· 1331 padding: 0.25rem 0.6rem; 1332 font-size: 0.8rem; 1333 font-family: inherit; 1334 - border-radius: 4px; 1335 cursor: pointer; 1336 transition: all 0.15s; 1337 } ··· 1381 ); 1382 background-size: 200% 100%; 1383 animation: shimmer 1.5s ease-in-out infinite; 1384 - border-radius: 4px; 1385 } 1386 1387 .comment-timestamp-skeleton { ··· 1393 .comment-avatar-skeleton { 1394 width: 20px; 1395 height: 20px; 1396 - border-radius: 50%; 1397 } 1398 1399 .comment-author-skeleton {

··· 697 width: 100%; 698 max-width: 300px; 699 aspect-ratio: 1; 700 + border-radius: var(--radius-md); 701 overflow: hidden; 702 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 703 } ··· 878 padding: 0.25rem 0.6rem; 879 background: color-mix(in srgb, var(--accent) 15%, transparent); 880 color: var(--accent-hover); 881 + border-radius: var(--radius-sm); 882 font-size: 0.85rem; 883 font-weight: 500; 884 text-decoration: none; ··· 914 background: var(--accent); 915 color: var(--bg-primary); 916 border: none; 917 + border-radius: var(--radius-2xl); 918 font-size: 0.95rem; 919 font-weight: 600; 920 font-family: inherit; ··· 939 background: transparent; 940 color: var(--text-primary); 941 border: 1px solid var(--border-emphasis); 942 + border-radius: var(--radius-2xl); 943 font-size: 0.95rem; 944 font-weight: 500; 945 font-family: inherit; ··· 1067 padding: 0.6rem 0.8rem; 1068 background: var(--bg-tertiary); 1069 border: 1px solid var(--border-default); 1070 + border-radius: var(--radius-base); 1071 color: var(--text-primary); 1072 font-size: 0.9rem; 1073 font-family: inherit; ··· 1087 background: var(--accent); 1088 color: var(--bg-primary); 1089 border: none; 1090 + border-radius: var(--radius-base); 1091 font-size: 0.9rem; 1092 font-weight: 600; 1093 font-family: inherit; ··· 1142 1143 .comments-list::-webkit-scrollbar-track { 1144 background: var(--bg-primary); 1145 + border-radius: var(--radius-sm); 1146 } 1147 1148 .comments-list::-webkit-scrollbar-thumb { 1149 background: var(--border-default); 1150 + border-radius: var(--radius-sm); 1151 } 1152 1153 .comments-list::-webkit-scrollbar-thumb:hover { ··· 1160 gap: 0.6rem; 1161 padding: 0.5rem 0.6rem; 1162 background: var(--bg-tertiary); 1163 + border-radius: var(--radius-base); 1164 transition: background 0.15s; 1165 } 1166 ··· 1174 color: var(--accent); 1175 background: color-mix(in srgb, var(--accent) 10%, transparent); 1176 padding: 0.2rem 0.5rem; 1177 + border-radius: var(--radius-sm); 1178 white-space: nowrap; 1179 height: fit-content; 1180 border: none; ··· 1214 .comment-avatar { 1215 width: 20px; 1216 height: 20px; 1217 + border-radius: var(--radius-full); 1218 object-fit: cover; 1219 } 1220 1221 .comment-avatar-placeholder { 1222 width: 20px; 1223 height: 20px; 1224 + border-radius: var(--radius-full); 1225 background: var(--border-default); 1226 } 1227 ··· 1310 padding: 0.5rem; 1311 background: var(--bg-primary); 1312 border: 1px solid var(--border-default); 1313 + border-radius: var(--radius-sm); 1314 color: var(--text-primary); 1315 font-size: 0.9rem; 1316 font-family: inherit; ··· 1331 padding: 0.25rem 0.6rem; 1332 font-size: 0.8rem; 1333 font-family: inherit; 1334 + border-radius: var(--radius-sm); 1335 cursor: pointer; 1336 transition: all 0.15s; 1337 } ··· 1381 ); 1382 background-size: 200% 100%; 1383 animation: shimmer 1.5s ease-in-out infinite; 1384 + border-radius: var(--radius-sm); 1385 } 1386 1387 .comment-timestamp-skeleton { ··· 1393 .comment-avatar-skeleton { 1394 width: 20px; 1395 height: 20px; 1396 + border-radius: var(--radius-full); 1397 } 1398 1399 .comment-author-skeleton {

+1 -1

frontend/src/routes/u/[handle]/+error.svelte

··· 121 font-size: 1.1rem; 122 padding: 0.75rem 1.5rem; 123 border: 1px solid var(--accent); 124 - border-radius: 6px; 125 transition: all 0.2s; 126 display: inline-block; 127 }

··· 121 font-size: 1.1rem; 122 padding: 0.75rem 1.5rem; 123 border: 1px solid var(--accent); 124 + border-radius: var(--radius-base); 125 transition: all 0.2s; 126 display: inline-block; 127 }

+13 -13

frontend/src/routes/u/[handle]/+page.svelte

··· 613 padding: 2rem; 614 background: var(--bg-secondary); 615 border: 1px solid var(--border-subtle); 616 - border-radius: 8px; 617 } 618 619 .artist-details { ··· 651 padding: 0 0.75rem; 652 background: color-mix(in srgb, var(--accent) 15%, transparent); 653 border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); 654 - border-radius: 4px; 655 color: var(--accent); 656 font-size: 0.85rem; 657 text-decoration: none; ··· 671 .artist-avatar { 672 width: 120px; 673 height: 120px; 674 - border-radius: 50%; 675 object-fit: cover; 676 border: 3px solid var(--border-default); 677 } ··· 756 padding: 1rem; 757 background: var(--bg-secondary); 758 border: 1px solid var(--border-subtle); 759 - border-radius: 10px; 760 color: inherit; 761 text-decoration: none; 762 transition: transform 0.15s ease, border-color 0.15s ease; ··· 772 .album-cover-wrapper { 773 width: 72px; 774 height: 72px; 775 - border-radius: 6px; 776 overflow: hidden; 777 flex-shrink: 0; 778 background: var(--bg-tertiary); ··· 834 .stat-card { 835 background: var(--bg-secondary); 836 border: 1px solid var(--border-subtle); 837 - border-radius: 8px; 838 padding: 1.5rem; 839 transition: border-color 0.2s; 840 } ··· 908 ); 909 background-size: 200% 100%; 910 animation: shimmer 1.5s ease-in-out infinite; 911 - border-radius: 4px; 912 } 913 914 /* match .stat-value dimensions: 2.5rem font + 0.5rem margin-bottom */ ··· 960 padding: 0.75rem 1.5rem; 961 background: var(--bg-secondary); 962 border: 1px solid var(--border-subtle); 963 - border-radius: 8px; 964 color: var(--text-secondary); 965 font-family: inherit; 966 font-size: 0.95rem; ··· 998 padding: 3rem; 999 background: var(--bg-secondary); 1000 border: 1px solid var(--border-subtle); 1001 - border-radius: 8px; 1002 } 1003 1004 .empty-message { ··· 1018 font-size: 1rem; 1019 padding: 0.75rem 1.5rem; 1020 border: 1px solid var(--accent); 1021 - border-radius: 6px; 1022 transition: all 0.2s; 1023 display: inline-block; 1024 } ··· 1112 .album-cover-wrapper { 1113 width: 56px; 1114 height: 56px; 1115 - border-radius: 4px; 1116 } 1117 1118 .album-card-meta h3 { ··· 1148 padding: 1.25rem 1.5rem; 1149 background: var(--bg-secondary); 1150 border: 1px solid var(--border-subtle); 1151 - border-radius: 10px; 1152 color: inherit; 1153 text-decoration: none; 1154 transition: transform 0.15s ease, border-color 0.15s ease; ··· 1162 .collection-icon { 1163 width: 48px; 1164 height: 48px; 1165 - border-radius: 8px; 1166 display: flex; 1167 align-items: center; 1168 justify-content: center;

··· 613 padding: 2rem; 614 background: var(--bg-secondary); 615 border: 1px solid var(--border-subtle); 616 + border-radius: var(--radius-md); 617 } 618 619 .artist-details { ··· 651 padding: 0 0.75rem; 652 background: color-mix(in srgb, var(--accent) 15%, transparent); 653 border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); 654 + border-radius: var(--radius-sm); 655 color: var(--accent); 656 font-size: 0.85rem; 657 text-decoration: none; ··· 671 .artist-avatar { 672 width: 120px; 673 height: 120px; 674 + border-radius: var(--radius-full); 675 object-fit: cover; 676 border: 3px solid var(--border-default); 677 } ··· 756 padding: 1rem; 757 background: var(--bg-secondary); 758 border: 1px solid var(--border-subtle); 759 + border-radius: var(--radius-md); 760 color: inherit; 761 text-decoration: none; 762 transition: transform 0.15s ease, border-color 0.15s ease; ··· 772 .album-cover-wrapper { 773 width: 72px; 774 height: 72px; 775 + border-radius: var(--radius-base); 776 overflow: hidden; 777 flex-shrink: 0; 778 background: var(--bg-tertiary); ··· 834 .stat-card { 835 background: var(--bg-secondary); 836 border: 1px solid var(--border-subtle); 837 + border-radius: var(--radius-md); 838 padding: 1.5rem; 839 transition: border-color 0.2s; 840 } ··· 908 ); 909 background-size: 200% 100%; 910 animation: shimmer 1.5s ease-in-out infinite; 911 + border-radius: var(--radius-sm); 912 } 913 914 /* match .stat-value dimensions: 2.5rem font + 0.5rem margin-bottom */ ··· 960 padding: 0.75rem 1.5rem; 961 background: var(--bg-secondary); 962 border: 1px solid var(--border-subtle); 963 + border-radius: var(--radius-md); 964 color: var(--text-secondary); 965 font-family: inherit; 966 font-size: 0.95rem; ··· 998 padding: 3rem; 999 background: var(--bg-secondary); 1000 border: 1px solid var(--border-subtle); 1001 + border-radius: var(--radius-md); 1002 } 1003 1004 .empty-message { ··· 1018 font-size: 1rem; 1019 padding: 0.75rem 1.5rem; 1020 border: 1px solid var(--accent); 1021 + border-radius: var(--radius-base); 1022 transition: all 0.2s; 1023 display: inline-block; 1024 } ··· 1112 .album-cover-wrapper { 1113 width: 56px; 1114 height: 56px; 1115 + border-radius: var(--radius-sm); 1116 } 1117 1118 .album-card-meta h3 { ··· 1148 padding: 1.25rem 1.5rem; 1149 background: var(--bg-secondary); 1150 border: 1px solid var(--border-subtle); 1151 + border-radius: var(--radius-md); 1152 color: inherit; 1153 text-decoration: none; 1154 transition: transform 0.15s ease, border-color 0.15s ease; ··· 1162 .collection-icon { 1163 width: 48px; 1164 height: 48px; 1165 + border-radius: var(--radius-md); 1166 display: flex; 1167 align-items: center; 1168 justify-content: center;

+10 -10

frontend/src/routes/u/[handle]/album/[slug]/+page.svelte

··· 766 .album-art { 767 width: 200px; 768 height: 200px; 769 - border-radius: 8px; 770 object-fit: cover; 771 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 772 } ··· 774 .album-art-placeholder { 775 width: 200px; 776 height: 200px; 777 - border-radius: 8px; 778 background: var(--bg-tertiary); 779 border: 1px solid var(--border-subtle); 780 display: flex; ··· 817 height: 32px; 818 background: transparent; 819 border: 1px solid var(--border-default); 820 - border-radius: 4px; 821 color: var(--text-tertiary); 822 cursor: pointer; 823 transition: all 0.15s; ··· 858 position: absolute; 859 inset: 0; 860 background: rgba(0, 0, 0, 0.6); 861 - border-radius: 8px; 862 display: flex; 863 flex-direction: column; 864 align-items: center; ··· 948 .play-button, 949 .queue-button { 950 padding: 0.75rem 1.5rem; 951 - border-radius: 24px; 952 font-weight: 600; 953 font-size: 0.95rem; 954 font-family: inherit; ··· 1018 display: flex; 1019 align-items: center; 1020 gap: 0.5rem; 1021 - border-radius: 8px; 1022 transition: all 0.2s; 1023 position: relative; 1024 } ··· 1050 color: var(--text-muted); 1051 cursor: grab; 1052 touch-action: none; 1053 - border-radius: 4px; 1054 transition: all 0.2s; 1055 flex-shrink: 0; 1056 } ··· 1155 justify-content: center; 1156 width: 32px; 1157 height: 32px; 1158 - border-radius: 50%; 1159 background: transparent; 1160 border: none; 1161 color: var(--text-muted); ··· 1188 1189 .modal { 1190 background: var(--bg-secondary); 1191 - border-radius: 12px; 1192 padding: 1.5rem; 1193 max-width: 400px; 1194 width: calc(100% - 2rem); ··· 1226 .cancel-btn, 1227 .confirm-btn { 1228 padding: 0.625rem 1.25rem; 1229 - border-radius: 8px; 1230 font-weight: 500; 1231 font-size: 0.9rem; 1232 font-family: inherit;

··· 766 .album-art { 767 width: 200px; 768 height: 200px; 769 + border-radius: var(--radius-md); 770 object-fit: cover; 771 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 772 } ··· 774 .album-art-placeholder { 775 width: 200px; 776 height: 200px; 777 + border-radius: var(--radius-md); 778 background: var(--bg-tertiary); 779 border: 1px solid var(--border-subtle); 780 display: flex; ··· 817 height: 32px; 818 background: transparent; 819 border: 1px solid var(--border-default); 820 + border-radius: var(--radius-sm); 821 color: var(--text-tertiary); 822 cursor: pointer; 823 transition: all 0.15s; ··· 858 position: absolute; 859 inset: 0; 860 background: rgba(0, 0, 0, 0.6); 861 + border-radius: var(--radius-md); 862 display: flex; 863 flex-direction: column; 864 align-items: center; ··· 948 .play-button, 949 .queue-button { 950 padding: 0.75rem 1.5rem; 951 + border-radius: var(--radius-2xl); 952 font-weight: 600; 953 font-size: 0.95rem; 954 font-family: inherit; ··· 1018 display: flex; 1019 align-items: center; 1020 gap: 0.5rem; 1021 + border-radius: var(--radius-md); 1022 transition: all 0.2s; 1023 position: relative; 1024 } ··· 1050 color: var(--text-muted); 1051 cursor: grab; 1052 touch-action: none; 1053 + border-radius: var(--radius-sm); 1054 transition: all 0.2s; 1055 flex-shrink: 0; 1056 } ··· 1155 justify-content: center; 1156 width: 32px; 1157 height: 32px; 1158 + border-radius: var(--radius-full); 1159 background: transparent; 1160 border: none; 1161 color: var(--text-muted); ··· 1188 1189 .modal { 1190 background: var(--bg-secondary); 1191 + border-radius: var(--radius-lg); 1192 padding: 1.5rem; 1193 max-width: 400px; 1194 width: calc(100% - 2rem); ··· 1226 .cancel-btn, 1227 .confirm-btn { 1228 padding: 0.625rem 1.25rem; 1229 + border-radius: var(--radius-md); 1230 font-weight: 500; 1231 font-size: 0.9rem; 1232 font-family: inherit;

+6 -6

frontend/src/routes/upload/+page.svelte

··· 423 form { 424 background: var(--bg-tertiary); 425 padding: 2rem; 426 - border-radius: 8px; 427 border: 1px solid var(--border-subtle); 428 } 429 ··· 443 padding: 0.75rem; 444 background: var(--bg-primary); 445 border: 1px solid var(--border-default); 446 - border-radius: 4px; 447 color: var(--text-primary); 448 font-size: 1rem; 449 font-family: inherit; ··· 460 padding: 0.75rem; 461 background: var(--bg-primary); 462 border: 1px solid var(--border-default); 463 - border-radius: 4px; 464 color: var(--text-primary); 465 font-size: 0.9rem; 466 font-family: inherit; ··· 485 background: var(--accent); 486 color: var(--text-primary); 487 border: none; 488 - border-radius: 4px; 489 font-size: 1rem; 490 font-weight: 600; 491 font-family: inherit; ··· 520 .attestation { 521 background: var(--bg-primary); 522 padding: 1rem; 523 - border-radius: 4px; 524 border: 1px solid var(--border-default); 525 } 526 ··· 567 .supporter-gating { 568 background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary)); 569 padding: 1rem; 570 - border-radius: 4px; 571 border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-default)); 572 } 573

··· 423 form { 424 background: var(--bg-tertiary); 425 padding: 2rem; 426 + border-radius: var(--radius-md); 427 border: 1px solid var(--border-subtle); 428 } 429 ··· 443 padding: 0.75rem; 444 background: var(--bg-primary); 445 border: 1px solid var(--border-default); 446 + border-radius: var(--radius-sm); 447 color: var(--text-primary); 448 font-size: 1rem; 449 font-family: inherit; ··· 460 padding: 0.75rem; 461 background: var(--bg-primary); 462 border: 1px solid var(--border-default); 463 + border-radius: var(--radius-sm); 464 color: var(--text-primary); 465 font-size: 0.9rem; 466 font-family: inherit; ··· 485 background: var(--accent); 486 color: var(--text-primary); 487 border: none; 488 + border-radius: var(--radius-sm); 489 font-size: 1rem; 490 font-weight: 600; 491 font-family: inherit; ··· 520 .attestation { 521 background: var(--bg-primary); 522 padding: 1rem; 523 + border-radius: var(--radius-sm); 524 border: 1px solid var(--border-default); 525 } 526 ··· 567 .supporter-gating { 568 background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary)); 569 padding: 1rem; 570 + border-radius: var(--radius-sm); 571 border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-default)); 572 } 573