Files
HouseHub/dark-mode.css
T
FeFeClochette a7a8244a33
Deploy HouseHub / deploy (push) Successful in 2s
enable view
2026-09-17 10:49:49 +02:00

223 lines
7.9 KiB
CSS

/* ════════════════════════════════════════════════════════════════════
dark-mode.css — Dark mode overrides (Cleaned & Optimized)
Chargé en dernier dans le head pour garantir la cascade.
════════════════════════════════════════════════════════════════════ */
/* ─── FONDS & CONTENEURS PRINCIPAUX ────────────────────────────────── */
[data-theme="dark"] .pf-card,
[data-theme="dark"] .pf-modal-content,
[data-theme="dark"] .budget-tabs-container,
[data-theme="dark"] .fc-header-row,
[data-theme="dark"] .fc-month-nav-row,
[data-theme="dark"] .fc-month-calendar-wrapper,
[data-theme="dark"] .fc-month-balances,
[data-theme="dark"] .hol-idea-card,
[data-theme="dark"] .pf-holidays__titlebar,
[data-theme="dark"] .hol-filters-row,
[data-theme="dark"] .cl-titlebar,
[data-theme="dark"] .pf-child-section,
[data-theme="dark"] .pf-child-totals-bar,
[data-theme="dark"] .pf-gift-card-compact,
[data-theme="dark"] .epargne-grid-table,
[data-theme="dark"] .sticky-col {
background: var(--bg-panel) !important;
border-color: var(--border-light) !important;
color: var(--text-main) !important;
}
[data-theme="dark"] .owner-tabs,
[data-theme="dark"] .fc-view-controls,
[data-theme="dark"] .fc-day--other-month,
[data-theme="dark"] .fc-minimal-balance-card,
[data-theme="dark"] .pf-summary-pill,
[data-theme="dark"] .pf-filter-bar {
background: var(--bg-page) !important;
border-color: var(--border-light) !important;
color: var(--text-muted) !important;
}
/* ─── TYPOGRAPHIE GLOBALE ──────────────────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .pf-modal-title,
[data-theme="dark"] .pf-card-title,
[data-theme="dark"] .hol-main-title,
[data-theme="dark"] .pf-gift-title,
[data-theme="dark"] .budget-view h2,
[data-theme="dark"] .view-header h2,
[data-theme="dark"] .month-header-container {
color: var(--text-main) !important;
}
[data-theme="dark"] .pf-card-desc,
[data-theme="dark"] .tab-item {
color: var(--text-muted);
}
/* ─── INPUTS & SÉLECTEURS ──────────────────────────────────────────── */
[data-theme="dark"] .pf-input,
[data-theme="dark"] .pf-filter-select,
[data-theme="dark"] .hol-year-select,
[data-theme="dark"] .budget-view input,
[data-theme="dark"] .budget-view select,
[data-theme="dark"] .budget-view textarea,
[data-theme="dark"] .hol-idea-card input,
[data-theme="dark"] .hol-idea-card textarea,
[data-theme="dark"] .hol-idea-card select {
background: #1c2128 !important;
border-color: var(--border-light) !important;
color: var(--text-main) !important;
}
[data-theme="dark"] .pf-input::placeholder {
color: #484f58 !important;
}
/* ─── BOUTONS & ÉTATS ACTIFS ───────────────────────────────────────── */
[data-theme="dark"] .pf-btn.btn-secondary,
[data-theme="dark"] .fc-nav-button,
[data-theme="dark"] .fc-view-button,
[data-theme="dark"] .hol-map-toggle,
[data-theme="dark"] .cl-view-btn,
[data-theme="dark"] .pf-btn-icon-text,
[data-theme="dark"] .owner-tab {
background: var(--bg-panel) !important;
color: var(--text-muted) !important;
border-color: var(--border-light) !important;
}
[data-theme="dark"] .pf-btn.btn-secondary:hover,
[data-theme="dark"] .fc-nav-button:hover,
[data-theme="dark"] .hol-map-toggle:hover,
[data-theme="dark"] .pf-btn-icon-text:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-main) !important;
}
[data-theme="dark"] .tab-item.active,
[data-theme="dark"] .fc-view-button--active,
[data-theme="dark"] .cl-view-btn.is-active {
background: rgba(59, 130, 246, 0.15) !important;
color: var(--primary) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
[data-theme="dark"] .owner-tab.active {
background: var(--primary) !important;
color: #fff !important;
}
/* ─── TABLES ───────────────────────────────────────────────────────── */
[data-theme="dark"] .pf-table,
[data-theme="dark"] .fc-month-table,
[data-theme="dark"] #planningTable-wrapper {
background: var(--bg-panel) !important;
color: var(--text-main);
border-color: var(--border-light) !important;
}
[data-theme="dark"] .pf-table thead th,
[data-theme="dark"] .fc-month-table th,
[data-theme="dark"] #planningTable thead th,
[data-theme="dark"] th.sticky-col,
[data-theme="dark"] .pf-child-header {
background: #1c2128 !important;
color: var(--text-muted) !important;
border-color: var(--border-light) !important;
}
[data-theme="dark"] .pf-table tbody td,
[data-theme="dark"] .fc-month-table td,
[data-theme="dark"] #planningTable tbody td {
border-color: rgba(48, 54, 61, 0.5) !important;
}
[data-theme="dark"] .pf-table tbody tr:hover td,
[data-theme="dark"] .fc-month-table td:hover:not(.fc-day--other-month) {
background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .pf-table tfoot td {
background: #1c2128 !important;
border-color: rgba(48, 54, 61, 0.5) !important;
}
/* ─── MODULES SPÉCIFIQUES ──────────────────────────────────────────── */
/* Accueil */
[data-theme="dark"] body[data-page="home"] .pf-module-card {
background: rgba(22, 27, 34, 0.92) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] body[data-page="home"] .pf-module-card:hover {
border-color: var(--primary) !important;
}
/* Épargne & Grilles */
[data-theme="dark"] .eg-header-row {
background: #111827 !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
[data-theme="dark"] .eg-row:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .eg-row:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Éléments colorés spécifiques */
[data-theme="dark"] .savings-table .row-extres td,
[data-theme="dark"] .eg-extres-row {
background: rgba(245, 158, 11, 0.08) !important;
}
[data-theme="dark"] .nens-title.theme-pol {
background: rgba(30, 58, 138, 0.2) !important;
color: #93c5fd !important;
border-color: #3b82f6 !important;
}
[data-theme="dark"] .nens-table.theme-pol thead th {
background: rgba(30, 58, 138, 0.15) !important;
color: #93c5fd !important;
}
[data-theme="dark"] .nens-title.theme-pep {
background: rgba(20, 83, 45, 0.2) !important;
color: #86efac !important;
border-color: #22c55e !important;
}
[data-theme="dark"] .nens-table.theme-pep thead th {
background: rgba(20, 83, 45, 0.15) !important;
color: #86efac !important;
}
[data-theme="dark"] .sum-selected {
background: rgba(59, 130, 246, 0.1) !important;
}
[data-theme="dark"] .fc-burn-alert {
background: rgba(239, 68, 68, 0.1) !important;
color: #f87171 !important;
}
[data-theme="dark"] .month-actions .btn-icon-small {
background: #1c2128 !important;
border-color: var(--border-light) !important;
color: var(--text-main) !important;
}
[data-theme="dark"] .month-actions .btn-icon-small:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .pf-module-card-wrapper:has(input.js-mod-checkbox:checked) {
background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .pf-sub-module-pill {
background: var(--bg-page);
border-color: var(--border-strong);
}
[data-theme="dark"] .pf-sub-module-pill:has(input:checked) {
background: var(--bg-panel);
border-color: var(--primary);
}