CSS: visual-debug

.-with-visual-debug — Ein ramme for layout-feilsøking: slå saman .-with-visual-debug med eit element for å markere boksen og dei næraste barna, slik at strukturen i layouten er synleg ved eit augeblikk.

Group: Pluginar · Source: visual-debug.css

Bruk

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

Døme

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

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--pantoken-visual-debug-color	—	—	Rammefargen (standard: sterk magenta); endre ho for å endre alle feilsøkingsrammer.

Token brukt

Token	Type	Verdi
--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