/* ═══════════════════════════════════════════════════════════════════════════ Dark Mode v2 — najemca.pl / wynajmujacy.pl Aktywowany przez data-theme="dark" na . Bootstrap 5.3.8 dark mode aktywowany przez data-bs-theme="dark". ═══════════════════════════════════════════════════════════════════════════ */ /* ─── CSS variables ──────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #070c11; --paper: #0f1825; --surface2: #151f30; --text: #eef2f8; --muted: rgba(238,242,248,.56); --line: rgba(238,242,248,.11); --a1: #FCD34D; /* amber-300 – lepszy kontrast na ciemnym */ --a2: #FCD34D; --a3: #38BDF8; /* sky-400 */ --glow-a: rgba(252,211,77,.18); --glow-b: rgba(56,189,248,.14); --shadow: 0 24px 72px rgba(0,0,0,.60); --radius: 22px; color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════ ANIMOWANE TŁO — Aurora na elemencie background-position aurora na GPU, zero reflow ═══════════════════════════════════════════════════════════════════════════ */ @keyframes aurora { 0%, 100% { background-position: 14% 14%, 82% 82%, 48% 52%, 0 0, 0 0; } 25% { background-position: 20% 7%, 72% 90%, 56% 42%, 0 0, 0 0; } 50% { background-position: 9% 26%, 90% 68%, 43% 60%, 0 0, 0 0; } 75% { background-position: 17% 11%, 76% 86%, 54% 47%, 0 0, 0 0; } } [data-theme="dark"] html { background: radial-gradient(ellipse 900px 620px, rgba(252,211,77,.10), transparent 65%), radial-gradient(ellipse 720px 520px, rgba(56,189,248,.08), transparent 65%), radial-gradient(ellipse 520px 420px, rgba(99,102,241,.055), transparent 65%), linear-gradient(transparent 31px, rgba(238,242,248,.016) 32px), linear-gradient(90deg, transparent 31px, rgba(238,242,248,.012) 32px); background-size: auto, auto, auto, 32px 32px, 32px 32px; background-color: var(--bg); animation: aurora 28s ease-in-out infinite; min-height: 100vh; } /* Body jest przezroczyste — tło pochodzi z */ [data-theme="dark"] body { background: transparent; color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ ANIMACJE KOMPONENTÓW ═══════════════════════════════════════════════════════════════════════════ */ /* Alert: wjazd z góry */ @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Badge akcji: pulsujący blask */ @keyframes badge-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(220,38,38,.25), 0 0 0 0 rgba(220,38,38,.0); } 50% { box-shadow: 0 4px 22px rgba(220,38,38,.50), 0 0 16px 4px rgba(220,38,38,.18); } } /* Przycisk primary: shimmer */ @keyframes btn-shimmer { from { background-position: -200% center; } to { background-position: 200% center; } } /* Toggle: obrót ikony */ @keyframes toggle-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.20); } 100% { transform: rotate(360deg) scale(1); } } /* Hero: delikatny oddech gradientu */ @keyframes hero-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .88; } } /* Card glow border on hover */ @keyframes border-glow { 0%, 100% { border-color: rgba(252,211,77,.28); } 50% { border-color: rgba(252,211,77,.50); } } /* ═══════════════════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .navbar { background: rgba(8,13,20,.85) !important; border-color: rgba(238,242,248,.10) !important; backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 4px 24px rgba(0,0,0,.40), 0 1px 0 rgba(238,242,248,.06) inset; } [data-theme="dark"] .navbar-brand strong, [data-theme="dark"] .nav-link { color: rgba(238,242,248,.92); } [data-theme="dark"] .navbar-toggler { border-color: rgba(238,242,248,.20); } [data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ═══════════════════════════════════════════════════════════════════════════ CARDS — glow na hover ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card { background: rgba(15,24,37,.90); border-color: rgba(238,242,248,.10); box-shadow: 0 8px 32px rgba(0,0,0,.35); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; backdrop-filter: blur(4px); } [data-theme="dark"] .card:hover { border-color: rgba(252,211,77,.18); box-shadow: 0 16px 56px rgba(0,0,0,.50), 0 0 0 1px rgba(252,211,77,.10), 0 0 40px rgba(252,211,77,.06); } [data-theme="dark"] .card-header { border-color: rgba(238,242,248,.08); } /* ═══════════════════════════════════════════════════════════════════════════ PANEL HERO & WS HERO — animate + glow ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .panel-hero { background: radial-gradient(820px 300px at 8% 0%, rgba(56,189,248,.12), transparent 58%), radial-gradient(720px 260px at 82% 8%, rgba(252,211,77,.14), transparent 58%), rgba(15,24,37,.88); border-color: rgba(238,242,248,.11); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(252,211,77,.08) inset; animation: hero-breathe 8s ease-in-out infinite; } [data-theme="dark"] .ws-hero { background: radial-gradient(840px 300px at 10% 0%, rgba(252,211,77,.14), transparent 58%), radial-gradient(840px 300px at 78% 8%, rgba(56,189,248,.12), transparent 58%), rgba(15,24,37,.88); border-color: rgba(238,242,248,.11); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.06) inset; animation: hero-breathe 10s ease-in-out infinite; } [data-theme="dark"] .panel-kicker, [data-theme="dark"] .ws-kicker { color: rgba(238,242,248,.50); letter-spacing: .28em; } [data-theme="dark"] .panel-title, [data-theme="dark"] .ws-title { color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ FEATURE TILES — glow na ikonie przy hover ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .feature-icon { background: rgba(238,242,248,.06); border-color: rgba(238,242,248,.10); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; } [data-theme="dark"] .feature-card:hover .feature-icon { background: rgba(252,211,77,.10); border-color: rgba(252,211,77,.30); box-shadow: 0 0 22px rgba(252,211,77,.22), 0 0 8px rgba(252,211,77,.10); transform: scale(1.08); } [data-theme="dark"] .feature-muted { color: rgba(238,242,248,.52); } [data-theme="dark"] .feature-card:hover { box-shadow: 0 22px 64px rgba(0,0,0,.50), 0 0 0 1px rgba(252,211,77,.10); } /* WS card */ [data-theme="dark"] .ws-meta .badge { background: rgba(15,24,37,.85) !important; border-color: rgba(238,242,248,.14) !important; color: rgba(238,242,248,.82) !important; } /* ═══════════════════════════════════════════════════════════════════════════ MEDIA TILES ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .media-tile { background: rgba(15,24,37,.88); border-color: rgba(238,242,248,.10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } [data-theme="dark"] .media-tile:hover { border-color: rgba(56,189,248,.22); box-shadow: 0 22px 64px rgba(0,0,0,.50), 0 0 24px rgba(56,189,248,.10); } [data-theme="dark"] .media-thumb { background: rgba(238,242,248,.06); } [data-theme="dark"] .media-thumb--placeholder { color: rgba(238,242,248,.42); } /* ═══════════════════════════════════════════════════════════════════════════ TILE ACTION BADGE — pulsująca czerwona poświata ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tile-action-badge { animation: badge-pulse 2.5s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════════ ALERTS — slide-in ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .alert { border-color: rgba(238,242,248,.10); animation: slide-down .28s ease-out both; } [data-theme="dark"] .alert-warning { background: linear-gradient(135deg, rgba(252,211,77,.10), rgba(245,158,11,.06)); border-color: rgba(252,211,77,.30); color: #FDE68A; box-shadow: 0 0 20px rgba(252,211,77,.08); } [data-theme="dark"] .alert-success { background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.06)); border-color: rgba(34,197,94,.30); color: #86EFAC; box-shadow: 0 0 20px rgba(34,197,94,.08); } [data-theme="dark"] .alert-danger { background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(220,38,38,.06)); border-color: rgba(239,68,68,.30); color: #FCA5A5; box-shadow: 0 0 20px rgba(239,68,68,.08); } [data-theme="dark"] .alert-info { background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(14,165,233,.06)); border-color: rgba(56,189,248,.28); color: #7DD3FC; box-shadow: 0 0 20px rgba(56,189,248,.08); } /* Flash-alert overlay — solidne tła w dark mode */ [data-theme="dark"] .flash-alert.alert-success { background: #14532d !important; border-color: #22c55e; color: #86EFAC; } [data-theme="dark"] .flash-alert.alert-danger { background: #7f1d1d !important; border-color: #ef4444; color: #FCA5A5; } [data-theme="dark"] .flash-alert.alert-warning { background: #78350f !important; border-color: #f59e0b; color: #FDE68A; } [data-theme="dark"] .flash-alert.alert-info { background: #1e3a5f !important; border-color: #3b82f6; color: #7DD3FC; } /* ═══════════════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ /* Primary — shimmer na hover */ [data-theme="dark"] .btn-primary { background: linear-gradient(90deg, #1e293b, #38BDF8, #FCD34D, #38BDF8, #1e293b); background-size: 300% auto; background-position: 0% center; border: none; color: #070c11; font-weight: 700; transition: background-position .55s ease, box-shadow .22s ease, transform .18s ease; } [data-theme="dark"] .btn-primary:hover { background-position: 100% center; box-shadow: 0 6px 24px rgba(56,189,248,.30), 0 0 0 1px rgba(252,211,77,.20); color: #070c11; } [data-theme="dark"] .btn-outline-secondary { color: rgba(238,242,248,.82); border-color: rgba(238,242,248,.22); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(238,242,248,.08); border-color: rgba(238,242,248,.32); color: rgba(238,242,248,.96); box-shadow: 0 0 16px rgba(238,242,248,.08); } [data-theme="dark"] .btn-outline-primary { border-color: rgba(56,189,248,.30); color: #7DD3FC; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } [data-theme="dark"] .btn-outline-primary:hover { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.45); color: #BAE6FD; box-shadow: 0 0 18px rgba(56,189,248,.15); } [data-theme="dark"] .btn-outline-danger { color: #FCA5A5; border-color: rgba(239,68,68,.30); } [data-theme="dark"] .btn-outline-danger:hover { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.45); color: #FCA5A5; box-shadow: 0 0 16px rgba(239,68,68,.14); } [data-theme="dark"] .btn-dark { background: rgba(252,211,77,.90); border-color: transparent; color: #070c11; font-weight: 700; } [data-theme="dark"] .btn-dark:hover { background: rgba(252,211,77,1); box-shadow: 0 0 22px rgba(252,211,77,.30); } [data-theme="dark"] .btn-secondary { background: rgba(238,242,248,.10); border-color: rgba(238,242,248,.14); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: rgba(7,12,17,.80); border-color: rgba(238,242,248,.16); color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="dark"] .form-control::placeholder { color: rgba(238,242,248,.30); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: rgba(7,12,17,.92); border-color: rgba(252,211,77,.55); box-shadow: 0 0 0 4px rgba(252,211,77,.12), 0 0 20px rgba(252,211,77,.08); color: var(--text); } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: rgba(238,242,248,.84); } [data-theme="dark"] .form-text { color: var(--muted); } /* ═══════════════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(238,242,248,.025); --bs-table-hover-bg: rgba(238,242,248,.07); --bs-table-color: var(--text); color: var(--text); } [data-theme="dark"] .table > :not(caption) > * > * { border-color: rgba(238,242,248,.07); color: var(--text); transition: background .14s ease; } [data-theme="dark"] .table tbody tr:hover > * { --bs-table-bg-state: rgba(238,242,248,.07); } [data-theme="dark"] .table thead th { color: rgba(238,242,248,.48); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } [data-theme="dark"] .table-light { --bs-table-bg: rgba(238,242,248,.04); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .badge.text-bg-secondary { background: rgba(238,242,248,.12) !important; color: rgba(238,242,248,.80) !important; } [data-theme="dark"] .badge.text-bg-light { background: rgba(238,242,248,.10) !important; color: var(--text) !important; } [data-theme="dark"] .badge.text-bg-dark { background: rgba(252,211,77,.15) !important; color: #FCD34D !important; border: 1px solid rgba(252,211,77,.25); } /* ═══════════════════════════════════════════════════════════════════════════ AUTOCOMPLETE ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ac-menu { background: #111c2c; border-color: rgba(238,242,248,.12); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(252,211,77,.05); } [data-theme="dark"] .ac-item { background: #111c2c; border-color: rgba(238,242,248,.06); } [data-theme="dark"] .ac-item:hover, [data-theme="dark"] .ac-item.is-active { background: rgba(252,211,77,.07); } [data-theme="dark"] .ac-item-title { color: var(--text); } [data-theme="dark"] .ac-item-sub { color: var(--muted); } [data-theme="dark"] .ac-empty, [data-theme="dark"] .ac-loading { color: var(--muted); } [data-theme="dark"] .ac-mark { background: rgba(252,211,77,.28); } /* ═══════════════════════════════════════════════════════════════════════════ MODALS & DROPDOWNS ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .modal-content { background: #111c2c; border-color: rgba(238,242,248,.12); box-shadow: 0 32px 80px rgba(0,0,0,.70); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: rgba(238,242,248,.08); } [data-theme="dark"] .dropdown-menu { background: #111c2c; border-color: rgba(238,242,248,.12); box-shadow: 0 12px 40px rgba(0,0,0,.50); } [data-theme="dark"] .dropdown-item { color: rgba(238,242,248,.82); } [data-theme="dark"] .dropdown-item:hover { background: rgba(252,211,77,.08); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ WS MEMBERS CARD ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ws-members-card .table th { color: var(--muted); } /* ═══════════════════════════════════════════════════════════════════════════ FLATPICKR ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .flatpickr-calendar { background: #111c2c; border-color: rgba(238,242,248,.12); box-shadow: 0 16px 50px rgba(0,0,0,.60); color: var(--text); } [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background: #111c2c; color: rgba(238,242,248,.50); } [data-theme="dark"] .flatpickr-months .flatpickr-month { background: transparent; color: var(--text); fill: var(--text); } [data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-current-month .cur-month, [data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--text); } [data-theme="dark"] .flatpickr-day { color: var(--text); border-color: transparent; } [data-theme="dark"] .flatpickr-day:hover { background: rgba(252,211,77,.10); border-color: rgba(252,211,77,.20); } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.selected:hover { background: var(--a2); border-color: var(--a2); color: #070c11; font-weight: 700; box-shadow: 0 0 14px rgba(252,211,77,.40); } [data-theme="dark"] .flatpickr-day.today { border-color: rgba(252,211,77,.55); } [data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgba(238,242,248,.22); } [data-theme="dark"] .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-next-month svg { fill: var(--text); } [data-theme="dark"] .flatpickr-prev-month:hover svg, [data-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--a2); } [data-theme="dark"] .numInputWrapper input { color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] hr { border-color: rgba(238,242,248,.09); } [data-theme="dark"] .text-muted { color: var(--muted) !important; } [data-theme="dark"] .text-dark { color: var(--text) !important; } [data-theme="dark"] code { color: #FCD34D; background: rgba(252,211,77,.10); padding: 1px 5px; border-radius: 5px; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ═══════════════════════════════════════════════════════════════════════════ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.82); cursor: pointer; padding: 0; flex-shrink: 0; color: #0f172a; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .theme-toggle:hover { background: rgba(15,23,42,.08); box-shadow: 0 0 0 3px rgba(15,23,42,.06); } [data-theme="dark"] .theme-toggle { border-color: rgba(252,211,77,.30); background: rgba(7,12,17,.75); color: #FCD34D; box-shadow: 0 0 14px rgba(252,211,77,.14); } [data-theme="dark"] .theme-toggle:hover { background: rgba(252,211,77,.10); box-shadow: 0 0 20px rgba(252,211,77,.25); border-color: rgba(252,211,77,.50); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Ikona: księżyc w jasnym, słońce w ciemnym */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Animacja obrotu przy kliknięciu */ .theme-toggle.is-spinning svg { animation: toggle-spin .45s cubic-bezier(.34,1.56,.64,1) forwards; } /* ═══════════════════════════════════════════════════════════════════════════ PŁYNNE PRZEJŚCIE MIĘDZY MOTYWAMI ═══════════════════════════════════════════════════════════════════════════ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color .24s ease, background .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease !important; animation-play-state: paused !important; } /* ── Tour / Samouczek ─────────────────────────────────────────────────── */ [data-theme="dark"] .tour-overlay.tour-overlay-dim{ background: rgba(0,0,0,.6); } [data-theme="dark"] .tour-highlight{ box-shadow: 0 0 0 4px var(--a1), 0 0 0 9999px rgba(0,0,0,.6); } [data-theme="dark"] .tour-tooltip{ box-shadow: 0 12px 40px rgba(0,0,0,.45); } /* TASK-OCR-SCANNER */ /* Overlay is dark by design — no dark-mode overrides needed for .ocr-overlay internals */ /* The .ocr-filled flash on form inputs should stay visible in dark mode */ [data-theme="dark"] .ocr-filled { box-shadow: 0 0 0 3px rgba(34,197,94,.45) !important; } /* END TASK-OCR-SCANNER */