Styling

Global CSS variables

Global CSS variables enable the modification of certain aspects of the RWV UI.

minDimension

Sets the minimum dimensions of the rapport-scene element. (default: 300px)

rapport-scene {
  --minDimension: 300px;
}

User interface

General UI element can be modified with the part CSS selector.

Signal indicator icon selector

rapport-scene::part(signalIndicator) {
  /* ... */
}

Configuration model selector

rapport-scene::part(configModal) {
  /* ... */
}

Rapport Logo

By default, the Rapport logo visibility is set to false for non-free tier projects. Custom logos can be placed over the rapport-scene element using an image element with an absolute or fixed position style applied to it.

Meeting room

Meeting room session type UI components can be modified with the part CSS selector.

Meeting room participant display name selectors

rapport-scene::part(displayName) {
  /* ... */
}

rapport-scene::part(selfDisplayName) {
  /* ... */
}

Meeting room participant canvas selectors

rapport-scene::part(canvasContainer) {
  /* ... */
}

rapport-scene::part(selfCanvasContainer) {
  /* ... */
}