/* ============================================================ THEMES — une seule feuille, chargee apres style.css. Principe : style.css definit la palette « creme » dans :root et ne contient plus de couleur ecrite en dur. Un theme n'est donc qu'une liste de tokens redefinis sur . Aucune regle de mise en page n'est dupliquee : ajouter un theme = ajouter un bloc d'une quinzaine de lignes ici, rien d'autre dans l'application. Le theme suit le COMPTE (chacun son ecran), avec un theme par defaut du cabinet pour ceux qui n'ont rien choisi. Voir /moncompte. `color-scheme` n'est pas decoratif : c'est lui qui fait basculer les calendriers natifs (input type=date), les barres de defilement et le curseur de saisie. Sans lui, le theme sombre garde un selecteur de date blanc eblouissant. ============================================================ */ /* ------------------------------------------------ 1. Creme (defaut) */ /* Defini dans :root (style.css). Ce bloc n'existe que pour que le choix « creme » soit explicite et pour reprendre la main si un autre theme etait applique avant. */ :root, [data-theme="creme"] { color-scheme: light; } /* ------------------------------------------------ 2. Papier */ /* Le blanc franc, sans chaleur. Le plus neutre : c'est celui qu'on choisit quand on veut que RIEN dans l'interface n'attire l'oeil. */ [data-theme="papier"] { color-scheme: light; --encre: #1B2320; --encre2: #39433F; --gris: #6B7671; --faint: #9AA3A0; --trait: #E5E8E7; --trait2: #D3D8D6; --fond: #F7F8F8; --papier: #FFFFFF; --panel2: #F0F3F2; --accent: #0F8A7C; --ok: #0C6E63; --danger: #C64B67; --amber: #9A6B10; --amber-bg: #FBF3DE; --amber-ln: #E7CE93; --ombre-carte: 0 2px 6px -4px rgba(20, 30, 28, .18); --ombre-btn: 0 6px 16px -8px rgba(15, 138, 124, .5); } /* ------------------------------------------------ 3. Azur */ /* Bleu de bureau. Pense pour le secretariat : la journee entiere passee sur la console, un fond froid fatigue moins qu'un fond chaud. */ [data-theme="azur"] { color-scheme: light; --encre: #14243C; --encre2: #32435E; --gris: #64748B; --faint: #94A3B8; --trait: #DCE5F1; --trait2: #C5D3E7; --fond: #F1F5FC; --papier: #FFFFFF; --panel2: #E9F0FA; --accent: #1D6FD0; --ok: #0F766E; --danger: #C6425C; --amber: #A96C0E; --amber-bg: #FCF2DA; --amber-ln: #E9CA85; --cible-bg: #EEF5FF; --cible-bg-fort: #D9E8FC; --cible-ln: #1D6FD0; --ombre-carte: 0 2px 6px -4px rgba(20, 40, 70, .22); --ombre-btn: 0 6px 16px -8px rgba(29, 111, 208, .55); } /* ------------------------------------------------ 4. Ardoise */ /* Gris froid, accent bleu profond. Sobre, un peu « logiciel metier » : c'est le theme qui se fait le plus oublier sur un grand ecran. */ [data-theme="ardoise"] { color-scheme: light; --encre: #1A1F24; --encre2: #333B43; --gris: #68717B; --faint: #97A0AA; --trait: #E0E4E8; --trait2: #CBD1D7; --fond: #F2F4F6; --papier: #FFFFFF; --panel2: #E9ECF0; --accent: #3E5C76; --ok: #2F6B5E; --danger: #B44254; --amber: #8E6412; --amber-bg: #F7F0DC; --amber-ln: #DDC48A; --cible-bg: #EEF2F6; --cible-bg-fort: #DCE4EC; --cible-ln: #3E5C76; --ombre-carte: 0 2px 6px -4px rgba(26, 31, 36, .22); --ombre-btn: 0 6px 16px -8px rgba(62, 92, 118, .5); } /* ------------------------------------------------ 5. Sauge */ /* Vert doux, tres proche du creme en luminosite : le passage de l'un a l'autre ne desoriente personne. */ [data-theme="sauge"] { color-scheme: light; --encre: #1B2A23; --encre2: #38493F; --gris: #6A7A70; --faint: #99A69D; --trait: #DCE4DA; --trait2: #C6D2C2; --fond: #F2F6F0; --papier: #FFFFFF; --panel2: #EAF0E7; --accent: #3F7D58; --ok: #2F6B4A; --danger: #B94A5E; --amber: #97701A; --amber-bg: #F7F1DC; --amber-ln: #DFC98D; --ombre-carte: 0 2px 6px -4px rgba(30, 50, 40, .2); --ombre-btn: 0 6px 16px -8px rgba(63, 125, 88, .5); } /* ------------------------------------------------ 6. Terre */ /* Chaud et marque : le creme pousse d'un cran, terracotta en accent. Le theme a proposer a un cabinet dont le site est deja dans ces tons. */ [data-theme="terre"] { color-scheme: light; --encre: #2A1F19; --encre2: #4A3A30; --gris: #7C6B5F; --faint: #A89686; --trait: #E9DCCD; --trait2: #D8C5B0; --fond: #F8F1E9; --papier: #FFFFFF; --panel2: #F2E8DD; --accent: #B0552F; --ok: #0C6E63; --danger: #B23A48; --amber: #9C6C10; --amber-bg: #FAEFD5; --amber-ln: #E4C482; --cible-bg: #FBF1E8; --cible-bg-fort: #F5E0CE; --cible-ln: #B0552F; --ombre-carte: 0 2px 6px -4px rgba(70, 45, 25, .25); --ombre-btn: 0 6px 16px -8px rgba(176, 85, 47, .5); } /* ------------------------------------------------ 7. Contraste */ /* Noir sur blanc, traits nets, accent sature. Pour un ecran fatigue, une piece en plein soleil, ou une personne qui lit mal les gris. */ [data-theme="contraste"] { color-scheme: light; --encre: #000000; --encre2: #16202C; --gris: #3A4550; --faint: #55636F; --trait: #A9B4BF; --trait2: #8C99A5; --fond: #FFFFFF; --papier: #FFFFFF; --panel2: #EEF2F6; --accent: #0B5FA5; --ok: #0A6B4F; --danger: #A81330; --amber: #7A5200; --amber-bg: #FFF3D0; --amber-ln: #C79A16; --ok-tx: #04432F; --dgr-tx: #7A0C22; --info-tx: #063A5E; --amb-tx: #5E3D00; --neutre-tx: #2F3A45; --ombre-carte: 0 0 0 1px rgba(0, 0, 0, .06); --ombre-btn: none; } /* ------------------------------------------------ 8. Nuit */ /* Le seul theme sombre : il doit redefinir AUSSI les familles semantiques, sinon les pastilles pastel (envoye / echec / a relancer) deviennent des taches claires illisibles. */ [data-theme="nuit"] { color-scheme: dark; --encre: #E7EDEB; --encre2: #C2CDC9; --gris: #93A29D; --faint: #74827E; --trait: #2B3532; --trait2: #3B4643; --fond: #111816; --papier: #1A2220; --panel2: #212B28; --accent: #2FB8A6; --ok: #34D399; --danger: #F2708C; --sur-accent: #08110F; --amber: #E8B84B; --amber-bg: #33290F; --amber-ln: #574616; --ok-bg: #102E26; --ok-bg-fort: #174236; --ok-tx: #6EE7B7; --ok-ln: #1F5A4A; --ok-ln-fort: #2E7D68; --dgr-bg: #37181E; --dgr-bg-fort: #48212A; --dgr-tx: #FCA5A5; --dgr-ln: #5D2932; --danger-fort: #E05C7A; --amb-bg: #33290F; --amb-bg-doux: #2A2210; --amb-bg-fort: #473914; --amb-tx: #FCD34D; --amb-ln: #574616; --info-bg: #10283A; --info-tx: #7DD3FC; --info-ln: #1D4157; --neutre-bg: #222A30; --neutre-tx: #AFBBC3; --neutre-ln: #38434B; --violet-bg: #231D38; --violet-tx: #C4B5FD; --cible-bg: #15302B; --cible-bg-fort: #1C4038; --cible-ln: #2FB8A6; --bulle-ok: #0F766E; --bulle-ko: #9F1239; --ombre-carte: 0 2px 8px -4px rgba(0, 0, 0, .7); --ombre-btn: 0 6px 16px -8px rgba(47, 184, 166, .5); --ombre-forte: rgba(0, 0, 0, .7); } /* Les couleurs d'IDENTITE (role d'un compte, teinte d'un praticien) ne sont pas des tokens : elles doivent rester reconnaissables d'un theme a l'autre. En sombre, seules leurs versions pastel sont reprises. */ [data-theme="nuit"] .tuile.role-admin .rond, [data-theme="nuit"] .role-tag.admin { background: #241F45; color: #B7AEFF; } [data-theme="nuit"] .tuile.role-secretariat .rond, [data-theme="nuit"] .role-tag.secretariat { background: #10303A; color: #67D6EC; } [data-theme="nuit"] .tuile.role-praticien .rond, [data-theme="nuit"] .role-tag.praticien { background: #12301D; color: #6EE08A; } /* Le fond de la camera et les visuels poses sur du blanc. */ [data-theme="nuit"] img.sur-blanc { background: #FFFFFF; border-radius: 6px; }