/* * ios26-v2.css — Liquid Glass theme for Vilda Clinic PWA * * This file is a revised version of ios26.css. It incorporates fixes for * inputs becoming unresponsive when using backdrop-filter blur effects. * Instead of applying blur directly to elements, we set a * semi‑opaque background and maintain border radius. Other styles are * identical to the original ios26.css. */ /* Begin copy of ios26.css */ /* ios26.css — Liquid Glass theme for Vilda Clinic PWA * * Ten arkusz stylów wprowadza wygląd inspirowany systemem iOS 26 * (tzw. Liquid Glass). Zastosowane klasy i zmienne są aktywne tylko, * gdy element posiada klasę `.liquid-ios26`. Dzięki temu * można łatwo włączyć lub wyłączyć styl bez modyfikacji istniejących * struktur HTML. Aby włączyć tryb, skrypt ios26-ui.js dodaje * klasę .liquid-ios26 na body po załadowaniu strony. */ :root { /* Domyślne kolory szkła w trybie jasnym */ --lg-surface-light: rgba(255, 255, 255, 0.18); --lg-surface-dark: rgba(0, 0, 0, 0.18); --lg-border: rgba(255, 255, 255, 0.32); --lg-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); --lg-radius: 18px; /* Akcent koloru – korzysta z istniejącej zmiennej --primary, jeśli jest zdefiniowana */ --lg-accent: var(--primary, #00838d); } /* Warianty ciemnego motywu */ @media (prefers-color-scheme: dark) { :root { --lg-surface-light: rgba(255, 255, 255, 0.14); --lg-surface-dark: rgba(0, 0, 0, 0.22); --lg-border: rgba(255, 255, 255, 0.28); } } /* Podstawowe dostosowanie safe‑area dla iOS */ body.liquid-ios26 { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } /* Przyciemniona belka za paskiem statusu – poprawia kontrast białych ikon status bara */ body.liquid-ios26::before { content: ""; position: fixed; inset: 0 auto auto 0; height: env(safe-area-inset-top); width: 100%; background: rgba(0, 0, 0, 0.22); pointer-events: none; z-index: 1000; } /* Szklane powierzchnie */ .liquid-ios26 ._glass { background: var(--lg-surface-light); border: 1px solid var(--lg-border); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow); position: relative; } /* Refleks świetlny w górnej części szkła */ .liquid-ios26 ._glass::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)); border-top-left-radius: inherit; border-top-right-radius: inherit; pointer-events: none; } /* Fallback gdy blur nie jest obsługiwany */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .liquid-ios26 ._glass { background: rgba(255, 255, 255, 0.5); } } /* Nagłówek w trybie Liquid Glass */ .liquid-ios26 header { background: var(--lg-surface-light) !important; color: #111 !important; border-bottom: 1px solid var(--lg-border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 0 0 var(--lg-radius) var(--lg-radius); box-shadow: var(--lg-shadow); position: sticky; top: 0; z-index: 900; } /* Cień dla logo w nagłówku */ .liquid-ios26 header img { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Karty, sekcje i fieldsety – szklane tło */ .liquid-ios26 .card, .liquid-ios26 .plan-card, .liquid-ios26 .result-card, .liquid-ios26 .data-card, .liquid-ios26 fieldset, .liquid-ios26 #timesCard, .liquid-ios26 #intakeCard { background: var(--lg-surface-light) !important; border: 1px solid var(--lg-border) !important; box-shadow: var(--lg-shadow) !important; border-radius: var(--lg-radius) !important; backdrop-filter: blur(14px) saturate(115%) !important; -webkit-backdrop-filter: blur(14px) saturate(115%) !important; } /* Ramki wyników – lekko wypełnione szkło z akcentem */ .liquid-ios26 .result-box { background: rgba(255, 255, 255, 0.55); border-color: var(--lg-accent) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* Przyciski bazowe – szklane kapsułki */ .liquid-ios26 button, .liquid-ios26 input[type="button"], .liquid-ios26 input[type="submit"] { background: rgba(255, 255, 255, 0.20) !important; border: 1px solid var(--lg-border) !important; color: #111 !important; border-radius: 14px !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important; transition: transform 120ms ease, box-shadow 120ms ease, background-color 150ms ease !important; } /* Wersja akcentowa (przykład: główne CTA) – domieszka koloru akcentu */ .liquid-ios26 .btn-accent { background: color-mix(in srgb, var(--lg-accent) 40%, transparent) !important; color: #fff !important; } /* Efekt przycisku wciśniętego */ .liquid-ios26 button._pressed { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; } /* Szklany wygląd przycisków IGF – nadpisuje dotychczasowy żółty kolor */ .liquid-ios26 #toggleIgfTests, .liquid-ios26 #toggleSnp, .liquid-ios26 #toggleTurner, .liquid-ios26 #togglePws, .liquid-ios26 #toggleSga, .liquid-ios26 #toggleIgf1, .liquid-ios26 #toggleAbxTherapy { background: rgba(255, 255, 255, 0.20) !important; border: 1px solid var(--lg-border) !important; color: #111 !important; /* * Center the label inside IGF buttons when Liquid Glass is active. * These buttons receive the `.btn-icon` class dynamically (see ios26-ui.js), * which changes their display to `inline‑flex` and leaves content left‑aligned * by default. Without overriding the flex alignment, the long label * “Leczenie hormonem wzrostu / IGF‑1” appears flush to the left edge. * Setting `justify-content: center` ensures the text (and any optional icons) * are centered within the button’s available width. */ justify-content: center; } /* * Aktywna ramka dla przycisków rozwijających sekcje. * * W trybie Liquid Glass, kiedy użytkownik otwiera listę testów * (np. „Testy w endokrynologii” lub poszczególne podlisty GH/OGTT/ACTH) * albo kartę terapii GH/IGF‑1, chcemy podkreślić aktywny stan * przycisku poprzez zmianę koloru jego ramki na delikatny turkusowy. * Dodajemy do przycisku klasę `.active-toggle` w kodzie JS, a * poniższe reguły ustawiają jasny kolor obramowania z wykorzystaniem * zmiennej `--brand-light`, która definiuje jaśniejszy wariant * firmowego turkusu. Użycie `!important` pozwala nadpisać * domyślne ustawienia tła i obramowania przycisków Liquid Glass. */ .liquid-ios26 .active-toggle { border-color: var(--brand-light) !important; } /* * Specjalne nadpisanie koloru obramowania dla przycisku * „Leczenie hormonem wzrostu / IGF‑1” (oraz jego podprzycisków) w trybie * Liquid Glass. W bazowej definicji (.liquid-ios26 #toggleIgfTests) ustawiamy * całe obramowanie z kolorem var(--lg-border) przy użyciu !important. Z tego * powodu reguła .active-toggle (klasowa) nie jest wystarczająco specyficzna, * aby nadpisać kolor ramki. Dodając poniższą regułę z selektorem ID oraz * klasą .active-toggle zapewniamy wyższą specyficzność, dzięki czemu kolor * turkusowy (var(--brand-light)) zostanie zastosowany, gdy przycisk lub * jego podprzyciski są aktywne. */ .liquid-ios26 #toggleIgfTests.active-toggle, .liquid-ios26 #toggleSnp.active-toggle, .liquid-ios26 #toggleTurner.active-toggle, .liquid-ios26 #togglePws.active-toggle, .liquid-ios26 #toggleSga.active-toggle, .liquid-ios26 #toggleIgf1.active-toggle { border-color: var(--brand-light) !important; } /* * Dodatkowe style dla modułu antybiotykoterapii. * * Przyciski „Antybiotykoterapia”, „Nazwa handlowa”, „Zalecenia do wklejenia” * oraz poszczególne nazwy handlowe leków powinny otrzymać takie same * szklane obramowanie jak przyciski pozostałych modułów. Dodajemy * odpowiednie reguły, aby ustawić domyślne obramowanie i kolor tła oraz * zapewnić turkusową ramkę po dodaniu klasy `.active-toggle` w JavaScript. */ /* Szklany wygląd dla przycisków wyboru nazwy handlowej i kopiowania zaleceń oraz dla listy nazw handlowych. Ustawiamy obramowanie i tło podobne do przycisku głównego, ponieważ bez obramowania nie byłoby widać koloru ramki po nadaniu klasy `.active-toggle`. */ .liquid-ios26 #abxBrandToggle, .liquid-ios26 #abxCopyRec, .liquid-ios26 .abx-brand-option { background: rgba(255, 255, 255, 0.20) !important; border: 1px solid var(--lg-border) !important; color: #111 !important; border-radius: 14px !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important; transition: transform 120ms ease, box-shadow 120ms ease, background-color 150ms ease !important; } /* Podświetlenie turkusową ramką po wybraniu przycisku lub nazwy handlowej. */ .liquid-ios26 #abxBrandToggle.active-toggle, .liquid-ios26 #abxCopyRec.active-toggle, .liquid-ios26 .abx-brand-option.active-toggle { border-color: var(--brand-light) !important; } /* * Nadpisanie koloru obramowania dla przycisku „Antybiotykoterapia” w trybie * Liquid Glass. Podobnie jak w przypadku przycisku IGF, bazowa reguła * #toggleAbxTherapy ustawia całe obramowanie z kolorem var(--lg-border) * z użyciem !important. Aby umożliwić zmianę koloru ramki na turkusową, * musimy dodać bardziej specyficzny selektor z klasą .active-toggle. */ .liquid-ios26 #toggleAbxTherapy.active-toggle { border-color: var(--brand-light) !important; } /* Przycisk z ikoną – wyrównanie elementów i rozstawienie ikony od tekstu */ .liquid-ios26 .btn-icon { display: inline-flex; align-items: center; gap: 0.5rem; } .liquid-ios26 .btn-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; } /* Animacje wejścia – używane przez ios26-ui.js */ @keyframes ios-enter { 0% { opacity: 0; transform: translateY(18px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ios-pop { 0% { transform: scale(0.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes ios-bounce-in { 0% { transform: translateY(-16px); opacity: 0; } 60% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(0); } } /* Klasy animacji dla pojawiających się elementów */ .liquid-ios26 ._enter { animation: ios-enter 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .liquid-ios26 ._pop { animation: ios-pop 240ms ease-out both; } .liquid-ios26 ._bounce { animation: ios-bounce-in 360ms cubic-bezier(0.2, 1, 0.2, 1) both; } /* Wyłącz animacje dla użytkowników preferujących redukcję ruchu */ @media (prefers-reduced-motion: reduce) { .liquid-ios26 ._enter, .liquid-ios26 ._pop, .liquid-ios26 ._bounce { animation: none !important; } } /* Formularze – półprzezroczyste pola z lekkim rozmyciem * * UWAGA: W tej wersji rezygnujemy z blur na ach, ponieważ * niektóre przeglądarki miały problem z przyjmowaniem znaków w * polach typu number/text, gdy była zastosowana właściwość * backdrop-filter. Zamiast tego, dajemy solidne tło o delikatnej * przezroczystości, aby nadal komponowały się z motywem. */ .liquid-ios26 input[type="text"], .liquid-ios26 input[type="number"], .liquid-ios26 select { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; /* Nie stosujemy blur ani backdrop-filter na polach formularza */ } /* Nagłówki – subtelne kerning */ .liquid-ios26 h1, .liquid-ios26 h2, .liquid-ios26 h3 { letter-spacing: -0.015em; } /* Dodatkowe zmiany dla card result numbers */ .liquid-ios26 .result-number small { opacity: 0.8; } /* End copy of ios26.css */ /* === FIXES 2025-09-17 – Color and Visibility Adjustments === */ /* * Zapewnij spójny kolor dla przycisku „Generuj siatkę centylową” (#generateCentileChartAdv) * w motywie Liquid Glass. Motyw domyślnie rozjaśnia przyciski do białego i ustawia czarny * tekst; poniższa reguła wykorzystuje ID przycisku, aby nadać mu turkusowe tło * (var(--primary)) i białą czcionkę, tak jak w przycisku rozwijającym sekcję. * Użycie !important nadpisuje domyślne style Liquid Glass. */ .liquid-ios26 #generateCentileChartAdv{ background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* * Zachowaj czerwony kolor ikon „×” (button.icon) również w trybie Liquid Glass. * Domyślne style Liquid Glass zmieniają kolor tekstu przycisków na czarny, * co powodowało, że znaki X były niewidoczne. Ta reguła wymusza kolor * var(--danger) z priorytetem. */ .liquid-ios26 button.icon{ color: var(--danger) !important; } /* ==== Antibiotic Therapy Alerts – Force Red Color ==== */ /* Zmiana koloru wszystkich alertów w module Antybiotykoterapia na czerwony. * Element #abxNote (o klasie .muted) służy do wyświetlania komunikatów i ostrzeżeń. * Nadpisujemy domyślny kolor klasy .muted, ustawiając go na var(--danger) czyli czerwony. * !important zapewnia pierwszeństwo nad globalnymi stylami .muted. */ #antibioticTherapyCard #abxNote, #antibioticTherapyCard .muted { color: var(--danger) !important; /* Wyśrodkuj tekst alertów w module antybiotykoterapii */ text-align: center; }