/* =========================================================================== PARAMÈTRES GÉNÉRAUX (.par-*) — grille deux colonnes, interrupteurs, seuils. D'OÙ ÇA VIENT Passation « Projet EasyTime — Design 29 », design_handoff_parametres. Écran : Components/Pages/App/ParametresGeneraux.razor, route /app/parametres-generaux. SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css La passation demandait une concaténation au gabarit. Le dépôt ne le fait plus depuis que deux branches ouvertes le même jour y ont ajouté chacune leur bloc et se sont heurtées — jamais sur le fond, qui ne se recouvre pas d'un écran à l'autre, mais sur la DERNIÈRE LIGNE du fichier et sur la CLÉ DE CACHE que chacune bumpait. Un écran nouveau prend sa feuille et sa ligne dans App.razor ; ce qui sert à deux écrans remonte au gabarit, jamais l'inverse. AUCUNE COULEUR EN DUR — la passation donne des hex (#0A6ED1, #FEF7F1, #8A4A0C…), ce sont très exactement les jetons --et-* de easytech-theme.css, et c'est par eux que le mode sombre passe. LES CARTES SONT DES .md-card, comme sur tous les écrans EasyTime déjà portés (périodes, fériés) et comme le demandait la passation. Le gabarit porte bien une .mx-carte, mais aucun écran ne la consomme encore : l'inaugurer ici aurait donné à cet écran-là un cadre que ses voisins n'ont pas. TROIS CLASSES DE LA PASSATION NE SONT PAS REPRISES SOUS SON NOM · .mx-btn-plat → .mx-btn du gabarit, qui EST déjà ce bouton, au pixel près : 32 px, transparent, bleu SAP, arrondi 4 px, fond --et-tint au survol, --et-inerte désactivé. En reposer un jumeau aurait fait deux vérités pour un même bouton. · .mx-switch → .par-switch, puis DE NOUVEAU .mx-switch. Le report était conditionnel — « le jour où un deuxième écran le pose, il remonte en section 11 sous son nom mx- » — et la fiche des natures d'heures l'a posé. La règle a donc quitté cette feuille pour le gabarit, état inerte compris. · .mx-input-suffixe → .par-suffixe, puis de nouveau .mx-input-suffixe, pour la même raison et avec trois autres écrans : terminaux, conventions et natures en portaient chacun leur copie. =========================================================================== */ /* --- Grille --------------------------------------------------------------- Deux colonnes : l'écran d'origine tenait sur un tiers de la largeur, les deux tiers restants vides. `auto-fit` replie les cartes sous 420 px sans media query — la colonne des interrupteurs passe alors AU-DESSUS des seuils, ce qui est le bon ordre : on règle le pointage avant de régler ce qui le juge. */ .par-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; } .par-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .par-corps { padding: 4px 18px 16px; } /* --- Interrupteur --------------------------------------------------------- .par-switch A ÉTÉ PROMU EN .mx-switch (modele-erp.css, section 11). La note de cette feuille l'annonçait : « le jour où un deuxième écran le pose, il remonte en section 11 sous son nom mx-, et cette règle-ci disparaît ». La fiche des natures d'heures l'a posé ; la règle a donc disparu, et il ne reste ici aucun réglage propre à cet écran — l'état inerte est monté avec elle, c'est un état de l'interrupteur et non de l'écran des paramètres. -------------------------------------------------------------------------- */ /* --- Avertissements ------------------------------------------------------- L'encre est --et-avertissement-ink et non --et-avertissement : le second vaut 2,9:1 sur ce fond, sous le seuil AA. La teinte reste la même famille, prise un cran plus bas. */ .par-avert { margin-top: 12px; display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-bord); font-size: 12px; line-height: 1.55; color: var(--et-avertissement-ink); } .par-avert > i { flex: none; margin-top: 1px; color: var(--et-avertissement-ink); } .par-avert > span { flex: 1; min-width: 0; } .par-avert.est-marge { margin: 0 18px 16px; } /* Une information qui n'appelle AUCUNE action se dit en bleu, non en ambre : le défaut d'option d'abonnement ne se corrige pas depuis cet écran. */ .par-avert.est-neutre { background: var(--et-tint); border-color: var(--et-form-border); color: var(--et-ink); } .par-avert.est-neutre > i { color: var(--et-form-blue-encre); } /* --- Bandeau d'information ------------------------------------------------ */ .par-bandeau { padding: 12px 18px; background: var(--et-tint); border-bottom: 1px solid var(--et-form-border); font-size: 12px; line-height: 1.6; color: var(--et-ink); } .par-bandeau a { color: var(--et-form-blue-encre); font-weight: 600; text-decoration: none; } .par-bandeau a:hover { color: var(--et-form-blue-d); text-decoration: underline; } /* --- Seuils --------------------------------------------------------------- Un seuil n'est pas une rangée de formulaire dense : sa valeur ne se lit pas seule, elle se lit CONTRE un repère et sous une phrase qui dit ce qu'elle déclenche. La colonne de 158 px du gabarit n'a pas de place pour les deux, et c'est pourquoi ces blocs ne sont pas des .mx-champ. */ .par-seuils { padding: 14px 18px 6px; } .par-seuil { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--et-rang); } .par-seuil:last-child { border-bottom: none; } .par-seuil .tete { display: flex; align-items: baseline; gap: 10px; row-gap: 4px; flex-wrap: wrap; } .par-seuil .tete label { flex: 1 1 200px; min-width: 160px; font-size: 12px; font-weight: 600; color: var(--et-ink); } .par-seuil .tete .unite { font-weight: 400; color: var(--et-faint); } /* Le repère ne se montre QUE quand la valeur s'en écarte, et alors en ambre : le rappeler quand elle y est n'ajoute rien, et le taire quand elle n'y est pas cacherait une décision. */ .par-seuil .repere { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); } .par-seuil .repere.est-ecart { color: var(--et-avertissement-ink); } .par-seuil .corps { margin-top: 6px; display: flex; align-items: flex-start; gap: 12px; row-gap: 8px; flex-wrap: wrap; } /* Base non nulle sur les deux : le champ garde sa largeur utile et l'aide passe à la ligne plutôt que de se comprimer sur quatre lignes. C'est de la MISE EN PAGE ; la réserve du suffixe, elle, est posée plus bas avec sa note. */ .par-seuil .mx-input-suffixe { flex: 0 1 190px; min-width: 150px; } .par-seuil .aide { flex: 1 1 220px; min-width: 200px; font-size: 12px; line-height: 1.55; color: var(--et-faint); } .par-seuil .aide.est-attention { color: var(--et-danger-ink); } .par-seuil .mx-input.est-erreur { border-color: var(--et-danger); color: var(--et-danger-ink); } /* --- Champ à suffixe ------------------------------------------------------ .par-suffixe A ÉTÉ PROMU EN .mx-input-suffixe (modele-erp.css, section 11). Ne reste ici que la RÉSERVE de padding, qui dépend de la longueur des suffixes de cet écran (« min », « m », « j ») et non du composant. -------------------------------------------------------------------------- */ .par-seuil .mx-input-suffixe { --mx-suffixe-reserve: 34px; } /* « min », « m », « j » */ /* --- Traçabilité ---------------------------------------------------------- */ .par-trace .ligne { display: flex; align-items: baseline; gap: 14px; padding: 9px 18px; border-bottom: 1px solid var(--et-rang); } .par-trace .lbl { flex: none; width: 150px; text-align: right; font-size: 12px; color: var(--et-muted); } .par-trace .val { flex: 1; min-width: 0; font-size: 13px; color: var(--et-ink); } .par-trace .val.mono { font-family: var(--et-font-mono); } /* --- Emplacement du stockage des photos (db/1220) ------------------------- UN CHEMIN SE LIT EN MONO ET SUR TOUTE LA LARGEUR : coupé dans une colonne étroite, « D:\EasyTime\BiometricPhotos » devient « D:\EasyTime\Biome… », et c'est justement la fin qui distingue deux dossiers voisins. Le champ ne partage donc pas la rangée avec sa note, contrairement aux seuils. SES DEUX BOUTONS SONT DANS LA CARTE, et c'est le seul endroit de l'écran où une action ne vit pas dans la barre d'en-tête. La raison n'est pas décorative : ce formulaire-ci part SEUL, par son propre appel et sous une autorisation différente (le dossier est celui du serveur, pas de la société). Le poser sous le bouton d'en-tête laisserait croire qu'« Enregistrer » l'emporte aussi — et il ne l'emporte pas. Aucun des deux n'est le bouton d'engagement : la charte n'en admet qu'un par écran. */ .par-chemin { padding: 4px 0 2px; } .par-chemin label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--et-muted); } .par-chemin .mx-input { width: 100%; } .par-chemin .aide { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--et-faint); } .par-chemin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* --- Pied de carte -------------------------------------------------------- IL NE PORTE AUCUNE ACTION — règle du gabarit : les actions vivent dans la barre d'en-tête, une fois pour toutes. Il porte la mention qui explique ce que la carte fait, d'où le fond alterné et le gris atténué. */ .par-pied { padding: 11px 18px; background: var(--et-surface-3); border-top: 1px solid var(--et-hairline); font-size: 12px; line-height: 1.55; color: var(--et-faint); } /* --- Repli ---------------------------------------------------------------- Sous 480 px, l'intitulé de traçabilité repasse au-dessus de sa valeur : la colonne de 150 px alignée à droite y prend plus de la moitié de l'écran. */ @media (max-width: 480px) { .par-trace .ligne { flex-wrap: wrap; gap: 2px; } .par-trace .lbl { width: 100%; text-align: left; } } /* --- La carte du logo de la société ------------------------------------------ Un aperçu, deux boutons, une note. La note reprend la graisse et la teinte de celles des seuils et du chemin de photos — c'est la même nature de texte, et .aide n'était jusqu'ici servie que sous .par-seuil et .par-chemin : posée nue dans un corps de carte, elle passait en texte courant. Pas de couleur nouvelle, pas de palier : la carte suit la grille des autres. */ .par-logo { display: flex; flex-direction: column; gap: 10px; } .par-logo .aide { font-size: 12px; line-height: 1.55; color: var(--et-faint); }