CSS: banner ​

.instui-banner · alpha — سطح رسالة قابل للإغلاق مزوَّد بأيقونة للإعلانات على مستوى الصفحة أو الإعلانات داخل السياق.

الحجم يتحكم في الحشو والفجوة: relaxed (الافتراضي) أكثر اتساعًا؛ compact يقلل كلاهما. اللون يحدد التعبئة: النسخة العارية (بدون معدل) غير مملوءة — حدود وأيقونة فقط؛ -color-violet و -color-sea يضيفان خلفية ملطَّفة بالإضافة إلى لوحة أيقونة متطابقة.

Accessibility ​

أضف role="status" (أو role="alert" للرسائل العاجلة) حتى تعلن تقنيات المساعدة عن الشريط؛ علّم الأيقونة الزخرفية بـ aria-hidden="true" وأعطِ زر الإغلاق aria-label.

Usage ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Examples ​

html
<div class="instui-banner -icon-canvas-icon-reversed" role="status">
  <h2 class="instui-heading">ميزة جديدة</h2>
  <span class="instui-text">هذه لافتة بنفسجية مع أيقونة مخصصة.</span>
  <div class="button-group">
    <button class="instui-button">إلغاء</button>
    <button class="instui-button">موافق</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Structure ​

text
.instui-banner
  heading (component, 0..1)
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)
flowchart TD n0[".instui-banner"]:::cssdoc-root n1(["heading"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot subgraph sg3 subgraph sg4 ["bare-button"] n5["@component button (0..1)"]:::cssdoc-root end subgraph sg6 ["button-group"] n7[".button-group"]:::cssdoc-root n8(["button"]):::cssdoc-component end end n9(["close-button"]):::cssdoc-component n0 -.->|0..1| n1 n0 --> n2 n7 -->|1..2| n8 n0 --> sg3 n0 -.->|0..1| n9 click n1 "/api/css/heading.md" click n8 "/api/css/button.md" click n9 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers ​

ModifierDescription
.-color-seaخلفية ولون أيقونة بلون البحر.
.-color-violetخلفية ولون أيقونة بلون بنفسجي.
.-icon-*استبدل الشكل الافتراضي info بأيقونة من مجموعة الأيقونات المشتركة (على سبيل المثال، -icon-megaphone).
.-size-compactحشو وفجوة أضيق.
.-size-mdAlias — maps to .-size-relaxed.
.-size-relaxedحشو وفجوة أوسع (الافتراضي).
.-size-smAlias — maps to .-size-compact.

Parts ​

PartDescription
.button-groupحاوية للاقتباس والإسناد.

Pseudo-elements ​

Pseudo-elementDescription
::after—
::before—

States ​

StateDescription
[aria-disabled="true"]—
:disabled—

Tokens consumed ​

TokenTypeValue
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-banner-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 10%, transparent)
--instui-component-banner-border-radius<length>1rem
--instui-component-banner-border-style—solid
--instui-component-banner-border-width<length>0.0625rem
--instui-component-banner-close-button-margin-right<length>0.5rem
--instui-component-banner-close-button-margin-top<length>0.5rem
--instui-component-banner-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-banner-compact-content-gap-horizontal<length>0.5rem
--instui-component-banner-compact-icon-border-radius<length>0.5rem
--instui-component-banner-compact-padding-horizontal<length>0.75rem
--instui-component-banner-compact-padding-vertical<length>0.75rem
--instui-component-banner-content-gap-vertical<length>0.5rem
--instui-component-banner-icon-color<color>#ffffff
--instui-component-banner-relaxed-content-gap-horizontal<length>1rem
--instui-component-banner-relaxed-icon-border-radius<length>0.75rem
--instui-component-banner-relaxed-padding-horizontal<length>1.5rem
--instui-component-banner-relaxed-padding-vertical<length>1.5rem
--instui-component-banner-sea-background<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-component-banner-sea-icon-background<color>#00828E
--instui-component-banner-violet-background<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-component-banner-violet-icon-background<color>#9E58BD
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-component-base-button-primary-ghost-active-background—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color—color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-heading-title-card-mini-font-size<length>1rem
--instui-component-heading-title-card-mini-font-weight<integer>700
--instui-component-heading-title-card-regular-font-size<length>1.25rem
--instui-component-heading-title-card-regular-font-weight<integer>700
--instui-component-shared-tokens-spacing-gap-buttons<length>0.75rem
--instui-component-text-content-font-size<length>1rem
--instui-component-text-content-font-weight<integer>400
--instui-component-text-content-line-height<percentage>150%
--instui-component-text-content-small-font-size<length>0.875rem
--instui-component-text-content-small-font-weight<integer>400
--instui-component-text-content-small-line-height<percentage>150%
--instui-font-size-text-base<length>1rem
--instui-icon-megaphone<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
--instui-line-height-standalone-text-base<length>1rem
--pantoken-banner-close-button-reserve<length>0rem
--pantoken-banner-glyph<url>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
--pantoken-banner-icon-background<color>#9E58BD
--pantoken-banner-icon-inset-block-start<length>1.5rem
--pantoken-banner-icon-inset-inline-start<length>1.5rem
--pantoken-banner-icon-size<length>2rem
--pantoken-glyph<url>url("data:image/svg+xml

Subcomponents ​

  • alert — نظير ملون بالحالة للرسائل المضمنة وغير قابل للإغلاق.
  • close-button — عنصر التحكم بالإغلاق الذي قد يتضمنه الشريط.