/* ============================================================
Finansometr – Globalny arkusz stylów
Plik: assets/css/styles.css
Uzupełnia Tailwind CSS v4 o rzeczy, których nie ma sensu
robić klasami utility: animacje wejścia, dekoracyjne
pseudo-elementy, komponenty powtarzalne w wielu miejscach.
Kolory marki (bg-brand, bg-magenta, text-lime itd.) są
zdefiniowane w includes/head.php wewnątrz bloku @theme.
============================================================ */
/* ============================================================
0. ZMIENNE KOLORÓW (fallback)
Tailwind v4 sam wystawia te zmienne w :root przez @theme,
ale browser-CDN robi to asynchronicznie – zanim zdąży,
nasze własne klasy (.hist-row-amount, .kat-trans-row-amount)
renderują się z niezdefiniowanym var() i wpadają na kolor
odziedziczony (biały). Dlatego duplikujemy je tutaj –
to nasz "safety net" dla zewnętrznego CSS.
============================================================ */
:root {
--color-brand: #8537FD;
--color-brand-strong: #6e22e8;
--color-magenta: #E837FD;
--color-lime: #AFFD37;
--color-yellow: #FDE837;
--color-cyan: #37C8FD;
--color-danger: #FF4757;
--color-surface: #181818;
--color-surface-2: #1C1C1C;
}
/* ============================================================
1. BAZA – font i tło aplikacji
Tło ustawiamy tutaj, żeby nie trzeba było dopinać klasy
bg-[#0C0C0C] na każdym .
============================================================ */
html,
body {
font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
background: #0C0C0C;
color: #ffffff;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
/* Blokada pinch-zoom/double-tap-zoom na całej aplikacji.
touch-action: manipulation = zezwalamy tylko na scroll i kliknięcia,
blokujemy gest 2-palcowego zoomu i szybkiego double-tap zoomu.
Chrome/Safari automatycznie eliminują też 300ms opóźnienie kliku. */
touch-action: manipulation;
-webkit-text-size-adjust: 100%; /* iOS nie powiększa tekstu po obrocie */
}
/* Input / textarea / select – zero zoomu przy focusie na iOS.
iOS Safari zoomuje jak font-size < 16px, więc wymuszamy minimum 16px
(`user-scalable=no` w viewport to nie zawsze wystarcza, w niektórych
buildach iOS obchodzi ten flag). */
input, textarea, select {
font-size: 16px;
}
input[type="date"], input[type="time"], input[type="datetime-local"] {
font-size: 16px;
}
/* Przyciski/tapowalne elementy – bez 300ms opóźnienia i bez double-tap-zoom */
button, a, [role="button"], [data-bs-open], [data-bs-close] {
touch-action: manipulation;
}
/* Usuwamy domyślny niebieski highlight tapnięć na iOS */
a,
button,
[role="button"] {
-webkit-tap-highlight-color: transparent;
}
/* ============================================================
1a. SEMANTYCZNE KOLORY TEKSTU (dublujemy Tailwinda)
Duplikujemy kolory tekstu marki tutaj, na wypadek gdyby
browser-CDN Tailwinda v4 nie zdążył zarejestrować klas
text-danger / text-lime / text-brand przed pierwszym
renderem. Dzięki temu kwoty wydatków (text-danger) i
dochodów (text-lime) zawsze mają właściwy kolor.
============================================================ */
.text-danger { color: var(--color-danger); }
.text-lime { color: var(--color-lime); }
.text-brand { color: var(--color-brand); }
.text-magenta { color: var(--color-magenta); }
.text-yellow { color: var(--color-yellow); }
.text-cyan { color: var(--color-cyan); }
/* ============================================================
2. WRAPPER APLIKACJI – max 480px na środku ekranu
Cały UI aplikacji jest mobile-first. Na większych ekranach
środkuje się w tej kolumnie – dokładnie jak widok
w PWA/Capacitor po wrappingu.
============================================================ */
.app-shell {
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
position: relative;
}
/* ============================================================
3. ANIMACJE WEJŚCIA
Zachowujemy takie same nazwy klas jak wcześniej (anim-1,
anim-2 itd.), żeby HTML pozostał zwięzły i żeby nie trzeba
było rozpinać opóźnień inline.
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes heroSlide {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes logoIn {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes barGrow {
from { width: 0 !important; }
}
/* Klasy z opóźnieniami – kaskadowe wejście elementów */
.anim-logo { animation: logoIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.anim-hero { animation: heroSlide 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-success { animation: scaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.anim-1 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.anim-2 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.anim-3 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.anim-4 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.anim-5 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.anim-6 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.anim-7 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }
.anim-8 { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }
/* Alternatywne opóźnienia używane na dashboardzie */
.anim-fade-1 { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.anim-fade-2 { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.anim-fade-3 { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.anim-fade-4 { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.anim-fade-5 { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }
.anim-nav { animation: fadeIn 0.5s ease 0.55s both; }
/* Animacja wyjeżdżających pasków kategorii na dashboardzie */
.bar-animated {
animation: barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
/* ============================================================
4. SAFE-AREA HELPERS (iOS notch / home indicator)
Używane jako klasy pomocnicze, bo arbitrary values
w Tailwindzie z env() bywają niewygodne przy max().
============================================================ */
.pt-safe { padding-top: max(48px, env(safe-area-inset-top, 0px)); }
.pt-safe-sm { padding-top: max(24px, env(safe-area-inset-top, 0px)); }
.pb-safe { padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
/* 70px = wysokość dolnej belki + 32px bufor, żeby scrolowana treść nie
kończyła się milimetr pod navbarem (było zbyt ciasno). */
.pb-safe-nav { padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
/* ============================================================
5. HERO – dekoracyjne kółka
Użycie:
Dodaje dwa miękkie, półprzezroczyste kółka w rogach nagłówka.
============================================================ */
.hero-decorated {
position: relative;
overflow: hidden;
}
.hero-decorated::before,
.hero-decorated::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
pointer-events: none;
}
.hero-decorated::before {
width: 260px;
height: 260px;
top: -110px;
right: -70px;
}
.hero-decorated::after {
width: 160px;
height: 160px;
bottom: -60px;
left: -50px;
}
/* ============================================================
6. STANDARDOWY INPUT Z IKONĄ
Wygląd identyczny w login / register / reset / settings.
Ikona jest osobnym