/** * SoftMit — Dark Mode CSS * * Ενεργοποιείται όταν . * Override-άρει τα CSS variables και τα hardcoded χρώματα του προγράμματος. */ /* ────── Smooth transition για όλα τα στοιχεία ────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease; } /* ────── TOGGLE BUTTON ────── */ .softmit-theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: #fbbf24; /* sun yellow / moon pale */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; padding: 0; } .softmit-theme-toggle:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(20deg) scale(1.05); } .softmit-theme-toggle:active { transform: scale(0.95); } .softmit-theme-toggle svg { width: 18px; height: 18px; } /* ────── DARK MODE OVERRIDES ────── */ /* Root variables */ html[data-theme="dark"] { --bg1: #020617; --bg2: #0f1729; --bg3: #1e293b; --glass: rgba(30, 41, 59, 0.95); --shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } /* Body background */ html[data-theme="dark"] body { background: radial-gradient(ellipse at 20% 10%, rgba(59, 130, 246, 0.12), transparent 40%), radial-gradient(ellipse at 80% 90%, rgba(99, 102, 241, 0.10), transparent 40%), linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%); color: #e2e8f0; } /* Sidebar */ html[data-theme="dark"] .sidebar-inner { background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #e2e8f0; } html[data-theme="dark"] .logo-wrap { background: #334155 !important; } html[data-theme="dark"] .co-name { color: #93c5fd !important; } html[data-theme="dark"] .ic { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .ic-title { color: #f1f5f9 !important; } html[data-theme="dark"] .ic-icon { background: #1e3a8a !important; color: #93c5fd !important; } html[data-theme="dark"] .ic-text { color: #cbd5e1 !important; } html[data-theme="dark"] .ic-label { color: #64748b !important; } html[data-theme="dark"] .stats-box { background: linear-gradient(135deg, #1e293b, #0f172a) !important; } html[data-theme="dark"] .stats-num { color: #60a5fa !important; } html[data-theme="dark"] .stats-lbl { color: #93c5fd !important; } /* Main / Hero */ html[data-theme="dark"] .hero { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(10px); } html[data-theme="dark"] .hero-title, html[data-theme="dark"] .hero h1 { color: #f1f5f9 !important; } html[data-theme="dark"] .hero-text, html[data-theme="dark"] .hero p { color: #cbd5e1 !important; } /* Module cards (modules grid) */ html[data-theme="dark"] .modules-wrap { background: rgba(30, 41, 59, 0.6) !important; color: #e2e8f0; } html[data-theme="dark"] .mod-header h2 { color: #f1f5f9 !important; } html[data-theme="dark"] .mod-header p { color: #cbd5e1 !important; } html[data-theme="dark"] .mod-count { background: rgba(255, 255, 255, 0.1) !important; color: #cbd5e1 !important; } /* Generic light backgrounds να γίνονται σκοτεινά */ html[data-theme="dark"] .form-card, html[data-theme="dark"] .container, html[data-theme="dark"] [class*="card"]:not(.kpi-card):not(.module-card) { background: #1e293b !important; color: #e2e8f0; } /* KPI Dashboard cards — στο dark mode κρατάμε λίγο πιο φωτεινό */ html[data-theme="dark"] #softmit-kpi-dashboard .kpi-card { background: #1e293b !important; color: #e2e8f0 !important; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-title { color: #cbd5e1 !important; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-main-lbl, html[data-theme="dark"] #softmit-kpi-dashboard .kpi-sub-lbl { color: #94a3b8 !important; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-main-val { /* Διατηρεί το accent χρώμα του */ filter: brightness(1.4); } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-sub-val { color: #f1f5f9 !important; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-subs { border-color: #334155 !important; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-greeting { color: #f1f5f9; } html[data-theme="dark"] #softmit-kpi-dashboard .kpi-subtitle { color: rgba(255, 255, 255, 0.7); } /* Global search modal — αυτόματα δουλεύει σε dark γιατί έχει ήδη backdrop */ html[data-theme="dark"] #softmit-search-modal .sm-panel { background: #1e293b; color: #e2e8f0; } html[data-theme="dark"] #softmit-search-modal .sm-header { border-color: #334155; } html[data-theme="dark"] #softmit-search-modal .sm-input { color: #f1f5f9; } html[data-theme="dark"] #softmit-search-modal .sm-input::placeholder { color: #64748b; } html[data-theme="dark"] #softmit-search-modal .sm-close-btn { background: #334155; color: #cbd5e1; } html[data-theme="dark"] #softmit-search-modal .sm-close-btn:hover { background: #475569; color: #f1f5f9; } html[data-theme="dark"] #softmit-search-modal .sm-hint { color: #94a3b8; } html[data-theme="dark"] #softmit-search-modal .sm-hint-title { color: #f1f5f9; } html[data-theme="dark"] #softmit-search-modal .sm-hint em { background: #422006; color: #fcd34d; } html[data-theme="dark"] #softmit-search-modal .sm-status { color: #94a3b8; } html[data-theme="dark"] #softmit-search-modal .sm-item-title { color: #f1f5f9; } html[data-theme="dark"] #softmit-search-modal .sm-item-subtitle { color: #94a3b8; } html[data-theme="dark"] #softmit-search-modal .sm-item.sm-selected { background: #1e3a8a; } html[data-theme="dark"] #softmit-search-modal .sm-mark { background: #422006; color: #fcd34d; } html[data-theme="dark"] #softmit-search-modal .sm-footer { background: #0f172a; border-color: #334155; color: #94a3b8; } html[data-theme="dark"] #softmit-search-modal .sm-key { background: #1e293b; border-color: #475569; color: #cbd5e1; } /* Search trigger στο topbar */ html[data-theme="dark"] .softmit-search-trigger { background: rgba(30, 41, 59, 0.85); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .softmit-search-trigger .sm-trig-text { color: #94a3b8; } html[data-theme="dark"] .softmit-search-trigger .sm-trig-kbd { background: #0f172a; color: #cbd5e1; border-color: #334155; } html[data-theme="dark"] .softmit-search-trigger:hover { background: #1e293b; } /* Tables */ html[data-theme="dark"] table { background: #1e293b; color: #e2e8f0; } html[data-theme="dark"] th { background: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; } html[data-theme="dark"] td { border-color: #334155 !important; color: #e2e8f0; } html[data-theme="dark"] tr:hover td { background: #334155 !important; } /* Form elements */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #0f172a !important; color: #f1f5f9 !important; border-color: #475569 !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: #3b82f6 !important; outline-color: #3b82f6 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; } html[data-theme="dark"] label { color: #cbd5e1 !important; } /* Generic text overrides */ html[data-theme="dark"] body, html[data-theme="dark"] body p, html[data-theme="dark"] body span:not([class*="badge"]):not([style*="color"]), html[data-theme="dark"] body div:not([style*="color"]) { /* Δεν κάνουμε override όλα — μόνο default */ } /* Scrollbar styling για dark */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; border: 2px solid #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Disable transition during initial page load (anti-flash) */ .softmit-no-transition * { transition: none !important; }