Custom CSS

Enhance or fine‑tune styling when default theme options aren’t enough.

Use Cases

Adjust spacing or typography
Highlight critical components
Add subtle animations

Good Practices

Keep overrides minimal; large CSS files make maintenance harder.
Namespacing: target provided container classes to avoid conflicts.
Test mobile and dark mode after changes.

Safety

The editor may sanitize disallowed rules. If something “disappears,” simplify the selector.

/* Example: make status badges slightly rounded */
.status-badge { border-radius: 6px; }

Rollback by clearing the CSS field and saving.

Available Class Name Reference

Below are stable class names you can target. Keep selectors specific but shallow (avoid deep descendant chains where possible). Names may evolve; prefer higher-level wrappers first.

Class	Purpose / Target	Notes
`.status-tabs-list`	Wrapper for the tab navigation list	Controls horizontal layout / spacing
`.status-tabs-list-item`	Individual tab trigger (Home / Maintenance / Incidents)	Apply typography, active states, hover
`.status-alert`	Generic alert (maintenance / incident banners in content area)	Color is set via component prop; override padding/margins
`.status-grid-root`	Outer Grid container for the page	Adjust max-width, responsive gutters
`.status-grid-col`	Primary column containing main stack	Useful for custom width or breakpoint tweaks
`.status-header-root`	Top header bar containing logo + links	Background, border, shadow
`.status-header-inner`	Inner group for logo/title	Fine‑grained alignment/padding
`.status-header-logo`	Logo Image element	Constrain size, add filters (e.g., grayscale)
`.status-header-title`	Workspace / status page title text	Typography overrides
`.status-header-button`	(Commented) potential future action button	Currently not rendered; safe to ignore
`.status-tabs-root`	Tabs component root wrapper	Global tab styling scope
`.status-banner-root`	Vertical stack around hero/banner section	Control vertical spacing above/below
`.status-banner-inner`	Container for banner logo	Centering / sizing
`.status-banner-logo`	Large centered logo image	Animations / sizing overrides
`.status-banner-card`	Status summary card (operational / partial outage)	Background, border radius, shadow
`.status-banner-card-wrapper`	Flex container inside status card	Align icon + text
`.status-banner-icon`	Status icon (check / X)	Color, size (though size often inline)
`.status-banner-text`	Status headline text (responsive forms)	Font family, letter spacing
`.status-banner-description`	Subtext under status card	Secondary text color, font-size
`.status-alert`	(Duplicate entry) alerts inside panels	See above; duplication intentional for clarity
`.status-tabs-panel`	(Implicit via Mantine – target panel container)	Use `[data-value="home"]` etc. if needed
`.status-footer`	(If custom footer wrapper added)	Only if present in extended layouts
`.status-theme-toggle`	(If ThemeHelper renders a wrapper)	Might vary; inspect DOM before styling
`.status-editor-root`	Rich text / block editor rendered content root	Wrap content-level overrides
`.status-maintenance-root`	Maintenance list container	Spacing, background grouping
`.status-incident-root`	Incident list container	Similar to maintenance styling

.status-banner-card {
  background: blue;
  color: white; /* override dynamic color if you prefer fixed */
}
.status-banner-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

Example: Compact Tabs

.status-tabs-list { gap: .25rem; }
.status-tabs-list-item { padding-inline: .75rem; font-size: 0.9rem; }

Debugging Tips

Temporarily add outline: 1px solid magenta; to a class to verify scope.
Use browser DevTools to confirm specificity; if overrides fail, increase specificity modestly (e.g., .status-banner-card.status-banner-card).
Avoid !important unless absolutely necessary.

If a required class is missing here, inspect the live page and extend this table carefully.