sw-fe/src/styles/maps.css

56 lines
1.4 KiB
CSS

/* === SEARCH BAR OVERRIDES (taille + couleurs par thème) === */
/* On vise ta classe réelle: .sw-searchbar (celle utilisée dans MapView.jsx) */
.sw-searchbar {
/* full width dans son conteneur + limite max propre */
width: 100%;
max-width: min(760px, 92vw);
}
@media (min-width: 1024px) {
.sw-searchbar {
max-width: min(820px, 70vw);
}
}
/* Couleur du texte dans l'input selon le thème */
body[data-theme="dark"] .sw-search-input,
body[data-theme="blue"] .sw-search-input {
color: #f9fafb; /* blanc */
}
body[data-theme="light"] .sw-search-input {
color: #111827; /* noir foncé */
}
/* Placeholder suivant le thème */
body[data-theme="dark"] .sw-search-input::placeholder,
body[data-theme="blue"] .sw-search-input::placeholder {
color: #6b7280;
}
body[data-theme="light"] .sw-search-input::placeholder {
color: #9ca3af;
}
/* (optionnel) Si tu utilises plus tard SmartSearchBar avec un dropdown */
body[data-theme="dark"] .sw-search-results,
body[data-theme="blue"] .sw-search-results {
background: rgba(6, 12, 30, 0.98);
color: #f9fafb;
}
body[data-theme="light"] .sw-search-results {
background: rgba(255, 255, 255, 0.98);
color: #111827;
}
body[data-theme="dark"] .sw-search-result-item:hover,
body[data-theme="blue"] .sw-search-result-item:hover {
background: rgba(15, 23, 42, 0.9);
}
body[data-theme="light"] .sw-search-result-item:hover {
background: #f3f4f6;
}