/* ═══════════════════════════════════════════════════════════════ themes.css — Système de 5 thèmes pour ADAM Appliqué via l'attribut data-theme sur . Le thème est lu depuis localStorage['adam-theme']. Thèmes : light — Fluent Design clair (défaut) dark — Primordia (sombre, cyan, futuriste) darcula — JetBrains Darcula (gris chaud, orange) twilight — Ardoise bleutée (intermédiaire) nord — Nordic sombre (glacé) ═══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 1. LIGHT (Fluent Design) — valeurs par défaut Ces variables surchargent le :root de main.css pour que tout soit centralisé ici. Identiques aux valeurs actuelles. ──────────────────────────────────────────────────────────── */ :root, html[data-theme="light"] { color-scheme: light; /* Couleurs principales */ --accent: #4f6bdc; --accent-soft: rgba(79, 107, 220, 0.12); --accent-hover: #3d58c7; --accent-bg: #eef1fd; --accent-bg-soft: #f5f7ff; /* Sémantiques */ --color-success: #2da05a; --color-danger: #d13438; --color-warning: #c8a400; --color-warning-bg: rgba(255, 183, 77, 0.15); --color-info: #4f6bdc; /* Texte */ --text-primary: #1a1a1a; --text-secondary: #616161; --text-muted: #888888; --text-dark: #333333; /* Surfaces */ --bg-white: #ffffff; --bg-light: #f5f5f5; --bg-lighter: #fafafa; --bg-accent: #f0f3ff; /* Bordures */ --border: #e0e0e0; --border-soft: #f0f0f0; --border-medium: #d0d0d0; --border-strong: #e0e0e0; /* Ombres */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06); --shadow-lg: 0 4px 16px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08); /* Sidebar */ --sidebar-bg: #f3f4f6; --sidebar-border: #e0e2e6; --sidebar-text-strong: #1a1a2e; --sidebar-label-color: #363636; --sidebar-item-color: #4a4a4a; --sidebar-muted: #9aa0a6; --sidebar-bottom-color: #7a7a7a; --sidebar-nested-bg: #eeeff2; /* Inputs */ --input-bg: #ffffff; --input-border: #d0d0d0; --input-text: #1a1a1a; /* Buttons light variant */ --btn-light-bg: #f5f5f5; --btn-danger-light-bg: #fff0f0; --btn-success-light-bg:#edfaf3; /* Tags */ --tag-bg: #f0f0f0; --tag-text: #616161; /* Surfaces génériques (composants tiers) */ --card-bg: #ffffff; --surface: #ffffff; --surface-elevated: #ffffff; --surface-hover: #f5f5f5; --border-color: rgba(0,0,0,0.07); /* Scrollbar */ --scrollbar-track: #f0f0f0; --scrollbar-thumb: #d0d0d0; } /* ──────────────────────────────────────────────────────────── 2. DARK — Primordia (palette exacte) ──────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* Accent cyan Primordia */ --accent: #00e5cc; --accent-soft: rgba(0, 229, 204, 0.12); --accent-hover: #00b09e; --accent-bg: rgba(0, 229, 204, 0.08); --accent-bg-soft: rgba(0, 229, 204, 0.04); /* Sémantiques */ --color-success: #4ecdc4; --color-danger: #ff4455; --color-warning: #ffb347; --color-warning-bg: rgba(255, 179, 71, 0.15); --color-info: #00e5cc; /* Texte — palette Primordia */ --text-primary: #cce4f8; --text-secondary: #8fb0cc; --text-muted: #3a5570; --text-dark: #a0c4e0; /* Surfaces — palette Primordia exacte */ --bg-white: #0b1220; --bg-light: #050810; --bg-lighter: #0f1a2e; --bg-accent: rgba(0, 229, 204, 0.06); /* Bordures */ --border: #1a2d45; --border-soft: #0f1a2e; --border-medium: #243850; --border-strong: #1a2d45; /* Ombres */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 4px 16px rgba(0,0,0,0.7), 0 8px 32px rgba(0,0,0,0.6); /* Sidebar */ --sidebar-bg: #0b1220; --sidebar-border: #1a2d45; --sidebar-text-strong: #cce4f8; --sidebar-label-color: #8fb0cc; --sidebar-item-color: #8fb0cc; --sidebar-muted: #3a5570; --sidebar-bottom-color: #3a5570; --sidebar-nested-bg: #050810; /* Inputs */ --input-bg: #0f1a2e; --input-border: #243850; --input-text: #cce4f8; /* Boutons */ --btn-light-bg: #0f1a2e; --btn-danger-light-bg: rgba(255,68,85,0.12); --btn-success-light-bg:rgba(78,205,196,0.12); /* Tags */ --tag-bg: #0f1a2e; --tag-text: #8fb0cc; /* Surfaces génériques */ --card-bg: #0b1220; --surface: #0b1220; --surface-elevated: #0f1a2e; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.06); /* Scrollbar */ --scrollbar-track: #050810; --scrollbar-thumb: #243850; } /* ──────────────────────────────────────────────────────────── 3. DARCULA — JetBrains Darcula ──────────────────────────────────────────────────────────── */ html[data-theme="darcula"] { color-scheme: dark; --accent: #6897bb; --accent-soft: rgba(104, 151, 187, 0.15); --accent-hover: #5585a8; --accent-bg: rgba(104, 151, 187, 0.12); --accent-bg-soft: rgba(104, 151, 187, 0.06); --color-success: #629755; --color-danger: #c75450; --color-warning: #bbb529; --color-warning-bg: rgba(187, 181, 41, 0.15); --color-info: #6897bb; --text-primary: #a9b7c6; --text-secondary: #7f8c97; --text-muted: #555c63; --text-dark: #9aa5af; --bg-white: #3c3f41; --bg-light: #2b2b2b; --bg-lighter: #313335; --bg-accent: rgba(104, 151, 187, 0.08); --border: #555759; --border-soft: #3c3f41; --border-medium: #656769; --border-strong: #555759; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 4px 16px rgba(0,0,0,0.65),0 8px 32px rgba(0,0,0,0.55); --sidebar-bg: #3c3f41; --sidebar-border: #4a4d50; --sidebar-text-strong: #bbc5ce; --sidebar-label-color: #a9b7c6; --sidebar-item-color: #a0adb8; --sidebar-muted: #606870; --sidebar-bottom-color: #606870; --sidebar-nested-bg: #2b2b2b; --input-bg: #45484a; --input-border: #5a5d60; --input-text: #a9b7c6; --btn-light-bg: #45484a; --btn-danger-light-bg: rgba(199,84,80,0.15); --btn-success-light-bg:rgba(98,151,85,0.15); --tag-bg: #45484a; --tag-text: #a9b7c6; /* Surfaces génériques */ --card-bg: #3c3f41; --surface: #3c3f41; --surface-elevated: #45484a; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.06); --scrollbar-track: #2b2b2b; --scrollbar-thumb: #555759; } /* ──────────────────────────────────────────────────────────── 4. TWILIGHT — Ardoise bleutée (intermédiaire) Entre le clair et le sombre, teintes bleues désaturées. ──────────────────────────────────────────────────────────── */ html[data-theme="twilight"] { color-scheme: dark; --accent: #7c9fd4; --accent-soft: rgba(124, 159, 212, 0.14); --accent-hover: #6a8dc2; --accent-bg: rgba(124, 159, 212, 0.10); --accent-bg-soft: rgba(124, 159, 212, 0.06); --color-success: #56a97a; --color-danger: #e05560; --color-warning: #d4a832; --color-warning-bg: rgba(212, 168, 50, 0.15); --color-info: #7c9fd4; --text-primary: #c5d5e8; --text-secondary: #8898b0; --text-muted: #485a75; --text-dark: #a0b5cc; --bg-white: #1e2235; --bg-light: #161929; --bg-lighter: #1a1f31; --bg-accent: rgba(124, 159, 212, 0.06); --border: #2d3550; --border-soft: #1e2235; --border-medium: #3a4565; --border-strong: #2d3550; --shadow-sm: 0 1px 4px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 2px 8px rgba(0,0,0,0.50), 0 4px 16px rgba(0,0,0,0.40); --shadow-lg: 0 4px 16px rgba(0,0,0,0.60),0 8px 32px rgba(0,0,0,0.50); --sidebar-bg: #1e2235; --sidebar-border: #2d3550; --sidebar-text-strong: #d0e0f0; --sidebar-label-color: #8898b0; --sidebar-item-color: #8898b0; --sidebar-muted: #485a75; --sidebar-bottom-color: #485a75; --sidebar-nested-bg: #161929; --input-bg: #1a1f31; --input-border: #3a4565; --input-text: #c5d5e8; --btn-light-bg: #1a1f31; --btn-danger-light-bg: rgba(224,85,96,0.12); --btn-success-light-bg:rgba(86,169,122,0.12); --tag-bg: #1a1f31; --tag-text: #8898b0; /* Surfaces génériques */ --card-bg: #1e2235; --surface: #1e2235; --surface-elevated: #1a1f31; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.05); --scrollbar-track: #161929; --scrollbar-thumb: #3a4565; } /* ──────────────────────────────────────────────────────────── 5. NORD — Palette Nordic sombre Inspiré de Nord Theme : gris-bleu profond, accent glace. ──────────────────────────────────────────────────────────── */ html[data-theme="nord"] { color-scheme: dark; --accent: #88c0d0; --accent-soft: rgba(136, 192, 208, 0.14); --accent-hover: #72afc1; --accent-bg: rgba(136, 192, 208, 0.10); --accent-bg-soft: rgba(136, 192, 208, 0.06); --color-success: #a3be8c; --color-danger: #bf616a; --color-warning: #ebcb8b; --color-warning-bg: rgba(235, 203, 139, 0.15); --color-info: #81a1c1; --text-primary: #d8dee9; --text-secondary: #9aa5b0; --text-muted: #5a6880; --text-dark: #c0c8d8; --bg-white: #3b4252; --bg-light: #2e3440; --bg-lighter: #343a48; --bg-accent: rgba(136, 192, 208, 0.06); --border: #4c566a; --border-soft: #3b4252; --border-medium: #5a6680; --border-strong: #4c566a; --shadow-sm: 0 1px 4px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 2px 8px rgba(0,0,0,0.50), 0 4px 16px rgba(0,0,0,0.40); --shadow-lg: 0 4px 16px rgba(0,0,0,0.60),0 8px 32px rgba(0,0,0,0.50); --sidebar-bg: #3b4252; --sidebar-border: #4c566a; --sidebar-text-strong: #e5eaf0; --sidebar-label-color: #9aa5b0; --sidebar-item-color: #9aa5b0; --sidebar-muted: #5a6880; --sidebar-bottom-color: #5a6880; --sidebar-nested-bg: #2e3440; --input-bg: #343a48; --input-border: #5a6680; --input-text: #d8dee9; --btn-light-bg: #343a48; --btn-danger-light-bg: rgba(191,97,106,0.15); --btn-success-light-bg:rgba(163,190,140,0.15); --tag-bg: #434c5e; --tag-text: #9aa5b0; /* Surfaces génériques */ --card-bg: #3b4252; --surface: #3b4252; --surface-elevated: #343a48; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.06); --scrollbar-track: #2e3440; --scrollbar-thumb: #4c566a; } /* ──────────────────────────────────────────────────────────── 6. DRACULA ──────────────────────────────────────────────────────────── */ html[data-theme="dracula"] { color-scheme: dark; --accent: #bd93f9; --accent-soft: rgba(189, 147, 249, 0.14); --accent-hover: #a67fe0; --accent-bg: rgba(189, 147, 249, 0.10); --accent-bg-soft: rgba(189, 147, 249, 0.06); --color-success: #50fa7b; --color-danger: #ff5555; --color-warning: #f1fa8c; --color-warning-bg: rgba(241, 250, 140, 0.12); --color-info: #8be9fd; --text-primary: #f8f8f2; --text-secondary: #b0afc7; --text-muted: #6272a4; --text-dark: #e0dfee; --bg-white: #282a36; --bg-light: #21222c; --bg-lighter: #2d2f3f; --bg-accent: rgba(189, 147, 249, 0.08); --border: #44475a; --border-soft: #282a36; --border-medium: #565970; --border-strong: #44475a; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 4px 16px rgba(0,0,0,0.65),0 8px 32px rgba(0,0,0,0.55); --sidebar-bg: #21222c; --sidebar-border: #44475a; --sidebar-text-strong: #f8f8f2; --sidebar-label-color: #b0afc7; --sidebar-item-color: #b0afc7; --sidebar-muted: #6272a4; --sidebar-bottom-color: #6272a4; --sidebar-nested-bg: #1a1b24; --input-bg: #21222c; --input-border: #44475a; --input-text: #f8f8f2; --btn-light-bg: #44475a; --btn-danger-light-bg: rgba(255,85,85,0.15); --btn-success-light-bg:rgba(80,250,123,0.12); --tag-bg: #44475a; --tag-text: #f8f8f2; --card-bg: #282a36; --surface: #282a36; --surface-elevated: #44475a; --surface-hover: rgba(255,255,255,0.05); --border-color: rgba(255,255,255,0.06); --scrollbar-track: #21222c; --scrollbar-thumb: #44475a; } /* ──────────────────────────────────────────────────────────── 7. TOKYO NIGHT ──────────────────────────────────────────────────────────── */ html[data-theme="tokyonight"] { color-scheme: dark; --accent: #7aa2f7; --accent-soft: rgba(122, 162, 247, 0.14); --accent-hover: #5f8ce0; --accent-bg: rgba(122, 162, 247, 0.10); --accent-bg-soft: rgba(122, 162, 247, 0.06); --color-success: #9ece6a; --color-danger: #f7768e; --color-warning: #e0af68; --color-warning-bg: rgba(224, 175, 104, 0.14); --color-info: #7dcfff; --text-primary: #c0caf5; --text-secondary: #9aa5ce; --text-muted: #565f89; --text-dark: #a9b1d6; --bg-white: #24283b; --bg-light: #1a1b26; --bg-lighter: #1f2335; --bg-accent: rgba(122, 162, 247, 0.07); --border: #292e42; --border-soft: #24283b; --border-medium: #3b4261; --border-strong: #292e42; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 4px 16px rgba(0,0,0,0.65),0 8px 32px rgba(0,0,0,0.55); --sidebar-bg: #1a1b26; --sidebar-border: #292e42; --sidebar-text-strong: #c0caf5; --sidebar-label-color: #9aa5ce; --sidebar-item-color: #9aa5ce; --sidebar-muted: #565f89; --sidebar-bottom-color: #565f89; --sidebar-nested-bg: #16161e; --input-bg: #1f2335; --input-border: #3b4261; --input-text: #c0caf5; --btn-light-bg: #1f2335; --btn-danger-light-bg: rgba(247,118,142,0.14); --btn-success-light-bg:rgba(158,206,106,0.12); --tag-bg: #292e42; --tag-text: #9aa5ce; --card-bg: #24283b; --surface: #24283b; --surface-elevated: #1f2335; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.05); --scrollbar-track: #1a1b26; --scrollbar-thumb: #3b4261; } /* ──────────────────────────────────────────────────────────── 8. MONOKAI ──────────────────────────────────────────────────────────── */ html[data-theme="monokai"] { color-scheme: dark; --accent: #fd971f; --accent-soft: rgba(253, 151, 31, 0.14); --accent-hover: #e0851a; --accent-bg: rgba(253, 151, 31, 0.10); --accent-bg-soft: rgba(253, 151, 31, 0.06); --color-success: #a6e22e; --color-danger: #f92672; --color-warning: #e6db74; --color-warning-bg: rgba(230, 219, 116, 0.12); --color-info: #66d9e8; --text-primary: #f8f8f2; --text-secondary: #c0bfb8; --text-muted: #75715e; --text-dark: #e0dfd8; --bg-white: #272822; --bg-light: #1e1f1c; --bg-lighter: #2d2e2a; --bg-accent: rgba(253, 151, 31, 0.08); --border: #49483e; --border-soft: #272822; --border-medium: #5e5d56; --border-strong: #49483e; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 4px 16px rgba(0,0,0,0.65),0 8px 32px rgba(0,0,0,0.55); --sidebar-bg: #1e1f1c; --sidebar-border: #49483e; --sidebar-text-strong: #f8f8f2; --sidebar-label-color: #c0bfb8; --sidebar-item-color: #c0bfb8; --sidebar-muted: #75715e; --sidebar-bottom-color: #75715e; --sidebar-nested-bg: #191a17; --input-bg: #2d2e2a; --input-border: #49483e; --input-text: #f8f8f2; --btn-light-bg: #2d2e2a; --btn-danger-light-bg: rgba(249,38,114,0.15); --btn-success-light-bg:rgba(166,226,46,0.12); --tag-bg: #49483e; --tag-text: #f8f8f2; --card-bg: #272822; --surface: #272822; --surface-elevated: #2d2e2a; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.05); --scrollbar-track: #1e1f1c; --scrollbar-thumb: #49483e; } /* ──────────────────────────────────────────────────────────── 9. GRUVBOX ──────────────────────────────────────────────────────────── */ html[data-theme="gruvbox"] { color-scheme: dark; --accent: #fe8019; --accent-soft: rgba(254, 128, 25, 0.14); --accent-hover: #e06c00; --accent-bg: rgba(254, 128, 25, 0.10); --accent-bg-soft: rgba(254, 128, 25, 0.06); --color-success: #b8bb26; --color-danger: #fb4934; --color-warning: #fabd2f; --color-warning-bg: rgba(250, 189, 47, 0.14); --color-info: #83a598; --text-primary: #ebdbb2; --text-secondary: #bdae93; --text-muted: #7c6f64; --text-dark: #d5c4a1; --bg-white: #3c3836; --bg-light: #282828; --bg-lighter: #32302f; --bg-accent: rgba(254, 128, 25, 0.08); --border: #504945; --border-soft: #3c3836; --border-medium: #665c54; --border-strong: #504945; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 4px 16px rgba(0,0,0,0.65),0 8px 32px rgba(0,0,0,0.55); --sidebar-bg: #282828; --sidebar-border: #504945; --sidebar-text-strong: #ebdbb2; --sidebar-label-color: #bdae93; --sidebar-item-color: #bdae93; --sidebar-muted: #7c6f64; --sidebar-bottom-color: #7c6f64; --sidebar-nested-bg: #1d2021; --input-bg: #32302f; --input-border: #504945; --input-text: #ebdbb2; --btn-light-bg: #32302f; --btn-danger-light-bg: rgba(251,73,52,0.15); --btn-success-light-bg:rgba(184,187,38,0.12); --tag-bg: #504945; --tag-text: #ebdbb2; --card-bg: #3c3836; --surface: #3c3836; --surface-elevated: #504945; --surface-hover: rgba(255,255,255,0.04); --border-color: rgba(255,255,255,0.05); --scrollbar-track: #282828; --scrollbar-thumb: #504945; } /* ──────────────────────────────────────────────────────────── 10. CATPPUCCIN LATTE (clair) ──────────────────────────────────────────────────────────── */ html[data-theme="catppuccin"] { color-scheme: light; --accent: #1e66f5; --accent-soft: rgba(30, 102, 245, 0.12); --accent-hover: #1554d8; --accent-bg: rgba(30, 102, 245, 0.08); --accent-bg-soft: rgba(30, 102, 245, 0.04); --color-success: #40a02b; --color-danger: #d20f39; --color-warning: #df8e1d; --color-warning-bg: rgba(223, 142, 29, 0.14); --color-info: #04a5e5; --text-primary: #4c4f69; --text-secondary: #6c6f85; --text-muted: #9ca0b0; --text-dark: #5c5f77; --bg-white: #eff1f5; --bg-light: #e6e9ef; --bg-lighter: #f4f4f8; --bg-accent: rgba(30, 102, 245, 0.06); --border: #ccd0da; --border-soft: #dce0e8; --border-medium: #bcc0cc; --border-strong: #ccd0da; --shadow-sm: 0 1px 4px rgba(76,79,105,0.08), 0 2px 8px rgba(76,79,105,0.04); --shadow-md: 0 2px 8px rgba(76,79,105,0.10), 0 4px 16px rgba(76,79,105,0.06); --shadow-lg: 0 4px 16px rgba(76,79,105,0.12),0 8px 32px rgba(76,79,105,0.08); --sidebar-bg: #e6e9ef; --sidebar-border: #ccd0da; --sidebar-text-strong: #4c4f69; --sidebar-label-color: #6c6f85; --sidebar-item-color: #6c6f85; --sidebar-muted: #9ca0b0; --sidebar-bottom-color: #9ca0b0; --sidebar-nested-bg: #dce0e8; --input-bg: #eff1f5; --input-border: #bcc0cc; --input-text: #4c4f69; --btn-light-bg: #e6e9ef; --btn-danger-light-bg: rgba(210,15,57,0.08); --btn-success-light-bg:rgba(64,160,43,0.08); --tag-bg: #dce0e8; --tag-text: #6c6f85; --card-bg: #eff1f5; --surface: #eff1f5; --surface-elevated: #e6e9ef; --surface-hover: #dce0e8; --border-color: rgba(76,79,105,0.10); --scrollbar-track: #e6e9ef; --scrollbar-thumb: #bcc0cc; } /* ──────────────────────────────────────────────────────────── 11. SOLARIZED LIGHT ──────────────────────────────────────────────────────────── */ html[data-theme="solarized"] { color-scheme: light; --accent: #268bd2; --accent-soft: rgba(38, 139, 210, 0.12); --accent-hover: #1a72ae; --accent-bg: rgba(38, 139, 210, 0.08); --accent-bg-soft: rgba(38, 139, 210, 0.04); --color-success: #859900; --color-danger: #dc322f; --color-warning: #b58900; --color-warning-bg: rgba(181, 137, 0, 0.14); --color-info: #2aa198; --text-primary: #586e75; --text-secondary: #657b83; --text-muted: #93a1a1; --text-dark: #073642; --bg-white: #fdf6e3; --bg-light: #eee8d5; --bg-lighter: #f8f1e0; --bg-accent: rgba(38, 139, 210, 0.06); --border: #d4ceb8; --border-soft: #e8e2cc; --border-medium: #c4bea8; --border-strong: #d4ceb8; --shadow-sm: 0 1px 4px rgba(7,54,66,0.08), 0 2px 8px rgba(7,54,66,0.04); --shadow-md: 0 2px 8px rgba(7,54,66,0.10), 0 4px 16px rgba(7,54,66,0.06); --shadow-lg: 0 4px 16px rgba(7,54,66,0.12), 0 8px 32px rgba(7,54,66,0.08); --sidebar-bg: #eee8d5; --sidebar-border: #d4ceb8; --sidebar-text-strong: #073642; --sidebar-label-color: #657b83; --sidebar-item-color: #657b83; --sidebar-muted: #93a1a1; --sidebar-bottom-color: #93a1a1; --sidebar-nested-bg: #e4ddc9; --input-bg: #fdf6e3; --input-border: #c4bea8; --input-text: #586e75; --btn-light-bg: #eee8d5; --btn-danger-light-bg: rgba(220,50,47,0.08); --btn-success-light-bg:rgba(133,153,0,0.08); --tag-bg: #e4ddc9; --tag-text: #657b83; --card-bg: #fdf6e3; --surface: #fdf6e3; --surface-elevated: #eee8d5; --surface-hover: #e8e2cc; --border-color: rgba(7,54,66,0.08); --scrollbar-track: #eee8d5; --scrollbar-thumb: #c4bea8; } /* ──────────────────────────────────────────────────────────── 12. SÉPIA ──────────────────────────────────────────────────────────── */ html[data-theme="sepia"] { color-scheme: light; --accent: #8b6914; --accent-soft: rgba(139, 105, 20, 0.12); --accent-hover: #705410; --accent-bg: rgba(139, 105, 20, 0.08); --accent-bg-soft: rgba(139, 105, 20, 0.04); --color-success: #5a7a45; --color-danger: #a84040; --color-warning: #9a6a10; --color-warning-bg: rgba(154, 106, 16, 0.14); --color-info: #5a7090; --text-primary: #3c2f1a; --text-secondary: #6b5240; --text-muted: #9a8070; --text-dark: #2a1f0e; --bg-white: #f8f0e3; --bg-light: #f0e6d0; --bg-lighter: #f4ead7; --bg-accent: rgba(139, 105, 20, 0.06); --border: #ddd0b8; --border-soft: #ece0c8; --border-medium: #cfc0a4; --border-strong: #ddd0b8; --shadow-sm: 0 1px 4px rgba(60,47,26,0.08), 0 2px 8px rgba(60,47,26,0.04); --shadow-md: 0 2px 8px rgba(60,47,26,0.10), 0 4px 16px rgba(60,47,26,0.06); --shadow-lg: 0 4px 16px rgba(60,47,26,0.12), 0 8px 32px rgba(60,47,26,0.08); --sidebar-bg: #f0e6d0; --sidebar-border: #ddd0b8; --sidebar-text-strong: #2a1f0e; --sidebar-label-color: #6b5240; --sidebar-item-color: #6b5240; --sidebar-muted: #9a8070; --sidebar-bottom-color: #9a8070; --sidebar-nested-bg: #e8dcc4; --input-bg: #f8f0e3; --input-border: #cfc0a4; --input-text: #3c2f1a; --btn-light-bg: #f0e6d0; --btn-danger-light-bg: rgba(168,64,64,0.08); --btn-success-light-bg:rgba(90,122,69,0.08); --tag-bg: #e8dcc4; --tag-text: #6b5240; --card-bg: #f8f0e3; --surface: #f8f0e3; --surface-elevated: #f0e6d0; --surface-hover: #ece0c8; --border-color: rgba(60,47,26,0.08); --scrollbar-track: #f0e6d0; --scrollbar-thumb: #cfc0a4; } /* ════════════════════════════════════════════════════════════ OVERRIDES CIBLÉES — composants avec couleurs codées en dur S'applique à tous les thèmes sombres. ════════════════════════════════════════════════════════════ */ html[data-theme="dark"], html[data-theme="darcula"], html[data-theme="twilight"], html[data-theme="nord"], html[data-theme="dracula"], html[data-theme="tokyonight"], html[data-theme="monokai"], html[data-theme="gruvbox"] { /* ── Body ── */ color-scheme: dark; /* ── Scrollbar ── */ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* ── Séparateur navbar ── */ .adam-nav-divider { background: rgba(255,255,255,0.1); } /* ── Page d'accueil publique ── */ .home-hero-wrapper { background: linear-gradient(180deg, var(--bg-lighter) 0%, var(--bg-light) 100%); } .home-hero-title { color: var(--text-primary); } .home-hero-tag { background: rgba(255,255,255,0.05); color: var(--text-secondary); } .home-hero-tag.accent { background: var(--accent-bg); } .home-hero-float { background: var(--bg-white); } .home-hero-float-title, .home-hero-float-label { color: var(--text-primary); } .home-section-title { color: var(--text-primary); } .home-blog-card { background: var(--bg-white); } .home-blog-card-title { color: var(--text-primary); } .home-cta-secondary { background: rgba(255,255,255,0.06); color: var(--text-primary); border-color: var(--border-medium); } .home-cta-secondary:hover { background: rgba(255,255,255,0.1); } /* ── Dashboard ── */ .dash-wrapper { background: var(--bg-light); } /* ── Login ── */ .login-label { color: var(--text-muted); } .login-input-wrapper { background: var(--input-bg); border-color: var(--input-border); } .login-input-wrapper:focus-within { background: var(--bg-lighter); } .login-input-wrapper input { color: var(--input-text); } /* ── Footer ── */ .adam-footer-public, .adam-footer-private { background: var(--bg-white); border-color: var(--border); } /* ── Freebox cards ── */ .fbx-card { background: var(--bg-white); border-color: var(--border); } .fbx-card--raw { background: var(--bg-lighter); } .fbx-card--danger { background: rgba(255,68,85,0.08); } .fbx-card--info { background: var(--accent-bg); } .fbx-device-card { background: var(--bg-white); border-color: var(--border); } .fbx-dns-row--blocked { background: rgba(255,68,85,0.06); } .fbx-dns-row--blocked:hover { background: rgba(255,68,85,0.10); } /* ── Freebox alerts ── */ .fbx-alert--success { background: rgba(78,205,196,0.10); color: var(--color-success); border-color: rgba(78,205,196,0.3); } .fbx-alert--error { background: rgba(255,68,85,0.10); color: var(--color-danger); border-color: rgba(255,68,85,0.3); } .fbx-alert--info { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-soft); } /* ── Freebox badges ── */ .fbx-badge--online { background: rgba(78,205,196,0.15); color: var(--color-success); } .fbx-badge--reachable{ background: rgba(255,183,71,0.15); color: var(--color-warning); } .fbx-badge--offline { background: var(--bg-light); color: var(--text-muted); } .fbx-badge--warning { background: rgba(255,183,71,0.15); color: var(--color-warning); border-color: rgba(255,183,71,0.3); } .fbx-badge--info { background: var(--accent-bg); color: var(--accent); border: none; } .fbx-badge--error { background: rgba(255,68,85,0.10); color: var(--color-danger); } /* ── Signal / temp indicators ── */ .fbx-signal--excellent { background: rgba(78,205,196,0.15); color: var(--color-success); } .fbx-signal--fair { background: rgba(255,183,71,0.15); color: var(--color-warning); } .fbx-signal--poor { background: rgba(255,68,85,0.10); color: var(--color-danger); } .fbx-temp--warm { background: rgba(255,183,71,0.12); border-color: rgba(255,183,71,0.3); } .fbx-temp--hot { background: rgba(255,68,85,0.10); border-color: rgba(255,68,85,0.3); } /* ── Metric / misc light panels ── */ .fbx-metric--highlight { background: var(--bg-lighter); } /* ── Notes sidebar action gradient ── */ .sidebar-folder-actions { background: linear-gradient(to right, transparent, var(--bg-light) 30%); } } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } html[data-theme="dark"] ::-webkit-scrollbar { width: 5px; height: 5px; } html[data-theme="darcula"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } html[data-theme="darcula"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } html[data-theme="darcula"] ::-webkit-scrollbar { width: 6px; height: 6px; } html[data-theme="twilight"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } html[data-theme="twilight"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } html[data-theme="twilight"] ::-webkit-scrollbar { width: 5px; height: 5px; } html[data-theme="nord"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } html[data-theme="nord"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } html[data-theme="nord"] ::-webkit-scrollbar { width: 5px; height: 5px; } /* ════════════════════════════════════════════════════════════ THÈME SÉLECTEUR — UI dans la navbar ════════════════════════════════════════════════════════════ */ .theme-switcher { position: relative; display: inline-flex; align-items: center; } .theme-switcher-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid var(--border-medium, #d0d0d0); color: var(--text-muted, #888); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-size: 13px; } .theme-switcher-btn:hover { background: var(--bg-light, #f5f5f5); color: var(--accent, #4f6bdc); border-color: var(--accent, #4f6bdc); } .theme-switcher-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-white, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 0.75rem; z-index: 9999; min-width: 180px; flex-direction: column; gap: 0.35rem; } .theme-switcher-panel.is-open { display: flex; } .theme-switcher-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted, #888); font-family: 'Space Mono', monospace; margin-bottom: 0.25rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border, #e0e0e0); } .theme-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 5px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font, inherit); transition: background-color 0.12s ease; color: var(--text-secondary, #616161); font-size: 0.8rem; } .theme-option:hover { background: var(--bg-light, #f5f5f5); } .theme-option.is-active { background: var(--accent-bg, #eef1fd); color: var(--accent, #4f6bdc); font-weight: 500; } .theme-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,0.1); } .theme-dot--light { background: linear-gradient(135deg, #ffffff 50%, #4f6bdc 50%); } .theme-dot--dark { background: linear-gradient(135deg, #050810 50%, #00e5cc 50%); } .theme-dot--darcula { background: linear-gradient(135deg, #2b2b2b 50%, #6897bb 50%); } .theme-dot--twilight { background: linear-gradient(135deg, #1e2235 50%, #7c9fd4 50%); } .theme-dot--nord { background: linear-gradient(135deg, #2e3440 50%, #88c0d0 50%); } .theme-dot--dracula { background: linear-gradient(135deg, #282a36 50%, #bd93f9 50%); } .theme-dot--tokyonight { background: linear-gradient(135deg, #1a1b26 50%, #7aa2f7 50%); } .theme-dot--monokai { background: linear-gradient(135deg, #272822 50%, #fd971f 50%); } .theme-dot--gruvbox { background: linear-gradient(135deg, #282828 50%, #fe8019 50%); } .theme-dot--catppuccin { background: linear-gradient(135deg, #eff1f5 50%, #1e66f5 50%); } .theme-dot--solarized { background: linear-gradient(135deg, #eee8d5 50%, #268bd2 50%); } .theme-dot--sepia { background: linear-gradient(135deg, #f8f0e3 50%, #8b6914 50%); }