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))