# Mystic Forest

Thème pour le portail SSOWat.

## Description

Ce thème est basé sur le thème par défaut et tire profit de CSS Flex pour personnaliser l'interface.

  1. Page d'identification : utilise un bloc visuel pour l'identification, avec une image personnalisée en entête.
  2. Page du portail : la boîte utilisateur est semblale au bloc d'authentification. La liste des applications est placée en vis-à-vis de la boite utilisateur.

## Personnaliser le thème

Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).
J'ai défini des variables afin de faciliter l'utilisation d'une image différente. *Normalement,* il devrait être possible d'avoir l'affichage désiré en modifiant seulement la valeur des variables.

### Explication des variables

```
    --background-color: couleur d'arrière-plan du document
    --primary-color: couleur utilisée pour le fond des blocs et les boutons avec la classe .classic
    --primary-hover-color: couleur de survol pour les boutons concernés
    --logo-url: chemin vers l'image utilisée comme entête (defaut: url("./forest.png"))
    --logo-width: largeur de l'image
    --logo-height: hauteur de l'image
    --box-width: largeur des boîtes (defaut: 21em)
```

### Notes sur l'image

Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.
L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.
De plus, il sera nécessaire d'adapter la couleur du bloc (--primary-color).

Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.