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به viewport ثابت شده و آن را با z-index بالا می‌پوشاند.

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))