This page documents dialog.css.
The visual styles are CSS-driven; dialogs are opened/closed via Whakerexa JavaScript helpers.
Summary:
Messages
CSS variables
Message colors are defined in wexa.css and used by dialog.css.
You can override them in :root (or inside a container like .dark).
Message dialogs
| Variable | Description | Default |
|---|---|---|
--info-color |
Border/marker color for this message type | rgb(60, 100, 160) |
--info-bg-color |
Background color for this message type | rgb(230, 240, 255) |
--warning-color |
Border/marker color for this message type | rgb(180, 110, 0) |
--warning-bg-color |
Background color for this message type | rgb(255, 240, 210) |
--error-color |
Border/marker color for this message type | rgb(170, 30, 30) |
--error-bg-color |
Background color for this message type | rgb(255, 230, 230) |
--success-color |
Border/marker color for this message type | rgb(40, 120, 40) |
--success-bg-color |
Background color for this message type | rgb(225, 245, 225) |
--tips-color |
Border/marker color for this message type | rgb(160, 130, 40) |
--tips-bg-color |
Background color for this message type | rgb(250, 245, 225) |
--question-color |
Border/marker color for this message type | rgb(120, 60, 180) |
--question-bg-color |
Background color for this message type | rgb(240, 230, 250) |
Dialog box
| Variable | Description | Default |
|---|---|---|
--dialog-border-width |
Border width for dialogs | 1px |
--dialog-border-radius |
Border radius for dialogs | 4px |
--dialog-box-shadow |
Box shadow for dialogs | -0.2rem 0.2rem 0.6rem 0.2rem rgba(128, 128, 128, 0.5) |
Video preview
| Variable | Description | Default |
|---|---|---|
--dialog-img-preview-bg-color |
Background of the video preview figure (figure.img-video-visualization) |
rgb(128, 128, 128) |
How do they look like?
Light color scheme
Dark color scheme
Use messages as modal...
Video
Popup video with image pre-visualisation
