fix(stats): onglets soulignés du design à la place des pills de scopeUnverified
Le panneau « Toutes les catégories » était parti sans resynchroniser le design : la rangée de scopes restait en pills à contour. Report du markup du canvas — onglets 15 px, soulignement accent-2 de 3 px sur le courant, inactifs à 0,7 d'opacité, filet de rangée, fondu à droite qui signale le défilement. Écart assumé : la rangée reste un <nav> de liens d'ancre, sans role="tablist" — sans JS il n'y a pas de navigation aux flèches à promettre. scroll-padding-left corrige l'aimantation qui collait le premier onglet au bord (défaut présent dans le canvas aussi).
b689793 parent: 1a03e03 modified
assets/style.css +24 -10 | @@ -613,23 +613,37 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d | ||
| 613 | 613 | .cols-rows .col-muted { grid-template-areas: "user total"; } |
| 614 | 614 | |
| 615 | 615 | /* — groupes de catégories : carrousel de scopes (page Stats) — */ |
| 616 | -.scope-pills { | |
| 617 | - display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; | |
| 616 | +/* Onglets soulignés (design, sept. 2026) : le filet de la rangée porte le | |
| 617 | + soulignement accent-2 de l'onglet courant ; le fondu à droite dit qu'on | |
| 618 | + peut faire défiler. Restent des liens d'ancre dans un <nav> — pas de | |
| 619 | + role="tab", qui promettrait une navigation aux flèches absente sans JS. */ | |
| 620 | +.scope-tabs { | |
| 621 | + position: relative; | |
| 618 | 622 | margin: 0 calc(-1 * var(--space-4)) var(--space-4); |
| 619 | - padding: 0 var(--space-4) var(--space-1); | |
| 623 | +} | |
| 624 | +.scope-tabs::after { | |
| 625 | + content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px; | |
| 626 | + pointer-events: none; | |
| 627 | + background: linear-gradient(to right, transparent, var(--color-bg)); | |
| 628 | +} | |
| 629 | +.scope-pills { | |
| 630 | + display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; | |
| 631 | + /* Sans scroll-padding, l'aimantation colle le premier onglet au bord et | |
| 632 | + avale le padding gauche. */ | |
| 633 | + scroll-snap-type: x proximity; scroll-padding-left: var(--space-4); | |
| 634 | + padding: 0 var(--space-6) 0 var(--space-4); | |
| 635 | + box-shadow: inset 0 -1px 0 var(--color-divider); | |
| 620 | 636 | } |
| 621 | 637 | .scope-pills::-webkit-scrollbar { display: none; } |
| 622 | 638 | .scope-pill { |
| 623 | 639 | flex: none; display: inline-flex; align-items: center; |
| 624 | - padding: 8px 15px; min-height: 34px; border-radius: 999px; | |
| 625 | - font-size: 0.875rem; text-decoration: none; color: var(--color-text); | |
| 626 | - border: 1px solid var(--color-divider); | |
| 640 | + padding: 10px 2px 9px; min-height: 40px; scroll-snap-align: start; | |
| 641 | + font-size: 0.9375rem; font-weight: 500; white-space: nowrap; | |
| 642 | + text-decoration: none; color: var(--color-text); opacity: .7; | |
| 643 | + border-bottom: 3px solid transparent; | |
| 627 | 644 | } |
| 628 | -/* Teinte à 25 % comme la pill d'équipe : l'accent-2 plein ne tient pas | |
| 629 | - 4.5:1 avec l'encre (écart assumé vs le design, cf. pill d'en-tête). */ | |
| 630 | 645 | .scope-pill[aria-current] { |
| 631 | - background: color-mix(in srgb, var(--color-accent-2) 25%, var(--color-bg)); | |
| 632 | - border-color: var(--color-accent-2); font-weight: 700; | |
| 646 | + border-bottom-color: var(--color-accent-2); opacity: 1; font-weight: 700; | |
| 633 | 647 | } |
| 634 | 648 | .scopes { |
| 635 | 649 | display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; |
| @@ -613,23 +613,37 @@ h4.add_step_title { margin-top: var(--space-3); margin-bottom: var(--space-3); d | |||
| 613 | .cols-rows .col-muted { grid-template-areas: "user total"; } | 613 | .cols-rows .col-muted { grid-template-areas: "user total"; } |
| 614 | 614 | ||
| 615 | /* — groupes de catégories : carrousel de scopes (page Stats) — */ | 615 | /* — groupes de catégories : carrousel de scopes (page Stats) — */ |
| 616 | -.scope-pills { | 616 | +/* Onglets soulignés (design, sept. 2026) : le filet de la rangée porte le |
| 617 | - display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; | 617 | + soulignement accent-2 de l'onglet courant ; le fondu à droite dit qu'on |
| 618 | + peut faire défiler. Restent des liens d'ancre dans un <nav> — pas de | ||
| 619 | + role="tab", qui promettrait une navigation aux flèches absente sans JS. */ | ||
| 620 | +.scope-tabs { | ||
| 621 | + position: relative; | ||
| 618 | margin: 0 calc(-1 * var(--space-4)) var(--space-4); | 622 | margin: 0 calc(-1 * var(--space-4)) var(--space-4); |
| 619 | - padding: 0 var(--space-4) var(--space-1); | 623 | +} |
| 624 | +.scope-tabs::after { | ||
| 625 | + content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px; | ||
| 626 | + pointer-events: none; | ||
| 627 | + background: linear-gradient(to right, transparent, var(--color-bg)); | ||
| 628 | +} | ||
| 629 | +.scope-pills { | ||
| 630 | + display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; | ||
| 631 | + /* Sans scroll-padding, l'aimantation colle le premier onglet au bord et | ||
| 632 | + avale le padding gauche. */ | ||
| 633 | + scroll-snap-type: x proximity; scroll-padding-left: var(--space-4); | ||
| 634 | + padding: 0 var(--space-6) 0 var(--space-4); | ||
| 635 | + box-shadow: inset 0 -1px 0 var(--color-divider); | ||
| 620 | } | 636 | } |
| 621 | .scope-pills::-webkit-scrollbar { display: none; } | 637 | .scope-pills::-webkit-scrollbar { display: none; } |
| 622 | .scope-pill { | 638 | .scope-pill { |
| 623 | flex: none; display: inline-flex; align-items: center; | 639 | flex: none; display: inline-flex; align-items: center; |
| 624 | - padding: 8px 15px; min-height: 34px; border-radius: 999px; | 640 | + padding: 10px 2px 9px; min-height: 40px; scroll-snap-align: start; |
| 625 | - font-size: 0.875rem; text-decoration: none; color: var(--color-text); | 641 | + font-size: 0.9375rem; font-weight: 500; white-space: nowrap; |
| 626 | - border: 1px solid var(--color-divider); | 642 | + text-decoration: none; color: var(--color-text); opacity: .7; |
| 643 | + border-bottom: 3px solid transparent; | ||
| 627 | } | 644 | } |
| 628 | -/* Teinte à 25 % comme la pill d'équipe : l'accent-2 plein ne tient pas | ||
| 629 | - 4.5:1 avec l'encre (écart assumé vs le design, cf. pill d'en-tête). */ | ||
| 630 | .scope-pill[aria-current] { | 645 | .scope-pill[aria-current] { |
| 631 | - background: color-mix(in srgb, var(--color-accent-2) 25%, var(--color-bg)); | 646 | + border-bottom-color: var(--color-accent-2); opacity: 1; font-weight: 700; |
| 632 | - border-color: var(--color-accent-2); font-weight: 700; | ||
| 633 | } | 647 | } |
| 634 | .scopes { | 648 | .scopes { |
| 635 | display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; | 649 | display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; |
modified
templates/stats.html +2 -0 | @@ -4,11 +4,13 @@ | ||
| 4 | 4 | <a class="btn btn-ghost" style="margin:0 0 var(--space-4);padding-left:0;font-size:1rem;min-height:44px" href="/temps">{{ shell.tr.my_entries_arrow }}</a> |
| 5 | 5 | |
| 6 | 6 | {% if show_pills %} |
| 7 | +<div class="scope-tabs"> | |
| 7 | 8 | <nav class="scope-pills" aria-label="{{ shell.tr.scope_pills_aria }}"> |
| 8 | 9 | {% for pill in pills %} |
| 9 | 10 | <a class="scope-pill" href="#{{ pill.anchor }}" {% if pill.current %}aria-current="true"{% endif %}>{{ pill.name }}</a> |
| 10 | 11 | {% endfor %} |
| 11 | 12 | </nav> |
| 13 | +</div> | |
| 12 | 14 | {% endif %} |
| 13 | 15 | |
| 14 | 16 | <div class="scopes" id="scopes"> |
| @@ -4,11 +4,13 @@ | |||
| 4 | <a class="btn btn-ghost" style="margin:0 0 var(--space-4);padding-left:0;font-size:1rem;min-height:44px" href="/temps">{{ shell.tr.my_entries_arrow }}</a> | 4 | <a class="btn btn-ghost" style="margin:0 0 var(--space-4);padding-left:0;font-size:1rem;min-height:44px" href="/temps">{{ shell.tr.my_entries_arrow }}</a> |
| 5 | 5 | ||
| 6 | {% if show_pills %} | 6 | {% if show_pills %} |
| 7 | +<div class="scope-tabs"> | ||
| 7 | <nav class="scope-pills" aria-label="{{ shell.tr.scope_pills_aria }}"> | 8 | <nav class="scope-pills" aria-label="{{ shell.tr.scope_pills_aria }}"> |
| 8 | {% for pill in pills %} | 9 | {% for pill in pills %} |
| 9 | <a class="scope-pill" href="#{{ pill.anchor }}" {% if pill.current %}aria-current="true"{% endif %}>{{ pill.name }}</a> | 10 | <a class="scope-pill" href="#{{ pill.anchor }}" {% if pill.current %}aria-current="true"{% endif %}>{{ pill.name }}</a> |
| 10 | {% endfor %} | 11 | {% endfor %} |
| 11 | </nav> | 12 | </nav> |
| 13 | +</div> | ||
| 12 | {% endif %} | 14 | {% endif %} |
| 13 | 15 | ||
| 14 | <div class="scopes" id="scopes"> | 16 | <div class="scopes" id="scopes"> |