Activity UI

The uploader exposes a set of stable CSS class names you can use when building activity UIs. They automatically inherit the active theme, color scheme, and design tokens — including dark mode and custom CSS variables.

These classes are only effective inside the uploader’s DOM subtree.

Layout

Modal height

When an activity is shown in the modal, the dialog is sized to your content by default. Write CSS against your own activity element to opt into a different sizing.

Fill the modal (full modal height)

Use this when your activity needs the full available space (image editor, camera preview, scrollable grid). Declare two rules in your activity’s stylesheet:

1
/* Make the modal dialog fill the max available space */
2
[uc-modal] > dialog:has([activity="my-activity-id"][active]) {
3
  width: 100%;
4
  height: 100%;
5
}
6
7
/* Make your activity element fill the dialog */
8
my-activity-element {
9
  display: flex;
10
  flex-direction: column;
11
  height: 100%;
12
}

The :has() selector scopes the full-height rule to dialogs that actually contain your element, so other activities are unaffected.

Self-sized (fixed or viewport-relative height)

Use this when you want a specific height regardless of content:

1
my-activity-element {
2
  display: flex;
3
  flex-direction: column;
4
  height: 80dvh;
5
}

The dialog’s max-height still caps the visible size on smaller screens.

Content-sized (default)

Do nothing. Your activity element is a normal block/flex element, and the dialog wraps its natural height — suitable for short forms like a URL input.

Buttons

Built-in elements

You can also use the following custom elements directly in your activity markup:

For the Back button, use uploaderApi.historyBack() to navigate to the previous activity. For the Close button, call uploaderApi.setModalState(false).

Example

1
<!-- Activity header -->
2
<div class="uc-ui-activity-header">
3
  <button type="button" class="uc-ui-icon-btn" title="Back" aria-label="Back">
4
    <uc-icon name="back"></uc-icon>
5
  </button>
6
  <div>
7
    <uc-icon name="my-icon"></uc-icon>
8
    <span>My Source</span>
9
  </div>
10
  <button type="button" class="uc-ui-icon-btn" title="Close" aria-label="Close">
11
    <uc-icon name="close"></uc-icon>
12
  </button>
13
</div>
14
15
<!-- Search toolbar -->
16
<div class="uc-ui-toolbar">
17
  <input type="text" placeholder="Search…" />
18
  <button type="button" class="uc-ui-primary-btn">Search</button>
19
</div>
20
21
<!-- Scrollable content area -->
22
<div class="my-results">…</div>
23
24
<!-- Bottom toolbar -->
25
<div class="uc-ui-toolbar">
26
  <div class="uc-ui-toolbar-spacer"></div>
27
  <button type="button" class="uc-ui-secondary-btn">Done</button>
28
</div>