/* „Niebo nad miastem" — wspólny frontend (samoloty.app + portale), kierunek B „mapa redakcyjna". Kolory z szablonu portali: #00558f (primary), szarości Tailwind. Klasy bez „banner/ad" (adblocki). */ .niebo { --nb-primary: #00558f; --nb-ink: #111827; --nb-text: #374151; --nb-muted: #6b7280; --nb-line: #e5e7eb; --nb-bg: #ffffff; --nb-soft: #f9fafb; --nb-mil: #b91c1c; --nb-p1: #b45309; --nb-p2: #c2410c; --nb-p3: #b91c1c; --nb-p4: #9d174d; font-family: inherit; /* jak reszta portalu (Tailwind sans z body); app ma ten sam stos w */ color: var(--nb-text); max-width: 1360px; margin: 0 auto; padding: 0 16px 24px; box-sizing: border-box; } .niebo *, .niebo *::before, .niebo *::after { box-sizing: border-box; } .niebo a { color: var(--nb-primary); } .niebo-naglowek { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 12px; } .niebo-naglowek h1 { margin: 0; font-family: inherit; font-size: 2.25rem; font-weight: 700; color: var(--nb-ink); line-height: 1.5; } /* = tytuł artykułu portalu: text-4xl font-bold leading-normal */ .niebo-lead { margin: 0; font-size: 0.98rem; color: #4b5563; } .niebo-lead .nb-czas { color: #9ca3af; } .niebo-kafelki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .nb-kafelek { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--nb-line); border-radius: 8px; background: var(--nb-bg); min-width: 0; } .nb-kafelek-t { font-size: 0.62rem; color: var(--nb-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-kafelek-w { font-size: 1.15rem; font-weight: 700; color: var(--nb-ink); line-height: 1.2; } .nb-kafelek-w small { font-size: 0.72rem; font-weight: 500; color: #4b5563; } .nb-o-czym { color: var(--nb-ink); } .nb-kafelek-w.p1 { color: var(--nb-p1); } .nb-kafelek-w.p2 { color: var(--nb-p2); } .nb-kafelek-w.p3 { color: var(--nb-p3); } .nb-kafelek-w.p4 { color: var(--nb-p4); } .niebo-glowna { display: flex; gap: 16px; align-items: flex-start; } /* mapa NIE rozciąga się do wysokości panelu (był 1400+ px na portalach — miasto „poza ekranem", 2026-09-14): wysokość od okna */ .niebo-mapa-wrap { flex: 1 1 auto; min-width: 0; width: 100%; position: relative; border: 1px solid var(--nb-line); border-radius: 10px; overflow: hidden; background: #eef2f5; height: clamp(520px, 78vh, 860px); } /* karta szczegółów „jak Flightradar": komputer — w prawej kolumnie zamiast list; telefon — szuflada nad mapą */ .nb-szczegoly { position: relative; background: var(--nb-bg); border: 1px solid var(--nb-line); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; } .nb-szczegoly[hidden] { display: none; } .nb-szczegoly.w-panelu { position: sticky; top: 12px; max-height: calc(100vh - 40px); } .niebo-panel.z-karta > .nb-karta { display: none; } .nb-szcz-tresc { padding: 10px 12px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 0.82rem; line-height: 1.45; color: var(--nb-text); min-height: 0; } .nb-szcz-lista { display: inline-block; align-self: flex-start; margin: 8px 0 0 10px; border: 0; background: #f3f4f6; color: #374151; border-radius: 14px; padding: 5px 10px; font-size: 0.78rem; cursor: pointer; } .nb-szcz-lista:hover { background: #e5e7eb; } .nb-szcz-zamknij { position: absolute; top: 6px; right: 6px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 16px; background: #f3f4f6; color: #374151; font-size: 0.95rem; cursor: pointer; } .nb-szcz-zamknij:hover { background: #e5e7eb; } .nb-szcz-uchwyt { display: none; } .nb-szcz-tresc .nb-pop-foto { width: 100%; } /* szuflada (telefon) — nad dolną połową mapy, przeciągnięcie uchwytu w górę = cała, w dół = zamknij */ .nb-szczegoly.szuflada { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1001; /* nad kontrolkami Leaflet (1000) */ height: 48%; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -6px 20px rgba(0,0,0,0.18); transition: height 0.25s ease; } .nb-szczegoly.szuflada.pelna { height: 94%; } .nb-szczegoly.szuflada .nb-szcz-uchwyt { display: flex; justify-content: center; padding: 8px 0 4px; cursor: grab; touch-action: none; flex: 0 0 auto; } .nb-szczegoly.szuflada .nb-szcz-uchwyt span { width: 40px; height: 5px; border-radius: 3px; background: #d1d5db; } .nb-szczegoly.szuflada .nb-szcz-lista { display: none; } .nb-szczegoly.szuflada .nb-szcz-zamknij { top: 4px; } .nb-szczegoly.szuflada .nb-szcz-tresc { flex: 1 1 auto; padding-top: 4px; } #niebo-mapa { position: absolute; inset: 0; } .niebo-filtry { position: absolute; top: 12px; left: 56px; z-index: 800; display: flex; flex-wrap: wrap; gap: 6px; } .nb-chip { padding: 5px 10px; border-radius: 6px; background: var(--nb-bg); border: 1px solid var(--nb-line); color: var(--nb-text); font-size: 0.78rem; cursor: pointer; line-height: 1.3; user-select: none; } .nb-chip:hover { background: var(--nb-soft); } .nb-chip.on { background: var(--nb-primary); border-color: var(--nb-primary); color: #fff; } .nb-chip.on.ua { background: #92400e; border-color: #92400e; } .nb-chip.on.zak { background: #6b7280; border-color: #6b7280; } .niebo-mapa-info { position: absolute; right: 10px; bottom: 26px; z-index: 800; font-size: 0.68rem; color: var(--nb-muted); background: rgba(255,255,255,0.88); padding: 3px 8px; border-radius: 4px; max-width: 70%; } .niebo-panel { width: 340px; flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px; } .nb-karta { border: 1px solid var(--nb-line); border-radius: 8px; background: var(--nb-bg); padding: 12px 14px; } .nb-karta h3 { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; color: var(--nb-ink); } .nb-ua { background: var(--nb-soft); border-color: var(--nb-line); } .nb-ua.p1 { background: #fffbeb; border-color: #fcd34d; } .nb-ua.p2 { background: #fff7ed; border-color: #fdba74; } .nb-ua.p3, .nb-ua.p4 { background: #fef2f2; border-color: #fca5a5; } .nb-ua h3 { display: flex; align-items: center; gap: 8px; } .nb-ua.p1 h3 { color: #92400e; } .nb-ua.p2 h3 { color: #9a3412; } .nb-ua.p3 h3, .nb-ua.p4 h3 { color: #991b1b; } .nb-kropka { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; flex: 0 0 10px; } .nb-ua.p1 .nb-kropka { background: #eab308; } .nb-ua.p2 .nb-kropka { background: #f97316; } .nb-ua.p3 .nb-kropka, .nb-ua.p4 .nb-kropka { background: #dc2626; } .nb-ua-linie { margin: 0; padding-left: 16px; font-size: 0.82rem; line-height: 1.5; color: var(--nb-text); } .nb-ua-stopka { margin-top: 8px; font-size: 0.68rem; color: #78350f; opacity: 0.85; } .nb-lista { display: flex; flex-direction: column; } .nb-wiersz { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #f3f4f6; cursor: pointer; } .nb-wiersz:first-child { border-top: 0; } .nb-wiersz:hover .nb-w-tytul { color: var(--nb-primary); } .nb-foto { width: 56px; height: 36px; border-radius: 4px; object-fit: cover; background: #e5e7eb; flex: 0 0 56px; } .nb-foto.pusta { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 1rem; } .nb-w-tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .nb-w-tytul { font-size: 0.82rem; font-weight: 600; color: var(--nb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-w-tytul.mil { color: var(--nb-mil); } .nb-w-sub { font-size: 0.7rem; color: var(--nb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-w-km { font-size: 0.78rem; font-weight: 600; color: var(--nb-text); flex: 0 0 auto; } .nb-pusto { font-size: 0.8rem; color: var(--nb-muted); padding: 6px 0; } .nb-dziennik { font-size: 0.78rem; color: #4b5563; line-height: 1.5; max-height: 320px; overflow-y: auto; } .nb-dz-lead { margin: 0 0 6px; font-size: 0.78rem; color: var(--nb-muted); } .nb-dz-w { padding: 3px 0; border-top: 1px solid #f3f4f6; } .nb-dz-w:first-child { border-top: 0; } .nb-dz-w.woj { color: var(--nb-ink); } .nb-dz-w.woj b { color: var(--nb-mil); } .nb-dz-czas { color: #9ca3af; font-variant-numeric: tabular-nums; margin-right: 2px; } .nb-dz-znak { color: var(--nb-primary); font-weight: 600; } .nb-dz-wiecej { padding-top: 4px; color: #9ca3af; font-size: 0.72rem; } .niebo-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.75rem; color: var(--nb-muted); } .niebo-legenda b { font-weight: 600; } .niebo-zrodla { margin-top: 6px; font-size: 0.68rem; color: #9ca3af; line-height: 1.5; } /* markery */ .nb-ikona { text-align: center; line-height: 1; text-shadow: 0 0 3px #fff, 0 0 5px #fff; } .nb-ikona .nb-znak { display: inline-block; } .nb-ikona.wojsk { color: #111827; } .nb-ikona.ua .nb-znak { text-shadow: 0 0 2px #fff; } .nb-ikona.ua { text-shadow: 0 0 3px #fff, 0 0 6px #fff; } .nb-ikona .nb-n { position: absolute; right: -3px; top: -4px; background: #111827; color: #fff; font-size: 0.6rem; border-radius: 8px; padding: 0 4px; line-height: 1.3; } .nb-ikona.zak { color: #6b7280; opacity: 0.7; } .nb-tip { font-size: 0.75rem; } /* popup */ .leaflet-popup-content { margin: 10px 12px; font-size: 0.82rem; line-height: 1.45; color: var(--nb-text); } .nb-pop-foto { width: 240px; max-width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; } .nb-pop-podpis { font-size: 0.62rem; color: #9ca3af; margin-bottom: 6px; line-height: 1.3; } .nb-pop-tytul { font-weight: 700; color: var(--nb-ink); font-size: 0.9rem; } .nb-pop-trasa { color: var(--nb-primary); font-weight: 600; } .nb-pop-mil { color: var(--nb-mil); font-weight: 600; } .nb-pop-uwaga { font-size: 0.7rem; color: #92400e; background: #fffbeb; padding: 4px 6px; border-radius: 4px; margin-top: 6px; } .nb-pop-cicho { font-size: 0.68rem; color: #9ca3af; } @media (max-width: 900px) { .niebo-kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .nb-kafelek { padding: 6px 8px; } .nb-kafelek-w { font-size: 1.05rem; } .niebo-glowna { flex-direction: column; align-items: stretch; } /* flex-start z desktopu zerował szerokość mapy na telefonie (2026-09-14) */ .niebo-panel { width: auto; flex: 1 1 auto; } /* telefon: mapa niższa i z marginesami po bokach — palcem obok mapy da się przewinąć stronę (operator 2026-09-14) */ .niebo-mapa-wrap { height: 58vh; width: auto; margin: 0 12px; } .nb-szcz-tresc { padding-bottom: 16px; } .nb-szcz-tresc .nb-pop-foto { max-height: 120px; object-fit: cover; } .nb-szcz-zamknij { width: 36px; height: 36px; border-radius: 18px; } .niebo-filtry { left: 52px; right: 8px; } .nb-chip { padding: 7px 10px; } .nb-wiersz { padding: 10px 0; } .niebo-naglowek h1 { font-size: 1.875rem; } /* text-3xl */ } /* ustawienia „Informacje" (popover pod chipami) */ .nb-chip-wiecej { background: var(--nb-soft); } .nb-ustawienia[hidden] { display: none; } .nb-ustawienia { position: absolute; top: 34px; left: 0; z-index: 900; width: 300px; max-width: calc(100vw - 80px); background: #fff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .nb-ust-grupa { display: flex; flex-direction: column; gap: 3px; } .nb-ust-t { font-size: 0.68rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .nb-ust { font-size: 0.8rem; color: #374151; display: flex; align-items: center; gap: 6px; cursor: pointer; } .nb-ust input { margin: 0; } .nb-ust-stopka { font-size: 0.7rem; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 6px; } .nb-ust-stopka a { color: #6b7280; } /* ostrzeżenia RSO/RCB (hugo_komunikaty) */ .nb-ostrz.s2 { border-color: #fdba74; background: #fff7ed; } .nb-ostrz.s3 { border-color: #fca5a5; background: #fef2f2; } .nb-ostrz-lista { display: flex; flex-direction: column; } .nb-ostrz-w { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid #f3f4f6; font-size: 0.8rem; } .nb-ostrz-w:first-child { border-top: 0; } .nb-ostrz-w b { color: var(--nb-ink); font-weight: 600; } .nb-ostrz-w span { font-size: 0.72rem; color: var(--nb-muted); } .nb-st { display: inline-block; min-width: 18px; text-align: center; border-radius: 4px; color: #fff; font-size: 0.68rem; padding: 1px 4px; background: #9ca3af; } .nb-st.s1 { background: #ca8a04; } .nb-st.s2 { background: #ea580c; } .nb-st.s3 { background: #dc2626; } .nb-ostrz-link { display: inline-block; margin-top: 6px; font-size: 0.78rem; } .nb-ostrz-zr { margin-top: 6px; font-size: 0.66rem; color: #9ca3af; } /* flagi państw (SVG z lokalnej bazy; emoji jako zapas) */ .nb-flaga { display: inline-block; width: 18px; height: 12px; object-fit: cover; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); } .nb-flaga-emoji { font-size: 0.95em; } .nb-w-tytul .nb-flaga { width: 16px; height: 11px; } .niebo-mapa-wrap { scroll-margin-top: 120px; } /* sylwetki SVG (wzór tar1090, 2026-09-14): biała poświata odcina od podkładu */ .nb-ikona .nb-sylw { margin: 3px auto; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); } .nb-ikona.ua .nb-sylw { filter: drop-shadow(0 0 2px #fff); } .nb-foto.pusta .nb-sylw { margin: 0; } .niebo-legenda .nb-sylw { filter: none; } /* atrybucja Leaflet (zamiast osobnego boksu .niebo-mapa-info, 2026-09-14) */ .niebo .leaflet-control-attribution { font-size: 0.68rem; color: var(--nb-muted); background: rgba(255,255,255,0.88); padding: 3px 8px; border-radius: 4px 0 0 0; } .niebo .leaflet-control-attribution a { color: var(--nb-primary); text-decoration: none; } /* ciemny motyw portalu (html[data-theme="dark"], dark-mode.css: tło #1e293b) — te same tokeny, ciemne wartości */ html[data-theme="dark"] .niebo { --nb-ink: #f1f5f9; --nb-text: #cbd5e1; --nb-muted: #94a3b8; --nb-line: #334155; --nb-bg: #1e293b; --nb-soft: #172033; --nb-primary: #7cc4ff; } html[data-theme="dark"] .niebo .nb-szcz-lista, html[data-theme="dark"] .niebo .nb-szcz-zamknij { background: #334155; color: #e2e8f0; } html[data-theme="dark"] .niebo .nb-ustawienia { background: #1e293b; border-color: #334155; color: #cbd5e1; } html[data-theme="dark"] .niebo .nb-ust, html[data-theme="dark"] .niebo .nb-ust-t { color: #cbd5e1; } html[data-theme="dark"] .niebo .nb-ua.p1 { background: #3b2f0b; border-color: #a16207; } html[data-theme="dark"] .niebo .nb-ua.p2 { background: #3b1f0b; border-color: #c2410c; } html[data-theme="dark"] .niebo .nb-ua.p3, html[data-theme="dark"] .niebo .nb-ua.p4 { background: #3b0f0f; border-color: #b91c1c; } html[data-theme="dark"] .niebo .nb-ostrz.s2 { background: #3b1f0b; } html[data-theme="dark"] .niebo .nb-ostrz.s3 { background: #3b0f0f; } html[data-theme="dark"] .niebo .nb-pop-uwaga { background: #3b2f0b; color: #fde68a; } html[data-theme="dark"] .niebo .nb-foto { background: #334155; } html[data-theme="dark"] .niebo .leaflet-control-attribution { background: rgba(30,41,59,0.9); color: #94a3b8; }