popover-css-inspector
Version:
Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides.
6 lines • 40.1 kB
JavaScript
/*!
* Popover CSS Inspector v1.0.0-beta21
* Copyright 2023-2026 C.Oliff
* Licensed under MIT (https://github.com/coliff/popover-css-inspector/blob/main/LICENSE)
*/
let popoverList=[];const popoverSelector='[data-bs-custom-class*="popover-css-inspector"]';function createPopovers(){if("undefined"==typeof bootstrap||"function"!=typeof bootstrap.Popover)return;const t=[].slice.call(document.querySelectorAll(popoverSelector));popoverList.forEach(t=>{t.dispose()}),popoverList=[],popoverList=t.map(t=>{const e=window.getComputedStyle(t),r=t.getAttribute("data-css-inspector-show")||"",o=t.getAttribute("data-css-inspector-hide")||"",a=e.getPropertyValue("background-color"),l=e.getPropertyValue("border-color"),n=e.getPropertyValue("border-bottom-color"),s=e.getPropertyValue("color");let i='<table class="small" style="margin: 0; padding: 0;" aria-label="CSS properties">';e.getPropertyValue("accent-color")&&""!==e.getPropertyValue("accent-color")&&null!==e.getPropertyValue("accent-color")&&/accent-color/.test(r)&&(i+=`<tr class="css-accent-color"><td>accent-color:</td><td>${e.getPropertyValue("accent-color")}</td></tr>`),e.getPropertyValue("align-content")&&"normal"!==e.getPropertyValue("align-content")&&"stretch"!==e.getPropertyValue("align-content")&&""!==e.getPropertyValue("align-content")&&null!==e.getPropertyValue("align-content")&&/align-content/.test(r)&&(i+=`<tr class="css-align-content"><td>align-content:</td><td>${e.getPropertyValue("align-content")}</td></tr>`),e.getPropertyValue("align-items")&&"normal"!==e.getPropertyValue("align-items")&&"stretch"!==e.getPropertyValue("align-items")&&""!==e.getPropertyValue("align-items")&&null!==e.getPropertyValue("align-items")&&/align-items/.test(r)&&(i+=`<tr class="css-align-items"><td>align-items:</td><td>${e.getPropertyValue("align-items")}</td></tr>`),e.getPropertyValue("align-self")&&"auto"!==e.getPropertyValue("align-self")&&"normal"!==e.getPropertyValue("align-self")&&""!==e.getPropertyValue("align-self")&&null!==e.getPropertyValue("align-self")&&/align-self/.test(r)&&(i+=`<tr class="css-align-self"><td>align-self:</td><td>${e.getPropertyValue("align-self")}</td></tr>`),e.getPropertyValue("animation")&&""!==e.getPropertyValue("animation")&&null!==e.getPropertyValue("animation")&&/(?<!-)\banimation\b(?!-)/.test(r)&&(i+=`<tr class="css-animation"><td>animation:</td><td>${e.getPropertyValue("animation")}</td></tr>`),e.getPropertyValue("animation-name")&&"none"!==e.getPropertyValue("animation-name")&&""!==e.getPropertyValue("animation-name")&&null!==e.getPropertyValue("animation-name")&&!/animation-name/.test(o)&&(i+=`<tr class="css-animation-name"><td>animation-name:</td><td>${e.getPropertyValue("animation-name")}</td></tr>`),e.getPropertyValue("animation-duration")&&"0s"!==e.getPropertyValue("animation-duration")&&""!==e.getPropertyValue("animation-duration")&&null!==e.getPropertyValue("animation-duration")&&!/animation-duration/.test(o)&&(i+=`<tr class="css-animation-duration"><td>animation-duration:</td><td>${e.getPropertyValue("animation-duration")}</td></tr>`),e.getPropertyValue("animation-delay")&&"0s"!==e.getPropertyValue("animation-delay")&&""!==e.getPropertyValue("animation-delay")&&null!==e.getPropertyValue("animation-delay")&&/animation-delay/.test(r)&&(i+=`<tr class="css-animation-delay"><td>animation-delay:</td><td>${e.getPropertyValue("animation-delay")}</td></tr>`),e.getPropertyValue("animation-direction")&&"normal"!==e.getPropertyValue("animation-direction")&&""!==e.getPropertyValue("animation-direction")&&null!==e.getPropertyValue("animation-direction")&&/animation-direction/.test(r)&&(i+=`<tr class="css-animation-direction"><td>animation-direction:</td><td>${e.getPropertyValue("animation-direction")}</td></tr>`),e.getPropertyValue("animation-fill-mode")&&"none"!==e.getPropertyValue("animation-fill-mode")&&""!==e.getPropertyValue("animation-fill-mode")&&null!==e.getPropertyValue("animation-fill-mode")&&/animation-fill-mode/.test(r)&&(i+=`<tr class="css-animation-fill-mode"><td>animation-fill-mode:</td><td>${e.getPropertyValue("animation-fill-mode")}</td></tr>`),e.getPropertyValue("animation-iteration-count")&&"1"!==e.getPropertyValue("animation-iteration-count")&&""!==e.getPropertyValue("animation-iteration-count")&&null!==e.getPropertyValue("animation-iteration-count")&&/animation-iteration-count/.test(r)&&(i+=`<tr class="css-animation-iteration-count"><td>animation-iteration-count:</td><td>${e.getPropertyValue("animation-iteration-count")}</td></tr>`),e.getPropertyValue("animation-play-state")&&"running"!==e.getPropertyValue("animation-play-state")&&""!==e.getPropertyValue("animation-play-state")&&null!==e.getPropertyValue("animation-play-state")&&/animation-play-state/.test(r)&&(i+=`<tr class="css-animation-play-state"><td>animation-play-state:</td><td>${e.getPropertyValue("animation-play-state")}</td></tr>`),e.getPropertyValue("animation-timing-function")&&"ease"!==e.getPropertyValue("animation-timing-function")&&""!==e.getPropertyValue("animation-timing-function")&&null!==e.getPropertyValue("animation-timing-function")&&/animation-timing-function/.test(r)&&(i+=`<tr class="css-animation-timing-function"><td>animation-timing-function:</td><td>${e.getPropertyValue("animation-timing-function")}</td></tr>`),e.getPropertyValue("appearance")&&"none"!==e.getPropertyValue("appearance")&&""!==e.getPropertyValue("appearance")&&null!==e.getPropertyValue("appearance")&&/appearance/.test(r)&&(i+=`<tr class="css-appearance"><td>appearance:</td><td>${e.getPropertyValue("appearance")}</td></tr>`),e.getPropertyValue("aspect-ratio")&&""!==e.getPropertyValue("aspect-ratio")&&null!==e.getPropertyValue("aspect-ratio")&&/aspect-ratio/.test(r)&&(i+=`<tr class="css-aspect-ratio"><td>aspect-ratio:</td><td>${e.getPropertyValue("aspect-ratio")}</td></tr>`),e.getPropertyValue("background-color")&&"none"!==e.getPropertyValue("background-color")&&""!==e.getPropertyValue("background-color")&&null!==e.getPropertyValue("background-color")&&!/bg-color/.test(o)&&(i+=`<tr class="css-background-color"><td>background-color:</td><td><div class="css-swatch" style="background-color:${rgbToHex(a)}"></div><code>${rgbToHex(a)}</code></td></tr>`),e.getPropertyValue("background-image")&&"none"!==e.getPropertyValue("background-image")&&""!==e.getPropertyValue("background-image")&&null!==e.getPropertyValue("background-image")&&/bg-image/.test(r)&&(i+=`<tr class="css-background-image"><td>background-image:</td><td>${e.getPropertyValue("background-image")}</td></tr>`),e.getPropertyValue("background-blend-mode")&&"normal"!==e.getPropertyValue("background-blend-mode")&&""!==e.getPropertyValue("background-blend-mode")&&null!==e.getPropertyValue("background-blend-mode")&&/background-blend-mode/.test(r)&&(i+=`<tr class="css-background-blend-mode"><td>background-blend-mode:</td><td>${e.getPropertyValue("background-blend-mode")}</td></tr>`),e.getPropertyValue("mix-blend-mode")&&"normal"!==e.getPropertyValue("mix-blend-mode")&&""!==e.getPropertyValue("mix-blend-mode")&&null!==e.getPropertyValue("mix-blend-mode")&&/mix-blend-mode/.test(r)&&(i+=`<tr class="css-mix-blend-mode"><td>mix-blend-mode:</td><td>${e.getPropertyValue("mix-blend-mode")}</td></tr>`),e.getPropertyValue("background-position")&&"none"!==e.getPropertyValue("background-position")&&""!==e.getPropertyValue("background-position")&&null!==e.getPropertyValue("background-position")&&/bg-position/.test(r)&&(i+=`<tr class="css-background-position"><td>background-position:</td><td>${e.getPropertyValue("background-position")}</td></tr>`),e.getPropertyValue("background-repeat")&&"none"!==e.getPropertyValue("background-repeat")&&""!==e.getPropertyValue("background-repeat")&&null!==e.getPropertyValue("background-repeat")&&/bg-repeat/.test(r)&&(i+=`<tr class="css-background-repeat"><td>background-repeat:</td><td>${e.getPropertyValue("background-repeat")}</td></tr>`),e.getPropertyValue("background-size")&&"none"!==e.getPropertyValue("background-size")&&""!==e.getPropertyValue("background-size")&&null!==e.getPropertyValue("background-size")&&/bg-size/.test(r)&&(i+=`<tr class="css-background-size"><td>background-size:</td><td>${e.getPropertyValue("background-size")}</td></tr>`),e.getPropertyValue("border")&&"none"!==e.getPropertyValue("border")&&""!==e.getPropertyValue("border")&&null!==e.getPropertyValue("border")&&/(?<!-)\bborder\b(?!-)/.test(r)&&(i+=`<tr class="css-border"><td>border:</td><td>${e.getPropertyValue("border")}</td></tr>`),e.getPropertyValue("border-bottom-color")&&"none"!==e.getPropertyValue("border-bottom-color")&&""!==e.getPropertyValue("border-bottom-color")&&null!==e.getPropertyValue("border-bottom-color")&&/b-bottom-color/.test(r)&&(i+=`<tr class="css-border-bottom-color"><td>border-bottom-color:</td><td><div class="css-swatch" style="background-color:${rgbToHex(n)}"></div><code>${rgbToHex(n)}</code></td></tr>`),e.getPropertyValue("border-bottom-width")&&"none"!==e.getPropertyValue("border-bottom-width")&&""!==e.getPropertyValue("border-bottom-width")&&null!==e.getPropertyValue("border-bottom-width")&&/b-bottom-width/.test(r)&&(i+=`<tr class="css-border-bottom-width"><td>border-bottom-width:</td><td>${e.getPropertyValue("border-bottom-width")}</td></tr>`),e.getPropertyValue("border-color")&&"none"!==e.getPropertyValue("border-color")&&""!==e.getPropertyValue("border-color")&&null!==e.getPropertyValue("border-color")&&/b-color/.test(r)&&(i+=`<tr class="css-border-color"><td>border-color:</td><td><div class="css-swatch" style="background-color:${rgbToHex(l)}"></div><code>${rgbToHex(l)}</code></td></tr>`),e.getPropertyValue("border-left-width")&&"none"!==e.getPropertyValue("border-left-width")&&""!==e.getPropertyValue("border-left-width")&&null!==e.getPropertyValue("border-left-width")&&/b-left-width/.test(r)&&(i+=`<tr class="css-border-left-width"><td>border-left-width:</td><td>${e.getPropertyValue("border-left-width")}</td></tr>`),e.getPropertyValue("border-radius")&&"none"!==e.getPropertyValue("border-radius")&&""!==e.getPropertyValue("border-radius")&&null!==e.getPropertyValue("border-radius")&&!/b-radius/.test(o)&&(i+=`<tr class="css-border-radius"><td>border-radius:</td><td>${e.getPropertyValue("border-radius")}</td></tr>`),e.getPropertyValue("border-style")&&""!==e.getPropertyValue("border-style")&&null!==e.getPropertyValue("border-style")&&/b-style/.test(r)&&(i+=`<tr class="css-border-style"><td>border-style:</td><td>${e.getPropertyValue("border-style")}</td></tr>`),e.getPropertyValue("border-width")&&"none"!==e.getPropertyValue("border-width")&&"0px"!==e.getPropertyValue("border-width")&&""!==e.getPropertyValue("border-width")&&null!==e.getPropertyValue("border-width")&&/b-width/.test(r)&&(i+=`<tr class="css-border-width"><td>border-width:</td><td>${e.getPropertyValue("border-width")}</td></tr>`),e.getPropertyValue("box-shadow")&&"none"!==e.getPropertyValue("box-shadow")&&""!==e.getPropertyValue("box-shadow")&&null!==e.getPropertyValue("box-shadow")&&/box-shadow/.test(r)&&(i+=`<tr class="css-box-shadow"><td>box-shadow:</td><td>${e.getPropertyValue("box-shadow")}</td></tr>`),e.getPropertyValue("box-sizing")&&"none"!==e.getPropertyValue("box-sizing")&&""!==e.getPropertyValue("box-sizing")&&null!==e.getPropertyValue("box-sizing")&&/box-sizing/.test(r)&&(i+=`<tr class="css-box-sizing"><td>box-sizing:</td><td>${e.getPropertyValue("box-sizing")}</td></tr>`),e.getPropertyValue("clip-path")&&"none"!==e.getPropertyValue("clip-path")&&""!==e.getPropertyValue("clip-path")&&null!==e.getPropertyValue("clip-path")&&/clip-path/.test(r)&&(i+=`<tr class="css-clip-path"><td>clip-path:</td><td>${e.getPropertyValue("clip-path")}</td></tr>`),e.getPropertyValue("color")&&"none"!==e.getPropertyValue("color")&&""!==e.getPropertyValue("color")&&null!==e.getPropertyValue("color")&&!/(?<!-)\bcolor\b(?!-)/.test(o)&&(i+=`<tr class="css-color"><td>color:</td><td><div class="css-swatch" style="background-color:${rgbToHex(s)}"></div><code>${rgbToHex(s)}</code></td></tr>`),e.getPropertyValue("column-gap")&&"normal"!==e.getPropertyValue("column-gap")&&"0px"!==e.getPropertyValue("column-gap")&&""!==e.getPropertyValue("column-gap")&&null!==e.getPropertyValue("column-gap")&&/column-gap/.test(r)&&(i+=`<tr class="css-column-gap"><td>column-gap:</td><td>${e.getPropertyValue("column-gap")}</td></tr>`),e.getPropertyValue("color-scheme")&&"none"!==e.getPropertyValue("color-scheme")&&""!==e.getPropertyValue("color-scheme")&&null!==e.getPropertyValue("color-scheme")&&/color-scheme/.test(r)&&(i+=`<tr class="css-color-scheme"><td>color-scheme:</td><td>${e.getPropertyValue("color-scheme")}</td></tr>`),e.getPropertyValue("cursor")&&"none"!==e.getPropertyValue("cursor")&&""!==e.getPropertyValue("cursor")&&null!==e.getPropertyValue("cursor")&&/cursor/.test(r)&&(i+=`<tr class="css-cursor"><td>cursor:</td><td>${e.getPropertyValue("cursor")}</td></tr>`),e.getPropertyValue("display")&&"none"!==e.getPropertyValue("display")&&""!==e.getPropertyValue("display")&&null!==e.getPropertyValue("display")&&/display/.test(r)&&(i+=`<tr class="css-display"><td>display:</td><td>${e.getPropertyValue("display")}</td></tr>`),e.getPropertyValue("filter")&&"none"!==e.getPropertyValue("filter")&&""!==e.getPropertyValue("filter")&&null!==e.getPropertyValue("filter")&&/(?<!-)\bfilter\b(?!-)/.test(r)&&(i+=`<tr class="css-filter"><td>filter:</td><td>${e.getPropertyValue("filter")}</td></tr>`),e.getPropertyValue("float")&&"none"!==e.getPropertyValue("float")&&""!==e.getPropertyValue("float")&&null!==e.getPropertyValue("float")&&/float/.test(r)&&(i+=`<tr class="css-float"><td>float:</td><td>${e.getPropertyValue("float")}</td></tr>`),e.getPropertyValue("flex-direction")&&"row"!==e.getPropertyValue("flex-direction")&&""!==e.getPropertyValue("flex-direction")&&null!==e.getPropertyValue("flex-direction")&&/flex-direction/.test(r)&&(i+=`<tr class="css-flex-direction"><td>flex-direction:</td><td>${e.getPropertyValue("flex-direction")}</td></tr>`),e.getPropertyValue("flex-wrap")&&"nowrap"!==e.getPropertyValue("flex-wrap")&&""!==e.getPropertyValue("flex-wrap")&&null!==e.getPropertyValue("flex-wrap")&&/flex-wrap/.test(r)&&(i+=`<tr class="css-flex-wrap"><td>flex-wrap:</td><td>${e.getPropertyValue("flex-wrap")}</td></tr>`),e.getPropertyValue("font-family")&&"none"!==e.getPropertyValue("font-family")&&""!==e.getPropertyValue("font-family")&&null!==e.getPropertyValue("font-family")&&/font-family/.test(r)&&(i+=`<tr class="css-font-family"><td>font-family:</td><td>${e.getPropertyValue("font-family")}</td></tr>`),e.getPropertyValue("font-size")&&"none"!==e.getPropertyValue("font-size")&&""!==e.getPropertyValue("font-size")&&null!==e.getPropertyValue("font-size")&&!/font-size/.test(o)&&(i+=`<tr class="css-font-size"><td>font-size:</td><td>${e.getPropertyValue("font-size")}</td></tr>`),e.getPropertyValue("font-style")&&"none"!==e.getPropertyValue("font-style")&&"normal"!==e.getPropertyValue("font-style")&&""!==e.getPropertyValue("font-style")&&null!==e.getPropertyValue("font-style")&&!/font-style/.test(o)&&(i+=`<tr class="css-font-style"><td>font-style:</td><td>${e.getPropertyValue("font-style")}</td></tr>`),e.getPropertyValue("font-weight")&&"none"!==e.getPropertyValue("font-weight")&&"400"!==e.getPropertyValue("font-weight")&&""!==e.getPropertyValue("font-weight")&&null!==e.getPropertyValue("font-weight")&&!/font-weight/.test(o)&&(i+=`<tr class="css-font-weight"><td>font-weight:</td><td>${e.getPropertyValue("font-weight")}</td></tr>`),e.getPropertyValue("font-variant")&&"normal"!==e.getPropertyValue("font-variant")&&""!==e.getPropertyValue("font-variant")&&null!==e.getPropertyValue("font-variant")&&/font-variant/.test(r)&&(i+=`<tr class="css-font-variant"><td>font-variant:</td><td>${e.getPropertyValue("font-variant")}</td></tr>`),e.getPropertyValue("gap")&&"normal"!==e.getPropertyValue("gap")&&"0px"!==e.getPropertyValue("gap")&&""!==e.getPropertyValue("gap")&&null!==e.getPropertyValue("gap")&&/(?<!-)\bgap\b(?!-)/.test(r)&&(i+=`<tr class="css-gap"><td>gap:</td><td>${e.getPropertyValue("gap")}</td></tr>`),e.getPropertyValue("grid-auto-flow")&&"row"!==e.getPropertyValue("grid-auto-flow")&&""!==e.getPropertyValue("grid-auto-flow")&&null!==e.getPropertyValue("grid-auto-flow")&&/grid-auto-flow/.test(r)&&(i+=`<tr class="css-grid-auto-flow"><td>grid-auto-flow:</td><td>${e.getPropertyValue("grid-auto-flow")}</td></tr>`),e.getPropertyValue("grid-column")&&"auto"!==e.getPropertyValue("grid-column")&&""!==e.getPropertyValue("grid-column")&&null!==e.getPropertyValue("grid-column")&&/grid-column/.test(r)&&(i+=`<tr class="css-grid-column"><td>grid-column:</td><td>${e.getPropertyValue("grid-column")}</td></tr>`),e.getPropertyValue("grid-row")&&"auto"!==e.getPropertyValue("grid-row")&&""!==e.getPropertyValue("grid-row")&&null!==e.getPropertyValue("grid-row")&&/grid-row/.test(r)&&(i+=`<tr class="css-grid-row"><td>grid-row:</td><td>${e.getPropertyValue("grid-row")}</td></tr>`),e.getPropertyValue("grid-template-columns")&&"none"!==e.getPropertyValue("grid-template-columns")&&""!==e.getPropertyValue("grid-template-columns")&&null!==e.getPropertyValue("grid-template-columns")&&/grid-template-columns/.test(r)&&(i+=`<tr class="css-grid-template-columns"><td>grid-template-columns:</td><td>${e.getPropertyValue("grid-template-columns")}</td></tr>`),e.getPropertyValue("grid-template-rows")&&"none"!==e.getPropertyValue("grid-template-rows")&&""!==e.getPropertyValue("grid-template-rows")&&null!==e.getPropertyValue("grid-template-rows")&&/grid-template-rows/.test(r)&&(i+=`<tr class="css-grid-template-rows"><td>grid-template-rows:</td><td>${e.getPropertyValue("grid-template-rows")}</td></tr>`),e.getPropertyValue("height")&&"none"!==e.getPropertyValue("height")&&""!==e.getPropertyValue("height")&&null!==e.getPropertyValue("height")&&!/(?<!-)\bheight\b(?!-)/.test(o)&&(i+=`<tr class="css-height"><td>height:</td><td>${e.getPropertyValue("height")}</td></tr>`),e.getPropertyValue("hyphens")&&"manual"!==e.getPropertyValue("hyphens")&&""!==e.getPropertyValue("hyphens")&&null!==e.getPropertyValue("hyphens")&&/hyphens/.test(r)&&(i+=`<tr class="css-hyphens"><td>hyphens:</td><td>${e.getPropertyValue("hyphens")}</td></tr>`),e.getPropertyValue("isolation")&&"auto"!==e.getPropertyValue("isolation")&&""!==e.getPropertyValue("isolation")&&null!==e.getPropertyValue("isolation")&&/isolation/.test(r)&&(i+=`<tr class="css-isolation"><td>isolation:</td><td>${e.getPropertyValue("isolation")}</td></tr>`),e.getPropertyValue("justify-content")&&"none"!==e.getPropertyValue("justify-content")&&"normal"!==e.getPropertyValue("justify-content")&&"start"!==e.getPropertyValue("justify-content")&&""!==e.getPropertyValue("justify-content")&&null!==e.getPropertyValue("justify-content")&&/justify-content/.test(r)&&(i+=`<tr class="css-justify-content"><td>justify-content:</td><td>${e.getPropertyValue("justify-content")}</td></tr>`),e.getPropertyValue("justify-items")&&"normal"!==e.getPropertyValue("justify-items")&&"stretch"!==e.getPropertyValue("justify-items")&&""!==e.getPropertyValue("justify-items")&&null!==e.getPropertyValue("justify-items")&&/justify-items/.test(r)&&(i+=`<tr class="css-justify-items"><td>justify-items:</td><td>${e.getPropertyValue("justify-items")}</td></tr>`),e.getPropertyValue("justify-self")&&"auto"!==e.getPropertyValue("justify-self")&&"normal"!==e.getPropertyValue("justify-self")&&""!==e.getPropertyValue("justify-self")&&null!==e.getPropertyValue("justify-self")&&/justify-self/.test(r)&&(i+=`<tr class="css-justify-self"><td>justify-self:</td><td>${e.getPropertyValue("justify-self")}</td></tr>`),e.getPropertyValue("letter-spacing")&&"none"!==e.getPropertyValue("letter-spacing")&&""!==e.getPropertyValue("letter-spacing")&&null!==e.getPropertyValue("letter-spacing")&&/letter-spacing/.test(r)&&(i+=`<tr class="css-letter-spacing"><td>letter-spacing:</td><td>${e.getPropertyValue("letter-spacing")}</td></tr>`),e.getPropertyValue("line-break")&&"none"!==e.getPropertyValue("line-break")&&""!==e.getPropertyValue("line-break")&&null!==e.getPropertyValue("line-break")&&/line-break/.test(r)&&(i+=`<tr class="css-line-break"><td>line-break:</td><td>${e.getPropertyValue("line-break")}</td></tr>`),e.getPropertyValue("line-height")&&"none"!==e.getPropertyValue("line-height")&&""!==e.getPropertyValue("line-height")&&null!==e.getPropertyValue("line-height")&&/line-height/.test(r)&&(i+=`<tr class="css-line-height"><td>line-height:</td><td>${e.getPropertyValue("line-height")}</td></tr>`),e.getPropertyValue("list-style")&&"none"!==e.getPropertyValue("list-style")&&""!==e.getPropertyValue("list-style")&&null!==e.getPropertyValue("list-style")&&/list-style/.test(r)&&(i+=`<tr class="css-list-style"><td>list-style:</td><td>${e.getPropertyValue("list-style")}</td></tr>`),e.getPropertyValue("margin")&&"none"!==e.getPropertyValue("margin")&&"0px"!==e.getPropertyValue("margin")&&""!==e.getPropertyValue("margin")&&null!==e.getPropertyValue("margin")&&!/(?<!-)\bmargin\b(?!-)/.test(o)&&(i+=`<tr class="css-margin"><td>margin:</td><td>${e.getPropertyValue("margin")}</td></tr>`),e.getPropertyValue("margin-bottom")&&"none"!==e.getPropertyValue("margin-bottom")&&"0px"!==e.getPropertyValue("margin-bottom")&&""!==e.getPropertyValue("margin-bottom")&&null!==e.getPropertyValue("margin-bottom")&&/margin-bottom/.test(r)&&(i+=`<tr class="css-margin-bottom"><td>margin-bottom:</td><td>${e.getPropertyValue("margin-bottom")}</td></tr>`),e.getPropertyValue("margin-left")&&"none"!==e.getPropertyValue("margin-left")&&"0px"!==e.getPropertyValue("margin-left")&&""!==e.getPropertyValue("margin-left")&&null!==e.getPropertyValue("margin-left")&&/margin-left/.test(r)&&(i+=`<tr class="css-margin-left"><td>margin-left:</td><td>${e.getPropertyValue("margin-left")}</td></tr>`),e.getPropertyValue("margin-right")&&"none"!==e.getPropertyValue("margin-right")&&"0px"!==e.getPropertyValue("margin-right")&&""!==e.getPropertyValue("margin-right")&&null!==e.getPropertyValue("margin-right")&&/margin-right/.test(r)&&(i+=`<tr class="css-margin-right"><td>margin-right:</td><td>${e.getPropertyValue("margin-right")}</td></tr>`),e.getPropertyValue("margin-top")&&"none"!==e.getPropertyValue("margin-top")&&"0px"!==e.getPropertyValue("margin-top")&&""!==e.getPropertyValue("margin-top")&&null!==e.getPropertyValue("margin-top")&&/margin-top/.test(r)&&(i+=`<tr class="css-margin-top"><td>margin-top:</td><td>${e.getPropertyValue("margin-top")}</td></tr>`),e.getPropertyValue("max-height")&&"none"!==e.getPropertyValue("max-height")&&""!==e.getPropertyValue("max-height")&&null!==e.getPropertyValue("max-height")&&!/max-height/.test(o)&&(i+=`<tr class="css-max-height"><td>max-height:</td><td>${e.getPropertyValue("max-height")}</td></tr>`),e.getPropertyValue("max-width")&&"none"!==e.getPropertyValue("max-width")&&""!==e.getPropertyValue("max-width")&&null!==e.getPropertyValue("max-width")&&!/max-width/.test(o)&&(i+=`<tr class="css-max-width"><td>max-width:</td><td>${e.getPropertyValue("max-width")}</td></tr>`),e.getPropertyValue("min-height")&&"none"!==e.getPropertyValue("min-height")&&"0px"!==e.getPropertyValue("min-height")&&""!==e.getPropertyValue("min-height")&&null!==e.getPropertyValue("min-height")&&/min-height/.test(r)&&(i+=`<tr class="css-min-height"><td>min-height:</td><td>${e.getPropertyValue("min-height")}</td></tr>`),e.getPropertyValue("min-width")&&"none"!==e.getPropertyValue("min-width")&&"0px"!==e.getPropertyValue("min-width")&&""!==e.getPropertyValue("min-width")&&null!==e.getPropertyValue("min-width")&&/min-width/.test(r)&&(i+=`<tr class="css-min-width"><td>min-width:</td><td>${e.getPropertyValue("min-width")}</td></tr>`),e.getPropertyValue("opacity")&&"none"!==e.getPropertyValue("opacity")&&"1"!==e.getPropertyValue("opacity")&&""!==e.getPropertyValue("opacity")&&null!==e.getPropertyValue("opacity")&&!/opacity/.test(o)&&(i+=`<tr class="css-opacity"><td>opacity:</td><td>${e.getPropertyValue("opacity")}</td></tr>`),e.getPropertyValue("object-fit")&&"fill"!==e.getPropertyValue("object-fit")&&""!==e.getPropertyValue("object-fit")&&null!==e.getPropertyValue("object-fit")&&/object-fit/.test(r)&&(i+=`<tr class="css-object-fit"><td>object-fit:</td><td>${e.getPropertyValue("object-fit")}</td></tr>`),e.getPropertyValue("object-position")&&"50% 50%"!==e.getPropertyValue("object-position")&&""!==e.getPropertyValue("object-position")&&null!==e.getPropertyValue("object-position")&&/object-position/.test(r)&&(i+=`<tr class="css-object-position"><td>object-position:</td><td>${e.getPropertyValue("object-position")}</td></tr>`),e.getPropertyValue("outline")&&"none"!==e.getPropertyValue("outline")&&""!==e.getPropertyValue("outline")&&null!==e.getPropertyValue("outline")&&/(?<!-)\boutline\b(?!-)/.test(r)&&(i+=`<tr class="css-outline"><td>outline:</td><td>${e.getPropertyValue("outline")}</td></tr>`),e.getPropertyValue("outline-offset")&&"0px"!==e.getPropertyValue("outline-offset")&&""!==e.getPropertyValue("outline-offset")&&null!==e.getPropertyValue("outline-offset")&&/outline-offset/.test(r)&&(i+=`<tr class="css-outline-offset"><td>outline-offset:</td><td>${e.getPropertyValue("outline-offset")}</td></tr>`),e.getPropertyValue("overflow")&&""!==e.getPropertyValue("overflow")&&null!==e.getPropertyValue("overflow")&&/(?<!-)\boverflow\b(?!-)/.test(r)&&(i+=`<tr class="css-overflow"><td>overflow:</td><td>${e.getPropertyValue("overflow")}</td></tr>`),e.getPropertyValue("overflow-x")&&""!==e.getPropertyValue("overflow-x")&&null!==e.getPropertyValue("overflow-x")&&/(?<!-)\boverflow-x\b(?!-)/.test(r)&&(i+=`<tr class="css-overflow-x"><td>overflow-x:</td><td>${e.getPropertyValue("overflow-x")}</td></tr>`),e.getPropertyValue("overflow-y")&&""!==e.getPropertyValue("overflow-y")&&null!==e.getPropertyValue("overflow-y")&&/(?<!-)\boverflow-y\b(?!-)/.test(r)&&(i+=`<tr class="css-overflow-y"><td>overflow-y:</td><td>${e.getPropertyValue("overflow-y")}</td></tr>`),e.getPropertyValue("overflow-wrap")&&"normal"!==e.getPropertyValue("overflow-wrap")&&""!==e.getPropertyValue("overflow-wrap")&&null!==e.getPropertyValue("overflow-wrap")&&/overflow-wrap/.test(r)&&(i+=`<tr class="css-overflow-wrap"><td>overflow-wrap:</td><td>${e.getPropertyValue("overflow-wrap")}</td></tr>`),e.getPropertyValue("pointer-events")&&"auto"!==e.getPropertyValue("pointer-events")&&""!==e.getPropertyValue("pointer-events")&&null!==e.getPropertyValue("pointer-events")&&/pointer-events/.test(r)&&(i+=`<tr class="css-pointer-events"><td>pointer-events:</td><td>${e.getPropertyValue("pointer-events")}</td></tr>`),e.getPropertyValue("padding")&&"none"!==e.getPropertyValue("padding")&&""!==e.getPropertyValue("padding")&&null!==e.getPropertyValue("padding")&&/(?<!-)\bpadding\b(?!-)/.test(r)&&(i+=`<tr class="css-padding"><td>padding:</td><td>${e.getPropertyValue("padding")}</td></tr>`),e.getPropertyValue("place-content")&&"normal"!==e.getPropertyValue("place-content")&&"stretch"!==e.getPropertyValue("place-content")&&""!==e.getPropertyValue("place-content")&&null!==e.getPropertyValue("place-content")&&/place-content/.test(r)&&(i+=`<tr class="css-place-content"><td>place-content:</td><td>${e.getPropertyValue("place-content")}</td></tr>`),e.getPropertyValue("place-items")&&"normal"!==e.getPropertyValue("place-items")&&"stretch"!==e.getPropertyValue("place-items")&&""!==e.getPropertyValue("place-items")&&null!==e.getPropertyValue("place-items")&&/place-items/.test(r)&&(i+=`<tr class="css-place-items"><td>place-items:</td><td>${e.getPropertyValue("place-items")}</td></tr>`),e.getPropertyValue("position")&&""!==e.getPropertyValue("position")&&null!==e.getPropertyValue("position")&&/(?<!-)\bposition\b(?!-)/.test(r)&&(i+=`<tr class="css-position"><td>position:</td><td>${e.getPropertyValue("position")}</td></tr>`),e.getPropertyValue("row-gap")&&"normal"!==e.getPropertyValue("row-gap")&&"0px"!==e.getPropertyValue("row-gap")&&""!==e.getPropertyValue("row-gap")&&null!==e.getPropertyValue("row-gap")&&/row-gap/.test(r)&&(i+=`<tr class="css-row-gap"><td>row-gap:</td><td>${e.getPropertyValue("row-gap")}</td></tr>`),e.getPropertyValue("text-align")&&"none"!==e.getPropertyValue("text-align")&&"start"!==e.getPropertyValue("text-align")&&""!==e.getPropertyValue("text-align")&&null!==e.getPropertyValue("text-align")&&/text-align/.test(r)&&(i+=`<tr class="css-text-align"><td>text-align:</td><td>${e.getPropertyValue("text-align")}</td></tr>`),e.getPropertyValue("text-decoration")&&"none"!==e.getPropertyValue("text-decoration")&&"start"!==e.getPropertyValue("text-decoration")&&""!==e.getPropertyValue("text-decoration")&&null!==e.getPropertyValue("text-decoration")&&/text-decoration/.test(r)&&(i+=`<tr class="css-text-decoration"><td>text-decoration:</td><td>${e.getPropertyValue("text-decoration")}</td></tr>`),e.getPropertyValue("text-decoration-thickness")&&"auto"!==e.getPropertyValue("text-decoration-thickness")&&"from-font"!==e.getPropertyValue("text-decoration-thickness")&&""!==e.getPropertyValue("text-decoration-thickness")&&null!==e.getPropertyValue("text-decoration-thickness")&&/text-decoration-thickness/.test(r)&&(i+=`<tr class="css-text-decoration-thickness"><td>text-decoration-thickness:</td><td>${e.getPropertyValue("text-decoration-thickness")}</td></tr>`),e.getPropertyValue("text-indent")&&"none"!==e.getPropertyValue("text-indent")&&""!==e.getPropertyValue("text-indent")&&null!==e.getPropertyValue("text-indent")&&/text-indent/.test(r)&&(i+=`<tr class="css-text-indent"><td>text-indent:</td><td>${e.getPropertyValue("text-indent")}</td></tr>`),e.getPropertyValue("text-shadow")&&"none"!==e.getPropertyValue("text-shadow")&&""!==e.getPropertyValue("text-shadow")&&null!==e.getPropertyValue("text-shadow")&&/text-shadow/.test(r)&&(i+=`<tr class="css-text-shadow"><td>text-shadow:</td><td>${e.getPropertyValue("text-shadow")}</td></tr>`),e.getPropertyValue("text-overflow")&&"clip"!==e.getPropertyValue("text-overflow")&&""!==e.getPropertyValue("text-overflow")&&null!==e.getPropertyValue("text-overflow")&&/text-overflow/.test(r)&&(i+=`<tr class="css-text-overflow"><td>text-overflow:</td><td>${e.getPropertyValue("text-overflow")}</td></tr>`),e.getPropertyValue("text-transform")&&"none"!==e.getPropertyValue("text-transform")&&""!==e.getPropertyValue("text-transform")&&null!==e.getPropertyValue("text-transform")&&/text-transform/.test(r)&&(i+=`<tr class="css-text-transform"><td>text-transform:</td><td>${e.getPropertyValue("text-transform")}</td></tr>`),e.getPropertyValue("text-underline-offset")&&"auto"!==e.getPropertyValue("text-underline-offset")&&""!==e.getPropertyValue("text-underline-offset")&&null!==e.getPropertyValue("text-underline-offset")&&/text-underline-offset/.test(r)&&(i+=`<tr class="css-text-underline-offset"><td>text-underline-offset:</td><td>${e.getPropertyValue("text-underline-offset")}</td></tr>`),e.getPropertyValue("text-wrap")&&"none"!==e.getPropertyValue("text-wrap")&&""!==e.getPropertyValue("text-wrap")&&null!==e.getPropertyValue("text-wrap")&&/text-wrap/.test(r)&&(i+=`<tr class="css-text-wrap"><td>text-wrap:</td><td>${e.getPropertyValue("text-wrap")}</td></tr>`),e.getPropertyValue("transform")&&"none"!==e.getPropertyValue("transform")&&""!==e.getPropertyValue("transform")&&null!==e.getPropertyValue("transform")&&/(?<!-)\btransform\b(?!-)/.test(r)&&(i+=`<tr class="css-transform"><td>transform:</td><td>${e.getPropertyValue("transform")}</td></tr>`),e.getPropertyValue("transform-origin")&&"50% 50%"!==e.getPropertyValue("transform-origin")&&"50% 50% 0px"!==e.getPropertyValue("transform-origin")&&""!==e.getPropertyValue("transform-origin")&&null!==e.getPropertyValue("transform-origin")&&/transform-origin/.test(r)&&(i+=`<tr class="css-transform-origin"><td>transform-origin:</td><td>${e.getPropertyValue("transform-origin")}</td></tr>`),e.getPropertyValue("transition")&&"none"!==e.getPropertyValue("transition")&&""!==e.getPropertyValue("transition")&&null!==e.getPropertyValue("transition")&&/(?<!-)\btransition\b(?!-)/.test(r)&&(i+=`<tr class="css-transition"><td>transition:</td><td>${e.getPropertyValue("transition")}</td></tr>`),e.getPropertyValue("transition-delay")&&"0s"!==e.getPropertyValue("transition-delay")&&""!==e.getPropertyValue("transition-delay")&&null!==e.getPropertyValue("transition-delay")&&/transition-delay/.test(r)&&(i+=`<tr class="css-transition-delay"><td>transition-delay:</td><td>${e.getPropertyValue("transition-delay")}</td></tr>`),e.getPropertyValue("transition-duration")&&"0s"!==e.getPropertyValue("transition-duration")&&""!==e.getPropertyValue("transition-duration")&&null!==e.getPropertyValue("transition-duration")&&/transition-duration/.test(r)&&(i+=`<tr class="css-transition-duration"><td>transition-duration:</td><td>${e.getPropertyValue("transition-duration")}</td></tr>`),e.getPropertyValue("transition-property")&&"all"!==e.getPropertyValue("transition-property")&&"none"!==e.getPropertyValue("transition-property")&&""!==e.getPropertyValue("transition-property")&&null!==e.getPropertyValue("transition-property")&&/transition-property/.test(r)&&(i+=`<tr class="css-transition-property"><td>transition-property:</td><td>${e.getPropertyValue("transition-property")}</td></tr>`),e.getPropertyValue("transition-timing-function")&&"ease"!==e.getPropertyValue("transition-timing-function")&&""!==e.getPropertyValue("transition-timing-function")&&null!==e.getPropertyValue("transition-timing-function")&&/transition-timing-function/.test(r)&&(i+=`<tr class="css-transition-timing-function"><td>transition-timing-function:</td><td>${e.getPropertyValue("transition-timing-function")}</td></tr>`),e.getPropertyValue("backdrop-filter")&&"none"!==e.getPropertyValue("backdrop-filter")&&""!==e.getPropertyValue("backdrop-filter")&&null!==e.getPropertyValue("backdrop-filter")&&/backdrop-filter/.test(r)&&(i+=`<tr class="css-backdrop-filter"><td>backdrop-filter:</td><td>${e.getPropertyValue("backdrop-filter")}</td></tr>`),e.getPropertyValue("user-select")&&""!==e.getPropertyValue("user-select")&&null!==e.getPropertyValue("user-select")&&/user-select/.test(r)&&(i+=`<tr class="css-user-select"><td>user-select:</td><td>${e.getPropertyValue("user-select")}</td></tr>`),e.getPropertyValue("vertical-align")&&"none"!==e.getPropertyValue("vertical-align")&&""!==e.getPropertyValue("vertical-align")&&null!==e.getPropertyValue("vertical-align")&&/vertical-align/.test(r)&&(i+=`<tr class="css-vertical-align"><td>vertical-align:</td><td>${e.getPropertyValue("vertical-align")}</td></tr>`),e.getPropertyValue("white-space")&&"none"!==e.getPropertyValue("white-space")&&"normal"!==e.getPropertyValue("white-space")&&""!==e.getPropertyValue("white-space")&&null!==e.getPropertyValue("white-space")&&/white-space/.test(r)&&(i+=`<tr class="css-white-space"><td>white-space:</td><td>${e.getPropertyValue("white-space")}</td></tr>`),e.getPropertyValue("writing-mode")&&"horizontal-tb"!==e.getPropertyValue("writing-mode")&&""!==e.getPropertyValue("writing-mode")&&null!==e.getPropertyValue("writing-mode")&&/writing-mode/.test(r)&&(i+=`<tr class="css-writing-mode"><td>writing-mode:</td><td>${e.getPropertyValue("writing-mode")}</td></tr>`),e.getPropertyValue("will-change")&&"auto"!==e.getPropertyValue("will-change")&&""!==e.getPropertyValue("will-change")&&null!==e.getPropertyValue("will-change")&&/will-change/.test(r)&&(i+=`<tr class="css-will-change"><td>will-change:</td><td>${e.getPropertyValue("will-change")}</td></tr>`),e.getPropertyValue("width")&&"none"!==e.getPropertyValue("width")&&""!==e.getPropertyValue("width")&&null!==e.getPropertyValue("width")&&!/(?<!-)\bwidth\b(?!-)/.test(o)&&(i+=`<tr class="css-width"><td>width:</td><td>${e.getPropertyValue("width")}</td></tr>`),e.getPropertyValue("word-break")&&"none"!==e.getPropertyValue("word-break")&&""!==e.getPropertyValue("word-break")&&null!==e.getPropertyValue("word-break")&&/word-break/.test(r)&&(i+=`<tr class="css-word-break"><td>word-break:</td><td>${e.getPropertyValue("word-break")}</td></tr>`),e.getPropertyValue("word-spacing")&&"none"!==e.getPropertyValue("word-spacing")&&""!==e.getPropertyValue("word-spacing")&&null!==e.getPropertyValue("word-spacing")&&/word-spacing/.test(r)&&(i+=`<tr class="css-word-spacing"><td>word-spacing:</td><td>${e.getPropertyValue("word-spacing")}</td></tr>`),e.getPropertyValue("word-wrap")&&"none"!==e.getPropertyValue("word-wrap")&&""!==e.getPropertyValue("word-wrap")&&null!==e.getPropertyValue("word-wrap")&&/word-wrap/.test(r)&&(i+=`<tr class="css-word-wrap"><td>word-wrap:</td><td>${e.getPropertyValue("word-wrap")}</td></tr>`),e.getPropertyValue("z-index")&&"none"!==e.getPropertyValue("z-index")&&""!==e.getPropertyValue("z-index")&&null!==e.getPropertyValue("z-index")&&/z-index/.test(r)&&(i+=`<tr class="css-z-index"><td>z-index:</td><td>${e.getPropertyValue("z-index")}</td></tr>`),i+="</table><style>.popover-css-inspector {z-index: 1010; display: block; max-width: 285px; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; white-space: normal; word-spacing: normal; line-break: auto; font-size: 0.875rem; border: 1px solid rgba(133, 133, 133, .3); border-radius: .5rem} .popover-css-inspector .popover-body {padding: .5rem .75rem; line-height: 1.5; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif; } .popover-css-inspector .popover-body td {height: 1.1rem; padding: 0; font-style: normal; text-align: left; text-decoration: none;} .popover-css-inspector .popover-body td:nth-child(1) {font-weight: bold; padding-right: .5rem; text-wrap: nowrap !important}.popover-css-inspector .popover-body td:nth-child(2) {font-weight: 400 !important; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important; padding-top: 1px;}.popover-css-inspector .popover-body td:nth-child(2):not(:has(div)) {opacity: .7;}.popover-css-inspector .popover-body td:nth-child(2) code {padding-top: 1px; filter: grayscale(1);}.popover-css-inspector .popover-header {padding: 4px; padding-left: 12px; font-size: .875em; border: 0;}.popover-css-inspector .css-swatch {border: 1px solid rgba(133, 133, 133, .3); border-radius: 50%; display: inline-block; height: 12px; width: 12px; margin-bottom: -2px; margin-right: .25rem; forced-color-adjust: none;}.popover-css-inspector[data-popper-placement='left'] {margin-right: 10px !important;}.popover-css-inspector[data-popper-placement='right'] {margin-left: 10px !important;}.popover-css-inspector[data-popper-placement='left'] .popover-arrow {position: fixed; top: 50%; transform: translateY(-50%);}.popover-css-inspector[data-popper-placement='right'] .popover-arrow {position: fixed; top: 50%; transform: translateY(-50%);}.popover-css-inspector[data-popper-placement='top'] {margin-bottom: 10px !important;}.popover-css-inspector[data-popper-placement='top'] .popover-arrow {position: fixed; left: 48%; transform: translateY(-40%); bottom: -12px;}.popover-css-inspector[data-popper-placement='bottom'] {margin-top: 10px !important;}.popover-css-inspector[data-popper-placement='bottom'] .popover-arrow {position: fixed; left: 48%; transform: translateY(-40%); top: -5px;}</style>";const p=new bootstrap.Popover(t,{content:i,boundary:"window",html:!0,sanitize:!1,popperConfig:{modifiers:[{name:"preventOverflow",options:{rootBoundary:"document"}}]}});return p.show(),p._config.keyboard=!1,p._config.backdrop="static",p;function rgbToHex(t){const e=t.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);return e?`#${hex(e[1])}${hex(e[2])}${hex(e[3])}`:t}function hex(t){return`0${parseInt(t).toString(16)}`.slice(-2)}})}function shouldRefreshPopovers(t){if("attributes"===t.type){const{target:e}=t;return"data-bs-theme"===t.attributeName||e.matches(popoverSelector)}const hasMatchingNode=t=>t.nodeType===Node.ELEMENT_NODE&&(t.matches(popoverSelector)||t.querySelector(popoverSelector));return Array.from(t.addedNodes).some(hasMatchingNode)||Array.from(t.removedNodes).some(hasMatchingNode)}createPopovers();const popoverObserver=new MutationObserver(t=>{t.some(shouldRefreshPopovers)&&createPopovers()});popoverObserver.observe(document.documentElement,{attributeFilter:["data-bs-theme","data-bs-custom-class","data-css-inspector-show","data-css-inspector-hide"],attributes:!0,childList:!0,subtree:!0});