/* ========================================================================== Czas Cykliczny - Widok 3D mobile.css - WSZYSTKIE reguly dla "trybu mobilnego" w jednym miejscu. Faza 4 (v3.40.x): prog to teraz "@media (max-width: 700px), (max-height: 700px)" - NIE tylko szerokosc. Powod: w orientacji poziomej telefonu szerokosc (dluzszy bok) czesto przekracza 700px, mimo ze to nadal ten sam, waski, dotykowy ekran - sama szerokosc dawala wtedy falszywy powrot do ukladu desktopowego. Ten sam prog (Math.min(width, height) <= 700) jest uzywany w JS - patrz calIsMobileViewport() w core-bootstrap.js. UWAGA O KOLEJNOSCI: bloki ponizej MUSZA pozostac w tej kolejnosci. Blok 3 (#controls, #info { min-width: 94vw }) i blok 4 (#info, #controls - kotwiczenie do krawedzi) maja ta sama specificznosc selektorow; blok 4 musi wystapic PO bloku 3, zeby poprawnie nadpisac min-width: 94vw na #info (patrz oryginalny komentarz "NAPRAWA v2" zachowany ponizej). Ten plik ladowany jest w index.html PO base.css - dzieki temu wszystkie reguly tutaj i tak wygrywaja z regulami bazowymi o tej samej specyficznosci, niezaleznie od podzialu na pliki. ========================================================================== */ @media (max-width: 700px), (max-height: 700px) { /* Faza 2 (v3.40.x): ZMIENIONE z "display: none !important" na "display: contents !important". Powod: display:none na rodzicu ukrywa CALE poddrzewo DOM niezaleznie od stylu dziecka, wiec zaden z 6 paneli w tej kolumnie nie moglby zostac pokazany na telefonie. display:contents usuwa WLASNY box kolumny z layoutu (kolumna sama w sobie i tak nigdy nie byla samodzielnie widoczna - to tylko kontener flex), ale w odroznieniu od display:none NADAL renderuje jej dzieci, ktore dostaja teraz wlasny, niezalezny position:fixed (patrz blok "Faza 2" na koncu tego pliku). Bezpieczne wzgledem JS: layoutLeftPanels()/ layoutRightPanels() (patrz astro-and-panels.js) mierzy getBoundingClientRect().width kolumny i przy wartosci <=0 (display:contents rowniez daje 0, tak samo jak dawniej display:none) wychodzi wczesnie bez ustawiania zadnych stylow inline - identyczne zachowanie jak przed ta zmiana. */ #leftPanelsColumn { display: contents !important; } } @media (max-width: 700px), (max-height: 700px) { #rightPanelsColumn { display: contents !important; } /* Pelny ekran tylko w ukladzie desktopowym (jak przelacznik "Panele"). */ #fullscreenBtn { display: none !important; } } @media (max-width: 700px), (max-height: 700px) { #controls { flex-wrap: wrap; gap: 8px; padding: 10px 14px; bottom: 10px; } #timeDisplay { font-size: calc(13px * var(--time-display-scale, 1)); } /* (poprawka po v3.42.0) Dawniej tu bylo `.segment-label { font-size: 9px !important; }` - !important wygrywalo z inline style.fontSize ustawianym w animate() (js/animation-and-resize.js), wiec na telefonie etykiety segmentow NIE skalowaly sie z przyblizeniem kamery (na desktopie tak). Stale 9px na telefonie jest teraz wyliczane w JS (MOBILE_LABEL_BASE_PX), z tym samym skalowaniem odlegloscia kamery co na desktopie. */ #info { min-width: 94vw; } #timeModeRow { font-size: 10px; gap: 6px; } #timeModeNote { font-size: 10px; width: 100%; } #timeModeNoteClose { width: 18px; height: 18px; line-height: 16px; font-size: 13px; top: -3px; } #timeModeNoteText { padding: 0 20px; } #timeJumpRow button { font-size: 10px; height: 22px; padding: 0 6px; } #timeJumpRow #nowBtn { padding: 0 10px; } #jumpProgressBarOuter { width: 160px; } #startupProgressBarOuter { width: 140px; } #jumpProgressLabel { font-size: 10px; width: min(94vw, 340px); } #jumpProgressVenusLine { font-size: 10px; } } @media (max-width: 700px), (max-height: 700px) { #info { left: 8px; right: 8px; transform: none; min-width: 0; width: auto; padding: 8px 10px; } #controls { left: 8px; right: 8px; transform: none; width: auto; max-width: none; } #timeDisplay { /* white-space zostaje nowrap (reguła bazowa) - patrz NAPRAWA v3 przy głównej definicji #timeDisplay. Tu tylko mniejszy bazowy rozmiar czcionki na wąskim ekranie; fitTimeDisplayFont() w JS dociąga --time-display-scale dalej w dół, gdyby i to było za szerokie. */ font-size: calc(11px * var(--time-display-scale, 1)); } #speedTrackWrap { min-width: 0; flex: 1 1 160px; } #playBtn { min-width: 56px; width: 56px; flex: 0 0 auto; } #timeModeRow { flex-wrap: wrap; white-space: normal; row-gap: 4px; } #calDatePanel, #calBiblicalPanel { white-space: normal; line-height: 1.6; } /* Wymuszony, zawsze-dwuwierszowy uklad wierszy kalendarza (patrz .calPanelRow w index.html i komentarze tam, przy obu panelach - #calDatePanel ORAZ #calBiblicalPanel uzywaja tej samej klasy) - kazdy staje sie WLASNYM, blokowym wierszem (display:flex zawsze zaczyna nowa linie wzgledem rodzenstwa, tak jak zwykly display:block), wiec kazdy panel ZAWSZE laduje na dokladnie tylu liniach, ile ma .calPanelRow - niezaleznie od tego, jak szeroka akurat jest etykieta godziny/dnia tygodnia - zamiast zawijac sie w nieprzewidywalnym miejscu na 2 ALBO 3 linie. Miedzy wierszami SWIADOMIE nie ma separatora w HTML - sam podzial na linie juz pelni te role, a separator na poczatku/koncu linii wygladalby jak literowka (patrz zgloszenie). justify-content: center centruje kazda linie osobno (analogicznie do text-align:center na #info, ktore samo nie zadziala na blokowe/flex dzieci). Na desktopie ten selektor w ogole nie istnieje (poza tym plikiem mobile.css) - tam .calPanelRow zostaje domyslnym display:inline, wiec kazdy panel wyglada dokladnie tak jak wczesniej, w jednej linii. */ .calPanelRow { display: flex; flex-wrap: wrap; justify-content: center; } .calPanelRow:first-child { margin-bottom: 2px; } /* NAPRAWA: .calRowSep (patrz #calDatePanel/#calBiblicalPanel w index.html) istnieje wyłącznie po to, żeby na desktopie (gdzie .calPanelRow zostaje inline i oba wiersze lądują obok siebie w jednej linii) rozdzielić koniec pierwszego wiersza od początku drugiego (bez niego sklejały się, np. "piątekJD..."). Na telefonie ten separator jest zbędny i szkodliwy - każdy .calPanelRow i tak dostaje własną linię (reguła wyżej), więc .calRowSep wisiałby osierocony na początku drugiej linii, dokładnie tak jak opisuje to komentarz przy .calGroup w base.css. Dlatego tutaj, tylko na wąskim ekranie, jest ukrywany. */ .calRowSep { display: none; } #timeJumpRow, #biblicalYearJumpRow { gap: 4px; } #timeJumpRow button, #biblicalYearJumpRow button { padding: 0 5px; flex: 0 1 auto; } #jumpProgressLabel { width: 100%; max-width: none; } #jumpProgressBarOuter { width: 100%; } } @media (max-width: 700px), (max-height: 700px) { /* ================================================================ Faza 2 (v3.40.x): pasek zakladek + panele pelnoszerokosciowe. Kazdy z 6 panelow jest domyslnie ukryty (nadpisuje sam siebie ponizej klasa .mobile-panel-open, dodawana/usuwana przez js/ui/mobile-tabbar.js). Gdy aktywny, panel dostaje position:fixed - niezalezny od tego, ze na desktopie te same elementy sa waskimi ramkami pozycjonowanymi przez JS (layoutLeftPanels/layoutRightPanels w astro-and-panels.js). !important jest tu konieczne z dwoch powodow: 1) base.css ustawia na tych elementach bezwarunkowe (bez media query) wlasciwosci jak pointer-events:none, width:100%, flex:1 1 0 - trzeba je nadpisac. 2) JS (layoutLeftPanels/layoutRightPanels) NIE dotyka tych elementow na mobile (potwierdzone czytaniem kodu: przy getBoundingClientRect().width <= 0 funkcje wychodza przed ustawieniem czegokolwiek), WIEC realnie !important nie walczy tu z JS - jest czysto defensywne, na wypadek przyszlych zmian w tamtym kodzie. */ #desyncPanel, #moonPhasePanel, #sunAltPanel, #legend, #earthPentagramPanel, #sunEclipticPanel { display: none; } #desyncPanel.mobile-panel-open, #moonPhasePanel.mobile-panel-open, #sunAltPanel.mobile-panel-open, #legend.mobile-panel-open, #earthPentagramPanel.mobile-panel-open, #sunEclipticPanel.mobile-panel-open { display: flex !important; /* KRYTYCZNE: #legend (w odroznieniu od pozostalych 5 paneli) nie ma domyslnie na desktopie display:flex - jest zwyklym blokowym divem, wiec jego wiersze ukladaja sie pionowo przez zwykly block-flow. Narzucajac tu "display:flex" bez jawnego "flex-direction:column" dostalby domyslny kierunek "row" - wszystkie wiersze legendy (data, TERAZ, tytul, lista pierscieni) ulozylyby sie OBOK SIEBIE w poziomie zamiast jeden pod drugim (dokladnie taki blad byl widoczny na zrzutach ekranu z telefonu). Pozostale 5 paneli juz ma flex-direction:column w base.css, wiec dla nich ta linia jest neutralna (ten sam efekt), ale zapisujemy ja jawnie dla wszystkich 6 - bezpieczniej niz polegac na tym, ze akurat te 5 go dzis ma. */ flex-direction: column !important; position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: 62px !important; width: auto !important; max-width: none !important; /* Faza 2 (v3.40.x): stala wysokosc (NIE auto, NIE max-height) - tak, zeby wszystkie 6 paneli mialo IDENTYCZNA wysokosc na ekranie niezaleznie od ilosci tresci (krotsza tresc: puste miejsce na dole panelu; dluzsza: przewijanie w dol dzieki overflow-y:auto jak dotychczas). !important konieczne - w przeciwnym razie przegrywa z reszta tej samej reguly (bez znaczenia ktora linia jest pierwsza - !important zawsze wygrywa z nie-important, niezaleznie od kolejnosci w pliku). */ height: 48vh !important; overflow-y: auto; pointer-events: auto !important; z-index: 30; } /* #legend na desktopie ma align-items:flex-end (bo wisi przy prawej krawedzi) - na pelnej szerokosci telefonu to psuje czytelnosc (caly tekst przyklejony do prawej), wiec nadpisujemy tylko na czas .mobile-panel-open. */ #legend.mobile-panel-open { align-items: flex-start; } /* Pasek zakladek - stala belka na samym dole ekranu, NAD #controls (patrz przesuniecie #controls.bottom nizej). */ /* Male kwadraciki-przelaczniki widoku (historia/wektory, faza/kryteria) sa CELOWO ukryte na mobile - zamiast nich swipe w bok na panelu (patrz js/ui/mobile-swipe.js). Dodatkowy, niezalezny powod: maja z-index:25 (patrz base.css), a nasze panele .mobile-panel-open maja z-index:30 - przy pelnej szerokosci panelu i tak ladowaly by sie w wiekszosci zaslosniete przez tlo panelu (widoczne na zrzutach z telefonu jako ucziete "?" przy krawedzi - to byl dokladnie ten button, wystajacy tylko tam, gdzie panel go nie zaslania). */ .panel-selectors { display: none !important; } /* Faza 2 (v3.40.x): 18 przyciskow skokow czasowych (9 + 9) zwiniete w jeden przycisk "Skocz do daty" (patrz #mobileDateJumpOverlay w index.html/base.css i js/ui/mobile-datejump.js). Desktop ma te rzedy bez zmian (poza tym blokiem @media). */ #timeJumpRow, #biblicalYearJumpRow { display: none !important; } #mobileDateJumpBtn { display: block; width: auto; align-self: center; margin: 6px 0 4px; padding: 6px 14px; background: #001418; border: 1px solid #00d4e8aa; border-radius: 6px; color: #00d4e8; font-family: monospace; font-size: 12px; cursor: pointer; box-sizing: border-box; } /* Licznik czasu symulacji nad suwakiem predkosci ("t = 0.00 dni | ...") - na telefonie zbedny balast zajmujacy miejsce, ta sama informacja (data/godzina) jest juz widoczna w #info wyzej. */ #timeDisplay { display: none; } /* Faza 2 (v3.40.x): wyrazne rozdzielenie dwoch wierszy daty (juliansko-gregorianski i biblijny) - na waskim ekranie telefonu zlewaly sie ze soba wizualnie. Rozmiar czcionki: po probach 19px (za duze), 17px (troche za duze), 16px (za male) - 16.5px jako wartosc posrednia. UWAGA: to JEDYNA reguła font-size dla tych dwóch selektorów w tym pliku (wcześniejsza próba zmniejszenia w innym bloku @media wyżej okazała się martwym kodem - ta sama specyficzność + późniejsza kolejność w pliku = ta reguła zawsze wygrywała). Jeśli kiedyś trzeba będzie zmienić rozmiar tych dwóch wierszy, to WYŁĄCZNIE tutaj. */ #calDatePanel, #calBiblicalPanel { font-size: 15px; } #calBiblicalPanel { margin-top: 10px; } /* ================================================================ Faza 2 (v3.40.x): Odeh/Yallop/tryb czasu + "Skocz do daty" jako JEDEN rzad ikonek na SAMYM DOLE panelu #info (bez tekstu), podobnie jak ikonki #mobileTabBar na dole ekranu. #mobileDateJumpBtn jest fizycznie przenoszony (prawdziwy wezel DOM, z juz podpietymi listenerami - patrz js/ui/mobile-datejump.js) do wnetrza #timeModeRow, zeby byl NAPRAWDE w tym samym kontenerze flex co pozostale 3 ikony (nie tylko wizualnie obok dzieki "order" - to dawaloby dwa osobne wiersze w kolumnie #info, bo #mobileDateJumpBtn byl osobnym elementem-siostra, a nie dzieckiem #timeModeRow). Na desktopie ta sama zmiana w DOM nie ma znaczenia - #mobileDateJumpBtn ma tam i tak display:none (patrz base.css). */ #timeModeRow { order: 90; gap: 14px; margin-top: 10px; } #timeModeRow .cal-row-label { display: none; } /* Wyłącznik paneli bocznych (#sidePanelsToggle) jest tylko na desktopie. Na telefonie panele (pasek zakładek) są zawsze dostępne, więc przełącznik jest tu zbędny - ukryty. Stan "panele włączone" na telefonie wymusza też js/ui/side-panels-toggle.js (m.in. po zwężeniu okna z desktopu z wyłączonymi panelami). */ #sidePanelsToggle { display: none !important; } .cal-toggle { width: 34px; height: 34px; border-radius: 8px; position: relative; } .cal-toggle .cal-toggle-knob { /* Kropka-suwak z wersji desktopowej nie pasuje do kwadratowej ikony - ukryta, stan on/off pokazuje samo tlo (patrz .cal-toggle.on w base.css: zielone tlo gdy wlaczone). */ display: none; } /* Symbole O / Y (Odeh / Yallop) to ikony SVG (.cal-toggle-icon, w HTML - nie tekst z ::before), rysowane w tej samej ramce 3..21 viewBox 24 co zegar, SYNCHRO i kalendarz. Dzieki temu maja ten sam rozmiar optyczny (18px => 13,5px) i sa wysrodkowane geometrycznie, a nie zaleznie od metryk czcionki (dawne litery 15px z ::before byly mniejsze i wypadaly nieco za wysoko/nisko). Przelaczanie (aria-checked, klasa .on) dziala bez zmian. */ .cal-toggle-icon { display: block; color: #cdeef5; /* Wszystkie ikony rzedu (O, Y, zegar, SYNCHRO, kalendarz) w tym samym rozmiarze 18px - zegar mial dotad 16px. */ width: 18px; height: 18px; } /* "Skocz do daty" - tylko ikona, bez tekstu, w tym samym kwadratowym formacie co przelaczniki powyzej. */ #mobileDateJumpBtn { width: 34px; height: 34px; margin: 0; padding: 0; font-size: 16px; display: flex; align-items: center; justify-content: center; } #mobileDateJumpBtn .mdj-label { display: none; } /* Czerwony SYNCHRO (v3.42.0) - ten sam kwadrat 34x34 co pozostale ikony rzedu, w kolorze czerwonym. */ #mobileSyncBtn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; background: #1c0707; border: 1px solid #ff4d4dcc; border-radius: 6px; color: #ff4d4d; cursor: pointer; box-sizing: border-box; } #mobileSyncBtn:disabled { opacity: 0.4; cursor: default; } #mobileTabBar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 52px; z-index: 40; background: #0a0a0a; border-top: 1px solid #00d4e844; justify-content: space-around; align-items: center; padding: 0 4px; box-sizing: border-box; } #mobileTabBar .mobile-tab-btn { flex: 1 1 0; max-width: 60px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; background: transparent; border: none; border-radius: 8px; color: #5ab8cc; cursor: pointer; -webkit-tap-highlight-color: transparent; } #mobileTabBar .mobile-tab-btn:focus-visible { outline: 1px solid #00d4e8; outline-offset: -1px; } #mobileTabBar .mobile-tab-btn.active { background: #123a42; color: #00d4e8; } /* #controls (pasek odtwarzania) przesuniety w gore o wysokosc paska zakladek (52px) + odstep - NADPISUJE "bottom: 10px" z wczesniejszego bloku w tym samym pliku (kolejnosc w obrebie jednego pliku wystarcza, bez !important, przy tej samej specyficznosci selektora). */ #controls { bottom: 62px; } } /* Ekran startowy (#startupOverlay) na wąskich ekranach: komunikaty etapów (np. "Obliczanie pozycji astronomicznych (Słońce, Księżyc, Wenus)…") są dłuższe niż szerokość telefonu, więc bez ograniczenia #startupBox zajmował całą szerokość ekranu, a tekst łamał się od krawędzi do krawędzi. Tu: węższa kolumna wyśrodkowana na ekranie, tekst łamany równo (text-wrap: balance - w starszych przeglądarkach po prostu zwykłe łamanie) i stała, dwuliniowa wysokość komunikatu etapu - dzięki temu spinner i pasek nie "skaczą" w pionie, gdy komunikat zmienia się z jednej linii na dwie. Reguły dotyczą tylko szerokości (max-width), nie wysokości, żeby szeroki, ale niski desktopowy widok nie dostał niepotrzebnego łamania. Komunikat "brak WebGL" (core-bootstrap.js, showWebglUnavailableMessage) ustawia własny max-width/min-height/line-height inline - te wygrywają. */ @media (max-width: 700px) { #startupOverlay { padding: 0 24px; box-sizing: border-box; } #startupBox { max-width: min(100%, 290px); } #startupTitle, #startupStage { text-wrap: balance; overflow-wrap: anywhere; } #startupStage { line-height: 1.4; min-height: 2.8em; } }