/** * news247.fr - Dark Mode Stylesheet * Activated via [data-theme="dark"] on */ [data-theme="dark"] { --color-bg: #0f172a; --color-bg-secondary: #020617; --color-bg-card: #1e293b; --color-text: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-border: #334155; --color-border-light: #1e293b; --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-lg: rgba(0, 0, 0, 0.5); --color-overlay: rgba(0, 0, 0, 0.8); } /* Body */ [data-theme="dark"] body { background-color: var(--color-bg-secondary); color: var(--color-text); } /* Navigation */ [data-theme="dark"] .nav-main { background-color: var(--color-bg-card); border-bottom-color: var(--color-border); } /* Cards */ [data-theme="dark"] .article-card { background-color: var(--color-bg-card); box-shadow: 0 1px 3px var(--color-shadow); } [data-theme="dark"] .article-card:hover { box-shadow: 0 12px 24px var(--color-shadow-lg); } [data-theme="dark"] .article-card__title { color: var(--color-text); } [data-theme="dark"] .article-card:hover .article-card__title { color: #60a5fa; } [data-theme="dark"] .article-card__excerpt { color: var(--color-text-secondary); } [data-theme="dark"] .article-card__meta { color: var(--color-text-muted); border-top-color: var(--color-border); } [data-theme="dark"] .article-card--small { border-bottom-color: var(--color-border); } /* Sidebar widgets */ [data-theme="dark"] .sidebar-widget { background-color: var(--color-bg-card); box-shadow: 0 1px 3px var(--color-shadow); } [data-theme="dark"] .sidebar-widget__title { color: var(--color-text); border-bottom-color: #3b82f6; } [data-theme="dark"] .sidebar-widget__numbered-item { border-bottom-color: var(--color-border); } /* Article body */ [data-theme="dark"] .article-body { color: #cbd5e1; } [data-theme="dark"] .article-body h2, [data-theme="dark"] .article-body h3 { color: var(--color-text); } [data-theme="dark"] .article-body blockquote { background-color: var(--color-bg); border-left-color: #3b82f6; color: var(--color-text-secondary); } [data-theme="dark"] .article-body a { color: #60a5fa; } [data-theme="dark"] .article-body a:hover { color: #93c5fd; } [data-theme="dark"] .article-body th { background-color: var(--color-bg); } [data-theme="dark"] .article-body th, [data-theme="dark"] .article-body td { border-color: var(--color-border); } /* Tags */ [data-theme="dark"] .tag-item { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text-secondary); } /* Search overlay */ [data-theme="dark"] .search-overlay__inner { background-color: var(--color-bg-card); } [data-theme="dark"] .search-overlay__input { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .search-overlay__input:focus { border-color: #3b82f6; } /* Section headers */ [data-theme="dark"] .section-header__title { color: var(--color-text); } /* Footer - already dark so minimal changes */ [data-theme="dark"] .site-footer { background-color: #020617; border-top: 1px solid var(--color-border); } /* Skeleton */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } /* Category bar */ [data-theme="dark"] .nav-category-bar { background-color: #020617; } /* Pagination */ [data-theme="dark"] .pagination a { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .pagination a:hover { background-color: var(--color-bg-card); } /* Forms and inputs */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb a { color: var(--color-text-secondary); } [data-theme="dark"] .breadcrumb a:hover { color: #60a5fa; } /* Back to top */ [data-theme="dark"] .back-to-top { background-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } [data-theme="dark"] .back-to-top:hover { background-color: #2563eb; }