/* TLK Backup Manager — Veeam-style tema */ :root { --bg: #0a0e13; --surface: #141a22; --surface-2: #1c232d; --surface-3: #232c38; --border: #2a323e; --border-strong: #3a4554; --text: #e6e9ee; --muted: #8893a4; --muted-2: #6b7585; --primary: #54B948; --primary-hover: #6ECC60; --primary-soft: rgba(84, 185, 72, 0.14); --primary-strong: #3F9C35; --danger: #e74c3c; --danger-soft: rgba(231, 76, 60, 0.14); --warn: #f39c12; --warn-soft: rgba(243, 156, 18, 0.14); --ok: #34C759; --info: #4a9eff; --topbar-h: 48px; --sidebar-w: 232px; /* Border radius scale — modern UI: gumbi 8, cards/inputs 8, modali 12 */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; /* Shadow scale za hover/focus states */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 12px 32px rgba(0,0,0,0.20); /* Easing — sve micro-interakcije koriste isti curve */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Typography scale */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; /* Z-index scale */ --z-toast: 2000; --z-modal: 1500; --z-dropdown: 1100; } html[data-theme="light"] { --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); } /* Light tema — primijeni preko data-theme atributa na . Toggle je u topbar-u; preferenca u localStorage('tlk_theme'). */ html[data-theme="light"] { --bg: #f3f5f9; --surface: #ffffff; --surface-2: #eef1f6; --surface-3: #e1e6ee; --border: #d1d8e1; --border-strong: #a8b1bd; --text: #1a202c; --muted: #5a6a7e; --muted-2: #8a96a8; --primary-soft: rgba(84, 185, 72, 0.18); --danger-soft: rgba(231, 76, 60, 0.10); } html[data-theme="light"] body { color-scheme: light; } html[data-theme="light"] .code-block, html[data-theme="light"] code { background: #f5f7fa; color: #1a202c; border-color: #e1e6ee; } html[data-theme="light"] pre, html[data-theme="light"] textarea { background: #f5f7fa; color: #1a202c; } html[data-theme="light"] input, html[data-theme="light"] select { background: #ffffff; color: #1a202c; border-color: #d1d8e1; } html[data-theme="light"] .progress-bar { background: #e1e6ee; } html[data-theme="light"] .progress-text { color: #1a202c; text-shadow: 0 1px 2px rgba(255,255,255,0.7); } html[data-theme="light"] .badge-unknown { background: #e1e6ee; color: #5a6a7e; } html[data-theme="light"] .modal { background: rgba(0, 0, 0, 0.35); } /* Topbar ima hardkodiran tamni gradijent (vidi .app-topbar) — bez ovog overridea je u light temi brand tekst (var(--text) = taman) bio nevidljiv na tamnoj podlozi. */ html[data-theme="light"] .app-topbar { background: linear-gradient(to bottom, #ffffff 0%, #f3f5f9 100%); } /* Theme toggle button u topbar-u */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 4px 10px; border-radius: var(--r-md); font-size: 14px; margin-right: 8px; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--surface-2); border-color: var(--primary); } /* Vrsta backupa — kartice s opisom (job wizard). Dvije opcije, uvijek vidljivi opisi; zamjena za dropdown koji je u modalu radio overlay probleme. */ .type-pick { display: flex; flex-direction: column; gap: 8px; } .type-pick-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; transition: border-color .12s, background .12s; } .type-pick-card:hover { border-color: var(--border-strong); background: var(--surface-2); } .type-pick-card.active { border-color: var(--primary); background: var(--primary-soft); } .type-pick-title { font-weight: 600; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 7px; } .type-pick-title [data-lucide], .type-pick-title .lucide { width: 15px; height: 15px; color: var(--primary); flex: none; } .type-pick-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; background: var(--primary); color: #fff; padding: 1px 8px; border-radius: 999px; } .type-pick-desc { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 3px; } /* "O proizvodu" link u topbaru — na uskim ekranima ostaje samo ikona */ .topbar-about-text { font-size: var(--text-sm); } @media (max-width: 700px) { .topbar-about-text { display: none; } } /* Custom dropdown — alternativa native