/* * ========================================================= * dark-theme.css — GinToLove * Chargé APRÈS tous les autres CSS. * Ne modifie PAS les fichiers existants. * Cible : [data-theme="dark"] posé sur par setThemeAttribute.js * ========================================================= * * Palette dark * --dk-bg #13141a fond principal (pas noir pur) * --dk-surface #1d1f28 cartes / panneaux * --dk-surface-alt #242636 panneaux secondaires / inputs * --dk-border rgba(255,255,255,0.07) * --dk-border-med rgba(255,255,255,0.11) * --dk-text #eceef2 texte principal * --dk-text-2 #9ca3af texte secondaire * --dk-text-muted #6b7280 texte tertiaire * * Les couleurs marque (--gin-primary / --gin-secondary) restent intactes. * ========================================================= */ /* ========================================================= 0. Variables dark — cascade root ========================================================= */ [data-theme="dark"] { --dk-bg: #13141a; --dk-surface: #1d1f28; --dk-surface-alt: #242636; --dk-border: rgba(255,255,255,0.07); --dk-border-med: rgba(255,255,255,0.11); --dk-text: #eceef2; --dk-text-2: #9ca3af; --dk-text-muted: #6b7280; /* Bruit de fond atténué pour le dark */ --bg-stripe-alpha: 0.018; --bg-spot-alpha: 0.045; color-scheme: dark; } /* ========================================================= 1. Body / fond global (site.css override) ========================================================= */ [data-theme="dark"] html, [data-theme="dark"] body, [data-theme="dark"] { background-color: var(--dk-bg) !important; color: var(--dk-text); } /* ========================================================= 2. Navbar (navmenugins.css override) ========================================================= */ [data-theme="dark"] .custom-navbar.main-nav { background: #1a1c24; border-color: var(--dk-border); box-shadow: 0 6px 20px -10px rgba(0,0,0,0.55); } [data-theme="dark"] .custom-navbar .navbar-nav .nav-link { color: var(--dk-text-2); } [data-theme="dark"] .custom-navbar .navbar-nav .nav-link:hover, [data-theme="dark"] .custom-navbar .navbar-nav .nav-link:focus { color: var(--dk-text); } [data-theme="dark"] .custom-navbar .navbar-nav .nav-link.active { color: var(--dk-text); font-weight: 600; } [data-theme="dark"] .custom-navbar .dropdown-menu { background: #1e2030; border: 1px solid var(--dk-border-med); box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6); } [data-theme="dark"] .custom-navbar .dropdown-menu .dropdown-item { color: var(--dk-text-2); } [data-theme="dark"] .custom-navbar .dropdown-menu .dropdown-item:hover { background: rgba(188,112,164,0.14); color: var(--dk-text); } [data-theme="dark"] .custom-navbar .nav-search .form-control, [data-theme="dark"] .custom-navbar .nav-search input { background: var(--dk-surface-alt); border-color: var(--dk-border-med); color: var(--dk-text); } [data-theme="dark"] .custom-navbar .nav-search .form-control::placeholder { color: var(--dk-text-muted); } /* ========================================================= 3. Cartes gins modernes (Gins.css override) ========================================================= */ [data-theme="dark"] .gin-card-modern { background: var(--dk-surface); box-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 1.5px 6px rgba(0,0,0,0.25); } [data-theme="dark"] .gin-card-modern:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.35); } [data-theme="dark"] .gin-card-image { background: #1d1f28; border-color: rgba(var(--gin-primary-rgb),0.4); } [data-theme="dark"] .gin-card-title { color: var(--dk-text); } [data-theme="dark"] .gin-card-content { color: var(--dk-text-2); } /* Ligne meta (commentaires / vues / likes) */ [data-theme="dark"] .gin-read-meta-item { background: rgba(255,255,255,0.06); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .gin-card-read:hover .gin-read-meta-item { box-shadow: 0 2px 6px rgba(0,0,0,0.3); } /* Chips featured / new */ [data-theme="dark"] .gin-read-chip-featured, [data-theme="dark"] .gin-read-chip-new { background: rgba(255,255,255,0.10); border-color: var(--dk-border-med); color: var(--dk-text); } /* ========================================================= 4. Section Home — conteneurs (home.css override) ========================================================= */ [data-theme="dark"] .home-section { background: rgba(29,31,40,0.92); border-color: var(--dk-border); box-shadow: 0 18px 44px -36px rgba(0,0,0,0.7); } [data-theme="dark"] .home-section--tint { background: radial-gradient(900px 340px at 12% 0%, rgba(var(--gin-secondary-rgb),0.06), transparent 62%), radial-gradient(900px 340px at 88% 0%, rgba(var(--gin-primary-rgb),0.06), transparent 60%), rgba(29,31,40,0.92); } [data-theme="dark"] .home-block__title { color: var(--dk-text); } [data-theme="dark"] .home-block__title::after { opacity: 0.75; } /* ========================================================= 5. Cartes image héros (Gins / PerfectServes / News) (home.css override) ========================================================= */ [data-theme="dark"] .home-top-card2 { border-color: rgba(255,255,255,0.06); } /* ========================================================= 6. Cartes News (home-news.css override) ========================================================= */ [data-theme="dark"] .card-home { background: linear-gradient(120deg, rgba(var(--gin-primary-rgb),0.04), rgba(var(--gin-secondary-rgb),0.04) 70%), var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); } [data-theme="dark"] .card-home:hover { background: linear-gradient(120deg, rgba(var(--gin-primary-rgb),0.07), rgba(var(--gin-secondary-rgb),0.06) 70%), var(--dk-surface); } [data-theme="dark"] .card-home .title-home { color: var(--dk-text); } [data-theme="dark"] .card-home .title-home .title-chip { color: var(--dk-text) !important; background: linear-gradient(140deg, rgba(var(--gin-primary-rgb),0.22), rgba(var(--gin-secondary-rgb),0.18)); } [data-theme="dark"] .summary-home { color: var(--dk-text-2); } [data-theme="dark"] .meta-line { color: var(--dk-text-muted); } [data-theme="dark"] .meta-line .date { color: var(--dk-text-2); } [data-theme="dark"] .media-zone { background: linear-gradient(135deg, #1a1c28, #1e2033); } [data-theme="dark"] .type-badge { color: #1a1a1a; } /* Collapse content */ [data-theme="dark"] .collapse-content .cc-inner { color: var(--dk-text-2); } /* ========================================================= 7. Page détail news (NewsDetails.css override) ========================================================= */ [data-theme="dark"] .news-details { background: linear-gradient(145deg, #1d1f2c, #1e2030, #1d1f2c); border-color: var(--dk-border-med); color: var(--dk-text); box-shadow: 0 18px 60px -32px rgba(0,0,0,0.7); } [data-theme="dark"] .news-details__title { color: var(--dk-text); } [data-theme="dark"] .news-details__summary { color: var(--dk-text-2); } [data-theme="dark"] .news-details__meta { color: var(--dk-text-muted); } [data-theme="dark"] .news-details__date { color: var(--dk-text-2); } [data-theme="dark"] .news-details__type { background: rgba(255,255,255,0.08); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .news-details__content { color: var(--dk-text-2); } [data-theme="dark"] .news-details__content p, [data-theme="dark"] .news-details__content li, [data-theme="dark"] .news-details__content strong, [data-theme="dark"] .news-details__content em { color: var(--dk-text-2); } [data-theme="dark"] .news-details__content h2, [data-theme="dark"] .news-details__content h3 { color: var(--dk-text); } [data-theme="dark"] .news-callout { background: rgba(255,255,255,0.05); color: var(--dk-text-2); } [data-theme="dark"] .news-details__cta { background: rgba(255,255,255,0.04); border-color: rgba(var(--gin-primary-rgb),0.18); } [data-theme="dark"] .news-details__cta-label { color: var(--dk-text-muted); } [data-theme="dark"] .news-details__cta-btn--secondary { background: rgba(255,255,255,0.07); border-color: var(--dk-border-med); color: var(--dk-text); } [data-theme="dark"] .news-details__cta-btn--secondary:hover { background: rgba(255,255,255,0.11); } /* ========================================================= 8. Panneaux filtres / formulaires (Gins.css + Bootstrap override) ========================================================= */ [data-theme="dark"] .filters-panel { background: transparent; color: var(--dk-text); } [data-theme="dark"] .filters-advanced { background: #1d1f2a !important; border-color: var(--dk-border-med) !important; } [data-theme="dark"] .filters-advanced .nav-tabs { border-color: var(--dk-border); } [data-theme="dark"] .filters-advanced .nav-link { color: var(--dk-text-2); } [data-theme="dark"] .filters-advanced .nav-link.active { background: var(--dk-surface-alt); border-color: var(--dk-border-med); color: var(--dk-text); } [data-theme="dark"] .filters-advanced .tab-content { background: #1d1f2a !important; border-color: var(--dk-border) !important; } /* Inputs et selects */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] select { background-color: var(--dk-surface-alt); border-color: var(--dk-border-med); color: var(--dk-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2a2c3e; border-color: rgba(var(--gin-primary-rgb),0.45); color: var(--dk-text); box-shadow: 0 0 0 3px rgba(var(--gin-primary-rgb),0.18); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder { color: var(--dk-text-muted); } [data-theme="dark"] .form-label { color: var(--dk-text-2); } /* ========================================================= 9. Chips / badges (Gins.css override) ========================================================= */ [data-theme="dark"] .chip { background: rgba(255,255,255,0.07); border-color: var(--dk-border-med); color: var(--dk-text-2); } [data-theme="dark"] .chip-soft { background: rgba(255,255,255,0.05); color: var(--dk-text-2); } [data-theme="dark"] .chip-toggle { background: rgba(255,255,255,0.06); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .chip-toggle.active { background: rgba(var(--gin-primary-rgb),0.25); border-color: rgba(var(--gin-primary-rgb),0.45); color: var(--dk-text); } [data-theme="dark"] .chip-accent { background: rgba(var(--gin-primary-rgb),0.18); color: rgba(var(--gin-primary-rgb),1); } /* ========================================================= 10. Pagination (site.css override) ========================================================= */ [data-theme="dark"] .gin-pagination-btn { background: transparent; border-color: rgba(255,255,255,0.1); color: var(--dk-text-2); } [data-theme="dark"] .gin-pagination-btn:hover:not([disabled]) { background: rgba(255,255,255,0.06); border-color: rgba(var(--gin-primary-rgb),0.35); color: var(--dk-text); } [data-theme="dark"] .gin-pagination-btn.active, [data-theme="dark"] .gin-pagination-btn[aria-current="page"] { background: var(--gin-primary); border-color: var(--gin-primary); color: #fff; } [data-theme="dark"] .gin-pagination-ellipsis { color: var(--dk-text-muted); } /* ========================================================= 11. Panels home-premium (home-premium.css override) ========================================================= */ [data-theme="dark"] .home-panel { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 14px 34px -26px rgba(0,0,0,0.6); } [data-theme="dark"] .home-panel__title { color: var(--dk-text); } [data-theme="dark"] .home-panel__subtitle { color: var(--dk-text-2); } [data-theme="dark"] .home-card { background: var(--dk-surface); border-color: var(--dk-border); } [data-theme="dark"] .home-card:hover { box-shadow: 0 20px 44px -34px rgba(0,0,0,0.7); } [data-theme="dark"] .home-card__title { color: var(--dk-text); } [data-theme="dark"] .home-card__meta { color: var(--dk-text-2); } [data-theme="dark"] .home-card__media--gin { background: rgba(255,255,255,0.04); } [data-theme="dark"] .home-chip { background: rgba(255,255,255,0.07); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .home-link-pill { background: rgba(255,255,255,0.07); border-color: var(--dk-border-med); color: var(--dk-text-2); } [data-theme="dark"] .home-link-pill:hover { box-shadow: 0 14px 30px -24px rgba(0,0,0,0.6); } [data-theme="dark"] .home-state { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--dk-text-2); } /* ========================================================= 12. Boutons Bootstrap génériques ========================================================= */ [data-theme="dark"] .btn-gin-ghost { color: var(--dk-text-2); border-color: var(--dk-border-med); } [data-theme="dark"] .btn-gin-ghost:hover { background: rgba(255,255,255,0.07); color: var(--dk-text); } [data-theme="dark"] .btn-gin-outline { border-color: rgba(var(--gin-primary-rgb),0.45); color: rgba(var(--gin-primary-rgb),1); } [data-theme="dark"] .btn-gin-outline:hover { background: rgba(var(--gin-primary-rgb),0.14); } /* Bouton nav home / pager news */ [data-theme="dark"] .btn-nav-home { background: var(--dk-surface-alt); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .btn-nav-home:hover:not([disabled]) { background: linear-gradient(120deg,var(--gin-primary), var(--gin-secondary)); color: #1a1a1a; } /* ========================================================= 13. Alertes / badges Bootstrap ========================================================= */ [data-theme="dark"] .alert-info { background: rgba(var(--gin-primary-rgb),0.1); border-color: rgba(var(--gin-primary-rgb),0.25); color: var(--dk-text-2); } /* ========================================================= 14. Tinted panel (tinted-panel.css override) ========================================================= */ [data-theme="dark"] .tinted-panel { background: rgba(255,255,255,0.04) !important; border-color: var(--dk-border) !important; } /* ========================================================= 15. Textes généraux (headings, paragraphes) ========================================================= */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dk-text); } [data-theme="dark"] p, [data-theme="dark"] small, [data-theme="dark"] span, [data-theme="dark"] label { color: inherit; } [data-theme="dark"] .text-muted { color: var(--dk-text-muted) !important; } [data-theme="dark"] a { color: rgba(var(--gin-primary-rgb),1); } [data-theme="dark"] a:hover { color: #cf8dbf; } /* ========================================================= 16. Footer — déjà dark par défaut, juste alléger l'ombre ========================================================= */ [data-theme="dark"] .site-footer.footer-dark { box-shadow: 0 -4px 26px -10px rgba(0,0,0,0.6); } /* ========================================================= 17. Divers — panneaux erreur Blazor, spinner ========================================================= */ [data-theme="dark"] #blazor-error-ui { background: #2a1a0e; color: #f5c97e; border-top-color: rgba(245,185,100,0.4); } [data-theme="dark"] .news-details__error { background: linear-gradient(125deg, rgba(255,60,100,0.12), rgba(var(--gin-primary-rgb),0.08)); border-color: rgba(255,60,100,0.3); color: #f08090; } [data-theme="dark"] .news-details__state { background: rgba(255,255,255,0.04); border-color: var(--dk-border); color: var(--dk-text-2); } /* ========================================================= 18. Scrollbar discrète (Webkit) ========================================================= */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }