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