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

feat: implement layout shift in fullscreen mode when side panels are active

Browse source
This commit is contained in:
Julien Maille 2026-01-25 11:42:13 +01:00
parent a88ac265f7
commit 13627cdd61
1 changed files with 72 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
styles.css
View file

@ -336,7 +336,8 @@ kbd {
overflow-y: auto;
padding: var(--spacing-xl);
scroll-behavior: smooth;
position: relative; /* Context for background */
position: relative;
/* Context for background */
padding-bottom: 160px !important;
}
@ -635,6 +636,7 @@ body.has-page-background .track-item:hover {
}
@keyframes pulse {
0%,
100% {
opacity: 1;
@ -940,6 +942,7 @@ body.has-page-background .track-item:hover {
}
@media (max-width: 1100px) {
#home-recommended-songs,
#artist-detail-tracks,
#playlist-detail-recommended {
@ -980,15 +983,18 @@ body.has-page-background .track-item:hover {
.album-content-layout .content-section .card-grid .card {
display: inline-block;
vertical-align: top;
width: 155px; /* Fixed width to ensure consistent flow */
width: 155px;
/* Fixed width to ensure consistent flow */
margin: 0 var(--spacing-md) var(--spacing-md) 0;
white-space: normal; /* Reset in case inherited */
white-space: normal;
/* Reset in case inherited */
}
.album-content-layout .section-title {
font-size: 1.4rem;
margin-bottom: var(--spacing-md);
clear: none; /* Allow sitting next to float */
clear: none;
/* Allow sitting next to float */
}
}
@ -1123,7 +1129,8 @@ body.has-page-background .track-item:hover {
padding: 0.5rem;
border-radius: var(--radius);
transition: all var(--transition);
display: none; /* Controlled by data-track-actions-mode */
display: none;
/* Controlled by data-track-actions-mode */
align-items: center;
justify-content: center;
opacity: 0;
@ -1146,7 +1153,8 @@ body.has-page-background .track-item:hover {
}
.track-actions-inline {
display: none; /* Controlled by data-track-actions-mode */
display: none;
/* Controlled by data-track-actions-mode */
gap: 0.25rem;
opacity: 0.2;
transition: opacity var(--transition);
@ -1182,7 +1190,8 @@ body.has-page-background .track-item:hover {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Prevent buttons from squishing */
flex-shrink: 0;
/* Prevent buttons from squishing */
}
.track-action-btn:hover {
@ -1519,11 +1528,11 @@ body.has-page-background .track-item:hover {
border-radius: 50%;
}
input:checked + .slider {
input:checked+.slider {
background-color: var(--primary);
}
input:checked + .slider::before {
input:checked+.slider::before {
transform: translateX(16px);
background-color: var(--primary-foreground);
}
@ -1984,7 +1993,7 @@ input:checked + .slider::before {
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
transition: opacity 0.2s, right 0.3s ease;
z-index: 10;
opacity: 0.5;
}
@ -2034,11 +2043,13 @@ input:checked + .slider::before {
display: flex;
flex-direction: column;
gap: 0.2rem;
opacity: 0; /* Initially hidden for animation */
opacity: 0;
/* Initially hidden for animation */
}
#fullscreen-next-track.animate-in {
animation: fade-in 0.5s ease 0.2s forwards; /* Added forwards to keep opacity 1 */
animation: fade-in 0.5s ease 0.2s forwards;
/* Added forwards to keep opacity 1 */
}
#fullscreen-next-track .label {
@ -3035,7 +3046,8 @@ input:checked + .slider::before {
.card.compact.user-playlist .edit-playlist-btn,
.card.compact.user-playlist .delete-playlist-btn {
display: none !important; /* Hide edit/delete on compact view to prevent covering image */
display: none !important;
/* Hide edit/delete on compact view to prevent covering image */
}
/* Mobile adjustments */
@ -3190,7 +3202,7 @@ img[src=''] {
align-items: center;
justify-content: center;
padding: 6rem 2rem 2rem;
transition: flex 0.3s ease;
transition: flex 0.3s ease, padding-right 0.3s ease, margin-right 0.3s ease;
}
.fullscreen-lyrics-toggle {
@ -3207,7 +3219,7 @@ img[src=''] {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
transition: all 0.2s ease, right 0.3s ease;
}
.fullscreen-lyrics-toggle:hover {
@ -3642,7 +3654,8 @@ img[src=''] {
}
#fullscreen-cover-image {
max-height: 45vh; /* Reduce height on mobile to fit text */
max-height: 45vh;
/* Reduce height on mobile to fit text */
margin-bottom: 1.5rem;
}
@ -4604,3 +4617,46 @@ body.sidebar-collapsed #sidebar-toggle {
display: block;
}
}
/* Fullscreen layout shift when side panel is active */
body:has(#side-panel.active) .fullscreen-main-view {
transition: flex 0.3s ease, padding-right 0.3s ease, margin-right 0.3s ease;
}
body:has(#side-panel.active) .fullscreen-main-view {
padding-right: 600px;
}
body:has(#side-panel.active) .fullscreen-lyrics-toggle {
right: calc(600px + 4rem);
}
body:has(#side-panel.active) #close-fullscreen-cover-btn {
right: calc(600px + 1rem);
}
@media (max-width: 1200px) {
body:has(#side-panel.active) .fullscreen-main-view {
padding-right: 50vw;
}
body:has(#side-panel.active) .fullscreen-lyrics-toggle {
right: calc(50vw + 4rem);
}
body:has(#side-panel.active) #close-fullscreen-cover-btn {
right: calc(50vw + 1rem);
}
}
@media (max-width: 768px) {
body:has(#side-panel.active) .fullscreen-main-view {
padding-right: 0;
}
/* Hide fullscreen specific buttons on mobile when panel is open */
body:has(#side-panel.active) .fullscreen-lyrics-toggle,
body:has(#side-panel.active) #close-fullscreen-cover-btn {
display: none;
}
}