pierre/SimpleClient-releases
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

fix: Correction du panneau de notes partiellement visible au démarrage

Browse Source 
- Position cachée ajustée à -620px pour invisibilité totale
- Gestion dynamique du décalage selon la largeur
- Indicateur de redimensionnement rendu plus visible (3 barres CSS)
- Zone de clic élargie à 16px pour meilleure ergonomie
This commit is contained in:
Pierre Marx
2025-09-04 16:36:04 -04:00
parent d66af7d99d
commit 0aaa3e63f2
3 changed files with 69 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
styles-modern.css
View File

@@ -616,7 +616,7 @@ body {
.notes-section {
position: fixed;
top: 60px; /* Juste sous le header */
right: -400px; /* Caché par défaut */
right: -620px; /* Complètement caché par défaut (largeur max + marges) */
width: 380px;
min-width: 280px;
max-width: 600px;
@@ -633,55 +633,73 @@ body {
/* Poignée de redimensionnement */
.notes-resize-handle {
position: absolute;
left: -5px;
left: -8px;
top: 0;
bottom: 0;
width: 10px;
width: 16px;
cursor: col-resize;
background: linear-gradient(90deg,
transparent 0%,
transparent 30%,
rgba(209, 213, 219, 0.5) 50%,
transparent 70%,
transparent 100%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.notes-resize-handle:hover {
background: linear-gradient(90deg,
transparent 0%,
rgba(102, 126, 234, 0.1) 30%,
rgba(102, 126, 234, 0.3) 50%,
rgba(102, 126, 234, 0.1) 70%,
rgba(102, 126, 234, 0.1) 20%,
rgba(102, 126, 234, 0.2) 50%,
rgba(102, 126, 234, 0.1) 80%,
transparent 100%);
}
.notes-resize-handle:active {
background: linear-gradient(90deg,
transparent 0%,
rgba(102, 126, 234, 0.2) 30%,
rgba(102, 126, 234, 0.5) 50%,
rgba(102, 126, 234, 0.2) 70%,
rgba(102, 126, 234, 0.2) 20%,
rgba(102, 126, 234, 0.4) 50%,
rgba(102, 126, 234, 0.2) 80%,
transparent 100%);
}
/* Indicateur visuel permanent - 3 points verticaux */
/* Indicateur visuel permanent - 3 barres verticales */
.notes-resize-handle::before {
content: '⋮⋮⋮';
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 16px;
color: #9ca3af;
letter-spacing: -4px;
font-weight: bold;
transform: translate(-50%, -50%);
width: 4px;
height: 30px;
background: linear-gradient(180deg,
#d1d5db 0%,
#d1d5db 20%,
transparent 20%,
transparent 40%,
#d1d5db 40%,
#d1d5db 60%,
transparent 60%,
transparent 80%,
#d1d5db 80%,
#d1d5db 100%
);
border-radius: 2px;
pointer-events: none;
user-select: none;
}
.notes-resize-handle:hover::before {
color: #667eea;
background: linear-gradient(180deg,
#667eea 0%,
#667eea 20%,
transparent 20%,
transparent 40%,
#667eea 40%,
#667eea 60%,
transparent 60%,
transparent 80%,
#667eea 80%,
#667eea 100%
);
}
/* Désactiver les transitions pendant le redimensionnement */