CSS: visual-debug

.-with-visual-debug — Un contour de débogage de mise en page : composez .-with-visual-debug sur n'importe quel élément pour entourer la boîte et ses enfants immédiats, afin que la structure de la mise en page soit visible d'un coup d'œil.

Groupe: Plugins · Source: visual-debug.css

Utilisation

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

Exemples

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

Propriétés personnalisées

Propriété	Type	Défaut	Description
--pantoken-visual-debug-color	—	—	La couleur du contour (par défaut un magenta vif) ; retintez-la pour modifier chaque contour de débogage.

Jetons consommés

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