CSS: visual-debug ​

.-with-visual-debug — 一个布局调试轮廓：将 .-with-visual-debug 复合到任何元素上，以勾勒该元素及其直接子元素的边框，从而一目了然地查看布局结构。

组： 插件 · 来源： 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