/* #map {
height: 600px;
width: 100%;
} */
/* Wymuś, aby układ flexbox rozciągał mapę w pionie */
#map {
width: 100%;
height: 100%;
min-height: 200px; /* Bezpiecznik dla bardzo małych ekranów */
}
/* Zabezpieczenie dla kolumn Bootstrapa wewnątrz flex-grow-1 */
.flex-grow-1 > .col-12 {
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Styl dla nakładki blokującej mapę podczas ładowania */
.map-spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6); /* Delikatne zmatowienie mapy w tle */
z-index: 9999; /* Musi być wyższy niż panele Leafleta */
pointer-events: auto; /* Blokuje kliknięcia w mapę podczas ładowania */
}
.legend {
background: rgba(255, 255, 255, 0.5);
padding: 10px;
line-height: 18px;
border-radius: 5px;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
/* Legenda rozciągnie się dokładnie do 100% szerokości lewej kolumny,
którą w całości dyktuje wielkość boxu z rekordami pogody */
width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Dodatkowe upewnienie się, że lista kolorów w legendzie zachowuje swój styl */
.legend .weather-legend {
display: flex !important;
flex-direction: row !important; /* Kropki/słupki kolorów w legendzie lecą w poziomie, tak jak miałeś oryginalnie */
padding: 0;
margin: 5px 0 0 0;
list-style: none;
}
.legend p {
font-size: 1rem;
}
.weather-legend li {
font-size: 0.7rem;
width: 1rem;
height: 1rem;
}
.row-toolbar {
min-height: 0;
max-height: max-content;
overflow-y: hidden;
}
.expand-toolbar-enter-active, .expand-toolbar-leave-active {
transition: all 0.5s ease; /* Płynne przejście */
overflow: hidden; /* Kluczowe: ukrywa zawartość gdy wysokość wynosi 0 */
}
.expand-toolbar-enter, .expand-toolbar-leave-to {
max-height: 0;
opacity: 0; /* Dodatkowo dla ładniejszego efektu zanikania */
}
.expand-toolbar-enter-to, .expand-toolbar-leave {
max-height: 500px; /* Wartość większa niż maksymalna spodziewana wysokość toolbara */
opacity: 1;
}
/* Kontener przycisku dopasowany do standardowych kontrolek Leaflet */
.map-screenshot-btn {
background-color: #ffffff;
border: none;
width: 34px;
height: 34px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
}
/* Efekt najechania myszką */
.map-screenshot-btn:hover {
background-color: #f4f4f4;
}
/* Kontener przycisku dopasowany do standardowych kontrolek Leaflet */
.map-hamburger-btn {
background-color: #ffffff;
border: none;
width: 34px;
height: 34px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px; /* Odstęp między paskami */
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
}
/* Efekt najechania myszką */
.map-hamburger-btn:hover {
background-color: #f4f4f4;
}
/* Wygląd pojedynczego paska w hamburgerze */
.map-hamburger-btn .hamburger-line {
display: block;
width: 18px;
height: 2px;
background-color: #333333;
border-radius: 1px;
transition: all 0.2s ease;
}
.weather-records-box {
/* background: rgba(255, 255, 255, 0.9); */
background: rgba(255, 255, 255, 0.5);
padding: 10px 14px;
border-radius: 6px;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
font-family: Arial, sans-serif;
/* Szerokość dopasowuje się do tekstu */
width: max-content !important;
min-width: 200px !important;
max-width: 280px !important;
display: flex !important;
flex-direction: column !important;
}
.weather-records-box h6 {
margin: 0 0 5px 0;
font-size: 13px;
font-weight: bold;
}
.weather-records-box .max-title {
color: #dc3545; /* Czerwony dla temperatury maksymalnej */
}
.weather-records-box .min-title {
color: #0d6efd; /* Niebieski dla temperatury minimalnej */
}
.weather-records-box .record-list {
list-style: none;
padding: 0;
margin: 0;
}
.weather-records-box .record-list li {
font-size: 12px;
line-height: 1.4;
border-bottom: 1px dashed #eee;
padding: 2px 0;
}
.weather-records-box .record-list li:last-child {
border-bottom: none;
}
.weather-records-box .no-data {
font-size: 12px;
color: #6c757d;
margin: 0;
}
.weather-records-box .station-link {
color: #212529; /* Ciemny kolor tekstu pasujący do reszty */
text-decoration: none;
border-bottom: 1px dotted #6c757d; /* Delikatne kropkowanie pod nazwą */
transition: color 0.2s ease;
}
.weather-records-box .station-link:hover {
color: #0d6efd; /* Zmiana na niebieski Bootstrap przy hoverze */
text-decoration: none;
border-bottom-color: #0d6efd;
cursor: pointer;
}
/* .legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
} */
.copyright-control-box {
background: rgba(255, 255, 255, 0.5);
padding: 10px 14px;
border-radius: 6px;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
font-family: Arial, sans-serif;
min-width: 200px;
max-width: 280px;
width: max-content;
/* Centrowanie zawartości w pionie dla równej wysokości */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ==========================================================================
POPRAWIONY UKŁAD DWUKOLUMNOWY DLA PERFEKCYJNEGO WYRÓWNANIA
========================================================================== */
/* 1. Siatka ma dwie niezależne kolumny pionowe */
.leaflet-bottom.leaflet-left {
display: grid !important;
/* Lewa kolumna dopasuje się wyłącznie do najszerszego elementu w niej,
prawa kolumna weźmie resztę wolnego miejsca */
grid-template-columns: max-content auto !important;
gap: 8px !important;
max-width: 550px !important;
align-items: stretch !important; /* Wymusza równą wysokość dolnego rzędu */
margin: 10px;
}
/* 2. Reset stylów kontrolek Leafleta */
.leaflet-bottom.leaflet-left .leaflet-control {
margin: 0 !important;
clear: none !important;
float: none !important;
display: flex !important;
}
.leaflet-bottom.leaflet-left .leaflet-control > div {
width: 100% !important;
box-sizing: border-box !important; /* Wracamy do bezpiecznego border-box */
}
/* 3. NOWE POZYCJONOWANIE W SIATCE (Kluczowa zmiana) */
/* REKORDY: Zamiast zajmować dwa kafelki, zajmują TYLKO PIERWSZĄ KOLUMNĘ w pierwszym wierszu.
Dzięki temu lewa kolumna siatki zyskuje dokładnie taką szerokość, jakiej wymagają rekordy. */
.leaflet-bottom.leaflet-left .leaflet-control:nth-child(1) {
grid-column: 1 !important;
grid-row: 1 !important;
}
/* LEGENDA: Trafia dokładnie pod Rekordy (pierwsza kolumna, drugi wiersz) */
.leaflet-bottom.leaflet-left .leaflet-control:nth-child(2) {
grid-column: 1 !important;
grid-row: 2 !important;
}
/* COPYRIGHT: Trafia do drugiej kolumny w drugim wierszu (obok legendy) */
.leaflet-bottom.leaflet-left .leaflet-control:nth-child(3) {
grid-column: 2 !important;
grid-row: 2 !important;
}
.custom-screenshot-box {
background-color: rgba(255, 255, 255, 0.95); /* Prawie białe, delikatnie transparentne tło */
border: 2px solid #007bff; /* Niestandardowa ramka w kolorze głównym Bootstrapa */
border-radius: 12px; /* Bardziej zaokrąglone rogi */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Ładny, nowoczesny cień */
}
.style-box {
min-width: 250px;
max-width: 320px;
}
.icon-full-screen-in {
background-size: 28px 28px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.icon-full-screen-out {
background-size: 28px 28px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.icon-screenshot {
background-size: 28px 28px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.marker-circle-container {
transform: rotate(-45deg);
display: flex;
padding-left: 3px;
padding-top: 3px;
}
.marker-circle {
height: 2rem;
width: 2rem;
background-color: #fff;
border-radius: 50%;
display: block;
text-align: center;
padding-top: 0.5rem;
}
/* W CSS zostawiamy tylko parametry kontrastu i mieszania warstw */
.blur-radar-layer {
mix-blend-mode: multiply;
opacity: 0.75;
transition: filter 0.1s linear; /* Płynne przejście rozmycia przy zmianie zoomu */
}
.leaflet-container {
background: white;
}
/* ==========================================================================
1. UJEDNOLICENIE V-SELECT (Dodanie efektu focus/otoczki)
========================================================================== */
/* Domyślny stan v-select - identyczny z datepickerem i Bootstrapem */
.v-select .vs__dropdown-toggle {
background: white !important;
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
padding: 0.2rem 0 !important;
height: calc(2.25rem + 2px) !important; /* Taka sama wysokość */
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
/* Stan aktywnego wyszukiwania (Focus) w v-select - dodajemy otoczkę */
.v-select.vs--open .vs__dropdown-toggle,
.v-select.vs--focused .vs__dropdown-toggle {
border-color: #86b7fe !important; /* Jasny niebieski z Bootstrap 5 */
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Subtelna otoczka */
}
/* Likwidacja domyślnego podświetlenia hover, jeśli nie chcemy skoków koloru */
.v-select:hover .vs__dropdown-toggle {
border-color: #ced4da !important;
}
/* Ukrywa kursor tekstowy i blokuje fizyczną możliwość kliknięcia w niewidoczne pole wpisywania */
.v-select:not(.vs--searchable) .vs__search {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Zmienia kursor nad całym selectem na wskaźnik 'pointer' (rączkę), sugerując czysty wybór */
.v-select:not(.vs--searchable) .vs__dropdown-toggle {
cursor: pointer;
}
.v-select:not(.vs--searchable) .vs__selected {
pointer-events: none; /* Zapobiega zaznaczaniu tekstu wybranej opcji */
}
/* ==========================================================================
2. DOPASOWANIE VUE2-DATEPICKER (Identyczna wysokość i otoczka)
========================================================================== */
/* Szerokość na 100% kolumny Bootstrap */
.mx-datepicker-range {
width: 100% !important;
}
/* Domyślny stan inputa datepickera */
.mx-datepicker-range .mx-input {
height: calc(2.25rem + 2px) !important;
padding: 0.375rem 0.75rem !important;
font-size: 1rem !important;
line-height: 1.5 !important;
color: #495057 !important;
background-color: #fff !important;
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
box-shadow: none !important;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
/* Usunięcie domyślnego niebieskiego hovera w datepickerze */
.mx-datepicker-range .mx-input:hover {
border-color: #ced4da !important;
}
/* Stan aktywnego kliknięcia (Focus) w datepickerze - identyczna otoczka jak wyżej */
.mx-datepicker-range .mx-input:focus {
border-color: #86b7fe !important;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
/* Wyśrodkowanie ikon kalendarza i krzyżyka czyszczenia */
.mx-datepicker-range .mx-icon-calendar,
.mx-datepicker-range .mx-icon-clear {
top: 50% !important;
transform: translateY(-50%) !important;
height: auto !important;
}