/* ================================================================ DARK MODE — Admin Panel (Paroki Santo Yoseph Matraman) Activates when has class "dark". Dark palette: neutral dark matching the original admin design ================================================================ */ /* ── Smooth transition ──────────────────────────────────────── */ body, .admin-header, .admin-nav, .admin-page, .admin-topbar, .admin-content, .card, .card__header, .form-control, .btn, .table, .auth-card { transition: background-color 0.24s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease; } /* ================================================================ CSS VARIABLE OVERRIDES ================================================================ */ html.dark { --bg: #111111; --surface: #1c1c1c; --border: rgba(255, 255, 255, 0.1); --accent: #f0f0f0; --muted: #8e8c8a; --danger: #e06060; --success: #60c060; } /* ================================================================ BODY ================================================================ */ html.dark body { background: #111111; color: #f0f0f0; } /* ================================================================ AUTH / LOGIN CARD ================================================================ */ html.dark .auth-card { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.1); } html.dark .auth-card__logo { color: #8e8c8a; } /* ================================================================ FORM ================================================================ */ html.dark .form-control { background: #111111; color: #f0f0f0; border-color: rgba(255, 255, 255, 0.12); } html.dark .form-control:focus { border-color: rgba(255, 255, 255, 0.45); } html.dark .form-control::placeholder { color: rgba(255, 255, 255, 0.25); } html.dark select.form-control option { background: #1c1c1c; color: #f0f0f0; } /* ================================================================ BUTTONS ================================================================ */ html.dark .btn-primary { background: #f0f0f0; color: #111111; border-color: #f0f0f0; } html.dark .btn-primary:hover { background: #e0e0e0; border-color: #e0e0e0; opacity: 1; } html.dark .btn-secondary { color: #f0f0f0; border-color: rgba(255, 255, 255, 0.2); } html.dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.07); } html.dark .btn-danger { color: #e06060; border-color: #e06060; } html.dark .btn-danger:hover { background: rgba(224, 96, 96, 0.1); } /* ================================================================ ADMIN HEADER ================================================================ */ html.dark .admin-header { background: #1c1c1c; border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .admin-header__brand-name { color: #f0f0f0; } html.dark .admin-header__brand-sub { color: #8e8c8a; } html.dark .admin-header__username { color: #8e8c8a; } html.dark .admin-header__avatar { background: #f0f0f0; color: #111111; } html.dark .admin-header__logout { color: #8e8c8a; } html.dark .admin-header__logout:hover { color: #e06060; background: rgba(224, 96, 96, 0.1); } html.dark .admin-header__hamburger { color: #f0f0f0; } html.dark .admin-header__hamburger:hover { background: rgba(255, 255, 255, 0.08); } /* ================================================================ DARK MODE TOGGLE BUTTON (admin) ================================================================ */ .dark-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 5px 7px; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .dark-toggle:hover { color: var(--accent); background: var(--bg); } html.dark .dark-toggle { color: #8e8c8a; } html.dark .dark-toggle:hover { color: #f0f0f0; background: rgba(255, 255, 255, 0.08); } /* ================================================================ ADMIN NAVIGATION ================================================================ */ html.dark .admin-nav { background: #1c1c1c; border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .admin-nav.admin-nav--open { background: #1c1c1c; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html.dark .admin-nav__link { color: #8e8c8a; } html.dark .admin-nav__link:hover, html.dark .admin-nav__link.active { color: #f0f0f0; background: rgba(255, 255, 255, 0.06); } html.dark .admin-nav__dropdown { background: #222222; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } html.dark .admin-nav__dropdown li a { color: #8e8c8a; } html.dark .admin-nav__dropdown li a:hover, html.dark .admin-nav__dropdown li a.active { color: #f0f0f0; background: rgba(255, 255, 255, 0.06); } @media (max-width: 900px) { html.dark .admin-nav { background: #1c1c1c; border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .admin-nav__dropdown { background: rgba(255, 255, 255, 0.04); border: none; } } /* ================================================================ ADMIN PAGE / TOPBAR ================================================================ */ html.dark .admin-topbar, html.dark .topbar { background: #1c1c1c; border-bottom-color: rgba(255, 255, 255, 0.1); } /* ================================================================ CARD ================================================================ */ html.dark .card { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.1); } html.dark .card__header { border-bottom-color: rgba(255, 255, 255, 0.1); } /* ================================================================ TABLE ================================================================ */ html.dark .table th { background: #111111; color: #8e8c8a; } html.dark .table td { border-bottom-color: rgba(255, 255, 255, 0.07); } html.dark .table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); } html.dark .table-responsive > .table th:first-child, html.dark .table-responsive > .table td:first-child { background: #1c1c1c; } html.dark .table-responsive > .table thead th:first-child { background: #111111; } /* ================================================================ TABLE TOOLBAR ================================================================ */ html.dark .table-toolbar { border-bottom-color: rgba(255, 255, 255, 0.08); } /* ================================================================ BADGES ================================================================ */ html.dark .badge { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #f0f0f0; } html.dark .status-badge--published { background: rgba(96, 192, 96, 0.12); color: #60c060; border-color: rgba(96, 192, 96, 0.3); } html.dark .status-badge--draft { background: rgba(255, 255, 255, 0.06); color: #8e8c8a; border-color: rgba(255, 255, 255, 0.12); } /* ================================================================ ALERTS / FLASH ================================================================ */ html.dark .alert-success { background: rgba(96, 192, 96, 0.1); color: #7fd97f; border-color: rgba(96, 192, 96, 0.3); } html.dark .alert-danger { background: rgba(224, 96, 96, 0.1); color: #e08080; border-color: rgba(224, 96, 96, 0.3); } /* ================================================================ STAT CARDS / WELCOME CARD ================================================================ */ html.dark .stat-card { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.1); } html.dark .welcome-card { background: #222222; } html.dark .dash-welcome { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.1); } html.dark .dash-welcome__greeting { color: #f0f0f0; } html.dark .dash-welcome__sub { color: rgba(255, 255, 255, 0.45); } html.dark .dash-welcome__date { color: rgba(255, 255, 255, 0.4); } html.dark .dash-welcome__time { color: #f0f0f0; } /* ================================================================ DETAIL ROWS ================================================================ */ html.dark .detail-row { border-bottom-color: rgba(255, 255, 255, 0.08); } /* ================================================================ MILESTONE / EDIT ENTRIES ================================================================ */ html.dark .milestone-item { background: rgba(255, 255, 255, 0.04); } html.dark .milestone-entry { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } /* ================================================================ IMAGE PREVIEW ================================================================ */ html.dark .img-preview { border-color: rgba(255, 255, 255, 0.12); } /* ================================================================ SELECT2 / QUILL (if present) ================================================================ */ html.dark .ql-toolbar { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12) !important; } html.dark .ql-container { background: #111111; border-color: rgba(255, 255, 255, 0.12) !important; color: #f0f0f0; } html.dark .ql-editor.ql-blank::before { color: rgba(255, 255, 255, 0.25); } html.dark .ql-stroke { stroke: #8e8c8a; } html.dark .ql-fill { fill: #8e8c8a; } html.dark .ql-picker { color: #8e8c8a; }