/* Thèmes GIPS (27/09) — couleurs relevées sur gips-alternative.com : marine #1D3761 (en-tête, texte), orange #F39220 (boutons, menu actif), gris clair #F4F5F7 (fonds), bleu d'accent #2F5AAE (liens), police Arial / Helvetica partout (30/09, celle de la lecture des mails). Actifs seulement si la personne a choisi « GIPS clair » ou « GIPS sombre » (data-gips-theme). */ /* ===== Système graphique GIPS (04/10 — « tout doit être uniformisé ») ===================================================== UNE échelle pour tout ce que nous dessinons par-dessus ERPNext. Avant : 15 arrondis, 16 tailles de texte et ~300 couleurs écrites en dur, différents d'un écran à l'autre. Nos écrans n'utilisent plus que ces jetons et les composants plus bas. Arrondis : xs 4 (codes) · s 8 (boutons, champs, lignes de menu) · m 10 (cartes, menus, panneaux) · l 14 (carte de fiche, fenêtres) · pilule (pastilles, compteurs). Texte : xs 11 (compteurs, mentions) · s 12 (secondaire) · m 13 (courant) · l 16 (titre de section) · xl 18 (titre de carte). Sens : vert = fait / actif · orange = attention / en cours · rouge = erreur / urgent · bleu = information · gris = neutre. */ /* UNE échelle pour GIPS ET pour ERPNext (04/10, « répandu vers tout ERPNext ») : nos tailles de texte SONT celles d'ERPNext (--text-xs 12 · --text-sm 13 · --text-lg 16 · --text-xl 18) ; ses arrondis SONT les nôtres (plus bas). */ :root { --gips-r-xs: 4px; --gips-r-s: 8px; --gips-r-m: 10px; --gips-r-l: 14px; --gips-r-pilule: 999px; --gips-t-xs: 11px; --gips-t-s: var(--text-xs, 12px); --gips-t-m: var(--text-sm, 13px); --gips-t-l: var(--text-lg, 16px); --gips-t-xl: var(--text-xl, 18px); --gips-ombre-carte: 0 1px 2px rgba(0, 0, 0, .06); --gips-ombre-menu: 0 8px 24px rgba(0, 0, 0, .18); --gips-ombre-fenetre: 0 16px 48px rgba(0, 0, 0, .28); /* Couleurs de la marque, valables avec tous les thèmes (les thèmes GIPS les reprennent plus bas). */ --gips-marine: #1D3761; --gips-marine-fonce: #152a4b; --gips-orange: #F39220; --gips-orange-fonce: #DB7F12; --gips-bleu: #2F5AAE; --gips-gris: #F4F5F7; /* Couleurs de sens : la couleur, son texte lisible, son fond doux. */ --gips-vert: #16A765; --gips-vert-texte: #0b7a4a; --gips-vert-fond: color-mix(in srgb, #16A765 16%, transparent); --gips-rouge: #E8453C; --gips-rouge-texte: #b3261e; --gips-rouge-fond: color-mix(in srgb, #E8453C 15%, transparent); --gips-bleu-texte: #2F5AAE; --gips-bleu-fond: color-mix(in srgb, #2F5AAE 15%, transparent); --gips-jaune: #F5B700; --gips-jaune-texte: #1d2433; /* texte posé SUR le jaune plein */ /* 21/10 (audit visuel) : fond jaune doux (bandeaux « DEV : envois simulés » de Mail) — il n'existait pas : fond transparent et texte foncé, illisible en thème sombre. Le texte d'un fond doux est celui du thème (--text-color). */ --gips-jaune-fond: color-mix(in srgb, #F5B700 18%, transparent); --gips-sur-couleur: #fff; /* texte posé sur une couleur pleine (bouton orange, compteur rouge) */ /* Version 2.00 (audit G14) : les dernières couleurs écrites en dur dans nos scripts. */ --gips-neutre: #5F6B7A; /* gris des pastilles sans couleur, des notifications sans type */ --gips-violet: #8E63CE; /* points d'ERPNext dans la cloche */ --gips-bandeau-fond: #1D2433; --gips-bandeau-doux: #b9c3d3; /* bandeau sombre « Annuler » (le même dans les deux thèmes) */ /* Carte des sites (06/10 soir) : couleurs fixes, quel que soit le thème (le thème « sable » change le bleu en brun). */ /* 22/10 (audit lisibilité, B-07) : les intervenants en VIOLET (ils étaient rouges : le rouge veut dire « erreur »). */ --gips-carte-site: #2563EB; --gips-carte-ticket: #16A765; --gips-carte-intervenant: #8E63CE; --gips-carte-installateur: #F5B700; } [data-theme="dark"] { --gips-vert-texte: #6fd3a0; --gips-rouge-texte: #ff8a80; --gips-bleu-texte: #9DB8E8; --gips-ombre-menu: 0 8px 24px rgba(0, 0, 0, .45); } /* 24/10 (version 4.000, nouvelle présentation — maquettes validées par Guillaume : « oui parfait pour la mise en page ») : les jetons de la présentation, lus par presentation_gips.css. Chaque thème les tire de ses propres couleurs ; GIPS clair et GIPS sombre posent les valeurs de la maquette (plus bas, dans leurs blocs). Fond : --gips-fond-page (le gris bleuté sous les cartes). Filets : --gips-filet = trait entre deux zones (bord d'une carte, colonnes d'un tableau) ; --gips-filet-doux = trait à l'intérieur d'une carte (lignes, repères séparés, en-tête de carte). Menu : --gips-menu-fond (la marine), son texte, ses titres de groupe, son champ de recherche, ses traits ; l'entrée active en blanc sur la marine (--gips-menu-actif-*). Tableaux : --gips-tete-tableau (fond des en-têtes de colonnes), --gips-ligne-alternee (une ligne sur deux, discrète). Texte : --gips-t-corps 14 (menu, repères, lignes de tableau), --gips-t-titre 24 (titre de page et de fiche). */ :root { --gips-t-corps: var(--text-base, 14px); --gips-t-titre: 24px; --gips-menu-largeur: 264px; /* le menu ouvert (Frappe : 224 px) — « Consignes provisoires » et son nombre y tiennent */ --gips-fond-page: var(--bg-color); --gips-filet: var(--border-color); --gips-filet-doux: color-mix(in srgb, var(--border-color) 60%, transparent); --gips-menu-fond: var(--gips-marine); --gips-menu-texte: color-mix(in srgb, #ffffff 86%, var(--gips-menu-fond)); --gips-menu-doux: color-mix(in srgb, #ffffff 58%, var(--gips-menu-fond)); --gips-menu-champ: color-mix(in srgb, #ffffff 9%, var(--gips-menu-fond)); --gips-menu-filet: color-mix(in srgb, #ffffff 14%, transparent); --gips-menu-survol: color-mix(in srgb, #ffffff 8%, transparent); --gips-menu-actif-fond: #ffffff; --gips-menu-actif-texte: var(--gips-menu-fond); --gips-menu-env-fond: color-mix(in srgb, var(--gips-orange) 24%, var(--gips-menu-fond)); /* pastille « Développement » du pied */ --gips-menu-env-texte: color-mix(in srgb, var(--gips-orange) 42%, #ffffff); --gips-tete-tableau: color-mix(in srgb, var(--text-color) 3%, var(--card-bg)); --gips-ligne-alternee: color-mix(in srgb, var(--text-color) 1.6%, var(--card-bg)); } /* 22/10 (audit de lisibilité, T5) : le cœur « J'aime » de Frappe (cartes du tableau, lignes de liste, fiche) n'a pas d'usage chez GIPS. */ .like-action, .list-row-like, .list-liked-by-me { display: none !important; } /* Composants partagés : à utiliser au lieu d'en redessiner un dans chaque écran. */ .gips-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--gips-r-pilule); font-size: var(--gips-t-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; background: var(--control-bg); color: var(--text-muted); text-transform: none; } .gips-pastille.vert { background: var(--gips-vert-fond); color: var(--gips-vert-texte); } .gips-pastille.orange { background: var(--gips-fond-orange); color: var(--gips-orange-texte); } .gips-pastille.rouge { background: var(--gips-rouge-fond); color: var(--gips-rouge-texte); } .gips-pastille.bleu { background: var(--gips-bleu-fond); color: var(--gips-bleu-texte); } /* 14/10 (Guillaume : « tout ce qui est téléchargeable, une couleur bien précise — l'orange — ; même taille, même alignement que les pastilles ») : un bouton qui télécharge un document (preuve, PDF, liste…) est une pastille ORANGE avec la flèche de téléchargement. */ .gips-telecharger { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--gips-r-pilule); font-size: var(--gips-t-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 0; background: var(--gips-orange); color: var(--gips-sur-couleur, #fff); } .gips-telecharger:hover, .gips-telecharger:focus-visible { background: var(--gips-orange-fonce); color: var(--gips-sur-couleur, #fff); } .gips-telecharger .icon { margin: 0 !important; --icon-stroke: currentColor; stroke: currentColor; } .gips-code { font-family: ui-monospace, Menlo, monospace; font-size: var(--gips-t-s); padding: 1px 8px; border-radius: var(--gips-r-xs); border: 1px solid var(--border-color); background: var(--control-bg); } .gips-compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--gips-r-pilule); background: var(--gips-rouge); color: var(--gips-sur-couleur); font-size: var(--gips-t-xs); font-weight: 700; line-height: 1; } /* 22/10 (audit de lisibilité, M5) : les compteurs étaient en 9-10 px (« 99+ » illisible menu replié), sous le minimum de la charte : 11 px (--gips-t-xs) partout, 18 px de haut (16 px menu replié). */ .gips-carte { border: 1px solid var(--border-color); border-radius: var(--gips-r-m); background: var(--card-bg); padding: 12px 14px; } .gips-menu { position: absolute; z-index: 1060; min-width: 220px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--gips-r-m); box-shadow: var(--gips-ombre-menu); padding: 4px; font-size: var(--gips-t-m); } .gips-menu > a, .gips-menu > button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: var(--gips-r-s); color: var(--text-color); cursor: pointer; text-align: left; font-size: inherit; } .gips-menu > a:hover, .gips-menu > button:hover { background: var(--control-bg); text-decoration: none; } .gips-titre-section { font-size: var(--gips-t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 6px; } .gips-vide { color: var(--text-muted); font-size: var(--gips-t-m); text-align: center; padding: 16px 8px; } .gips-bouton-rond { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-color); cursor: pointer; } .gips-bouton-rond:hover { background: var(--control-bg); } /* Compteurs : rouge = à traiter (défaut) ; orange = en cours ; jaune = nouveau ; gris = simple nombre. */ .gips-compteur.orange { background: var(--gips-orange); color: var(--gips-sur-couleur); } .gips-compteur.jaune { background: var(--gips-jaune); color: var(--gips-jaune-texte); } .gips-compteur.gris { background: var(--control-bg); color: var(--text-muted); } /* 14/10 (filtres rapides des listes, listes_gips.css) : le sens des couleurs du système — rouge = erreur, bleu = information, vert = fait. */ .gips-compteur.rouge { background: var(--gips-rouge); color: var(--gips-sur-couleur); } .gips-compteur.bleu { background: var(--gips-bleu); color: var(--gips-sur-couleur); } .gips-compteur.vert { background: var(--gips-vert); color: var(--gips-sur-couleur); } /* Onglets, filtres et choix exclusifs (04/10 : un seul « actif » partout — il était orange ici, marine là, illisible en sombre). */ .gips-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--gips-r-pilule); border: 1px solid var(--border-color); background: transparent; color: var(--text-color); font-size: var(--gips-t-s); cursor: pointer; white-space: nowrap; } .gips-onglet:hover { background: var(--control-bg); } /* 21/10 (audit visuel) : un TEXTE en couleur d'accent (--primary) ne se lit pas sur fond clair (orange GIPS sur blanc : 1,8 de contraste — onglets actifs « Tous », « Mois », « À surveiller », « Tout déplier ») : --gips-accent-texte, l'accent du thème mêlé à la couleur du texte (plus foncé en clair, plus clair en sombre), dans les 20 thèmes. Fonds et bordures gardent --primary. */ :root { --gips-accent-texte: color-mix(in srgb, var(--primary) 58%, var(--text-color)); } .gips-onglet.actif { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: var(--gips-accent-texte); font-weight: 700; } /* Le menu unique (16/10, audit 3.001, étape 2, version 3.010 — MEN-2 ; public/js/menu_gips.js) : « + Nouveau ▾ » et « Rechercher… Ctrl K » en tête, les nombres sur les entrées, « Paramètres » au pied. Il remplace la barre de pictogrammes (barre_applications.js). Menu replié (dans Mail notamment) : les pictogrammes seuls. */ /* 24/10 (4.000, menu condensé) : la tête tient sur une ligne — la recherche, puis le « + » carré orange de « Nouveau » (les mêmes choix au clic que l'ancien « + Nouveau ▾ »). Menu replié : les deux pictogrammes l'un sous l'autre. */ .gips-tete-menu { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-color); } .gips-tete-menu .gips-nouveau { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: var(--gips-r-s); font-size: var(--gips-t-m); font-weight: 700; } .gips-tete-menu .gips-nouveau .icon { margin: 0 !important; --icon-stroke: currentColor; stroke: currentColor; } .gips-tete-menu .gips-rechercher { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 5px 10px; cursor: text; border: 1px solid var(--border-color); border-radius: var(--gips-r-s); background: var(--control-bg); color: var(--text-muted); font-size: var(--gips-t-m); text-align: left; } .gips-tete-menu .gips-rechercher .gips-libelle:not(kbd) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gips-tete-menu .gips-rechercher:hover, .gips-tete-menu .gips-rechercher:focus-visible { border-color: var(--primary); } .gips-tete-menu .gips-rechercher .icon { margin: 0 !important; flex: none; } .gips-tete-menu .gips-rechercher kbd { margin-left: auto; font-size: var(--gips-t-xs); padding: 1px 5px; border-radius: var(--gips-r-xs); border: 1px solid var(--border-color); background: transparent; color: inherit; box-shadow: none; flex: none; /* 21/10 (audit visuel) : « Ctrl K » collé en haut de sa case (hauteur de ligne du de Frappe) — centré. */ display: inline-flex; align-items: center; line-height: 1.4; } .body-sidebar-container:not(.expanded) .gips-tete-menu { flex-direction: column; align-items: center; padding: 6px 0 8px; } .body-sidebar-container:not(.expanded) .gips-tete-menu .gips-libelle { display: none; } .body-sidebar-container:not(.expanded) .gips-tete-menu .gips-nouveau, .body-sidebar-container:not(.expanded) .gips-tete-menu .gips-rechercher { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; } .body-sidebar-container:not(.expanded) .body-sidebar-top { overflow-x: hidden; } /* 17/10 (Guillaume : « le menu replié dans Mail ») : chaque groupe a son pictogramme (menu_gips.js, poser_icones) — celui ajouté à un groupe (Le dossier, Interventions…) ne se voit que menu replié ; ouvert, le groupe garde son seul titre. */ .body-sidebar .gips-icone-menu { display: inline-flex; align-items: center; justify-content: center; flex: none; } .body-sidebar-container.expanded .body-sidebar .gips-icone-ajoutee { display: none; } /* Une seule recherche : le « Rechercher » de Frappe en haut du menu laisse la place au nôtre (même fenêtre, ouverte par la palette). */ body.gips-menu-unique .body-sidebar .navbar-modal-search-mobile { display: none !important; } /* Les nombres du menu et du Bureau (UN appel : fiche_globale.compteurs.lire, compteurs_gips.js). */ .body-sidebar .gips-compteur-menu { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; } /* 21/10 (audit visuel) : menu replié, « 99+ » (22 px) posé à 2 px du bord couvrait le pictogramme de Mail — il passe sur le coin. */ .body-sidebar-container:not(.expanded) .body-sidebar .gips-compteur-menu { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; font-size: var(--gips-t-xs); padding: 0 3px; } .body-sidebar a:has(> .gips-compteur-menu), .body-sidebar a:has(.gips-compteur-menu) { position: relative; } .gips-porte-comptee { position: relative; } .gips-compteur-bureau { position: absolute; top: -4px; right: -4px; z-index: 1; font-variant-numeric: tabular-nums; } /* « Paramètres » au pied du menu, séparé du reste. */ .body-sidebar .gips-pied-menu { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border-color); } /* « + Nouveau ▾ » (menu, Ma journée, touche N) : le composant .gips-menu, une ligne par entrée avec son explication. */ .gips-menu-nouveau { min-width: 260px; } .gips-menu-nouveau > button { align-items: flex-start; } .gips-menu-nouveau > button .icon { margin: 2px 0 0 !important; flex: none; } .gips-menu-nouveau > button span { display: flex; flex-direction: column; } .gips-menu-nouveau > button small { color: var(--text-muted); font-size: var(--gips-t-s); } .gips-menu-nouveau > button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* Sur le menu foncé des thèmes GIPS : traits et champ en blanc transparent (comme les séparateurs du menu). */ [data-gips-theme] .body-sidebar .gips-tete-menu { border-bottom-color: color-mix(in srgb, var(--gips-sur-couleur) 14%, transparent); } [data-gips-theme] .body-sidebar .gips-rechercher { background: color-mix(in srgb, var(--gips-sur-couleur) 8%, transparent); border-color: color-mix(in srgb, var(--gips-sur-couleur) 18%, transparent); color: var(--ink-gray-6); } [data-gips-theme] .body-sidebar .gips-rechercher:hover { background: color-mix(in srgb, var(--gips-sur-couleur) 14%, transparent); } [data-gips-theme] .body-sidebar .gips-pied-menu { border-top-color: color-mix(in srgb, var(--gips-sur-couleur) 14%, transparent); } /* ===== ERPNext suit le même système (04/10) ============================================================================== Les écrans natifs (listes, fiches, fenêtres, menus, statuts) ne sont pas réécrits : on branche les variables avec lesquelles ERPNext les dessine sur les nôtres, et on aligne les quelques composants qu'il dessine autrement. */ /* 14/10 au soir (Guillaume : « le bleu sur fond blanc, le blanc sur couleur foncée ») : le logo complet suit le thème — .gips-logo (ou var(--gips-logo)) partout où il s'affiche dans l'interface. */ :root, [data-theme="light"] { --gips-logo: url("/assets/fiche_globale/images/gips-logo-bleu.png"); } [data-theme="dark"] { --gips-logo: url("/assets/fiche_globale/images/gips-logo.png"); } .gips-logo { display: inline-block; width: 180px; height: 56px; background: var(--gips-logo) no-repeat left center / contain; } :root, [data-theme="light"], [data-theme="dark"] { --border-radius-tiny: var(--gips-r-xs); --border-radius-sm: var(--gips-r-s); --border-radius: var(--gips-r-s); --border-radius-md: var(--gips-r-m); --border-radius-lg: var(--gips-r-l); --border-radius-full: var(--gips-r-pilule); } /* Statuts (listes et en-tête des fiches) = nos pastilles : mêmes couleurs de sens, même graisse. */ .indicator-pill, .indicator-pill-right { font-size: var(--gips-t-xs); font-weight: 700; letter-spacing: .01em; } .indicator-pill.green, .indicator-pill-right.green { background: var(--gips-vert-fond); color: var(--gips-vert-texte); } .indicator-pill.red, .indicator-pill-right.red { background: var(--gips-rouge-fond); color: var(--gips-rouge-texte); } .indicator-pill.orange, .indicator-pill-right.orange, .indicator-pill.yellow, .indicator-pill-right.yellow { background: var(--gips-fond-orange); color: var(--gips-orange-texte); } .indicator-pill.blue, .indicator-pill-right.blue, .indicator-pill.cyan, .indicator-pill-right.cyan, .indicator-pill.purple, .indicator-pill-right.purple { background: var(--gips-bleu-fond); color: var(--gips-bleu-texte); } .indicator-pill.gray, .indicator-pill-right.gray, .indicator-pill.grey, .indicator-pill-right.grey, .indicator-pill.darkgrey, .indicator-pill-right.darkgrey { background: var(--control-bg); color: var(--text-muted); } /* Menus déroulants = .gips-menu */ .dropdown-menu { border-radius: var(--gips-r-m); box-shadow: var(--gips-ombre-menu); border: 1px solid var(--border-color); padding: 4px; } .dropdown-menu .dropdown-item { border-radius: var(--gips-r-s); font-size: var(--gips-t-m); } /* Fenêtres = celles de nos écrans (palette, envoi) */ .modal-content { border-radius: var(--gips-r-l); box-shadow: var(--gips-ombre-fenetre); } .modal-header .modal-title { font-size: var(--gips-t-l); font-weight: 700; } /* Cartes et blocs de l'accueil */ .frappe-card, .widget, .number-widget-box, .form-dashboard-section .section-body .frappe-card { border-radius: var(--gips-r-m); } /* Titres de section des fiches : comme nos titres de bloc. */ .form-section .section-head { font-size: var(--gips-t-l); font-weight: 700; color: var(--gips-texte-fort); } /* Couleurs de nos écrans (30/09 : « bleu sur fond bleu », pastilles qui éblouissent en sombre) : un jeton par rôle, redéfini pour le thème sombre. Nos écrans n'écrivent plus de couleur en dur. */ :root { --gips-texte-fort: #1D3761; /* marine : valeurs, titres de blocs */ --gips-lien-fort: #2F5AAE; /* bleu GIPS : liens, sélection */ --gips-fond-doux: #f4f6fa; /* pastilles, cartes secondaires */ --gips-fond-orange: #fff4e6; /* ce qui demande attention */ --gips-orange-texte: #9A4F00; /* orange lisible sur fond clair (09/10 : #B86400 → 4,0 de contraste, 5,6 ici) */ --gips-etape-faite: #E3EAF5; --gips-etape-a-venir: #EEF1F5; --gips-etape-a-venir-texte: #6b7686; } [data-theme="dark"] { --gips-texte-fort: #dbe4f0; --gips-lien-fort: #9DB8E8; --gips-fond-doux: rgba(157, 184, 232, 0.08); --gips-fond-orange: rgba(243, 146, 32, 0.14); /* 22/10 (audit lisibilité, B-108) : plus clair — le bandeau de la consigne provisoire (texte orange sur fond brun) était terne. */ --gips-orange-texte: #FFC98A; --gips-etape-faite: rgba(157, 184, 232, 0.18); --gips-etape-a-venir: rgba(255, 255, 255, 0.05); --gips-etape-a-venir-texte: #9fb0c8; } /* Indicateurs de l'accueil réglés en marine ou bleu GIPS : relevés en thème sombre. */ [data-theme="dark"] .number-widget-box .number[style*="#1D3761" i], [data-theme="dark"] .number-widget-box .number[style*="#2F5AAE" i] { color: var(--gips-lien-fort) !important; } [data-gips-theme] { --gips-marine: #1D3761; --gips-marine-fonce: #152a4b; --gips-orange: #F39220; --gips-orange-fonce: #DB7F12; --gips-gris: #F4F5F7; --gips-bleu: #2F5AAE; --primary: var(--gips-orange); --primary-color: var(--gips-orange); --brand-color: var(--gips-marine); --btn-primary: var(--gips-orange); --border-primary: var(--gips-orange); --progress-bar-bg: var(--gips-orange); --date-active-bg: var(--gips-marine); --checkbox-gradient: linear-gradient(180deg, var(--gips-orange) -124.51%, var(--gips-orange) 100%); } /* Blanc cassé (Guillaume, 30/09 : « le blanc casse un peu les yeux ») : cartes, fenêtres et champs un ton plus doux. */ [data-gips-theme="clair"] { --gips-bouton-texte: #152a4b; /* 09/10 : blanc sur l'orange GIPS = 2,3 de contraste ; marine foncé = lisible */ /* 24/10 (4.000, nouvelle présentation) : les valeurs de la maquette — fond #EEF1F5 (avant : #E7E9EE), filets #DDE2EA et #E8EBF0, menu en marine #16294A. Les cartes redeviennent BLANCHES, comme sur la maquette : le blanc cassé du 30/09 (« le blanc casse un peu les yeux ») couvrait toute la page ; désormais la grande surface est le gris bleuté du fond, le blanc n'est plus que dans les cartes (le beige du blanc cassé, posé sur ce gris froid, salissait les cartes). Champs et puces en gris froid (#F6F7F9 de la maquette). */ --gips-fond-page: #EEF1F5; --gips-filet: #DDE2EA; --gips-filet-doux: #E8EBF0; --gips-menu-fond: #16294A; --border-color: var(--gips-filet); --bg-color: var(--gips-fond-page); --fg-color: #FFFFFF; --card-bg: #FFFFFF; --modal-bg: #FFFFFF; --popover-bg: #FFFFFF; --navbar-bg: #FFFFFF; --control-bg: #F3F5F8; --control-bg-on-gray: #E9EDF2; --subtle-fg: #F3F5F8; --subtle-accent: #eef1f6; --highlight-color: #eef1f6; --text-color: var(--gips-marine); --heading-color: var(--gips-marine); } /* Une seule police partout : Questrial (Guillaume, 09/10 : « on enlève le Questrial, on met du Questrial, il est beaucoup plus joli »), servie par l'application (SIL Open Font License). Une seule graisse : le gras est dessiné par le navigateur. Version 2.00 (audit A3) : en WOFF2 réduit aux caractères latins (29 Ko au lieu de 184 Ko), le TTF reste en secours (et pour les PDF). */ @font-face { font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fiche_globale/fonts/questrial/Questrial-Regular.woff2") format("woff2"), url("/assets/fiche_globale/fonts/questrial/Questrial-Regular.ttf") format("truetype"); } :root { --font-stack: Questrial, Arial, Helvetica, "Liberation Sans", sans-serif; } body, .frappe-control, .form-control, .btn, input, textarea, select, button, .page-title .title-text, .ellipsis.title-text, .widget-title, h1, h2, h3, h4, h5, h6 { font-family: var(--font-stack); } /* Barre latérale marine (l'en-tête du site) ; élément actif sur fond orange (le menu « Accueil ») */ [data-gips-theme] .body-sidebar { background: var(--gips-menu-fond); /* 24/10 (4.000) : le jeton du menu (#16294A en GIPS clair, la marine du thème ailleurs) */ border-right-color: var(--gips-marine-fonce); --sidebar-hover-color: rgba(255, 255, 255, 0.08); --sidebar-active-color: var(--gips-orange); --ink-gray-5: #b9c6da; --ink-gray-6: #dbe4f0; --ink-gray-7: #e8eef6; --ink-gray-8: #ffffff; --ink-gray-9: #ffffff; --icon-stroke: #dbe4f0; color: #dbe4f0; } /* 09/10 : depuis Frappe 16.51 l'élément actif est peint avec --surface-elevation-3 (blanc) : texte blanc sur blanc dans les thèmes à menu foncé (Guillaume : « ça fait blanc sur fond marron, je vois rien »). Il prend l'accent du thème et le texte prévu pour les boutons de ce thème (lisible sur l'accent, clair ou foncé). */ [data-gips-theme] .body-sidebar { --desk-sidebar-bg: var(--gips-menu-fond); } /* GIPS clair et GIPS sombre : le blanc sur l'orange GIPS ne se lit pas (contraste 2,3 pour 4,5 attendus — mesuré le 09/10 sur les 20 thèmes) : texte marine foncé sur l'orange, pour l'élément actif du menu comme pour les boutons principaux. */ /* 24/10 (4.000, nouvelle présentation) : l'entrée active est BLANCHE, son texte et son pictogramme en marine (avant : fond orange) — l'orange reste à « + Nouveau » et aux nombres. */ [data-gips-theme] .body-sidebar .active-sidebar { background: var(--gips-menu-actif-fond); box-shadow: none; } [data-gips-theme] .body-sidebar .active-sidebar, [data-gips-theme] .body-sidebar .active-sidebar .sidebar-item-label, [data-gips-theme] .body-sidebar .active-sidebar .item-anchor, [data-gips-theme] .body-sidebar .active-sidebar .sidebar-item-icon { color: var(--gips-menu-actif-texte) !important; font-weight: 700; --icon-stroke: var(--gips-menu-actif-texte); --ink-gray-8: var(--gips-menu-actif-texte); } /* 21/10 (audit visuel) : menu replié, le GROUPE qui contient la page ouverte (« Le dossier » sur la liste des sites) était peint par Frappe en --surface-elevation-3 (blanc) avec son pictogramme en blanc : un carré blanc vide. Il prend la couleur de l'élément actif. */ [data-gips-theme] .body-sidebar-container:not(.expanded) .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item { background: var(--gips-menu-actif-fond); box-shadow: none; --icon-stroke: var(--gips-menu-actif-texte); --ink-gray-8: var(--gips-menu-actif-texte); } [data-gips-theme] .body-sidebar-container:not(.expanded) .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .item-anchor, [data-gips-theme] .body-sidebar-container:not(.expanded) .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-icon { color: var(--gips-menu-actif-texte) !important; --icon-stroke: var(--gips-menu-actif-texte); } /* Sur le bleu du menu, les titres sont en blanc (Guillaume, 30/09) : nom de l'application en tête, nom de la personne en bas, « Prise en main ». */ [data-gips-theme] .body-sidebar .header-title, [data-gips-theme] .body-sidebar .dropdown-navbar-user .d-block, [data-gips-theme] .body-sidebar .onboarding-sidebar, [data-gips-theme] .body-sidebar .onboarding-sidebar * { color: #ffffff !important; } [data-gips-theme] .body-sidebar .dropdown-navbar-user .text-secondary { color: #b9c6da !important; } /* …mais les fenêtres qui s'ouvrent depuis le menu (cloche, menu de l'utilisateur) ont leur propre fond : elles reprennent les couleurs normales du thème. */ [data-gips-theme] .body-sidebar .dropdown-notifications, [data-gips-theme] .body-sidebar .dropdown-menu { color: var(--text-color); --icon-stroke: var(--text-color); } [data-gips-theme][data-theme="light"] .body-sidebar .dropdown-notifications, [data-gips-theme][data-theme="light"] .body-sidebar .dropdown-menu { --ink-gray-5: #7c7c7c; --ink-gray-6: #525252; --ink-gray-7: #383838; --ink-gray-8: var(--text-color); --ink-gray-9: var(--text-color); } [data-gips-theme] .body-sidebar .dropdown-notifications .gc-sujet, [data-gips-theme] .body-sidebar .dropdown-notifications .gc-qui b { color: var(--text-color); } [data-gips-theme] .body-sidebar .divider, [data-gips-theme] .body-sidebar .section-break { border-color: rgba(255, 255, 255, 0.12); } /* Boutons principaux : orange, texte blanc (le bouton « Nous contacter ») */ [data-gips-theme] .btn-primary, [data-gips-theme] .btn.btn-primary { background-color: var(--gips-orange); border-color: var(--gips-orange); color: var(--gips-bouton-texte, #ffffff); } [data-gips-theme] .btn-primary:hover, [data-gips-theme] .btn-primary:focus, [data-gips-theme] .btn-primary:active { background-color: var(--gips-orange-fonce); border-color: var(--gips-orange-fonce); color: var(--gips-bouton-texte, #ffffff); } /* Liens, onglets, focus */ [data-gips-theme][data-theme="light"] .form-control-plaintext a, [data-gips-theme][data-theme="light"] .like-disabled-input a, [data-gips-theme][data-theme="light"] .frappe-control a:not(.btn) { color: var(--gips-bleu); } [data-gips-theme] .form-tabs-list .nav-link.active { color: var(--text-color); border-bottom-color: var(--gips-orange); } [data-gips-theme] .form-control:focus, [data-gips-theme] .awesomplete input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gips-orange) 35%, transparent); } /* GIPS sombre : la famille du marine plutôt que le gris-noir ; orange pour l'action */ [data-gips-theme="sombre"] { --gips-bouton-texte: #152a4b; /* 09/10 : idem GIPS clair */ /* 24/10 (4.000, nouvelle présentation) : les jetons de la maquette en bleu nuit — menu #0b1628 (celui d'avant), filets clairs. */ --gips-menu-fond: #0b1628; --gips-filet: rgba(219, 228, 240, 0.16); --gips-filet-doux: rgba(219, 228, 240, 0.09); --bg-color: #0f1d33; --fg-color: #152844; --card-bg: #152844; --modal-bg: #152844; --popover-bg: #152844; --navbar-bg: #0f1d33; --subtle-accent: #1a3050; --subtle-fg: #1d3761; --control-bg: #1d3761; --control-bg-on-gray: #244271; --fg-hover-color: #1d3761; /* Séparations claires sur le bleu nuit (Guillaume, 01/10 au soir : « des lignes claires, on y verrait plus clair ») */ --border-color: rgba(219, 228, 240, 0.16); --dark-border-color: rgba(219, 228, 240, 0.26); --table-border-color: rgba(219, 228, 240, 0.14); --outline-gray-1: rgba(219, 228, 240, 0.10); --outline-gray-2: rgba(219, 228, 240, 0.16); --outline-gray-3: rgba(219, 228, 240, 0.24); --surface-menu-bar: #0b1628; /* 09/10 : le gris secondaire était à 4,2 de contraste sur le bleu nuit (4,5 attendus). */ --text-muted: #b3c2d6; --text-light: #b3c2d6; } [data-gips-theme="sombre"] .body-sidebar { background: var(--gips-menu-fond); border-right-color: #1a3050; } [data-gips-theme][data-theme="dark"] .form-tabs-list .nav-link.active { color: #ffffff; } [data-gips-theme][data-theme="dark"] .frappe-control a:not(.btn) { color: var(--gips-lien-fonce, #8fb0ec); } /* Aperçus dans « Changer de thème » */ .modal [data-theme="gips-clair"] .background { background: #F4F5F7; } .modal [data-theme="gips-clair"] .navbar { background: #1D3761; } .modal [data-theme="gips-clair"] .foreground { background: #ffffff; } .modal [data-theme="gips-clair"] .primary { background: #F39220; } .modal [data-theme="gips-clair"] .text { background: #1D3761; } .modal [data-theme="gips-sombre"] .background { background: #0f1d33; } .modal [data-theme="gips-sombre"] .navbar { background: #0b1628; } .modal [data-theme="gips-sombre"] .foreground { background: #152844; } .modal [data-theme="gips-sombre"] .primary { background: #F39220; } .modal [data-theme="gips-sombre"] .text { background: #dbe4f0; } /* Aides en bulles (30/09) : le texte d'aide sous un champ devient un « ? » à côté du libellé (gips_utils.js). */ .form-layout .fg-aide-bulle .help-box { display: none !important; } .fg-aide-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; font-size: var(--gips-t-xs); font-weight: 700; line-height: 1; vertical-align: 1px; cursor: help; color: var(--text-muted); border: 1px solid var(--border-color); background: transparent; } .fg-aide-i:hover, .fg-aide-i:focus-visible { color: #fff; background: var(--gips-orange, #F39220); border-color: var(--gips-orange, #F39220); outline: none; } /* Pictogrammes du bureau (30/09) : emblème GIPS (Ma journée, depuis le 16/10) et enveloppe (Mail) aux couleurs GIPS ; en thème sombre, une version plus claire (dossier desktop_icons/sombre). */ [data-theme="dark"] img[src*="/fiche_globale/icons/desktop_icons/"][src$="/fiche_globale.svg"] { content: url("/assets/fiche_globale/icons/desktop_icons/sombre/fiche_globale.svg"); } [data-theme="dark"] img[src*="/fiche_globale/icons/desktop_icons/"][src$="/boite_commune.svg"] { content: url("/assets/fiche_globale/icons/desktop_icons/sombre/boite_commune.svg"); } /* 16/10 (audit 3.001, MEN-3) : les 4 portes du Bureau dans le même style — Ma journée (l'emblème GIPS, fichier fiche_globale.svg), Mail, Agenda, Paramètres — et le dossier « Outils ERPNext » de la Direction. */ [data-theme="dark"] img[src*="/fiche_globale/icons/desktop_icons/"][src$="/agenda.svg"] { content: url("/assets/fiche_globale/icons/desktop_icons/sombre/agenda.svg"); } [data-theme="dark"] img[src*="/fiche_globale/icons/desktop_icons/"][src$="/reglages_gips.svg"] { content: url("/assets/fiche_globale/icons/desktop_icons/sombre/reglages_gips.svg"); } [data-theme="dark"] img[src*="/fiche_globale/icons/desktop_icons/"][src$="/outils_erpnext.svg"] { content: url("/assets/fiche_globale/icons/desktop_icons/sombre/outils_erpnext.svg"); } /* 16/10 (vu à l'écran) : Frappe coupe le libellé d'une icône du Bureau sur une ligne (« Outils ERPN… ») — entier, sur deux lignes au plus, centré. */ body.desktop-page .icon-caption { text-wrap: wrap; height: auto; min-height: 35px; } body.desktop-page .icon-title { white-space: normal; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Les palettes des 18 thèmes de couleur (Guillaume, 01/10 et 07/10 : sauge, lavande, sable… rubis) : 16/10 (audit 3.001, MEN-8), chacune dans son fichier public/css/themes/.css, chargé seulement quand ce thème est choisi (public/js/theme_gips.js) — 19,5 ko de moins sur chaque page. Contrastes vérifiés par test (texte ≥ 7:1 sur les cartes, boutons ≥ 4,5:1, menu ≥ 7:1). Ci-dessous : les aperçus de « Changer de thème » (petits, gardés ici). */ .modal [data-theme="gips-sauge"] .background { background: #E4EAE2; } .modal [data-theme="gips-sauge"] .navbar { background: #2B4536; } .modal [data-theme="gips-sauge"] .foreground { background: #F3F6F1; } .modal [data-theme="gips-sauge"] .primary { background: #3F7355; } .modal [data-theme="gips-sauge"] .text { background: #1F3328; } .modal [data-theme="gips-lavande"] .background { background: #E7E5F0; } .modal [data-theme="gips-lavande"] .navbar { background: #352F5C; } .modal [data-theme="gips-lavande"] .foreground { background: #F6F4FA; } .modal [data-theme="gips-lavande"] .primary { background: #5E4F99; } .modal [data-theme="gips-lavande"] .text { background: #2A2547; } .modal [data-theme="gips-sable"] .background { background: #ECE6DB; } .modal [data-theme="gips-sable"] .navbar { background: #45362A; } .modal [data-theme="gips-sable"] .foreground { background: #F9F6F0; } .modal [data-theme="gips-sable"] .primary { background: #9A4F1C; } .modal [data-theme="gips-sable"] .text { background: #3A2E22; } .modal [data-theme="gips-ocean"] .background { background: #E0EAEC; } .modal [data-theme="gips-ocean"] .navbar { background: #123F4C; } .modal [data-theme="gips-ocean"] .foreground { background: #F2F7F8; } .modal [data-theme="gips-ocean"] .primary { background: #17697A; } .modal [data-theme="gips-ocean"] .text { background: #12343D; } .modal [data-theme="gips-ardoise"] .background { background: #E3E6EA; } .modal [data-theme="gips-ardoise"] .navbar { background: #27313C; } .modal [data-theme="gips-ardoise"] .foreground { background: #F5F6F8; } .modal [data-theme="gips-ardoise"] .primary { background: #355F94; } .modal [data-theme="gips-ardoise"] .text { background: #1F2933; } .modal [data-theme="gips-foret"] .background { background: #111A16; } .modal [data-theme="gips-foret"] .navbar { background: #0C1410; } .modal [data-theme="gips-foret"] .foreground { background: #17231D; } .modal [data-theme="gips-foret"] .primary { background: #7CC19A; } .modal [data-theme="gips-foret"] .text { background: #E3EDE6; } .modal [data-theme="gips-prune"] .background { background: #1A1424; } .modal [data-theme="gips-prune"] .navbar { background: #120D1A; } .modal [data-theme="gips-prune"] .foreground { background: #221A2F; } .modal [data-theme="gips-prune"] .primary { background: #C9A3EC; } .modal [data-theme="gips-prune"] .text { background: #ECE6F5; } .modal [data-theme="gips-graphite"] .background { background: #1B1B1D; } .modal [data-theme="gips-graphite"] .navbar { background: #141416; } .modal [data-theme="gips-graphite"] .foreground { background: #232326; } .modal [data-theme="gips-graphite"] .primary { background: #E8A15A; } .modal [data-theme="gips-graphite"] .text { background: #ECEAE6; } .modal [data-theme="gips-corail"] .background { background: #E8E0DE; } .modal [data-theme="gips-corail"] .navbar { background: #3E231E; } .modal [data-theme="gips-corail"] .foreground { background: #F7F3F2; } .modal [data-theme="gips-corail"] .primary { background: #A13F2B; } .modal [data-theme="gips-corail"] .text { background: #341D19; } .modal [data-theme="gips-azur"] .background { background: #DEE3E8; } .modal [data-theme="gips-azur"] .navbar { background: #1E303E; } .modal [data-theme="gips-azur"] .foreground { background: #F2F5F7; } .modal [data-theme="gips-azur"] .primary { background: #296CA3; } .modal [data-theme="gips-azur"] .text { background: #192834; } .modal [data-theme="gips-menthe"] .background { background: #DEE8E5; } .modal [data-theme="gips-menthe"] .navbar { background: #1E3E36; } .modal [data-theme="gips-menthe"] .foreground { background: #F2F7F6; } .modal [data-theme="gips-menthe"] .primary { background: #2A7E69; } .modal [data-theme="gips-menthe"] .text { background: #19342D; } .modal [data-theme="gips-ambre"] .background { background: #E8E4DE; } .modal [data-theme="gips-ambre"] .navbar { background: #3E311E; } .modal [data-theme="gips-ambre"] .foreground { background: #F7F5F2; } .modal [data-theme="gips-ambre"] .primary { background: #98661B; } .modal [data-theme="gips-ambre"] .text { background: #342919; } .modal [data-theme="gips-framboise"] .background { background: #E8DEE1; } .modal [data-theme="gips-framboise"] .navbar { background: #3E1E29; } .modal [data-theme="gips-framboise"] .foreground { background: #F7F2F4; } .modal [data-theme="gips-framboise"] .primary { background: #993355; } .modal [data-theme="gips-framboise"] .text { background: #341922; } .modal [data-theme="gips-olive"] .background { background: #E5E8DE; } .modal [data-theme="gips-olive"] .navbar { background: #363E1E; } .modal [data-theme="gips-olive"] .foreground { background: #F6F7F2; } .modal [data-theme="gips-olive"] .primary { background: #687934; } .modal [data-theme="gips-olive"] .text { background: #2D3419; } .modal [data-theme="gips-minuit"] .background { background: #11151D; } .modal [data-theme="gips-minuit"] .navbar { background: #0C1017; } .modal [data-theme="gips-minuit"] .foreground { background: #181C25; } .modal [data-theme="gips-minuit"] .primary { background: #74CBDC; } .modal [data-theme="gips-minuit"] .text { background: #E3E6ED; } .modal [data-theme="gips-cuivre"] .background { background: #1D1611; } .modal [data-theme="gips-cuivre"] .navbar { background: #17110C; } .modal [data-theme="gips-cuivre"] .foreground { background: #251D18; } .modal [data-theme="gips-cuivre"] .primary { background: #DC9E74; } .modal [data-theme="gips-cuivre"] .text { background: #EDE7E3; } .modal [data-theme="gips-encre"] .background { background: #11131D; } .modal [data-theme="gips-encre"] .navbar { background: #0C0E17; } .modal [data-theme="gips-encre"] .foreground { background: #181A25; } .modal [data-theme="gips-encre"] .primary { background: #DCC274; } .modal [data-theme="gips-encre"] .text { background: #E3E5ED; } .modal [data-theme="gips-rubis"] .background { background: #1D1113; } .modal [data-theme="gips-rubis"] .navbar { background: #170C0E; } .modal [data-theme="gips-rubis"] .foreground { background: #25181A; } .modal [data-theme="gips-rubis"] .primary { background: #DC748E; } .modal [data-theme="gips-rubis"] .text { background: #EDE3E5; } [data-gips-theme][data-theme="dark"]:not([data-gips-theme="sombre"]) .body-sidebar { background: var(--gips-menu-fond); border-right-color: var(--border-color); } /* Encadré « E-mails » des fiches (04/10) : repliable, replié par défaut (emails_document.js). */ .fg-emails-boite .fg-emails-titre { display: flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 6px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; } .fg-emails-boite .fg-emails-titre:focus-visible { outline: 2px solid var(--gips-bleu); outline-offset: 2px; border-radius: var(--gips-r-xs); } .fg-emails-boite .fg-emails-chevron { display: inline-flex; transition: transform .15s ease; transform: rotate(90deg); } .fg-emails-boite.fg-emails-replie .fg-emails-chevron { transform: none; } .fg-emails-boite.fg-emails-replie .fg-emails-liste { display: none; } .fg-emails-boite .fg-emails-fil { display: block; padding: 3px 0; text-decoration: none; font-size: var(--gips-t-s); } .fg-emails-boite .fg-emails-non-lu { font-weight: 600; } .fg-emails-boite .fg-emails-de { font-size: var(--gips-t-xs); padding-left: 14px; } @media (prefers-reduced-motion: reduce) { .fg-emails-boite .fg-emails-chevron { transition: none; } } /* Ticket › Rendez-vous (05/10) : la liste des RDV, comme dans l'Agenda (issue.js). */ .fg-rdv-liste { display: flex; flex-direction: column; gap: 4px; } .fg-rdv-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--gips-r-s); background: var(--card-bg); color: var(--text-color); cursor: pointer; font-size: var(--gips-t-m); } .fg-rdv-ligne:hover { border-color: var(--gips-orange); } .fg-rdv-ligne .ag-point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } /* 08/10 (Guillaume : « au moins 200 pixels vers le bas… que le tableau ne s'arrête pas un peu bêtement. Partout. ») : de l'air sous chaque fiche, liste et page, plutôt qu'un contenu écrasé contre le bas de l'écran. Sauf l'agenda et la carte, qui tiennent dans l'écran. */ /* Mail et Messages occupent tout l'écran (12/10) : pas de marge sous eux, donc pas de défilement de la page. */ .page-container:not([data-page-route="agenda"]):not([data-page-route="carte-gips"]):not([data-page-route="boite-commune"]):not([data-page-route="messages"]) .layout-main-section-wrapper { padding-bottom: 200px; } /* 09/10 (Guillaume : « à certains endroits, comme les tickets, il faut du texte en gras ») : le titre de ce qu'on suit se lit d'abord — cartes des kanbans (tickets, contrats, alertes), objet dans les listes, éléments de « Ma journée ». Questrial n'a qu'une graisse (400) : le navigateur dessine le gras. */ /* Frappe 16.51 met le titre en 500 avec un sélecteur plus précis : le nôtre l'emporte (Guillaume, 09/10 : titre du ticket et nom du site en gras sur le kanban, « pour qu'on s'y retrouve mieux »). Le nom du site est le premier champ de la carte. */ .kanban .kanban-card .kanban-card-title, .kanban-card .kanban-title-area a { font-weight: 700 !important; color: var(--heading-color, var(--text-color)) !important; } .kanban .kanban-card .kanban-card-doc .kanban-doc-field:first-child, .kanban .kanban-card .kanban-card-doc .kanban-doc-field:first-child .truncate { font-weight: 700; color: var(--text-color) !important; } .list-row .list-subject a.ellipsis, .list-row .list-subject .level-item.bold { font-weight: 600; } .fg-journee .fj-l .fj-q > span:first-child { font-weight: 600; } /* 09/10 — lisibilité mesurée sur les 20 thèmes (Guillaume : « quelquefois c'est illisible à cause des thèmes ») : les textes d'aide sous les champs et les onglets non actifs étaient à 3,5-4 de contraste (4,5 attendus) ; ils prennent le gris secondaire du thème. */ .form-layout .help-box, .form-tabs .nav-link:not(.active) { color: var(--text-muted) !important; } /* 09/10 (Guillaume : « laisser de l'espace en bas de chaque page… au moins 200 px, la zone claire où l'on saisit s'arrête brutalement ») : 200 px de zone claire sous le dernier élément de chaque onglet de fiche. */ .form-layout .form-page { padding-bottom: 200px; } /* 10/10 — « Changer de thème » (Frappe 16.51) : une seule rangée prévue pour 3 thèmes ; avec les 23, des colonnes de quelques pixels (Guillaume : « problème d'affichage »). Grille de 4 par ligne (3 sur écran moyen, 2 sur téléphone) ; aperçus aux couleurs GIPS. */ .theme-grid { flex-wrap: wrap; max-height: 70vh; overflow-y: auto; padding: 2px; } .theme-grid .theme-card-wrapper { flex: 0 0 calc((100% - 36px) / 4); } @media (max-width: 991px) { .theme-grid .theme-card-wrapper { flex-basis: calc((100% - 24px) / 3); } } @media (max-width: 575px) { .theme-grid .theme-card-wrapper { flex-basis: calc((100% - 12px) / 2); } } .theme-grid .theme-card-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-preview-container[data-gips-theme] .theme-preview-frame { background: var(--bg-color); } .theme-preview-container[data-gips-theme] .theme-preview-sidebar { background: var(--gips-marine); } .theme-preview-container[data-gips-theme] .theme-preview-main { background: var(--fg-color); } .theme-preview-container[data-gips-theme] .theme-preview-header-action { background: var(--gips-orange); } /* 10/10 (Guillaume : « blanc sur fond blanc quand on passe la souris ») — Frappe 16.51 peint le survol (--surface-gray-2), l'en-tête « Fiche Globale » (--surface-gray-3 au survol, --surface-elevation-2 ouvert) avec des couleurs pensées pour un menu clair : sur nos menus foncés, un voile blanc léger garde le texte blanc lisible. Les fenêtres qui s'ouvrent depuis le menu reprennent leurs couleurs. */ [data-gips-theme] .body-sidebar { --surface-gray-2: rgba(255, 255, 255, 0.10); --surface-gray-3: rgba(255, 255, 255, 0.16); --surface-elevation-2: rgba(255, 255, 255, 0.14); } [data-gips-theme] .body-sidebar .dropdown-menu, [data-gips-theme] .body-sidebar .dropdown-notifications { --surface-gray-2: var(--subtle-fg); --surface-gray-3: var(--subtle-accent); --surface-elevation-2: var(--popover-bg, var(--fg-color)); } /* 10/10 : barre des applications de Frappe 16 (« dock ») coupée — doublon de la barre GIPS (public/js/gips_utils.js). */ #desk-dock { display: none !important; } /* Infobulles (Mail, 12/10) : jamais sous la souris. Posée par erreur sur l'icône qu'elle décrit, une infobulle prenait le clic à sa place et faisait boucler le survol (« ça alterne, ça ne charge pas »). Elles sont aussi bornées à la fenêtre (boundary: "window"). */ .tooltip { pointer-events: none; } /* 22/10 (audit lisibilité, B-21, B-90) : sur les fiches du dossier (site, intervention, consigne), une zone de texte suit son contenu — trois lignes au moins — au lieu de 300 px pour une ligne (« Consignes particulières », « Raison », « Réserves »). */ body[data-route^="Form/FG Site/"] .frappe-control textarea.form-control, body[data-route^="Form/FG Intervention/"] .frappe-control textarea.form-control, body[data-route^="Form/FG Consigne/"] .frappe-control textarea.form-control { field-sizing: content; height: auto; min-height: 4.8em; max-height: 24em; } /* Barres de défilement (13/10, Guillaume : « dès qu'il y a une barre de défilement, rends-la graphique par rapport au thème — un trait beaucoup plus fin, plus souple ») : un trait fin et arrondi, de la couleur du texte discret du thème en cours, qui prend l'accent au survol ; rail transparent. Horizontales et verticales, partout (pages, menus, tableaux, fenêtres). */ :root { --gips-defilement: color-mix(in srgb, var(--text-muted, #8a8f98) 38%, transparent); --gips-defilement-survol: color-mix(in srgb, var(--primary, #F39220) 70%, transparent); } * { scrollbar-width: thin; scrollbar-color: var(--gips-defilement) transparent; } *:hover { scrollbar-color: var(--gips-defilement-survol) transparent; } /* Navigateurs sans « scrollbar-color » (anciens Safari) : la même chose à l'ancienne. */ @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gips-defilement); border-radius: var(--gips-r-pilule); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--gips-defilement-survol); } ::-webkit-scrollbar-corner { background: transparent; } } /* 22/10 (audit de lisibilité, zone C — E7) : l'action principale de la barre d'une page (« Importer un relevé », « Ajouter »…) restait NOIRE alors que tous les boutons principaux GIPS sont orange : Frappe 16.51 la dessine en « es-button » plein et gris (data-variant="solid", variables --bt-solid-*), que la règle .btn-primary ci-dessus ne touche pas. Une couleur d'action : l'orange. R13 : de même le bouton principal des fenêtres (« Nouvelle version… » noir à côté de « Publier… » orange). */ [data-gips-theme] .page-actions .primary-action.es-button[data-variant="solid"]:not([data-theme="red"]), [data-gips-theme] .modal-footer .btn-modal-primary.es-button[data-variant="solid"]:not([data-theme="red"]) { --bt-solid-bg: var(--gips-orange); --bt-solid-bg-hover: var(--gips-orange-fonce); --bt-solid-bg-active: var(--gips-orange-fonce); --bt-solid-fg: var(--gips-bouton-texte, #ffffff); } /* 22/10 (audit de lisibilité, E11) : au téléphone, la 2e ligne des listes communes était coupée (« échéance le 11/1 ») — elle passe à la ligne au lieu de se couper (liste des factures et toutes les listes communes). */ @media (max-width: 767px) { .fg-liste .fg-l2 { white-space: normal; flex-wrap: wrap; } .fg-liste .fg-l2-texte { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } }