Dark mode : coverage complète tous modules (budget, calendrier, voyages, cadeaux, accueil)
Deploy to Pacha Family / deploy (push) Failing after 3s
Deploy to Pacha Family / deploy (push) Failing after 3s
Nouveau dark-mode.css chargé globalement après tous les CSS : - Accueil : cartes modules avec fond sombre semi-transparent - Budget : tabs, owner-tabs, table, sticky-col, nens-tables - Calendrier : cells, nav, vue, balance cards, chips - Vacances : idea-cards, filtres, formulaires - Cadeaux : gift-cards, child-header, filter-bar, summary-pills Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
8584bf8c1f
commit
89299613cb
+119
@@ -0,0 +1,119 @@
|
||||
/* ════════════════════════════════════════════════════════════════════
|
||||
dark-mode.css — Overrides for all modules under [data-theme="dark"]
|
||||
Loaded globally after all other stylesheets.
|
||||
════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ─── GLOBAL ELEMENTS ───────────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] .pf-main { color: var(--text-main); }
|
||||
|
||||
/* pf-table (used by all modules) */
|
||||
[data-theme="dark"] .pf-table { background: var(--bg-panel); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-table tbody td { background: var(--bg-panel); color: var(--text-main); border-color: rgba(48,54,61,.5); }
|
||||
[data-theme="dark"] .pf-table tbody tr:hover td { background: rgba(255,255,255,.03); }
|
||||
[data-theme="dark"] .pf-table tfoot { background: #1c2128; }
|
||||
[data-theme="dark"] .pf-table tfoot td { color: var(--text-main); border-color: rgba(48,54,61,.5); }
|
||||
[data-theme="dark"] .sticky-col { background: var(--bg-panel) !important; color: var(--text-main) !important; }
|
||||
[data-theme="dark"] .cell-amount { background: #1c2128 !important; color: var(--text-main) !important; }
|
||||
|
||||
/* pf-modal */
|
||||
[data-theme="dark"] .pf-modal-content { background: var(--bg-panel); border: 1px solid var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-modal-title { color: var(--text-main); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-input,
|
||||
[data-theme="dark"] .pf-select,
|
||||
[data-theme="dark"] select.pf-filter-select { background: #1c2128 !important; border-color: var(--border-light) !important; color: var(--text-main) !important; }
|
||||
[data-theme="dark"] .pf-input::placeholder { color: #484f58; }
|
||||
[data-theme="dark"] .pf-btn.btn-secondary { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-btn.btn-secondary:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
|
||||
/* ─── HOME PAGE ─────────────────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] body.pf-home .pf-module-card {
|
||||
background: rgba(22,27,34,.9) !important;
|
||||
border: 1px solid var(--border-light) !important;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,.4) !important;
|
||||
}
|
||||
[data-theme="dark"] body.pf-home .pf-module-card:hover {
|
||||
background: rgba(22,27,34,.98) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
[data-theme="dark"] body.pf-home .pf-card-title { color: var(--text-main); }
|
||||
[data-theme="dark"] body.pf-home .pf-card-desc { color: var(--text-muted); }
|
||||
[data-theme="dark"] body.pf-home .pf-card-cta { color: var(--primary); }
|
||||
|
||||
/* ─── BUDGET MODULE ─────────────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] .budget-view { color: var(--text-main); }
|
||||
[data-theme="dark"] .budget-view h2 { color: var(--text-main); }
|
||||
[data-theme="dark"] .budget-tabs-container { background: var(--bg-panel) !important; border-color: var(--border-light) !important; }
|
||||
[data-theme="dark"] .tab-item { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .tab-item:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
[data-theme="dark"] .tab-item.active { background: rgba(59,130,246,.15); color: var(--primary); border-color: rgba(59,130,246,.3); }
|
||||
[data-theme="dark"] .owner-tabs { background: var(--bg-page); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .owner-tab { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .owner-tab.active { background: var(--primary); color: #fff; }
|
||||
[data-theme="dark"] .month-header-container { background: var(--bg-panel); color: var(--text-main); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-table thead th { background: #1c2128 !important; color: var(--text-muted) !important; border-color: var(--border-light) !important; }
|
||||
[data-theme="dark"] .table-responsive { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .nens-title.theme-pol { background: rgba(30,58,138,.2) !important; border-left-color: #3b82f6 !important; color: #93c5fd !important; }
|
||||
[data-theme="dark"] .nens-title.theme-pep { background: rgba(20,83,45,.2) !important; border-left-color: #22c55e !important; color: #86efac !important; }
|
||||
[data-theme="dark"] .nens-table.theme-pol thead th { background: rgba(30,58,138,.15) !important; color: #93c5fd !important; }
|
||||
[data-theme="dark"] .nens-table.theme-pep thead th { background: rgba(20,83,45,.15) !important; color: #86efac !important; }
|
||||
[data-theme="dark"] .form-row { background: var(--bg-panel); }
|
||||
[data-theme="dark"] .btn-safe-click { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .btn-cell-delete { color: var(--danger); }
|
||||
|
||||
/* ─── FAMILY CALENDAR MODULE ────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] .pf-family-calendar { color: var(--text-main); }
|
||||
[data-theme="dark"] .fc-header-row { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-view-controls { background: var(--bg-page); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-view-button { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-view-button--active { background: rgba(59,130,246,.15); color: var(--primary); border-color: rgba(59,130,246,.3); }
|
||||
[data-theme="dark"] .fc-month-nav-row { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-month-nav-row h3 { color: var(--text-main); }
|
||||
[data-theme="dark"] .fc-nav-button { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-nav-button:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
[data-theme="dark"] .fc-month-table th { background: #1c2128 !important; color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-month-table td { background: var(--bg-panel) !important; color: var(--text-main); border-color: rgba(48,54,61,.5); }
|
||||
[data-theme="dark"] .fc-month-table td:hover:not(.fc-day--other-month) { background: rgba(255,255,255,.04) !important; }
|
||||
[data-theme="dark"] .fc-day--other-month { background: var(--bg-page) !important; color: var(--text-muted) !important; }
|
||||
[data-theme="dark"] .fc-month-balances { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-minimal-balance-card { background: var(--bg-page); border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .fc-min-chip { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-month-calendar-wrapper { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .fc-burn-alert { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #f87171; }
|
||||
[data-theme="dark"] .fc-month-title { color: var(--text-muted); }
|
||||
[data-theme="dark"] .pf-btn-icon-text { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-btn-icon-text:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
|
||||
/* ─── HOLIDAYS MODULE ───────────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] .pf-holidays { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-holidays__titlebar { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .hol-main-title { color: var(--text-main); }
|
||||
[data-theme="dark"] .hol-map-toggle { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .hol-map-toggle:hover { background: rgba(255,255,255,.06); }
|
||||
[data-theme="dark"] .pf-btn.btn-secondary { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .hol-idea-card { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main); box-shadow: var(--shadow); }
|
||||
[data-theme="dark"] .hol-idea-card:hover { border-color: var(--primary) !important; box-shadow: var(--shadow-lg); }
|
||||
[data-theme="dark"] .hol-filters-row { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .hol-year-select { background: var(--bg-panel); color: var(--text-main); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .hol-ideas-grid .pf-input { background: #1c2128; border-color: var(--border-light); color: var(--text-main); }
|
||||
[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; }
|
||||
|
||||
/* ─── GIFT-LIST MODULE ──────────────────────────────────────────────────────── */
|
||||
[data-theme="dark"] .pf-gift-list { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-gift-list h1 { color: var(--text-main); }
|
||||
[data-theme="dark"] .cl-titlebar { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .cl-view-btn { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .cl-view-btn.is-active { background: rgba(59,130,246,.15); color: var(--primary); border-color: rgba(59,130,246,.3); }
|
||||
[data-theme="dark"] .pf-filter-bar { background: var(--bg-page); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-filter-select { background: #1c2128 !important; color: var(--text-main) !important; border-color: var(--border-light) !important; }
|
||||
[data-theme="dark"] .pf-child-section { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-child-header { background: #1c2128; border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-child-header h3 { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-child-totals-bar { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-summary-pill { background: var(--bg-page); border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-gift-card-compact { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-gift-card-compact:hover { border-color: var(--primary) !important; }
|
||||
[data-theme="dark"] .pf-gift-title { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-gift-footer { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-gift-link { color: var(--primary); }
|
||||
@@ -29,6 +29,7 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
|
||||
<?php if (!empty($pageCss)): ?>
|
||||
<link rel="stylesheet" href="<?= htmlspecialchars($pageCss) ?>">
|
||||
<?php endif; ?>
|
||||
<link rel="stylesheet" href="/dark-mode.css">
|
||||
<script>(function(){const t=localStorage.getItem('hh-theme');if(t==='dark')document.documentElement.setAttribute('data-theme','dark');})()</script>
|
||||
<style>
|
||||
/* Patch CSS pour la zone droite de l'en-tête (Desktop / Mobile) */
|
||||
|
||||
Reference in New Issue
Block a user