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