Zone Développeur

Les nouvelles pages hébergées sont conçues avec plusieurs objectifs en tête :

• Responsive : fonctionne aussi bien sur desktop que sur mobile.
• Themable : supporte l’utilisation de color-scheme si votre site propose un thème clair et un thème foncé
• Palette déclinable : une palette de couleurs de base est définie dans des variables CSS que vous pouvez surcharger pour des modifications globales rapides.
• Sans interférences : le CSS de base du portail, injecté dynamiquement, n’affecte pas le CSS de vos pages.

Responsive

Comme dans le backoffice ProAbono, les pages hébergées utilisent un système de tuile, qui permet d’ajuster l’affichage à la largeur de l’écran.

Les pages hébergées ont un fond transparent pour se fondre dans vos pages et les tuiles ont une couleur de fond.

Classe de base

Les pages hébergées sont toutes générées dans un div avec une classe de base pa-portal.

Afin d’éviter toute interférence avec d’autres éléments de votre page, toutes les personnalisations doivent être spécifiées dans cette classe.

.pa-portal {
  background-color: pink;
}
.pa-portal .pa-listitem {
  --pa-back-l: #c0ffee;
}

Thème

Par défaut, les pages sont affichées avec le thème clair.

Ça se modifie en une instruction :

.pa-portal {
  /* theme clair */
  color-scheme: light;
  /* theme foncé */
  color-scheme: dark;
  /* paramètres du navigateur */
  color-scheme: light dark;
}

Couleurs de base

Le portail est généré à partir de 4 couleurs de base (2 par thème).

Surcharger ces couleurs impacte l’ensemble du portail.

.pa-portal {
  /* THEME CLAIR */
  /* couleur de fond des tuiles */
  --pa-back-l: red;
  /* couleur du text */
  --pa-text-l: blue;
  /* THEME FONCÉ */
  /* couleur de fond des tuiles */
  --pa-back-d: purple;
  /* couleur du text */
  --pa-text-d: green;
}

Couleurs des états

L’affichage des états des abonnements et factures est coloré pour attirer l’attention des clients. Ces couleurs sont modifiables également à partir de variables CSS.

À noter que certaines couleurs présentes ici ne sont peut-être pas utilisées à ce jour, mais pourront être utilisées dans de futures évolutions.

.pa-portal {
  /* Couleurs standard des états */
  --pa-col-white: #fff;
  --pa-col-green: #60ceab;
  --pa-col-orange: #f5bb19;
  --pa-col-grey: #d8d8d8;
  --pa-col-blue: #3f6bb3;
  --pa-col-yellow: #f0d04a;
  --pa-col-purple: #9b8dff;

  /* Variante éclaircie */
  --pa-col-green-light: #c7fac9;
  --pa-col-red-light: #ffa094;
  --pa-col-orange-light: #fff7e6;
  --pa-col-grey-light: #f5f5f5;
  --pa-col-blue-light: #75bfff;
  --pa-col-yellow-light: #fffae5;
  --pa-col-purple-light: #ccc5ff;
}

Couleurs des boutons

Par défaut, les boutons utilisent comme couleur de fond le bleu (voir couleur des états) et le texte ‘foncé’ (voir couleurs de base). Pour le personnaliser :

.pa-portal {
  /* PERSONNALISATIONS SIMPLES */
  /* couleur de fond des boutons */
  --pa-button-back: red;
  /* couleur du texte des boutons */
  --pa-button-text: blue;

  /* PERSONNALISATIONS AVANCÉES */
  /* quand la souris passe au dessus */
  --pa-button-back-hover: purple;
  /* bouton secondaire */
  --pa-button-back-secondary: #fafef9;
  /* bouton actif ou page active pour un bouton lien */
  --pa-button-back-active: grey;
}