From b5068f84ecbbcd765c9a7d77f966a435e09b6e2c Mon Sep 17 00:00:00 2001
From: tcharlss <tcharlss@bravecassine.com>
Date: Wed, 21 Apr 2021 17:25:12 +0200
Subject: [PATCH] =?UTF-8?q?Ajustements=20des=20styles=20des=20formulaires?=
=?UTF-8?q?=20pour=20suivre=20la=20refonte=20des=20bo=C3=AEtes=20+=20quelq?=
=?UTF-8?q?ues=20d=C3=A9tails=20(#4727)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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 | 81 +++++++++++++++-----------------
1 file changed, 38 insertions(+), 43 deletions(-)
diff --git a/prive/themes/spip/forms.css.html b/prive/themes/spip/forms.css.html
index fc28802010..e7d333d9b5 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 {
--
GitLab