Activity Alert CSS

Start with the built-in settings first. Use custom CSS when you want a specific layout, border, font, glow, background or animation detail.

Where CSS is applied

CSS can be added in three places:

CSS field	Best for
Theme CSS	Reusable styles shared across groups or variants.
Group CSS	Styles shared by the active alert group.
Variant CSS	One special alert variant.

CSS is loaded in this order: Theme CSS, then Group CSS, then Variant CSS. When selectors are equally specific, later CSS wins, so Variant CSS overrides Group CSS and Theme CSS.

CSS classes

Class	Description
.activity-alert-widget	Full widget area. Centers the alert.
.activity-alert	Main alert box.
.activity-alert__media	Shared class for image and video media.
.activity-alert__media--image	Image media.
.activity-alert__media--video	Video media.
.activity-alert__title	Alert title.
.activity-alert__message	Alert message.
.activity-alert__var	Any template variable.
.activity-alert__var--user	{user} variable.
.activity-alert__var--viewer	{viewer} variable.
.activity-alert__var--recipient	{recipient} variable.
.activity-alert__var--amount	{amount} variable.
.activity-alert__var--value	{value} and {count} variables.
.activity-alert__var--unit	{unit} and {count_name} variables.
.activity-alert__var--subtype	{subtype} variable.
.activity-alert-celebration	Celebration overlay.
.activity-alert-celebration__particle	Individual celebration particles.

Every rendered template variable gets a matching modifier class based on the variable name. For example, {viewer_name} gets .activity-alert__var--viewer_name.

The main alert has data attributes:

Attribute	Use
data-alert-group	Target one group by name.
data-alert-rule	Target one activity type, such as raid.
data-alert-variant	Target one variant by name.

The celebration overlay also has data-celebration-type, such as confetti, snow or lunarNewYear.

CSS variables

Variable	Description
--activity-alert-font-family	Alert font family.
--activity-alert-text-color	Main text color.
--activity-alert-user-color	User name color.
--activity-alert-viewer-color	Same value as user color.
--activity-alert-count-color	Count or amount color.
--activity-alert-count-name-color	Unit or sub type color.
--activity-alert-max-width	Alert max width.
--activity-alert-font-size	Title font size.
--activity-alert-message-font-size	Message font size.

Examples

Branded card

.activity-alert {
  padding: 24px 34px;
  border: 3px solid #00d4ff;
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.92);
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.45);
}

.activity-alert__title {
  color: #ffffff;
  text-transform: uppercase;
}

.activity-alert__message {
  color: #d8f7ff;
}

Highlight names and amounts

.activity-alert__var--user {
  color: var(--activity-alert-user-color);
  text-shadow: 0 0 14px currentColor;
}

.activity-alert__var--amount,
.activity-alert__var--value {
  color: var(--activity-alert-count-color);
  font-size: 1.15em;
}

Style only raids

.activity-alert[data-alert-rule="raid"] {
  border-color: #ff4d8d;
}

.activity-alert[data-alert-rule="raid"] .activity-alert__title::after {
  content: " incoming!";
}

Larger media

.activity-alert {
  gap: 18px;
}

.activity-alert__media {
  max-width: min(80dvw, 620px);
  max-height: 45dvh;
}

Celebration particles

.activity-alert-celebration[data-celebration-type="confetti"]
  .activity-alert-celebration__particle {
  filter: drop-shadow(0 0 6px white);
}