CSS: visual-debug ​

.-with-visual-debug — מתאר לניפוי שגיאות פריסה: החילו .-with-visual-debug על כל אלמנט כדי לצייר מתאר סביב התיבה וילדיה המידיים, כך שמבנה הפריסה נראה במבט חטוף.

Group: תוספים · Source: visual-debug.css

שימוש ​

css
@import "@pantoken/plugin-visual-debug/visual-debug.css";

דוגמאות ​

html
<div class="instui-view -with-visual-debug">
  <span>Outlined child.</span>
</div>

תכונות מותאמות אישית ​

תכונהסוגברירת מחדלתיאור
--pantoken-visual-debug-color——צבע המתאר (ברירת מחדל: מג'נטה בוהקת); שנה את גוון הצבע כדי לשנות את כל מתווי הניפוי.

אסימוני צריכה ​

Tokenסוגערך
--instui-logo-canvas-horizontal-color<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-canvas-icon-color<url>url("data:image/svg+xml
--instui-logo-canvas-icon-current-color<url>url("data:image/svg+xml
--instui-logo-canvas-icon-dark<url>url("data:image/svg+xml
--instui-logo-canvas-icon-reversed<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-color<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-dark<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-reversed<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-color<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-current-color<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-dark<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-full-color-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-current-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-dark<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-full-color-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-reversed-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-current-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-dark<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-full-color-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-reversed-bg<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-light<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-current-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-dark<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-color<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-icon-color<url>url("data:image/svg+xml
--instui-logo-mastery-icon-current-color<url>url("data:image/svg+xml
--instui-logo-mastery-icon-dark<url>url("data:image/svg+xml
--instui-logo-mastery-icon-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-color<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-dark<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-reversed<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ar<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-el<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-fa<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-he<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-hi<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-hy<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-jp<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ko<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ru<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-th<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-uk<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-zh<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ar<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-el<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-fa<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-he<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-hi<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-hy<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-jp<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ko<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ru<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-th<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-uk<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-zh<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-color<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-current-color<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-dark<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-color<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-icon-color<url>url("data:image/svg+xml
--instui-logo-parchment-icon-current-color<url>url("data:image/svg+xml
--instui-logo-parchment-icon-dark<url>url("data:image/svg+xml
--instui-logo-parchment-icon-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-color<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-dark<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-reversed<url>url("data:image/svg+xml