# 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
```bash
npm run css
```

### Mode watch (recompile automatiquement)
```bash
gulp
```
ou
```bash
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)
```css
.bol.sheet.actor .window-content form .sidebar .profile-img {
  cursor: pointer;
  border: none;
}
```

### Après (LESS)
```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/`