Ajustements des styles des formulaires pour suivre la refonte des boîtes + quelques détails (#4727)

* Mutualiser une partie des styles du titre : taille, graisse. On laisse tomber uppercase et couleur.
* Conserver la marge complète en haut dans le cadre d'entête, et une réduite en bas.
* Variante `.flat` avec bordure et sans ombre portée, appliquée automatiquement aux formulaires imbriqués.
* Tous les styles du form de date au même endroit

prive/themes/spip/forms.css.html

@@ -74,6 +74,7 @@
 	/* divers */
 	--spip-form-border-radius: var(--spip-border-radius); /* bordure inputs et cie */
 	--spip-form-input-height: calc((var(--spip-form-padding-input-y) * 2) + var(--spip-line-height)); /* à toute fin utile */
+	--spip-form-titrem-factor: 1.1; /* Pour la taille du titre */
 }
 @media (min-width: 768px) {
 	:root {
@@ -87,7 +88,8 @@
 		--spip-form-fieldset-offset: 2.5em;
 	}
 }
-.lat .formulaire_spip {
+.lat .formulaire_spip,
+.formulaire_spip.mini {
 	/* espacements externes (entre les inputs et cie) */
 	--spip-form-spacing-x: 0.75em;
 	--spip-form-spacing-y: 0.85em;
@@ -109,9 +111,9 @@
  * On regroupe tout au même endroit pour mutualiser et se simplifier la vie.
  */
 
-/* Gouttière latérale principale */
+/* Gouttière latérale principale.
+   Pour le titre ajuster selon la taille de la police. */
 .formulaire_spip,
-.formulaire_spip .titrem,
 .formulaire_spip fieldset,
 .formulaire_spip .editer-groupe,
 .formulaire_spip .editer,
@@ -119,9 +121,13 @@
 	padding-left: var(--spip-form-spacing-x);
 	padding-right: var(--spip-form-spacing-x);
 }
+.formulaire_spip .titrem {
+	padding-left: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));
+	padding-right: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));
+}
 
-/* Marges négatives pour annuler la gouttière */
-.formulaire_spip .titrem,
+/* Marges négatives pour annuler la gouttière.
+   Pour le titre ajuster selon la taille de la police. */
 .formulaire_spip .editer-groupe,
 .formulaire_spip fieldset,
 .formulaire_spip .editer,
@@ -129,6 +135,10 @@
 	margin-left: calc(var(--spip-form-spacing-x) * -1);
 	margin-right: calc(var(--spip-form-spacing-x) * -1);
 }
+.formulaire_spip .titrem {
+	margin-left: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);
+	margin-right: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);
+}
 
 
 /**
@@ -256,8 +266,8 @@
 }
 .entete-formulaire {
 	position:relative;
-	padding: calc(var(--spip-form-spacing-y) / 2) var(--spip-form-spacing-x);
-	padding-bottom: 0; /* Déjà une marge suffisante sous le h1 */
+	padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x);
+	padding-bottom: calc(var(--spip-form-spacing-y) / 2);
 	overflow: hidden;
 	background: var(--spip-color-white);
 	border-bottom: 1px solid var(--spip-form-sep-color);
@@ -305,7 +315,9 @@
 	box-shadow: var(--spip-box-shadow-hover);
 }
 
-/* Titre optionnel */
+/* Titre optionnel
+   Une partie de l'habillage est mutualisée avec ceux des boîtes : taille, graisse….
+	 Voir dans box_skins.css */
 .formulaire_spip .titrem {
 	display: flex;
 	align-items: center;
@@ -313,9 +325,7 @@
 	padding-bottom: var(--spip-form-spacing-y);
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
-	color: var(--spip-color-theme-dark);
 	border-bottom: 1px solid var(--spip-form-sep-color);
-	text-transform: uppercase;
 }
 
 /* Conteneur des saisies */
@@ -952,10 +962,7 @@
 
 
 .lat .formulaire_spip {
-	font-size: 0.9em;
-}
-.lat .formulaire_spip .titrem {
-	font-size: 1em;
+	font-size: 0.95em;
 }
 /* Tous les labels au dessus */
 .lat .formulaire_spip .editer {
@@ -995,24 +1002,18 @@
  * =======================================
  * 13. Formulaires dans certains contextes
  * =======================================
- * Fiche objet, constructeur de formulaire (formidable), …
  */
 
 
-/* Dans fiche objet */
+/* Formulaires flat : sans ombre portée, simple bordure */
+.formulaire_spip.flat,
 .fiche_objet .formulaire_spip,
-.formulaire_spip .formulaire_spip {
-	border: 1px solid hsla(0, 0%, 0%, 0.15); /* Nb : la variable est plutôt pour les bordures des inputs */
-	box-shadow: none;
-}
-.fiche_objet .formulaire_spip.formulaire_dater {
-	margin-top: 0;
-	border: 0;
-	border-radius: 0;
-	margin-left: -15px; /* = padding de fiche_objet */
-	margin-right: -15px; /* = padding de fiche_objet */
-	background-color: var(--spip-color-gray-lightest);
-	position: relative;
+.formulaire_spip .formulaire_spip,
+.box .formulaire_spip,
+.popin .entete-formulaire,
+.popin .formulaire_spip {
+	border: 1px solid var(--spip-form-border-color);
+	box-shadow: none !important;
 }
 
 /* Dans #wysiwyg */
@@ -1020,21 +1021,6 @@
 	font-size: 1rem;
 }
 
-/* Dans une modale */
-.popin .entete-formulaire,
-.popin .formulaire_spip,
-.popin .formulaire_spip:hover,
-.popin .formulaire_spip:focus-within {
-	box-shadow: none
-}
-.popin .entete-formulaire,
-.popin .formulaire_spip {
-	border: 1px solid var(--spip-form-border-color);
-}
-.popin .entete-formulaire {
-	border-bottom: none;
-}
-
 
 /**
  * ============================
@@ -1214,6 +1200,15 @@
 		display: inline-block;
 	}
 }
+.fiche_objet .formulaire_spip.formulaire_dater {
+	margin-top: 0;
+	border: 0;
+	border-radius: 0;
+	margin-left: -15px; /* = padding de fiche_objet */
+	margin-right: -15px; /* = padding de fiche_objet */
+	background-color: var(--spip-color-gray-lightest);
+	position: relative;
+}
 
 /* editer_liens */
 .formulaire_editer_liens .liste-objets {