CSS: mask

.instui-mask — An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native <dialog> (its ::backdrop is the mask).

Source: mask.css

Usage

@import "@pantoken/components/components.css";

Examples

<div style="position: relative">
  <div class="instui-mask">
    <span class="instui-spinner"></span>
  </div>
</div>

Modifiers

Modifier	Description
.-blur	Blur what's behind the mask with a backdrop-filter.
.-fullscreen	Fixed to the viewport, covering it at a high z-index.

Tokens consumed

Token	Type	Value
--instui-component-mask-background-color	<color>	light-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))LightDark