Skip to content
CroStreamUI kit

Overlays

Hints, popovers, dialogs, drawers, confirmations and toasts, layered over the page.

01Tooltip

Tooltip

A short hint on hover and keyboard focus, with an optional shortcut. Supplementary only: touch screens can't hover, so nothing may live in a tooltip alone.

Anatomy Surface 4 with a hairline that runs unbroken into the arrow; shortcuts as small keycaps.
  • --cs-surface-4
  • --cs-line-3
  • --cs-z-tooltip
Test trigger CtrlEnter
Duplicate
Clip window: the 30 seconds before the moment
Live
In a toolbar One provider: the first hint waits 450ms, its neighbours open instantly. Tab through it too.
Sides Flips to stay on screen; the arrow follows its trigger.

02HoverCard

HoverCard

A richer preview on hover or keyboard focus of a link: a chat name shows the viewer's card. It waits a moment before opening, closes on Esc, and keeps focus on the link, which still goes to the full page; the card is a shortcut, never the only way in.

Anatomy Surface 3 with the floating-panel edge; a solid edge in High contrast.
  • --cs-surface-3
  • --cs-elev-3
moss Moderator
Following
2 years
Points
18,200
Last seen
now

Open the profile for history, notes and moderation.

On chat names Hover a name, or Tab to it: the card opens after half a second. Esc closes it and focus stays on the name.

03Popover

Popover

A small non-modal panel anchored to its trigger: quick settings, a detail card, an inline form. Outside click or Escape closes it and focus goes home.

Open, inline Header, body and footer from the same panel as Dialog, at a compact scale.
  • --cs-surface-3
  • --cs-elev-3
  • --cs-z-dropdown

Cooldown

How long before !hydrate can fire again.

30s

Each viewer waits 30 seconds before the trigger can fire again.

Live Click, or focus and press Enter. Escape returns focus to the button.

04Dialog

Dialog

Modal: focus moves in and is trapped, the page behind is inert and dimmed, Escape closes, and focus returns to whatever opened it. Long content scrolls between a fixed header and footer.

Open, inline Surface 2 at elevation 4 on the scrim; in High contrast a 2px edge does the separating.
  • --cs-surface-2
  • --cs-elev-4
  • --cs-scrim

Rename trigger

Viewers see this name when the trigger fires.

Sizes sm 24rem for one question, md 32rem for a short form, lg 44rem for real work. Never wider than the screen.
  • sm 24rem
  • md 32rem
  • lg 44rem
Live The release notes scroll: watch the header and footer pick up an edge only while there is more to see.

05Drawer

Drawer

A modal panel that slides in from an edge, for editing beside the list it came from. Slides by its own width; becomes full width on narrow screens. The bottom sheet keeps the page in view above it.

Open, inline A sheet laid over the page, inset from the edge with every corner rounded.

Edit macro

Hydrate! · runs 5 steps in order

  1. 1 Play soundsip.ogg at 70%
  2. 2 Show overlayWater bottle, 6 seconds
  3. 3 Reply in chat“Stay hydrated, {user}!”
  4. 4 Wait2 seconds
  5. 5 Mark a momentTagged “hydrate”
Live Right for editing, left for navigation or filters, bottom as a sheet on phones.

06ConfirmDialog

ConfirmDialog

Asks before something that can't be undone. Focus starts on Cancel, so a stray Enter is harmless; the confirm button shows a spinner while the work runs and errors stay inside the dialog.

Open, inline Says what happens, not “Are you sure?”. Typed confirmation for the irreversible ones.

Delete “Hydrate!”?

The trigger and its 1,204 runs of history are deleted. Macros it used are kept.

Live The first deletes after a short wait; the second fails and shows why; the third needs the name typed.

07Toast

Toast

Brief news that doesn't need an answer. Stacks in a corner, fans out on hover or focus, pauses its countdown while you're looking or the window is hidden, and is announced to screen readers. F8 jumps into the stack.

Kinds The bar along the bottom is the countdown itself; errors and toasts with an action stay longer.
  • --cs-surface-3
  • --cs-elev-3
  • --cs-z-toast

Success:Clip saved

moments/0041.mp4 · 0:30

Error:OBS disconnected

Scenes and alerts are paused until it’s back.

Warning:Twitch sign-in expires in 3 days

Sign in again from Settings to keep triggers running.

Notice:Update ready

CroStream 1.4 installs on the next restart.

In progress:Exporting Short…

moments/0042-short.mp4

In progress:Uploading 3 files

To Media › Alerts

In progress:Scanning the media folder

Live Fire a few: the stack collapses with depth and fans out under the pointer. Hover pauses every countdown.