Files
drupal-figli-compta/web/modules/custom/figli_compta_ledger/css/admin-chrome.css
T
bachir 134c97ac9d Supprime le double scroll : menu à hauteur du titre, marge Gin retirée
Le menu Grand livre/Dashboard/Par compte passe en position fixe,
aligné avec le <h1> de la page plutôt que sur sa propre ligne en
dessous -- les deux viennent de régions Drupal différentes (le titre
du bloc sticky top-bar de Gin, le menu du contenu de la page) sans
conteneur flex/grid commun pour les aligner autrement.

Ça ne suffisait pas à éliminer le scroll de page en plus de celui du
tableau (max-height: 75vh sur .figli-table-wrap) : Gin applique un
margin-bottom: 80px sur <main class="page-content">, pensé pour une
page d'admin classique, pas pour ce layout à hauteur de viewport fixe.
Neutralisé sur les routes du module (hide_admin_chrome, déjà route-
scopé).

Au passage, corrige un oubli : figli_compta_ledger.dashboard_compte
n'était jamais dans la liste hide_admin_chrome, donc la barre d'admin
Gin restait visible sur /dashboard/compte (et donc le titre plus bas
que sur les 3 autres pages) -- ajouté.

Et sur demande complémentaire en cours de route : le même menu manquait
purement et simplement sur /lignes/historique (pas de template Twig
propre, juste un tableau brut) -- ajouté en tableau de rendu directement
dans HistoryController, mêmes classes CSS que le <nav> des autres pages.
2026-09-07 12:46:36 +02:00

128 lines
4.4 KiB
CSS

/* Grand livre / Dashboard switcher, top-right of both pages. Only present
on those two custom routes, but attached here rather than duplicated
between home.css and dashboard.css -- and defined with its own explicit
colors rather than relying on either page's #figli-*-app-scoped custom
properties, since this <nav> sits outside both of those elements.
Fixed rather than in normal flow: this <nav> and the page's <h1>
("Grand livre - SAS Figures Libres" etc.) come from two different
Drupal block regions (the title from Gin's sticky top-bar header,
this nav from the page content below it) with no shared flex/grid
container to align them side by side declaratively -- in normal flow
it rendered as its own full-width row *under* the title, costing
~75px of vertical space the table below could otherwise use before
the whole page (not just the table's own internal scroll) needed to
scroll too. Pulling it out of flow and pinning it next to the title
reclaims that space; top/right below are tuned to that title's actual
position, not derived from it, so they'd need revisiting if Gin's
header height or padding ever changes. */
.figli-page-nav {
position: fixed;
top: 0.65rem;
right: 1rem;
z-index: 50;
display: flex;
justify-content: flex-end;
gap: 0.4rem;
}
.figli-page-nav a {
padding: 0.3rem 0.8rem;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
color: #6b7280;
border: 1px solid transparent;
}
.figli-page-nav a:hover {
border-color: #dcdee2;
}
.figli-page-nav a.is-active {
background: #eef1f6;
color: #1a1a1a;
}
html.gin--dark-mode .figli-page-nav a {
color: #a1a5ab;
}
html.gin--dark-mode .figli-page-nav a:hover {
border-color: #3d3e42;
}
html.gin--dark-mode .figli-page-nav a.is-active {
background: #2c2d30;
color: #e8e9ea;
}
/* "Lier à une entrée client" modal (LinkEntreeForm): one autocomplete
field per linked entrée instead of a single comma-separated field --
tighten the default spacing between them a little. */
#figli-entree-liee-items .form-item {
margin-bottom: 0.5rem;
}
/* Drupal status messages: fixed top-right, out of document flow, so they
never shift the page layout the way the default in-flow placement does
-- and shrunk to a fraction of Gin's default size, which is sized for a
single full-width flash banner on an admin form, not a toast for
frequent background feedback here. Targets both the real region
([data-drupal-messages], present once a message is queued on a normal
page load) and the JS-only fallback container
([data-drupal-messages-fallback], used when Drupal.Message.add() -- our
own MessageCommand-driven AJAX messages included -- has no region to
attach to). Auto-dismiss timing for non-error messages is handled in
admin-chrome.js. */
[data-drupal-messages],
[data-drupal-messages-fallback] {
position: fixed !important;
top: 0.75rem;
right: 0.75rem;
left: auto !important;
width: auto;
max-width: 22rem;
z-index: 1000;
}
[data-drupal-messages] .messages-list__wrapper,
[data-drupal-messages] .messages__wrapper,
[data-drupal-messages-fallback] .messages-list__wrapper,
[data-drupal-messages-fallback] .messages__wrapper {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
[data-drupal-messages] .messages,
[data-drupal-messages-fallback] .messages {
padding: 0.5rem 0.6rem;
font-size: 0.78rem;
line-height: 1.3;
border-radius: 6px;
}
[data-drupal-messages] .messages__header,
[data-drupal-messages-fallback] .messages__header {
margin-block-end: 0.15rem;
margin-inline-end: 1.1em;
}
[data-drupal-messages] .messages__header::before,
[data-drupal-messages-fallback] .messages__header::before {
width: 1rem !important;
height: 1rem !important;
}
[data-drupal-messages] .messages__title,
[data-drupal-messages-fallback] .messages__title {
font-size: 0.78rem;
}
[data-drupal-messages] .messages__title,
[data-drupal-messages] .messages__content,
[data-drupal-messages-fallback] .messages__title,
[data-drupal-messages-fallback] .messages__content {
margin-inline-start: 1.4rem;
}
[data-drupal-messages] .button--dismiss,
[data-drupal-messages-fallback] .button--dismiss {
height: 20px !important;
width: 20px !important;
margin: 0.3rem !important;
}
[data-drupal-messages] .button--dismiss .icon-close,
[data-drupal-messages-fallback] .button--dismiss .icon-close {
mask-size: 11px 11px !important;
}