eric/pmomusic
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Refactor drawer animations and update dark/light theme styles

Browse Source 
- Remove global CSS drawer animations, moving them to scoped component styles for direction-specific control
- Update BottomTabBar and RendererTabContent background/border/shadow for dark mode with consistent styling
- Add light theme media query support for queue-drawer and bottom-bar
- Adjust backdrop-filter blur intensity from 30px to 8px for better performance and visual consistency
This commit is contained in:
Eric Coissac
2026-03-25 20:54:47 +01:00
parent e47c1f1a86
commit 5299ab9148
4 changed files with 23 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pmoapp/webapp/src/assets/styles/drawers.css
View File

@@ -266,23 +266,5 @@
} }
} }
/* ======================================== /* Les animations d'entrée/sortie sont définies dans chaque composant (scoped)
ANIMATIONS D'ENTRÉE/SORTIE car elles diffèrent selon la direction (gauche/droite/bas) */
======================================== */
.drawer-enter-active,
.drawer-leave-active {
transition: transform var(--transition-normal) ease;
}
/* ServerDrawer : entre par la gauche */
.drawer-left-enter-from,
.drawer-left-leave-to {
transform: translateX(-100%);
}
/* RendererDrawer : entre par la droite */
.drawer-right-enter-from,
.drawer-right-leave-to {
transform: translateX(100%);
}

16
pmoapp/webapp/src/components/unified/BottomTabBar.vue
View File

@@ -148,18 +148,18 @@ function handleRendererDrawerClick() {
gap: var(--spacing-md); gap: var(--spacing-md);
height: 72px; height: 72px;
padding: 0 var(--spacing-md); padding: 0 var(--spacing-md);
background: rgba(255, 255, 255, 0.1); background: rgba(22, 22, 32, 0.96);
backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
z-index: 100; z-index: 100;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: light) {
.bottom-bar { .bottom-bar {
background: rgba(0, 0, 0, 0.25); background: rgba(245, 245, 250, 0.97);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(0, 0, 0, 0.1);
} }
} }

2
pmoapp/webapp/src/components/unified/RendererDrawer.vue
View File

@@ -695,7 +695,7 @@ async function handleTransferQueue(event: Event, targetRendererId: string) {
right: 0; right: 0;
top: calc(100% + 4px); top: calc(100% + 4px);
min-width: 200px; min-width: 200px;
background: var(--color-surface-elevated); background: rgba(20, 20, 30, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

17
pmoapp/webapp/src/components/unified/RendererTabContent.vue
View File

@@ -228,11 +228,11 @@ async function handleQueueItemClick(item: QueueItem) {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(255, 255, 255, 0.1); background: rgba(22, 22, 32, 0.96);
backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2); box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
/* Fermé: caché sauf le toggle (56px) qui dépasse au-dessus de la BottomTabBar (64px) */ /* Fermé: caché sauf le toggle (56px) qui dépasse au-dessus de la BottomTabBar (64px) */
transform: translateY(calc(100% - 56px - 64px)); transform: translateY(calc(100% - 56px - 64px));
transition: transform 0.3s ease; transition: transform 0.3s ease;
@@ -250,6 +250,13 @@ async function handleQueueItemClick(item: QueueItem) {
pointer-events: auto; /* Ouvert: capture les clics */ pointer-events: auto; /* Ouvert: capture les clics */
} }
@media (prefers-color-scheme: light) {
.queue-drawer {
background: rgba(245, 245, 250, 0.97);
border-top-color: rgba(0, 0, 0, 0.1);
}
}
.queue-drawer-toggle { .queue-drawer-toggle {
width: 100%; width: 100%;
height: 56px; height: 56px;