Corrige trois régressions du restyling du formulaire de ligne comptable

- Le select "Type de ligne" affichait un chevron géant répété (le
  shorthand `background: transparent` sur input/select/textarea
  réinitialisait aussi position/repeat/size de Claro, transformant sa
  flèche unique alignée à droite en motif carrelé). Les select gardent
  maintenant leur background Claro intact.
- Les menus "Toggle Actions" (⋮) de la Répartition étaient ouverts en
  permanence : mon display:flex écrasait le display:none par défaut de
  Claro, cassant le toggle piloté par paragraphs.actions.js. Rescopé à
  `.paragraphs-dropdown.open .paragraphs-dropdown-actions`.
- Marges resserrées : le `.form-item { margin-block: 1.5rem }` de Claro
  s'ajoutait à notre propre grid-gap. Neutralisé (`margin-block: 0`), et
  gap/paddings réduits.
This commit is contained in:
2026-09-07 11:14:24 +02:00
parent 4ce1b12099
commit f00f680143
@@ -26,12 +26,18 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.9rem 1rem; gap: 0.5rem 1rem;
max-width: 44rem; max-width: 44rem;
margin: 0 auto; margin: 0 auto;
padding: 0.15rem 0.1rem 0.5rem; padding: 0.15rem 0.1rem 0.5rem;
color: var(--flform-text); color: var(--flform-text);
} }
/* Claro gives every .form-item a large margin-block (1.5rem, meant for a
form with one field per row) -- with our own grid `gap` now doing that
job, this just doubles up the spacing between rows. */
.figli-ledger-form .form-item {
margin-block: 0;
}
html.gin--dark-mode .figli-ledger-form { html.gin--dark-mode .figli-ledger-form {
--flform-border: #3d3e42; --flform-border: #3d3e42;
--flform-border-soft: #333438; --flform-border-soft: #333438;
@@ -92,11 +98,20 @@ html.gin--dark-mode .figli-ledger-form {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--flform-border); border: 1px solid var(--flform-border);
border-radius: 6px; border-radius: 6px;
padding: 0.4rem 0.55rem; padding: 0.32rem 0.5rem;
font-size: 0.88rem; font-size: 0.88rem;
background: transparent;
color: var(--flform-text); color: var(--flform-text);
} }
/* Not select: Claro positions its dropdown-chevron background-image via
background-position/-repeat/-size, which the `background` shorthand
below would silently reset to their initial values (top-left,
repeating) -- that turned the single right-aligned arrow into a tiled
pattern smeared across the whole field. Selects keep Claro's own
background untouched; only the border/radius/padding above apply. */
.figli-ledger-form input.form-element,
.figli-ledger-form textarea.form-element {
background: transparent;
}
.figli-ledger-form input.form-element:focus, .figli-ledger-form input.form-element:focus,
.figli-ledger-form select.form-element:focus, .figli-ledger-form select.form-element:focus,
.figli-ledger-form textarea.form-element:focus { .figli-ledger-form textarea.form-element:focus {
@@ -130,10 +145,10 @@ html.gin--dark-mode .figli-ledger-form {
} }
.figli-ledger-form table.field-multiple-table thead th { .figli-ledger-form table.field-multiple-table thead th {
text-align: left; text-align: left;
padding: 0.5rem 0.6rem 0.35rem; padding: 0.4rem 0.6rem 0.25rem;
} }
.figli-ledger-form table.field-multiple-table tbody td { .figli-ledger-form table.field-multiple-table tbody td {
padding: 0.5rem 0.6rem; padding: 0.35rem 0.6rem;
vertical-align: top; vertical-align: top;
border-top: 1px solid var(--flform-border-soft); border-top: 1px solid var(--flform-border-soft);
} }
@@ -181,7 +196,13 @@ html.gin--dark-mode .figli-ledger-form {
.figli-ledger-form .paragraphs-dropdown-toggle:hover { .figli-ledger-form .paragraphs-dropdown-toggle:hover {
color: var(--flform-accent); color: var(--flform-accent);
} }
.figli-ledger-form .paragraphs-dropdown-actions { /* Closed by default (Claro's own paragraphs.actions.css already sets
display: none here and toggles a sibling .open class on click via
paragraphs.actions.js) -- only restyle the panel's look, and only once
Drupal's own JS has actually opened it. Getting this wrong (e.g.
forcing `display: flex` unconditionally here) makes every "Toggle
Actions" menu render permanently expanded. */
.figli-ledger-form .paragraphs-dropdown.open .paragraphs-dropdown-actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;