@phun-ky/speccer 10.0.0 → 10.0.2
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 +5 -3
- package/dist/speccer.css +1 -1
- 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-color-padding:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-color-padding-hover:var(--ph-speccer-color-venusSlipperOrchid);--ph-speccer-spacing-color-margin:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-color-margin-hover:var(--ph-speccer-color-superBanana);--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:1px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-bakground: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:1px;--ph-speccer-line-width-negative:-1px;--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:sans-serif;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{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.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{margin: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;display:grid;justify-content:normal;position:absolute;transition:var(--ph-speccer-transition-default)}.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-item:before,.ph-speccer.speccer.speccer-grid-item:first-child:after{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;border-top-right-radius:50%;color:var(--ph-speccer-color-text-light);content:counter(column-gap);counter-increment:column-gap;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;height:32px;justify-content:center;left:100%;position:absolute;top:-32px;transition:var(--ph-speccer-transition-default);width:calc(var(--ph-speccer-grid-gap) + 2px)}.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-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-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.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph-speccer.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-color-margin);color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-color-padding);color:var(--ph-speccer-spacing-color)}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph-speccer.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph-speccer.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph-speccer.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph-speccer.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph-speccer.speccer.measure.subtle.height.left,.ph-speccer.speccer.measure.subtle.height.right,.ph-speccer.speccer.measure.subtle.width.bottom,.ph-speccer.speccer.measure.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.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-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-color-padding:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-color-padding-hover:var(--ph-speccer-color-venusSlipperOrchid);--ph-speccer-spacing-color-margin:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-color-margin-hover:var(--ph-speccer-color-superBanana);--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:1px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--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:1px;--ph-speccer-line-width-negative:-1px;--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:sans-serif;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{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.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{margin: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;display:grid;justify-content:normal;position:absolute;transition:var(--ph-speccer-transition-default)}.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-item:before,.ph-speccer.speccer.speccer-grid-item:first-child:after{align-items:center;background-color:var(--ph-speccer-base-color);border-top-left-radius:50%;border-top-right-radius:50%;color:var(--ph-speccer-color-text-light);content:counter(column-gap);counter-increment:column-gap;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:16px;height:32px;justify-content:center;left:100%;position:absolute;top:-32px;transition:var(--ph-speccer-transition-default);width:calc(var(--ph-speccer-grid-gap) + 2px)}.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-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-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.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph-speccer.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-color-margin);color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-color-padding);color:var(--ph-speccer-spacing-color)}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph-speccer.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph-speccer.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph-speccer.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph-speccer.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph-speccer.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph-speccer.speccer.measure.subtle.height.left,.ph-speccer.speccer.measure.subtle.height.right,.ph-speccer.speccer.measure.subtle.width.bottom,.ph-speccer.speccer.measure.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.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": "10.0.
|
|
3
|
+
"version": "10.0.2",
|
|
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",
|