CSS: visual-debug

.-with-visual-debug — Um contorno para depuração de layout: aplique .-with-visual-debug composto a qualquer elemento para delinear a caixa e seus filhos imediatos, de modo que a estrutura do layout seja visível de relance.

Grupo: Plugins · Fonte: visual-debug.css

Uso

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

Exemplos

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

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--pantoken-visual-debug-color	—	—	A cor do contorno (padrão: um magenta vibrante); recolora‑o para alterar cada contorno de depuração.

Tokens consumidos

Token	Tipo	Valor
--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