/* TodoQuick — Thème sombre "Notion-like" ------------------------------------------------------------------ Palette gris neutre inspirée de Notion dark. Sans teinte bleutée, reposant sur de longues sessions. Activé quand . ------------------------------------------------------------------ */ /* ================================================================== 1. SURCHARGE DES VARIABLES GLOBALES ================================================================== */ html[data-theme="dark"] { /* Fonds — gris neutre Notion-like, zéro teinte bleue */ --bg: #191919; --surface: #252525; --surface-alt: #2D2D2D; --sidebar: #161616; /* Traits */ --stroke: #373737; /* Textes */ --text: #EDEDED; --text-strong: #FFFFFF; --muted: #9B9B9B; /* Accent bleu Notion (doux et neutre) */ --accent: #529CCA; --accent-soft: #1E3A52; /* États */ --success: #4DAB9A; --success-soft:#1A2E2A; --danger: #E06B5F; --danger-soft: #3A1F1C; /* Hover / sélection de ligne */ --hover: #2D2D2D; --row-hover: #2D2D2D; --row-sel: #1E3A52; --row-sel-br: #529CCA; /* Ombres discrètes */ --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3); color-scheme: dark; } /* ================================================================== 2. ÉLÉMENTS AVEC COULEURS HARDCODÉES DANS todoapp.css ================================================================== */ /* ---- Scrollbars ---- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #191919; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #373737; border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555555; } /* ---- Inputs ---- */ html[data-theme="dark"] .tq-input, html[data-theme="dark"] textarea.tq-input, html[data-theme="dark"] select.tq-input { background: #1A1A1A; color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] .tq-input::placeholder { color: #888888; } html[data-theme="dark"] .tq-input:focus { background: #1A1A1A; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(82,156,202,.25); } html[data-theme="dark"] .tq-input:disabled { background: #252525; color: #888888; opacity: .7; } /* ---- Boutons ---- */ html[data-theme="dark"] .tq-btn-secondary { background: #2D2D2D; color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] .tq-btn-secondary:hover:not(:disabled) { background: #373737; border-color: #555555; } html[data-theme="dark"] .tq-btn-primary { background: var(--accent); color: #FFFFFF; } html[data-theme="dark"] .tq-btn-primary:hover:not(:disabled) { background: #6FB8DE; } html[data-theme="dark"] .tq-btn-danger { background: var(--danger); color: #FFFFFF; } html[data-theme="dark"] .tq-btn:disabled { opacity: .45; } html[data-theme="dark"] .tq-icon-btn { color: var(--muted); } html[data-theme="dark"] .tq-icon-btn:hover { background: #2D2D2D; color: var(--text); } /* ---- Modales ---- */ html[data-theme="dark"] .tq-modal-overlay { background: rgba(0, 0, 0, .7); } html[data-theme="dark"] .tq-modal { background: var(--surface); border: 1px solid var(--stroke); color: var(--text); overflow: hidden; } html[data-theme="dark"] .tq-modal-header { border-bottom-color: var(--stroke); } html[data-theme="dark"] .tq-modal-footer { background: transparent; border-top-color: var(--stroke); } /* ---- Bandeaux ---- */ html[data-theme="dark"] .tq-banner { background: #2D2D2D; color: var(--text); } html[data-theme="dark"] .tq-banner-success { background: #1A2E2A; color: #86D9A9; border-color: #2A4540; } html[data-theme="dark"] .tq-banner-error, html[data-theme="dark"] .tq-banner-danger { background: #3A1F1C; color: #F0A49C; border-color: #50312E; } html[data-theme="dark"] .tq-banner-warning { background: #3A2E12; color: #F3B36D; border-color: #4F3E1F; } html[data-theme="dark"] .tq-banner-info { background: #1E3A52; color: #79B8E0; border-color: #2E5A7D; } /* ---- Sidebar / topbar ---- */ html[data-theme="dark"] .tq-sidebar { background: var(--sidebar); border-right-color: var(--stroke); } html[data-theme="dark"] .tq-topbar { background: var(--surface); border-bottom-color: var(--stroke); } html[data-theme="dark"] .tq-nav-link { color: var(--text); } html[data-theme="dark"] .tq-nav-link:hover { background: #2D2D2D; color: var(--text-strong); } html[data-theme="dark"] .tq-nav-link.tq-nav-active, html[data-theme="dark"] .tq-nav-link.active { background: var(--accent-soft); color: #79B8E0; } /* ---- Sections ---- */ html[data-theme="dark"] .tq-section-item { color: var(--text); } html[data-theme="dark"] .tq-section-item:hover { background: #2D2D2D; } html[data-theme="dark"] .tq-section-item.is-active { background: var(--accent-soft); color: #79B8E0; } html[data-theme="dark"] .tq-section-badge { background: #2D2D2D; color: var(--text); } html[data-theme="dark"] .tq-section-item.is-active .tq-section-badge { background: var(--accent); color: #FFFFFF; } /* ---- Liste de tâches ---- */ html[data-theme="dark"] .tq-task-item { background: var(--surface); border-color: var(--stroke); color: var(--text); } html[data-theme="dark"] .tq-task-item:hover { background: var(--row-hover); } html[data-theme="dark"] .tq-task-item.tq-selected, html[data-theme="dark"] .tq-task-item:focus-visible { background: var(--row-sel); border-color: var(--row-sel-br); outline: none; } html[data-theme="dark"] .tq-task-title { color: var(--text); } html[data-theme="dark"] .tq-task-item.is-done .tq-task-title { color: var(--muted); text-decoration-color: var(--muted); } /* Sous-tâches / arborescence */ html[data-theme="dark"] .tq-children { border-left-color: var(--stroke); } html[data-theme="dark"] .tq-toggle-icon { color: var(--muted); } /* Badges & méta */ html[data-theme="dark"] .tq-task-meta { color: var(--muted); } html[data-theme="dark"] .tq-task-badge { background: #2D2D2D; color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] .tq-task-badge-overdue { background: #3A1F1C; color: #F0A49C; border-color: #50312E; } html[data-theme="dark"] .tq-task-badge-today { background: #3A2E12; color: #F3B36D; border-color: #4F3E1F; } /* Checkboxes — préserve border-style (dashed pour les parentes) */ html[data-theme="dark"] .tq-checkbox, html[data-theme="dark"] .tq-checkbox-box { background: #1A1A1A; border-width: 2px; border-color: #6B6B6B; } html[data-theme="dark"] .tq-checkbox-wrap:hover .tq-checkbox-box { border-color: var(--accent); background: #2D2D2D; } html[data-theme="dark"] .tq-checkbox-input:checked + .tq-checkbox-box { background: var(--success); border-color: var(--success); } html[data-theme="dark"] .tq-checkbox-box-parent { border-color: #8B8B8B; opacity: .7; } /* Libellé "Commentaire" sur une tâche */ html[data-theme="dark"] .tq-task-comment-indicator-label, html[data-theme="dark"] .tq-task-comment-indicator { color: var(--accent); } /* ---- Menus contextuels ---- */ html[data-theme="dark"] .tq-more-menu, html[data-theme="dark"] .tq-menu, html[data-theme="dark"] .tq-dropdown { background: var(--surface); border-color: var(--stroke); box-shadow: var(--shadow-md); color: var(--text); } html[data-theme="dark"] .tq-more-menu-item, html[data-theme="dark"] .tq-menu-item { color: var(--text); } html[data-theme="dark"] .tq-more-menu-item:hover, html[data-theme="dark"] .tq-menu-item:hover { background: #2D2D2D; } html[data-theme="dark"] .tq-more-menu-danger, html[data-theme="dark"] .tq-menu-item-danger { color: var(--danger); } /* ---- Flags colorés ---- */ html[data-theme="dark"] .tq-flag-chip, html[data-theme="dark"] .tq-task-flag { box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; } /* ---- Barres de progression ---- */ html[data-theme="dark"] .tq-progress, html[data-theme="dark"] .tq-progress-bar-bg { background: #2D2D2D; } html[data-theme="dark"] .tq-progress-bar-fill { background: var(--accent); } /* ---- Recherche ---- */ html[data-theme="dark"] .tq-search, html[data-theme="dark"] .tq-search-input { background: #1A1A1A; color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] .tq-search-highlight, html[data-theme="dark"] mark { background: #3A2E00; color: #FFE58F; padding: 0 2px; border-radius: 3px; } /* ---- Corbeille ---- */ html[data-theme="dark"] .tq-trash-item, html[data-theme="dark"] [data-trash-restore]:not(button), html[data-theme="dark"] .tq-trash-list li { background: var(--surface); border-color: var(--stroke); color: var(--text); } html[data-theme="dark"] .tq-trash-list li > div > div:first-child { color: var(--text) !important; } html[data-theme="dark"] .tq-trash-list li > div > div:nth-child(2) { color: var(--muted) !important; } /* ---- Pages auth ---- */ html[data-theme="dark"] .tq-auth-wrap { background: var(--bg); } html[data-theme="dark"] .tq-auth-card { background: var(--surface); border: 1px solid var(--stroke); color: var(--text); } html[data-theme="dark"] .tq-auth-title, html[data-theme="dark"] .tq-auth-subtitle { color: var(--text); } html[data-theme="dark"] .tq-auth-subtitle { color: var(--muted); } html[data-theme="dark"] .tq-label { color: var(--text); } html[data-theme="dark"] .tq-auth-footer-link a { color: var(--accent); } /* ---- Page de profil ---- */ html[data-theme="dark"] .tq-profile-tabs { border-bottom-color: var(--stroke); } html[data-theme="dark"] .tq-profile-tab { color: var(--muted); background: transparent; } html[data-theme="dark"] .tq-profile-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } html[data-theme="dark"] .tq-profile-tab:hover:not(.is-active) { color: var(--text); background: #2D2D2D; } html[data-theme="dark"] .tq-profile-intro { color: var(--muted); } html[data-theme="dark"] .tq-profile-feedback.is-success { background: #1A2E2A; color: #86D9A9; } html[data-theme="dark"] .tq-profile-feedback.is-error { background: #3A1F1C; color: #F0A49C; } /* ---- Tables ---- */ html[data-theme="dark"] table, html[data-theme="dark"] .tq-table { background: var(--surface); color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] thead th, html[data-theme="dark"] .tq-table thead th { background: #1E1E1E; color: var(--text-strong); border-bottom-color: var(--stroke); } html[data-theme="dark"] tbody tr, html[data-theme="dark"] .tq-table tbody tr { border-bottom-color: var(--stroke); } html[data-theme="dark"] tbody tr:hover, html[data-theme="dark"] .tq-table tbody tr:hover { background: #2D2D2D; } html[data-theme="dark"] tbody td, html[data-theme="dark"] .tq-table tbody td { color: var(--text); } /* ---- Validation / erreurs ---- */ html[data-theme="dark"] .tq-field-error, html[data-theme="dark"] .tq-validation-summary { background: #3A1F1C; color: #F0A49C; border-color: #50312E; } html[data-theme="dark"] .tq-validation-summary ul { color: inherit; } /* ---- Divers ---- */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #1A1A1A; color: #EDEDED; border-color: var(--stroke); } html[data-theme="dark"] hr { border-color: var(--stroke); } /* Liens : même ton que --accent, cohérent avec "Mon profil" */ html[data-theme="dark"] a, html[data-theme="dark"] .tq-link, html[data-theme="dark"] .tq-auth-footer-link a { color: var(--accent); } html[data-theme="dark"] a:hover, html[data-theme="dark"] .tq-link:hover, html[data-theme="dark"] .tq-auth-footer-link a:hover { color: #6FB8DE; text-decoration: underline; } /* ---- Notifications ---- */ html[data-theme="dark"] .tq-notif-badge { background: var(--danger); color: #FFFFFF; border-color: var(--surface); } html[data-theme="dark"] .tq-notif-dropdown { background: var(--surface); border-color: var(--stroke); color: var(--text); } html[data-theme="dark"] .tq-notif-item { border-bottom-color: var(--stroke); color: var(--text); } html[data-theme="dark"] .tq-notif-item:hover { background: #2D2D2D; } html[data-theme="dark"] .tq-notif-item-title { color: var(--text-strong); } html[data-theme="dark"] .tq-notif-item-meta { color: var(--muted); } /* ---- Tooltip ---- */ html[data-theme="dark"] .tq-tooltip, html[data-theme="dark"] [role="tooltip"] { background: #2D2D2D; color: var(--text); border-color: var(--stroke); } /* ---- Drag & drop ---- */ html[data-theme="dark"] .tq-task-item.tq-drag-over, html[data-theme="dark"] .tq-task-item.sortable-ghost { background: var(--accent-soft); border-color: var(--accent); } /* ---- Messages système ---- */ html[data-theme="dark"] .tq-empty-state, html[data-theme="dark"] .tq-placeholder { color: var(--muted); background: transparent; } /* Popup d'affichage de commentaire : style color en inline dans le HTML */ html[data-theme="dark"] #modal-comment-body { color: var(--text) !important; } /* Texte dans les popups de lecture */ html[data-theme="dark"] .tq-modal-body, html[data-theme="dark"] .tq-modal-body p, html[data-theme="dark"] .tq-modal-body div { color: var(--text); } /* ================================================================== 3. MOBILE — Bottom sheets & boutons d'action ================================================================== */ html[data-theme="dark"] .tq-bottom-sheet, html[data-theme="dark"] .tq-sheet, html[data-theme="dark"] .tq-mobile-sheet, html[data-theme="dark"] .tq-mobile-actions, html[data-theme="dark"] #modal-mobile-actions .tq-modal, html[data-theme="dark"] #modal-mobile-move .tq-modal, html[data-theme="dark"] #modal-mobile-section .tq-modal { background: var(--surface); color: var(--text); border-color: var(--stroke); } html[data-theme="dark"] .tq-sheet-header, html[data-theme="dark"] .tq-sheet-title, html[data-theme="dark"] .tq-mobile-sheet-title, html[data-theme="dark"] .tq-mobile-actions-title, html[data-theme="dark"] .tq-mobile-actions-kicker { color: var(--muted); } html[data-theme="dark"] .tq-sheet-subtitle, html[data-theme="dark"] .tq-mobile-sheet-subtitle, html[data-theme="dark"] .tq-mobile-actions-task, html[data-theme="dark"] .tq-mobile-actions-header .tq-modal-title { color: var(--text-strong); } /* Boutons "pleine largeur" type action */ html[data-theme="dark"] .tq-action-btn, html[data-theme="dark"] .tq-sheet-btn, html[data-theme="dark"] .tq-mobile-action-btn, html[data-theme="dark"] .tq-action-row, html[data-theme="dark"] .tq-bottom-sheet button:not(.tq-btn-danger):not(.tq-btn-primary), html[data-theme="dark"] .tq-mobile-sheet button:not(.tq-btn-danger):not(.tq-btn-primary), html[data-theme="dark"] .tq-mobile-actions button:not(.tq-btn-danger):not(.tq-btn-primary):not(.tq-close), html[data-theme="dark"] #modal-mobile-actions button:not(.tq-btn-danger):not(.tq-btn-primary):not([data-close-modal]), html[data-theme="dark"] #modal-mobile-move button:not(.tq-btn-danger):not(.tq-btn-primary):not([data-close-modal]), html[data-theme="dark"] #modal-mobile-section button:not(.tq-btn-danger):not(.tq-btn-primary):not([data-close-modal]) { background: #2D2D2D !important; color: var(--text) !important; border: 1px solid var(--stroke) !important; } html[data-theme="dark"] .tq-action-btn:hover, html[data-theme="dark"] .tq-sheet-btn:hover, html[data-theme="dark"] .tq-mobile-action-btn:hover { background: #373737 !important; border-color: #555555 !important; } html[data-theme="dark"] .tq-action-btn-danger, html[data-theme="dark"] .tq-sheet-btn-danger, html[data-theme="dark"] .tq-mobile-action-btn-danger { background: #3A1F1C !important; color: #F0A49C !important; border-color: #50312E !important; } html[data-theme="dark"] .tq-sheet-handle, html[data-theme="dark"] .tq-mobile-sheet-handle { background: #555555; } html[data-theme="dark"] .tq-sheet-close, html[data-theme="dark"] .tq-mobile-sheet-close, html[data-theme="dark"] .tq-close, html[data-theme="dark"] .tq-modal-close { color: var(--muted); background: transparent; } html[data-theme="dark"] .tq-sheet-close:hover, html[data-theme="dark"] .tq-mobile-sheet-close:hover, html[data-theme="dark"] .tq-modal-close:hover { color: var(--text); background: #2D2D2D; } /* Hero mobile */ html[data-theme="dark"] .tq-mobile-hero { background: var(--surface); border-color: var(--stroke); } html[data-theme="dark"] .tq-mobile-profile-name { color: var(--text-strong); } html[data-theme="dark"] .tq-mobile-progress-bar { background: #2D2D2D; } html[data-theme="dark"] .tq-mobile-progress-fill { background: var(--accent); } html[data-theme="dark"] .tq-mobile-avatar { background: #2D2D2D; color: var(--text-strong); border-color: var(--stroke); } /* Fond "card" blanc en dur */ html[data-theme="dark"] .tq-bottom-sheet .tq-card, html[data-theme="dark"] .tq-mobile-sheet .tq-card, html[data-theme="dark"] [class*="sheet"] [style*="background:#fff"], html[data-theme="dark"] [class*="sheet"] [style*="background: #fff"], html[data-theme="dark"] [class*="sheet"] [style*="background: white"] { background: var(--surface) !important; color: var(--text) !important; } /* ================================================================== 4. MOBILE DARK — surcharges spécifiques aux règles mobile du light ================================================================== */ @media (max-width: 600px) { html[data-theme="dark"] .tq-task-row { background: var(--surface); border-color: var(--stroke); box-shadow: 0 1px 2px rgba(0,0,0,.25); } html[data-theme="dark"] .tq-task-row--parent { background: linear-gradient(180deg, #2D2D2D 0%, #252525 100%); border-color: #454545; } html[data-theme="dark"] .tq-task-row--child { background: rgba(45, 45, 45, 0.5); border-color: transparent; } html[data-theme="dark"] .tq-task-row:hover { background: var(--row-hover); } html[data-theme="dark"] .tq-task-item.selected > .tq-task-row { background: var(--row-sel); border-color: var(--row-sel-br); } } /* ================================================================== 5. BOUTONS "QUICK DATE" ================================================================== */ html[data-theme="dark"] .tq-date-quick-btn { background: #2D2D2D; color: var(--text); border: 1px solid var(--stroke); transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } html[data-theme="dark"] .tq-date-quick-btn:hover { background: #373737; border-color: #555555; color: var(--text-strong); } html[data-theme="dark"] .tq-date-quick-btn.is-active { background: var(--accent); color: #FFFFFF; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(82,156,202,.3); } /* ================================================================== 6. Autres fonds blancs hardcodés ================================================================== */ html[data-theme="dark"] .sa-card { background: var(--surface); border-color: var(--stroke); color: var(--text); } /* ================================================================== 7. BARRE D'ACTIONS BULK — sélection multiple ================================================================== */ html[data-theme="dark"] .tq-bulk-bar { background: #2D2D2D; color: var(--text-strong); border: 1px solid var(--stroke); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3); } html[data-theme="dark"] .tq-bulk-bar-close, html[data-theme="dark"] .tq-bulk-bar-btn { color: var(--text-strong); } html[data-theme="dark"] .tq-bulk-bar-close:hover, html[data-theme="dark"] .tq-bulk-bar-btn:hover { background: rgba(255,255,255,.08); } html[data-theme="dark"] .tq-bulk-bar-actions { border-left-color: var(--stroke); } html[data-theme="dark"] .tq-bulk-bar-btn-danger { color: #F0A49C; } html[data-theme="dark"] .tq-bulk-bar-btn-danger:hover { background: rgba(224,107,95,.18); color: #F8C6C0; }