vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve mobile header layout for album, artist, and playlist pages

Browse source
This commit is contained in:
Julien Maille 2025-12-25 22:45:50 +01:00
parent 31862a835d
commit a2363f40f1
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
styles.css
View file

@ -2193,25 +2193,32 @@ input:checked + .slider::before {
} }
.detail-header { .detail-header {
flex-direction: column; flex-direction: row;
align-items: flex-start; gap: var(--spacing-md);
gap: var(--spacing-lg); padding-bottom: var(--spacing-sm);
padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
} }
.detail-header-image { .detail-header-image {
width: 150px; width: 120px;
height: 150px; height: 120px;
}
.detail-header-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
} }
.detail-header-info .title { .detail-header-info .title {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.2; line-height: 1.2;
} }
.detail-header-info .title.long-title { .detail-header-info .title.long-title {
font-size: 1.5rem; font-size: 1.35rem;
} }
.detail-header-info .title.very-long-title { .detail-header-info .title.very-long-title {
@ -2221,15 +2228,17 @@ input:checked + .slider::before {
.detail-header-info .meta { .detail-header-info .meta {
font-size: 0.85rem; font-size: 0.85rem;
gap: 0.35rem; gap: 0.35rem;
margin-top: 0.25em;
} }
.detail-header-actions { .detail-header-actions {
width: auto; width: auto;
margin-top: 0.5em;
} }
.detail-header-actions .btn-primary { .detail-header-actions .btn-primary {
width: auto; width: auto;
padding: 0.875rem; padding: 0.5rem;
border-radius: 50%; border-radius: 50%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
@ -2451,15 +2460,15 @@ input:checked + .slider::before {
} }
.detail-header-info .title { .detail-header-info .title {
font-size: 1.75rem; font-size: 1.25rem;
} }
.detail-header-info .title.long-title { .detail-header-info .title.long-title {
font-size: 1.35rem; font-size: 1.10rem;
} }
.detail-header-info .title.very-long-title { .detail-header-info .title.very-long-title {
font-size: 1.1rem; font-size: 0.9rem;
} }
.search-tab { .search-tab {