/* Light teema (vaikimisi) */ :root { --ring: 0 0% 9%; --bg: #f8fafc; /* taust hele */ --fg: #0f172a; /* tekst hele */ --muted: #6b7280; --card: #ffffff; --ok: #10b981; --warn: #f59e0b; --danger: #ef4444; } /* Dark teema: kui saab class="dark" */ html.dark { --bg: #0b1020; --fg: #e5e7eb; --muted: #9ca3af; --card: #12172a; } html { scroll-behavior:smooth } body { background: var(--bg); color: var(--fg); } a,button { transition: all .2s ease } .card { background: var(--card); border: 1px solid rgba(15,23,42,.12); border-radius: 14px; box-shadow: 0 6px 20px rgba(2,6,23,.06); } html.dark .card { border-color: rgba(148,163,184,.18); box-shadow: 0 6px 20px rgba(0,0,0,.25); } .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:10px; border:1px solid rgba(15,23,42,.1); font-weight:600; } .btn-primary { background:#0f172a; color:#fff } .btn-primary:hover { transform: translateY(-1px) scale(1.01); box-shadow:0 10px 24px rgba(15,23,42,.18)} .btn-ghost { background:transparent; color:inherit; border-color: rgba(148,163,184,.3); } .btn-ghost:hover { background:rgba(148,163,184,.12) } .badge { font-size:.75rem; padding:.2rem .5rem; border-radius:.5rem; background:#f1f5f9; color:#0f172a; border:1px solid rgba(15,23,42,.06); } html.dark .badge { background:#0f172a; color:#e5e7eb; border-color: rgba(148,163,184,.24); } .progress { position:relative; height:14px; background:#e5e7eb; border-radius:999px; overflow:hidden; border:1px solid rgba(15,23,42,.06); } .progress > .bar { height:100%; background: linear-gradient(90deg,#0ea5e9,#22c55e); width: var(--w,0%); transition: width .4s ease; } .progress .label { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); font-size:.7rem; opacity:.7; color: #0f172a; } html.dark .progress { background:#1f2937; border-color: rgba(148,163,184,.2); } html.dark .progress .label { color: #e5e7eb; } .flash { padding:.65rem .8rem; border-radius:.75rem; font-size:.9rem } .flash-ok { background:#ecfeff; color:#155e75; border:1px solid #a5f3fc } .flash-err{ background:#fff1f2; color:#7f1d1d; border:1px solid #fecaca } html.dark .flash-ok { background:#0b3a40; color:#a5f3fc; border-color:#155e75; } html.dark .flash-err{ background:#3b0a0e; color:#fecaca; border-color:#7f1d1d; } .mono { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace } /* --- Dark mode Tailwind overrides (loetavuse jaoks) --- */ html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: #e5e7eb !important; } /* pealkirjad/tekst heledaks */ html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-slate-500 { color: #cbd5e1 !important; } html.dark .text-slate-400 { color: #94a3b8 !important; } html.dark .text-slate-300 { color: #94a3b8 !important; } /* väikesed hallid sildid ja meta */ html.dark .text-xs { color: #cbd5e1 !important; } /* piirjooned/eraldajad veidi heledamaks */ html.dark .border, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: rgba(148,163,184,.28) !important; } /* sisendväljad */ html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="password"], html.dark textarea, html.dark select { background: #0b1224 !important; color: #e5e7eb !important; border-color: rgba(148,163,184,.28) !important; } /* linkide hover */ html.dark a:hover { color: #f1f5f9 !important; } /* nupud “ghost” paremini nähtavaks */ html.dark .btn-ghost { border-color: rgba(148,163,184,.35) !important; } html.dark .btn-ghost:hover { background: rgba(148,163,184,.14) !important; } /* --- Dark mode fixes: "kastid" ja sisutekst --- */ /* 1) Kõik "bg-white" kastid tumedaks */ html.dark .bg-white { background-color: #0f172a !important; } /* 2) Kaartide sees olgu vaikimisi hele tekst */ html.dark .card { color: var(--fg) !important; } /* 3) Tailwindi tumedad tekstiklassid heledamaks tumerežiimis */ html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: #e5e7eb !important; } html.dark .text-slate-600, html.dark .text-slate-500 { color: #cbd5e1 !important; } html.dark .text-slate-400, html.dark .text-slate-300 { color: #94a3b8 !important; } /* 4) Sisendväljad ja placeholderid */ html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="password"], html.dark textarea, html.dark select { background: #0b1224 !important; color: #e5e7eb !important; border-color: rgba(148,163,184,.28) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8 !important; } /* 5) Piirjooned/eraldused heledamaks */ html.dark .border, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: rgba(148,163,184,.28) !important; } /* 6) “details” sisu kast tumele taustale (kuna me kasutame bg-white seal) */ html.dark details.bg-white { background-color: #0f172a !important; } /* 7) “btn-ghost” nähtavamaks */ html.dark .btn-ghost { border-color: rgba(148,163,184,.35) !important; } html.dark .btn-ghost:hover { background: rgba(148,163,184,.14) !important; } /* --- DARK MODE: jõuline loetavuse fix --- */ html.dark body, html.dark main, html.dark header, html.dark footer { color: #e5e7eb !important; } /* Kõigi kaartide sees tekst heledaks (sh pealkirjad, labelid jne) */ html.dark .card, html.dark .card * { color: #e5e7eb !important; } /* Linkide vaikimisi värv tumedal taustal */ html.dark a { color: #e5e7eb !important; } html.dark a:hover { color: #f8fafc !important; } /* Ghost-nuppude raam ja hover taust veidi nähtavamaks */ html.dark .btn-ghost { border-color: rgba(148,163,184,.5) !important; } html.dark .btn-ghost:hover { background: rgba(148,163,184,.18) !important; } /* Sisendite värvid/placeholderid (et vormide tekst loetaks) */ html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="password"], html.dark textarea, html.dark select { background: #0b1224 !important; color: #e5e7eb !important; border-color: rgba(148,163,184,.35) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8 !important; } /* “bg-white” elemendid tumedaks (nt detailid/kaardid) */ html.dark .bg-white { background-color: #0f172a !important; }