diff --git a/prive/themes/spip/forms.css.html b/prive/themes/spip/forms.css.html index fc288020104da33ad456b45e50afd89a8689b9e4..e7d333d9b57107ab79b21d3ef82c7d7d4650ee57 100644 --- a/prive/themes/spip/forms.css.html +++ b/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 {