# App terms_of_service : personnalisation cosmétique

**<span style="background-color: #800080; color: #ffffff;"> DOC TECHNIQUE </span>**

<p class="callout info align-left">Par défaut, les conditions d'utilsations s'affichent sur une fenêtre modale de **taille réduite et simpliste**. Les modifications portent sur la feuille de style CSS de son affichage, afin d'obtenir :</p>

[![image-1625481869025.png](https://portail.ac-reunion.fr/ladoclela/uploads/images/gallery/2021-07/scaled-1680-/image-1625481869025.png)](https://portail.ac-reunion.fr/ladoclela/uploads/images/gallery/2021-07/image-1625481869025.png)

### Détail des modifications :

#### Principe général

Les modifications sont apportés dans les fichiers situés dans   
 `[ dossier nextcloud ]/ apps / terms_of_service / <strong>css </strong>/ <strong>overlay.scss </strong>`

les éléments suivants sont ainsi mis à jour :

- agrandissement de la fenêtre
- bordure épaisse aux angles légèrement arrondis, de la couleur primaire du thème en cours
- marge interne pour faciliter la lisibilité

Cela se traduit par le code CSS suivant :

```CSS
#terms_of_service_confirm {
  .v--modal-overlay {
    z-index: 99999;
  }

  .v--modal-overlay .v--modal-box {
    max-height: 800px;
    overflow: auto;
  }

  .v--modal-box.v--modal {
    top: 20vh !important;
    left: 10vw !important;
    width: 80vw !important;
    height: 60vh !important;
    padding: 4px !important;
    border: var(--color-primary-element) solid 20px !important;
    border-radius: 8px !important;
  }
}

```