Developer Area

The new hosted pages are designed with several goals in mind:

• Responsive: works equally well on desktop and mobile.
• Themable: supports the use of color-scheme if your website offers both a light and dark theme.
• Extensible color palette: a base color palette is defined through CSS variables that you can override for quick global changes.
• No interference: the portal’s base CSS, injected dynamically, does not affect the CSS of your own pages.

Responsive

As in the ProAbono back office, the hosted pages use a tile system that adjusts the display to the screen width.

The hosted pages have a transparent background to blend into your pages, and the tiles have their own background color.

Base class

All hosted pages are generated inside a div with the base class pa-portal.

To avoid any interference with other elements on your page, all customizations must be specified within this class.

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

Theme

By default, pages are displayed with the light theme.

This can be changed with a single instruction:

.pa-portal {
  /* light theme */
  color-scheme: light;
  /* dark theme */
  color-scheme: dark;
  /* browser settings */
  color-scheme: light dark;
}

Base colors

The portal is generated using 4 base colors (2 per theme).

Overriding these colors impacts the entire portal.

.pa-portal {
  /* LIGHT THEME */
  /* tile background color */
  --pa-back-l: red;
  /* text color */
  --pa-text-l: blue;

  /* DARK THEME */
  /* tile background color */
  --pa-back-d: purple;
  /* text color */
  --pa-text-d: green;
}

Status colors

The display of subscription and invoice statuses is color-coded to draw customers’ attention. These colors can also be modified through CSS variables.

Note that some of these colors may not currently be used, but may appear in future updates.

.pa-portal {
  /* Standard status colors */
  --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;

  /* Light variants */
  --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;
}

Button colors

By default, buttons use blue as the background color (see status colors) and the “dark” text color (see base colors). To customize them:

.pa-portal {
  /* BASIC CUSTOMIZATION */
  /* button background color */
  --pa-button-back: red;
  /* button text color */
  --pa-button-text: blue;

  /* ADVANCED CUSTOMIZATION */
  /* hover background color */
  --pa-button-back-hover: purple;
  /* secondary button */
  --pa-button-back-secondary: #fafef9;
  /* active button or active page for a link-style button */
  --pa-button-back-active: grey;
}