itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/waveform-loudness-cache

Browse Source
This commit is contained in:
Psychotoxical
2026-04-26 02:05:10 +02:00
parent ea93f7fc4d f95391318f
commit 185cb8f7cd
9 changed files with 305 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+29 -43
View File
@@ -7144,55 +7144,41 @@ html.no-compositing .fs-seekbar-played {
justify-content: flex-end;
}
/* ─ Genre Cards ─ */
.genre-card {
aspect-ratio: 1;
border-radius: 12px;
padding: 0.9rem;
cursor: pointer;
position: relative;
overflow: hidden;
/* ─ Genre Tag Cloud ─ */
.genre-cloud {
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%),
var(--genre-color, var(--accent));
transition: transform 0.15s ease, box-shadow 0.15s ease;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem 0.6rem;
padding-bottom: 1rem;
}
.genre-pill {
appearance: none;
border: 1px solid color-mix(in srgb, var(--genre-color, var(--accent)) 22%, transparent);
background: color-mix(in srgb, var(--genre-color, var(--accent)) 6%, transparent);
color: var(--text-primary);
border-radius: 999px;
padding: 0.28em 0.78em;
cursor: pointer;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
user-select: none;
font-family: inherit;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.genre-card:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
.genre-pill:hover {
background: color-mix(in srgb, var(--genre-color, var(--accent)) 14%, transparent);
border-color: color-mix(in srgb, var(--genre-color, var(--accent)) 45%, transparent);
color: var(--genre-color, var(--accent));
transform: translateY(-1px);
}
.genre-card-watermark {
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-55%);
opacity: 0.22;
color: #fff;
pointer-events: none;
}
.genre-card-name {
font-size: 0.86rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.25;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.genre-card-count {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.85);
margin: 0.2rem 0 0;
.genre-pill:focus-visible {
outline: 2px solid var(--genre-color, var(--accent));
outline-offset: 2px;
}
/* ─ Random Landing ─ */