@phun-ky/speccer 11.1.6 → 11.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -2
- package/dist/speccer.css +146 -59
- package/dist/speccer.esm.js +2 -2
- package/dist/speccer.esm.js.map +1 -1
- package/dist/speccer.js +2 -2
- package/dist/speccer.js.map +1 -1
- package/dist/speccer.min.css +1 -1
- package/package.json +1 -1
package/dist/speccer.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ph-speccer.speccer{--ph-speccer-color-artificialStrawberry:#ff3aa8;--ph-speccer-color-venusSlipperOrchid:#db6fff;--ph-speccer-color-superBanana:#fff76f;--ph-speccer-color-white:#fff;--ph-speccer-color-carbon:#333;--ph-speccer-color-red:red;--ph-speccer-color-niuZaiSeDenim:#0074e8;--ph-speccer-color-beautifulBlue:#1868b2;--ph-speccer-color-fuchsiaBlue:#7e60c5;--ph-speccer-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-padding-color:var(--ph-speccer-color-carbon);--ph-speccer-spacing-padding-color-background:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-margin-color:var(--ph-speccer-color-red);--ph-speccer-spacing-margin-color-background:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-line-width:var(--ph-speccer-line-width);--ph-speccer-typography-background-color:var(--ph-speccer-color-white);--ph-speccer-typography-color-property:var(--ph-speccer-color-niuZaiSeDenim);--ph-speccer-typography-color-text:var(--ph-speccer-base-color);--ph-speccer-typography-color-value:var(--ph-speccer-base-color);--ph-speccer-mark-background-color:rgb(from var(--ph-speccer-base-color) r g b/var(--ph-speccer-opacity-20));--ph-speccer-mark-border-color:var(--ph-speccer-base-color);--ph-speccer-mark-border-width:1.5px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-line-width:1.5px;--ph-speccer-measure-border-style:dotted;--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-background:var(--ph-speccer-color-beautifulBlue);--ph-speccer-a11y-landmark-color-background:var(--ph-speccer-color-fuchsiaBlue);--ph-speccer-color-text-light:var(--ph-speccer-color-white);--ph-speccer-color-text-dark:var(--ph-speccer-color-carbon);--ph-speccer-pin-color:var(--ph-speccer-base-color);--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-height:12px;--ph-speccer-line-width:1.5px;--ph-speccer-line-width-negative:-1.5px;--ph-speccer-opacity-20:0.2;--ph-speccer-opacity-40:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-transition-default:all 2s cubic-bezier(0.4,0,0.2,1)}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before{align-items:center;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:12px;justify-content:center;line-height:12px;position:absolute;z-index:99999}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before,svg.ph-speccer{box-sizing:border-box;margin:0;padding:0;pointer-events:none;user-select:none}#ph-speccer-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}svg.ph-speccer .ph-speccer.circle,svg.ph-speccer .ph-speccer.path{color:var(--ph-speccer-base-color,#ff3aa8)}[data-speccer=pin-area]{counter-reset:type}.ph-speccer.speccer.pin{align-items:center;border-radius:100%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family);font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin,.ph-speccer.speccer.pin:after{background-color:var(--ph-speccer-pin-color);position:absolute}.ph-speccer.speccer.pin:after{content:"";height:var(--ph-speccer-pin-space);top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph-speccer.speccer.pin.curly:after,.ph-speccer.speccer.pin.svg:after,.ph-speccer.speccer.pin.text:after{content:none!important}.ph-speccer.speccer.pin.top:after,.ph-speccer.speccer.pin:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{right:auto}.ph-speccer.speccer.pin.right:after{left:auto}.ph-speccer.speccer.pin.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{left:100%}.ph-speccer.speccer.pin.left:after,.ph-speccer.speccer.pin.right:after{height:var(--ph-speccer-line-width);top:50%;width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.pin.right:after{right:100%}.ph-speccer.path.speccer.text,.ph-speccer.speccer.pin.text{color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.pin.text{align-items:flex-start;background-color:initial;border-radius:0;display:flex;flex-direction:column;font-family:var(--ph-speccer-font-family);font-weight:400;height:auto;justify-content:center;line-height:130%;min-height:var(--ph-speccer-pin-size);position:absolute;width:250px;z-index:100000;grid-gap:2px}.ph-speccer.speccer.pin.text.right{padding-left:1rem}.ph-speccer.speccer.pin.text.left{padding-right:1rem;width:170px}.ph-speccer.speccer.pin.text.top{padding-bottom:1rem}.ph-speccer.speccer.pin.text.bottom{padding-top:1rem}.ph-speccer.speccer.pin.text .ph-speccer.title{font-size:11px;font-weight:500;text-transform:uppercase}.ph-speccer.speccer.pin.text .ph-speccer.description,.ph-speccer.speccer.pin.text .ph-speccer.heading{font-size:.875rem;font-weight:600;line-height:130%;position:relative}.ph-speccer.speccer.pin.text .ph-speccer.heading{color:var(--ph-speccer-base-color);text-transform:uppercase}.ph-speccer.speccer.pin.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.enclose:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph-speccer.speccer.pin.enclose.right:before{left:100%;right:auto}.ph-speccer.speccer.pin.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph-speccer.speccer.pin.enclose.left:before{left:auto;right:100%}.ph-speccer.speccer.pin.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose.top:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before{bottom:auto;top:100%}.ph-speccer.speccer.pin.enclose.left,.ph-speccer.speccer.pin.enclose.right{width:8px}.ph-speccer.speccer.pin.enclose,.ph-speccer.speccer.pin.enclose.bottom,.ph-speccer.speccer.pin.enclose.top{height:8px}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.bracket:not(.curly){background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none;border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.bracket:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly):before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).right:before{left:100%;right:auto}.ph-speccer.speccer.pin.bracket:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).left:before{left:auto;right:100%}.ph-speccer.speccer.pin.bracket:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).top:before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:before{top:100%}.ph-speccer.speccer.pin.bracket.left:not(.curly),.ph-speccer.speccer.pin.bracket.right:not(.curly){width:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly),.ph-speccer.speccer.pin.bracket.top:not(.curly),.ph-speccer.speccer.pin.bracket:not(.curly){height:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.bottom:after,.ph-speccer.speccer.pin.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.subtle.left:after,.ph-speccer.speccer.pin.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly){background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly),.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly):after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{border-style:dashed}.ph-speccer.speccer.pin.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.enclose.subtle.bottom:before,.ph-speccer.speccer.pin.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.enclose.subtle.left:before,.ph-speccer.speccer.pin.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.a11y.landmark{align-items:center;background-color:var(--ph-speccer-a11y-landmark-color-background);border:3px solid var(--ph-speccer-a11y-landmark-color-background);border-radius:.5rem;box-shadow:inset 0 0 0 2px var(--ph-speccer-color-text-light);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:1rem;height:48px;justify-content:center;line-height:100%;padding:.5rem;pointer-events:auto;position:absolute;width:48px}.ph-speccer.speccer.a11y.landmark:after{border:12px solid #7e60c500;border-top:12px solid var(--ph-speccer-a11y-landmark-color-background);content:"";height:0;left:50%;margin-left:-12px;pointer-events:none;position:absolute;top:100%;width:0}.ph-speccer.speccer.a11y.region{outline:2px solid var(--ph-speccer-a11y-landmark-color-background);outline-offset:2px;position:absolute}[data-speccer*=a11y]{counter-reset:speccer-a11y-tabstops}.ph-speccer.speccer.a11y.tabstops{background-color:var(--ph-speccer-a11y-color-background);border:3px solid var(--ph-speccer-a11y-color-background);border-radius:.5rem;color:var(--ph-speccer-color-text-light);counter-increment:speccer-a11y-tabstops;font-family:var(--ph-speccer-font-family);height:48px;position:absolute;width:48px}.ph-speccer.speccer.a11y.tabstops:before{content:counter(speccer-a11y-tabstops);font-size:12px;left:calc(.5rem - 2px);position:absolute;text-align:left;top:calc(.5rem - 2px)}.ph-speccer.speccer.a11y.tabstops:after{align-items:flex-end;bottom:.5rem;color:var(--ph-speccer-color-text-light);content:"⇥";display:flex;font-family:var(--ph-speccer-font-family);font-size:2rem;height:2rem;justify-content:flex-end;left:.5rem;position:absolute;right:.5rem}.ph-speccer.speccer.a11y.shortcut-holder{align-items:center;display:flex;flex-direction:row;height:48px;justify-content:flex-start;min-width:120px;position:absolute;grid-gap:.5rem}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{align-items:center;background-color:var(--ph-speccer-a11y-color-background);border:3px solid var(--ph-speccer-a11y-color-background);border-radius:.5rem;color:var(--ph-speccer-color-text-light);display:inline-flex;flex-shrink:0;font-family:var(--ph-speccer-font-family);font-size:1.5rem;height:48px;justify-content:center;min-width:48px;position:relative;text-transform:uppercase}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.modifier{width:80px}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.modifier,.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.physical{align-items:flex-end;font-size:1rem;justify-content:flex-start;padding:.25rem;text-transform:lowercase}.ph-speccer.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:320px;padding:8px;text-align:left;width:auto}.ph-speccer.speccer.typography,.ph-speccer.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph-speccer.speccer.typography.left:after,.ph-speccer.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.top:after{top:100%}.ph-speccer.speccer.typography.bottom:after,.ph-speccer.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.typography.bottom:after{bottom:100%;top:auto}.ph-speccer.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph-speccer.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography.syntax>pre{background:#0000;border-radius:0;color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;line-height:1.5;margin:0;padding:0}.ph-speccer.speccer.typography.syntax{--ph-speccer-color-code-color-1:#737373;--ph-speccer-color-code-color-2:#ff3aa8;--ph-speccer-color-code-color-3:#38383d;--ph-speccer-color-code-color-4:#ff3aa8;--ph-speccer-color-code-color-5:#ff3aa8;--ph-speccer-color-code-color-6:#0074e8;--ph-speccer-color-code-color-7:#000;--ph-speccer-color-code-color-8:#cd0404}.ph-speccer.speccer.typography.syntax .namespace{opacity:.7}.ph-speccer.speccer.typography.syntax .token.cdata,.ph-speccer.speccer.typography.syntax .token.comment,.ph-speccer.speccer.typography.syntax .token.doctype,.ph-speccer.speccer.typography.syntax .token.prolog{color:var(--ph-speccer-color-code-color-1)}.ph-speccer.speccer.typography.syntax .token.boolean,.ph-speccer.speccer.typography.syntax .token.null,.ph-speccer.speccer.typography.syntax .token.number,.ph-speccer.speccer.typography.syntax .token.operator{color:var(--ph-speccer-color-code-color-5)}.ph-speccer.speccer.typography.syntax .token.attr-name{color:var(--ph-speccer-color-code-color-2)}.ph-speccer.speccer.typography.syntax .token.entity,.ph-speccer.speccer.typography.syntax .token.selector,.ph-speccer.speccer.typography.syntax .token.string,.ph-speccer.speccer.typography.syntax .token.url{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.atrule,.ph-speccer.speccer.typography.syntax .token.attr-value,.ph-speccer.speccer.typography.syntax .token.control,.ph-speccer.speccer.typography.syntax .token.directive,.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.keyword,.ph-speccer.speccer.typography.syntax .token.unit{color:var(--ph-speccer-color-code-color-4)}.ph-speccer.speccer.typography.syntax .token.regex,.ph-speccer.speccer.typography.syntax .token.statement{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.placeholder,.ph-speccer.speccer.typography.syntax .token.property,.ph-speccer.speccer.typography.syntax .token.tag,.ph-speccer.speccer.typography.syntax .token.variable{color:var(--ph-speccer-color-code-color-6)}.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.statement{font-weight:700}.ph-speccer.speccer.typography.syntax .token.punctuation{color:var(--ph-speccer-color-code-color-7)}.ph-speccer.speccer.typography.syntax .token.entity{cursor:help}.ph-speccer.speccer.typography.syntax .token.debug{color:var(--ph-speccer-color-code-color-8)}.ph-speccer.speccer.speccer-grid-container{column-gap:var(--ph-speccer-grid-gap-original);counter-reset:column-gap}.ph-speccer.speccer.speccer-grid-container,.ph-speccer.speccer.speccer-grid-row-container{display:grid;justify-content:normal;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-container{counter-reset:row-gap;row-gap:var(--ph-speccer-grid-row-gap-original)}.ph-speccer.speccer.speccer-grid-item{border-left:1px solid var(--ph-speccer-base-color);border-right:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item{border-bottom:1px solid var(--ph-speccer-base-color);border-top:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default);width:100%}.ph-speccer.speccer.speccer-grid-item:before{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-row-item:before{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:before{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-item:first-child:after{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:first-child:after,.ph-speccer.speccer.speccer-grid-row-item:first-child:after{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:first-child:after{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child:after{left:calc(100% - (var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original))/2)}.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:before,.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child:after{top:calc(100% - (var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original))/2)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child:before{left:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);position:absolute;right:auto;top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child:before{bottom:auto;left:-32px;position:absolute;top:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child:before{left:auto;position:absolute;right:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child:before{bottom:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1);left:-32px;position:absolute;top:auto}.ph-speccer.speccer.spacing{pointer-events:none;transition:none;white-space:nowrap}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-padding-color-background);color:var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding:after,.ph-speccer.speccer.spacing.padding:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.padding.bottom,.ph-speccer.speccer.spacing.padding.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.padding.left,.ph-speccer.speccer.spacing.padding.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-margin-color-background);color:var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom,.ph-speccer.speccer.spacing.margin.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.margin.left,.ph-speccer.speccer.spacing.margin.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.margin:after,.ph-speccer.speccer.spacing.margin:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.bound.margin.bottom,.ph-speccer.speccer.spacing.bound.margin.left,.ph-speccer.speccer.spacing.bound.margin.right,.ph-speccer.speccer.spacing.bound.margin.top,.ph-speccer.speccer.spacing.bound.padding.bottom,.ph-speccer.speccer.spacing.bound.padding.left,.ph-speccer.speccer.spacing.bound.padding.right,.ph-speccer.speccer.spacing.bound.padding.top{align-items:center;justify-content:center;padding:0}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.height{border-bottom:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-top:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.height.left:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:59px;position:absolute;width:10px}.ph-speccer.speccer.measure.height.left:after{border-right:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-end;line-height:100%;margin-right:auto;padding-right:8px;position:static;width:64px}.ph-speccer.speccer.measure.height.right:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:calc(100% - 69px);position:absolute;width:10px}.ph-speccer.speccer.measure.height.right:after{border-left:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-start;line-height:100%;margin-left:auto;padding-left:8px;position:static;width:64px}.ph-speccer.speccer.measure.width{align-items:center;border-left:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-right:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color);flex-direction:column;justify-content:flex-start}.ph-speccer.speccer.measure.width.top:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:31px;width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.top:after{border-bottom:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-end;line-height:18px;margin-bottom:auto;padding-bottom:4px;position:static;width:100%}.ph-speccer.speccer.measure.width.bottom:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:calc(100% - 41px);width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.bottom:after{border-top:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-start;line-height:18px;margin-top:auto;padding-top:4px;position:static;width:100%}.ph-speccer.speccer.measure.slim.height{width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.height:before{content:none!important}.ph-speccer.speccer.measure.slim.height.left{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.right{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.left:after{border:none;height:auto;left:calc(-100% - 20px - var(--ph-speccer-line-width));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.height.right:after{border:none;height:auto;left:calc(100% - var(--ph-speccer-measure-size));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.width{height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.width:before{content:none!important}.ph-speccer.speccer.measure.slim.width.bottom{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top:after{border:none;bottom:calc(100% + 5px);height:auto;padding:0;position:absolute}.ph-speccer.speccer.measure.slim.width.bottom:after{border:none;height:auto;padding:0;position:absolute;top:calc(100% + 5px)}.ph-speccer.speccer.measure.slim.subtle.height.left,.ph-speccer.speccer.measure.slim.subtle.height.right,.ph-speccer.speccer.measure.slim.subtle.width.bottom,.ph-speccer.speccer.measure.slim.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.slim.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.slim.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.slim.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.slim.subtle.height.left{border-right:none}.ph-speccer.speccer.mark{background-color:var(--ph-speccer-mark-background-color);border-color:var(--ph-speccer-mark-border-color);border-style:var(--ph-speccer-mark-border-style);border-width:var(--ph-speccer-mark-border-width);position:absolute}
|
|
1
|
+
.ph-speccer.speccer{--ph-speccer-color-artificialStrawberry:#ff3aa8;--ph-speccer-color-venusSlipperOrchid:#db6fff;--ph-speccer-color-superBanana:#fff76f;--ph-speccer-color-white:#fff;--ph-speccer-color-carbon:#333;--ph-speccer-color-red:red;--ph-speccer-color-niuZaiSeDenim:#0074e8;--ph-speccer-color-beautifulBlue:#1868b2;--ph-speccer-color-fuchsiaBlue:#7e60c5;--ph-speccer-color-sangDeBoeuf:#7a1000;--ph-speccer-color-galacticPurple:#3f2f9b;--ph-speccer-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-padding-color:var(--ph-speccer-color-carbon);--ph-speccer-spacing-padding-color-background:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-margin-color:var(--ph-speccer-color-red);--ph-speccer-spacing-margin-color-background:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-line-width:var(--ph-speccer-line-width);--ph-speccer-typography-background-color:var(--ph-speccer-color-white);--ph-speccer-typography-color-property:var(--ph-speccer-color-niuZaiSeDenim);--ph-speccer-typography-color-text:var(--ph-speccer-base-color);--ph-speccer-typography-color-value:var(--ph-speccer-base-color);--ph-speccer-mark-background-color:rgb(from var(--ph-speccer-base-color) r g b/var(--ph-speccer-opacity-20));--ph-speccer-mark-border-color:var(--ph-speccer-base-color);--ph-speccer-mark-border-width:1.5px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-line-width:1.5px;--ph-speccer-measure-border-style:dotted;--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-background:var(--ph-speccer-color-beautifulBlue);--ph-speccer-a11y-landmark-color-background:var(--ph-speccer-color-fuchsiaBlue);--ph-speccer-a11y-autocomplete-color-background:var(--ph-speccer-color-sangDeBoeuf);--ph-speccer-a11y-headings-color-background:var(--ph-speccer-color-galacticPurple);--ph-speccer-color-text-light:var(--ph-speccer-color-white);--ph-speccer-color-text-dark:var(--ph-speccer-color-carbon);--ph-speccer-pin-color:var(--ph-speccer-base-color);--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-height:12px;--ph-speccer-line-width:1.5px;--ph-speccer-line-width-negative:-1.5px;--ph-speccer-opacity-20:0.2;--ph-speccer-opacity-40:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-transition-default:all 2s cubic-bezier(0.4,0,0.2,1)}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before{align-items:center;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:12px;justify-content:center;line-height:12px;position:absolute;z-index:99999}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before,svg.ph-speccer{box-sizing:border-box;margin:0;padding:0;pointer-events:none;user-select:none}#ph-speccer-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}svg.ph-speccer .ph-speccer.circle,svg.ph-speccer .ph-speccer.path{color:var(--ph-speccer-base-color,#ff3aa8)}[data-speccer=pin-area]{counter-reset:type}.ph-speccer.speccer.pin{align-items:center;border-radius:100%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family);font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin,.ph-speccer.speccer.pin:after{background-color:var(--ph-speccer-pin-color);position:absolute}.ph-speccer.speccer.pin:after{content:"";height:var(--ph-speccer-pin-space);top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph-speccer.speccer.pin.curly:after,.ph-speccer.speccer.pin.svg:after,.ph-speccer.speccer.pin.text:after{content:none!important}.ph-speccer.speccer.pin.top:after,.ph-speccer.speccer.pin:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{right:auto}.ph-speccer.speccer.pin.right:after{left:auto}.ph-speccer.speccer.pin.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.left:after{left:100%}.ph-speccer.speccer.pin.left:after,.ph-speccer.speccer.pin.right:after{height:var(--ph-speccer-line-width);top:50%;width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.pin.right:after{right:100%}.ph-speccer.path.speccer.text,.ph-speccer.speccer.pin.text{color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.pin.text{align-items:flex-start;background-color:initial;border-radius:0;display:flex;flex-direction:column;font-family:var(--ph-speccer-font-family);font-weight:400;height:auto;justify-content:center;line-height:130%;min-height:var(--ph-speccer-pin-size);position:absolute;width:250px;z-index:100000;grid-gap:2px}.ph-speccer.speccer.pin.text.right{padding-left:1rem}.ph-speccer.speccer.pin.text.left{padding-right:1rem;width:170px}.ph-speccer.speccer.pin.text.top{padding-bottom:1rem}.ph-speccer.speccer.pin.text.bottom{padding-top:1rem}.ph-speccer.speccer.pin.text .ph-speccer.title{font-size:11px;font-weight:500;text-transform:uppercase}.ph-speccer.speccer.pin.text .ph-speccer.description,.ph-speccer.speccer.pin.text .ph-speccer.heading{font-size:.875rem;font-weight:600;line-height:130%;position:relative}.ph-speccer.speccer.pin.text .ph-speccer.heading{color:var(--ph-speccer-base-color);text-transform:uppercase}.ph-speccer.speccer.pin.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.enclose:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph-speccer.speccer.pin.enclose.right:before{left:100%;right:auto}.ph-speccer.speccer.pin.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph-speccer.speccer.pin.enclose.left:before{left:auto;right:100%}.ph-speccer.speccer.pin.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.enclose.top:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before{bottom:auto;top:100%}.ph-speccer.speccer.pin.enclose.left,.ph-speccer.speccer.pin.enclose.right{width:8px}.ph-speccer.speccer.pin.enclose,.ph-speccer.speccer.pin.enclose.bottom,.ph-speccer.speccer.pin.enclose.top{height:8px}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.bracket:not(.curly){background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none;border-radius:0;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.pin.bracket:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly):before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).right:before{left:100%;right:auto}.ph-speccer.speccer.pin.bracket:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).left:before{left:auto;right:100%}.ph-speccer.speccer.pin.bracket:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).top:before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:before{top:100%}.ph-speccer.speccer.pin.bracket.left:not(.curly),.ph-speccer.speccer.pin.bracket.right:not(.curly){width:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly),.ph-speccer.speccer.pin.bracket.top:not(.curly),.ph-speccer.speccer.pin.bracket:not(.curly){height:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-pin-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.pin.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.bottom:after,.ph-speccer.speccer.pin.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.subtle.left:after,.ph-speccer.speccer.pin.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly){background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly),.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly):after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.pin.enclose.subtle{border-style:dashed}.ph-speccer.speccer.pin.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.pin.enclose.subtle.bottom:before,.ph-speccer.speccer.pin.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph-speccer.speccer.pin.enclose.subtle.left:before,.ph-speccer.speccer.pin.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph-speccer.speccer.a11y.landmark{align-items:center;background-color:var(--ph-speccer-a11y-landmark-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;height:28px;justify-content:center;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.landmark:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.landmark.left:after,.ph-speccer.speccer.a11y.landmark:after{border-left-color:var(--ph-speccer-a11y-landmark-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.top:after{border-bottom-color:var(--ph-speccer-a11y-landmark-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.landmark.right:after{border-right-color:var(--ph-speccer-a11y-landmark-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.bottom:after{border-top-color:var(--ph-speccer-a11y-landmark-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.region{outline:2px solid var(--ph-speccer-a11y-landmark-color-background);outline-offset:2px;position:absolute}.ph-speccer.speccer.a11y.tabstops{align-items:center;background-color:var(--ph-speccer-a11y-color-background);border-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family);font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size)}.ph-speccer.speccer.a11y.tabstops:before{content:attr(data-speccer-a11y-tabstops);position:static;text-align:center}.ph-speccer.speccer.a11y.shortcut-holder{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;min-width:120px;position:absolute;grid-gap:.5rem}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{background-color:var(--ph-speccer-a11y-color-background);border:1pt solid var(--ph-speccer-a11y-color-background);border-radius:.5rem;display:inline-flex;flex-shrink:0;font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.5rem .75rem;position:relative;text-transform:uppercase;text-transform:lowercase}.ph-speccer.speccer.a11y.autocomplete,.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{align-items:center;color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center}.ph-speccer.speccer.a11y.autocomplete{background-color:var(--ph-speccer-a11y-autocomplete-color-background);font-size:12px;height:28px;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.autocomplete:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.autocomplete.left:after,.ph-speccer.speccer.a11y.autocomplete:after{border-left-color:var(--ph-speccer-a11y-autocomplete-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.top:after{border-bottom-color:var(--ph-speccer-a11y-autocomplete-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.autocomplete.right:after{border-right-color:var(--ph-speccer-a11y-autocomplete-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.bottom:after{border-top-color:var(--ph-speccer-a11y-autocomplete-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings{align-items:center;background-color:var(--ph-speccer-a11y-headings-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;height:28px;justify-content:center;line-height:28px;padding:0 .5rem;pointer-events:auto;position:absolute}.ph-speccer.speccer.a11y.headings:after{border:14.2px solid #7e60c500;content:"";height:0;pointer-events:none;position:absolute;width:0}.ph-speccer.speccer.a11y.headings.left:after,.ph-speccer.speccer.a11y.headings:after{border-left-color:var(--ph-speccer-a11y-headings-color-background);left:100%;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.top:after{border-bottom-color:var(--ph-speccer-a11y-headings-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings.right:after{border-right-color:var(--ph-speccer-a11y-headings-color-background);left:0;top:50%;transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.bottom:after{border-top-color:var(--ph-speccer-a11y-headings-color-background);left:50%;top:0;transform:translateX(-50%)}.ph-speccer.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:320px;padding:8px;text-align:left;width:auto}.ph-speccer.speccer.typography,.ph-speccer.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph-speccer.speccer.typography.left:after,.ph-speccer.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.top:after{top:100%}.ph-speccer.speccer.typography.bottom:after,.ph-speccer.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.typography.bottom:after{bottom:100%;top:auto}.ph-speccer.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph-speccer.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph-speccer.speccer.typography.syntax>pre{background:#0000;border-radius:0;color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);font-size:12px;line-height:1.5;margin:0;padding:0}.ph-speccer.speccer.typography.syntax{--ph-speccer-color-code-color-1:#737373;--ph-speccer-color-code-color-2:#ff3aa8;--ph-speccer-color-code-color-3:#38383d;--ph-speccer-color-code-color-4:#ff3aa8;--ph-speccer-color-code-color-5:#ff3aa8;--ph-speccer-color-code-color-6:#0074e8;--ph-speccer-color-code-color-7:#000;--ph-speccer-color-code-color-8:#cd0404}.ph-speccer.speccer.typography.syntax .namespace{opacity:.7}.ph-speccer.speccer.typography.syntax .token.cdata,.ph-speccer.speccer.typography.syntax .token.comment,.ph-speccer.speccer.typography.syntax .token.doctype,.ph-speccer.speccer.typography.syntax .token.prolog{color:var(--ph-speccer-color-code-color-1)}.ph-speccer.speccer.typography.syntax .token.boolean,.ph-speccer.speccer.typography.syntax .token.null,.ph-speccer.speccer.typography.syntax .token.number,.ph-speccer.speccer.typography.syntax .token.operator{color:var(--ph-speccer-color-code-color-5)}.ph-speccer.speccer.typography.syntax .token.attr-name{color:var(--ph-speccer-color-code-color-2)}.ph-speccer.speccer.typography.syntax .token.entity,.ph-speccer.speccer.typography.syntax .token.selector,.ph-speccer.speccer.typography.syntax .token.string,.ph-speccer.speccer.typography.syntax .token.url{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.atrule,.ph-speccer.speccer.typography.syntax .token.attr-value,.ph-speccer.speccer.typography.syntax .token.control,.ph-speccer.speccer.typography.syntax .token.directive,.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.keyword,.ph-speccer.speccer.typography.syntax .token.unit{color:var(--ph-speccer-color-code-color-4)}.ph-speccer.speccer.typography.syntax .token.regex,.ph-speccer.speccer.typography.syntax .token.statement{color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax .token.placeholder,.ph-speccer.speccer.typography.syntax .token.property,.ph-speccer.speccer.typography.syntax .token.tag,.ph-speccer.speccer.typography.syntax .token.variable{color:var(--ph-speccer-color-code-color-6)}.ph-speccer.speccer.typography.syntax .token.important,.ph-speccer.speccer.typography.syntax .token.statement{font-weight:700}.ph-speccer.speccer.typography.syntax .token.punctuation{color:var(--ph-speccer-color-code-color-7)}.ph-speccer.speccer.typography.syntax .token.entity{cursor:help}.ph-speccer.speccer.typography.syntax .token.debug{color:var(--ph-speccer-color-code-color-8)}.ph-speccer.speccer.speccer-grid-container{column-gap:var(--ph-speccer-grid-gap-original);counter-reset:column-gap}.ph-speccer.speccer.speccer-grid-container,.ph-speccer.speccer.speccer-grid-row-container{display:grid;justify-content:normal;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-container{counter-reset:row-gap;row-gap:var(--ph-speccer-grid-row-gap-original)}.ph-speccer.speccer.speccer-grid-item{border-left:1px solid var(--ph-speccer-base-color);border-right:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item{border-bottom:1px solid var(--ph-speccer-base-color);border-top:1px solid var(--ph-speccer-base-color);height:100%;position:relative;transition:var(--ph-speccer-transition-default);width:100%}.ph-speccer.speccer.speccer-grid-item:before{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-row-item:before{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:before{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-item:first-child:after{border-top-right-radius:50%;content:counter(column-gap);counter-increment:column-gap;height:32px;left:100%;top:-32px;width:calc(var(--ph-speccer-grid-gap) + 2px)}.ph-speccer.speccer.speccer-grid-item:first-child:after,.ph-speccer.speccer.speccer-grid-row-item:first-child:after{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;color:var(--ph-speccer-color-text-light);display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;justify-content:center;position:absolute;transition:var(--ph-speccer-transition-default)}.ph-speccer.speccer.speccer-grid-row-item:first-child:after{border-bottom-left-radius:50%;content:counter(row-gap);counter-increment:row-gap;height:calc(var(--ph-speccer-grid-row-gap) + 2px);left:-32px;top:100%;width:32px}.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child:after{left:calc(100% - (var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original))/2)}.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:before,.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child:after{top:calc(100% - (var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original))/2)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child:before{left:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);position:absolute;right:auto;top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child:before{bottom:auto;left:-32px;position:absolute;top:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child:before{left:auto;position:absolute;right:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1);top:-32px}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child:before{bottom:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1);left:-32px;position:absolute;top:auto}.ph-speccer.speccer.spacing{pointer-events:none;transition:none;white-space:nowrap}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-padding-color-background);color:var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding:after,.ph-speccer.speccer.spacing.padding:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.padding.bottom,.ph-speccer.speccer.spacing.padding.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.padding.left,.ph-speccer.speccer.spacing.padding.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-margin-color-background);color:var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom,.ph-speccer.speccer.spacing.margin.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.margin.left,.ph-speccer.speccer.spacing.margin.right{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.spacing.margin:after,.ph-speccer.speccer.spacing.margin:before{content:"";position:absolute;transition:none}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:calc(6ch - 5px);width:10px}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:100%;left:6ch;width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:10px;top:calc(100% - 34px);width:100%}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);height:0;top:calc(100% - 29px);width:100%}.ph-speccer.speccer.spacing.bound.margin.bottom,.ph-speccer.speccer.spacing.bound.margin.left,.ph-speccer.speccer.spacing.bound.margin.right,.ph-speccer.speccer.spacing.bound.margin.top,.ph-speccer.speccer.spacing.bound.padding.bottom,.ph-speccer.speccer.spacing.bound.padding.left,.ph-speccer.speccer.spacing.bound.padding.right,.ph-speccer.speccer.spacing.bound.padding.top{align-items:center;justify-content:center;padding:0}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.height{border-bottom:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-top:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.height.left:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:59px;position:absolute;width:10px}.ph-speccer.speccer.measure.height.left:after{border-right:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-end;line-height:100%;margin-right:auto;padding-right:8px;position:static;width:64px}.ph-speccer.speccer.measure.height.right:before{background:#0000;border-bottom:var(--ph-speccer-measure-line-width) solid;border-top:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));left:calc(100% - 69px);position:absolute;width:10px}.ph-speccer.speccer.measure.height.right:after{border-left:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;height:100%;justify-content:flex-start;line-height:100%;margin-left:auto;padding-left:8px;position:static;width:64px}.ph-speccer.speccer.measure.width{align-items:center;border-left:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-right:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);color:var(--ph-speccer-measure-color);flex-direction:column;justify-content:flex-start}.ph-speccer.speccer.measure.width.top:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:31px;width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.top:after{border-bottom:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-end;line-height:18px;margin-bottom:auto;padding-bottom:4px;position:static;width:100%}.ph-speccer.speccer.measure.width.bottom:before{background:#0000;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid;content:"";display:block;height:10px;position:absolute;top:calc(100% - 41px);width:calc(100% + var(--ph-speccer-measure-line-width))}.ph-speccer.speccer.measure.width.bottom:after{border-top:var(--ph-speccer-measure-line-width) solid;content:attr(data-measure);display:flex;flex-direction:column;height:36px;justify-content:flex-start;line-height:18px;margin-top:auto;padding-top:4px;position:static;width:100%}.ph-speccer.speccer.measure.slim.height{width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.height:before{content:none!important}.ph-speccer.speccer.measure.slim.height.left{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.right{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.height.left:after{border:none;height:auto;left:calc(-100% - 20px - var(--ph-speccer-line-width));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.height.right:after{border:none;height:auto;left:calc(100% - var(--ph-speccer-measure-size));margin:0;padding:0;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg);white-space:nowrap;width:auto}.ph-speccer.speccer.measure.slim.width{height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.width:before{content:none!important}.ph-speccer.speccer.measure.slim.width.bottom{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top{border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.slim.width.top:after{border:none;bottom:calc(100% + 5px);height:auto;padding:0;position:absolute}.ph-speccer.speccer.measure.slim.width.bottom:after{border:none;height:auto;padding:0;position:absolute;top:calc(100% + 5px)}.ph-speccer.speccer.measure.slim.subtle.height.left,.ph-speccer.speccer.measure.slim.subtle.height.right,.ph-speccer.speccer.measure.slim.subtle.width.bottom,.ph-speccer.speccer.measure.slim.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.slim.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.slim.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.slim.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.slim.subtle.height.left{border-right:none}.ph-speccer.speccer.mark{background-color:var(--ph-speccer-mark-background-color);border-color:var(--ph-speccer-mark-border-color);border-style:var(--ph-speccer-mark-border-style);border-width:var(--ph-speccer-mark-border-width);position:absolute}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phun-ky/speccer",
|
|
3
|
-
"version": "11.1
|
|
3
|
+
"version": "11.2.1",
|
|
4
4
|
"description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
|
|
5
5
|
"main": "dist/speccer.js",
|
|
6
6
|
"module": "dist/speccer.esm.js",
|