CSS: mask ​

.instui-mask — 配置された親要素を埋め、コンテンツを中央に配置するフロー内オーバーレイ。例：カード上のスピナー。モーダルにはネイティブの<dialog>（その::backdropがマスク）を推奨します。これらのモディファイアはすべてグローバルにも利用可能（単体でも、他のコンポーネントにチェーンしても） — mask グローバルユーティリティを参照してください。

Source: mask.css

使用法 ​

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

例 ​

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

修飾子 ​

修飾子説明
.-blurマスクの背後を backdrop-filter でぼかします。
.-fullscreenビューポートに固定され、高い z-index で覆います。

使用トークン ​

Token型値
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))