103 lines
1.9 KiB
CSS
103 lines
1.9 KiB
CSS
/* Panneau d'information superposé sur la carte */
|
|
#info-panel {
|
|
position: absolute;
|
|
background: white;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
z-index: 1000;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
display: none;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Desktop/Tablet - panneau à droite */
|
|
@media (min-width: 768px) {
|
|
#info-panel {
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 420px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
/* Mobile - panneau en bas */
|
|
@media (max-width: 767px) {
|
|
#info-panel {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
max-height: 70vh;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
}
|
|
}
|
|
|
|
#info-panel.show {
|
|
display: block;
|
|
}
|
|
|
|
#info-panel .panel-header {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
background-color: #f8f9fa;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
#info-panel .panel-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
#info-panel .panel-close {
|
|
cursor: pointer;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
color: #000;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
#info-panel .panel-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Photo preview dans le panneau */
|
|
#info-panel .photo-preview {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#info-panel .photo-preview img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#info-panel .quick-badge {
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
#info-panel .quick-badge:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Style pour les boutons de photo */
|
|
#info-panel .photo-capture-buttons .btn {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Style pour le repositionnement */
|
|
#info-panel .reposition-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|