bol/styles

Structure LESS pour BoL

Ce dossier contient tous les fichiers LESS qui sont compilés en CSS pour le système BoL.

Structure des fichiers

styles/
├── bol.less                    # Fichier principal (importe tous les autres)
├── global/                     # Styles globaux
│   ├── typography.less         # Fonts et styles de texte
│   ├── foundry-overrides.less  # Overrides Foundry VTT
│   ├── flex.less               # Utilitaires Flexbox
│   ├── forms.less              # Styles de formulaires
│   ├── item-list.less          # Listes d'items
│   ├── colors.less             # Couleurs pré-définies
│   └── chat.less               # Messages de chat
└── components/                 # Composants spécifiques
    ├── common.less             # Styles communs aux sheets
    ├── actor.less              # Feuilles d'acteurs
    └── item.less               # Feuilles d'items

Compilation

Commande unique

npm run css

Mode watch (recompile automatiquement)

gulp

ou

npm start

Modification des styles

1. NE PAS modifier directement css/bol.css
2. Modifier les fichiers .less appropriés dans styles/
3. Compiler avec npm run css
4. Le fichier css/bol.css sera régénéré automatiquement

Organisation

Global (styles/global/)

• typography.less : Définition des @font-face et styles de texte de base
• foundry-overrides.less : Overrides des styles Foundry (pause, scrollbar, etc.)
• flex.less : Classes utilitaires flexbox (.flexrow, .flexcol, etc.)
• forms.less : Tous les styles de formulaires (inputs, selects, labels, etc.)
• item-list.less : Styles des listes d'items (.items-list)
• colors.less : Classes de couleurs pré-définies (.red, .bg-red, etc.)
• chat.less : Styles des messages de chat et résultats de dés

Components (styles/components/)

• common.less : Styles communs à toutes les sheets (.bol.sheet)

  • Window header/content
  • Sheet header avec banner
  • Tabs
  • Sheet body

• actor.less : Styles spécifiques aux feuilles d'acteurs

  • Dimensions et layout
  • Images d'attributs (vigor, agility, etc.)
  • Footer
  • Stats, resources
  • HUD et tooltips

• item.less : Styles spécifiques aux feuilles d'items

  • Dimensions
  • Properties list
  • Dialog

Avantages de LESS

1. Variables : Réutilisables dans tout le code
2. Nesting : Code plus lisible et maintenable
3. Mixins : Réutilisation de blocs de styles
4. Imports : Organisation modulaire
5. Opérations : Calculs CSS (calc() amélioré)

Exemple d'utilisation

Avant (CSS)

.bol.sheet.actor .window-content form .sidebar .profile-img {
  cursor: pointer;
  border: none;
}

Après (LESS)

.bol.sheet.actor {
  .window-content {
    form {
      .sidebar {
        .profile-img {
          cursor: pointer;
          border: none;
        }
      }
    }
  }
}

Notes importantes

• La compilation LESS → CSS se fait automatiquement avec gulp
• Le fichier css/bol.css est généré et ne doit pas être modifié manuellement
• Tous les imports sont dans styles/bol.less
• Les chemins des images/fonts sont relatifs au fichier CSS final dans css/