Skip to content

Correctifs CSS du thème : boutons sur fond clair, éditeur de texte classique, onglets verticaux - #544

Open
DjamZee wants to merge 4 commits into
shadowfoundry:feat/v13from
DjamZee:fix/css-theme
Open

DjamZee wants to merge 4 commits into
shadowfoundry:feat/v13from
DjamZee:fix/css-theme

Conversation

@DjamZee

@DjamZee DjamZee commented Sep 17, 2026

Copy link
Copy Markdown

Remplace la PR #543, fermée automatiquement lors du renommage de la branche.

Description

Correctifs CSS génériques du thème SR5. Point de départ : la fenêtre du module GM Notes (texte illisible, barre d’outils de l’éditeur déformée) ; les cas similaires trouvés en passant le CSS en revue sont corrigés de la même façon.

Changes

1. Boutons illisibles sur fond clair

.sr-button-footer() affiche un texte blanc sur un fond --sr-ui-bg-color-dark à 30 %. C'est prévu pour les pieds de fenêtre sombres ; sur le fond clair de .window-content, on obtient du blanc sur gris.

  • Nouveau mixin .sr-button-light() (commons/button-mixin.less) : même bouton, texte foncé et sans remplissage (le balayage turquoise au survol est conservé).
  • Utilisé pour les boutons dans .form-fields des fenêtres (ex. boutons « Configurer » des sous-menus de paramètres), le bouton changeMode des tables aléatoires et les boutons de GM Notes.
  • Les autres usages de .sr-button-footer() (pieds de fenêtre, journaux, navigateur de compendiums, barre latérale des paramètres) sont sur fond sombre et restent inchangés.

2. Barre d'outils de l'éditeur « classique »

Certains modules utilisent encore l'helper {{editor}} (div .editor) au lieu de l'élément <prose-mirror>. Le thème ne stylait que prose-mirror menu.editor-menu : ces barres recevaient le style générique des boutons (cadre rouge), et le CSS de certains modules (GM Notes fixe width: 48%; height: 34px sur tous ses boutons) les déformait.

  • components/prose-mirror.less : le style de la barre d'outils s'applique désormais à prose-mirror menu.editor-menu et .editor menu.editor-menu (+ width: auto).
  • Pour l'éditeur classique uniquement : mise en page des menus déroulants (.pm-dropdown) et masquage de .concurrent-users, que le core ne gère que pour <prose-mirror>.

3. Fenêtre GM Notes

  • Nouveau components/gm-notes.less (importé dans base.less) : boutons « Déplacer » côte à côte avec libellé qui passe à la ligne, éditeur sur toute la hauteur, texte foncé lisible en lecture et en édition, bouton crayon discret.

4. Listes d'onglets verticales

La règle générique nav.tabs met flex-wrap: wrap ; toute liste nav.tabs.vertical passe maintenant en nowrap pour défiler au lieu d'envoyer ses éléments dans une colonne masquée. (La PR #536 corrige le même problème spécifiquement pour la colonne des catégories de Configurer les paramètres ; les deux règles sont compatibles.)

Checklist

  • npm test passes
  • npx eslint modules/ passes (or only pre-existing warnings)
  • npm run build:css compiles without errors
  • Language keys match in en.json and fr.json (if localization was touched) — non concerné
  • No console.log left in code

Testé dans Foundry 13.351 avec le système 13.0.0-alpha.25 et le thème SR5 : fenêtre GM Notes (boutons, barre d'outils, texte), boutons « Configurer » des paramètres, table aléatoire, et barre d'outils des éditeurs des fiches d'acteur/objet inchangée.

Screenshots

Avant : dans GM Notes, texte des boutons illisible, barre d'outils étirée avec cadres rouges, menus déroulants tronqués et case vide. Après : boutons lisibles, barre d'outils identique à celle des fiches SR5.

🤖 Generated with Claude Code

DjamZee and others added 4 commits September 17, 2026 02:22
The module sizes every button in its window (width 48%, height 34px),
which also stretched the ProseMirror toolbar, and its long move buttons
labels overflowed. Its legacy editor was not covered by the theme and
text was hard to read. Scope fixes to .gm-notes: wrapping footer-style
move buttons, compact toolbar, dark text on the light editor surface.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Core only styles the <prose-mirror> element toolbar: hide the concurrent
users item, lay out the dropdowns and use a neutral item border.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…r, vertical tabs

- Footer-style buttons have white text on a 30% dark fill, unreadable on
  light window content. Add .sr-button-light() (dark text, no fill) and
  use it for form field buttons, roll table mode button and GM Notes.
- Legacy {{editor}} ProseMirror toolbars (used by modules) got the generic
  themed button look: share the <prose-mirror> toolbar styling with
  .editor menus, and add the dropdown / concurrent users rules core only
  applies to <prose-mirror>. GM Notes keeps only its layout specifics.
- All vertical tab lists use nowrap instead of wrapping into a hidden
  column.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant