/*! * Mode sombre du site UPS in Space / OJBT — feuille generee, ne pas editer a la main. * Source : generer_mode_sombre.py * * Le theme Avada declare sa palette globale sur :root sous forme de variables * --awb-colorN, avec leurs composantes -h, -s, -l et -a que le theme recombine * dans des expressions hsla(). Redefinir les douze couleurs et leurs composantes * sous une portee plus specifique que :root bascule donc l'ensemble du theme, * sans modifier son CSS compile ni aucun reglage Fusion. * * Portee 1 : le visiteur a choisi explicitement (attribut data-theme sur ). * Portee 2 : le visiteur n'a rien choisi, on suit le reglage de son systeme. */ /* Le choix explicite du clair doit aussi aligner les widgets natifs. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* accent profond, inverse en accent clair — #2c4873 en clair */ --awb-custom_color_2: #8fb3d8; --awb-custom_color_2-h: 210; --awb-custom_color_2-s: 48%; --awb-custom_color_2-l: 70%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #171c2c; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* accent profond, inverse en accent clair — #2c4873 en clair */ --awb-custom_color_2: #8fb3d8; --awb-custom_color_2-h: 210; --awb-custom_color_2-s: 48%; --awb-custom_color_2-l: 70%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #171c2c; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } } /* ── Reglages qui ne decoulent pas de la palette ───────────────────────────── */ /* Avada peint le fond du site depuis une option distincte de la palette : sans cette regle, une bande claire subsiste derriere le contenu en mode sombre. */ :root[data-theme="dark"] body, :root[data-theme="dark"] #wrapper { background-color: var(--awb-color1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) #wrapper { background-color: var(--awb-color1); } } /* ── Bouton de bascule ────────────────────────────────────────────────────── */ /* L'element de menu qui porte le bouton : Avada met ses menus en flex, l'entree ajoutee doit s'y aligner sans heriter des puces de liste. */ .ojbt-item-theme { display: flex; align-items: center; list-style: none; } /* Le bouton s'insere comme dernier element du menu : il herite donc de la typographie et de la couleur du menu, et ne pose que sa propre zone de clic. */ .ojbt-bascule-theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid currentColor; border-radius: 2px; color: inherit; font: inherit; line-height: 1; padding: 6px 9px; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease; } .ojbt-bascule-theme:hover, .ojbt-bascule-theme:focus-visible { opacity: 1; } .ojbt-bascule-theme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .ojbt-bascule-theme svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Repli lorsqu'aucun menu n'a pu accueillir le bouton : il flotte alors en bas a droite, au-dessus du contenu, sur un fond pris dans la palette courante. */ .ojbt-bascule-theme--flottante { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: var(--awb-color1); color: var(--awb-color8); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); opacity: 1; } /* L'animation de survol n'a pas lieu d'etre pour qui demande moins de mouvement. */ @media (prefers-reduced-motion: reduce) { .ojbt-bascule-theme { transition: none; } }