@phun-ky/speccer 4.1.0 → 4.3.1

package/speccer.min.css

@@ -1 +1 @@
-.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:Menlo for Powerline,Menlo Regular for Powerline,DejaVu Sans Mono,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace!important;font-size:12px;line-height:12px;transition:all .2s ease-in;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:#d4397a;border-radius:100%;box-sizing:initial;color:#fff;font-family:sans-serif;font-size:16px;font-weight:400;height:1.5rem;line-height:150%;width:1.5rem;z-index:100000}.ph.speccer.dissection.button-icon:after,.ph.speccer.dissection.button-outline:after{background-color:#d4397a;content:"";height:1px;position:absolute;top:50%;width:48px;z-index:99999}.ph.speccer.dissection:after{background-color:#d4397a;content:"";height:48px;position:absolute;top:100%;width:1px;z-index:99999}.ph.speccer.dissection.outline.left:after{height:1px;left:100%;top:50%;width:48px}.ph.speccer.dissection.outline.right:after{height:1px;right:100%;top:50%;width:48px}.ph.speccer.dissection.outline.enclose{background-color:initial;border:1px solid #d4397a;border-radius:0;color:red}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + 49px);right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:-49px;right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:-49px}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + 49px)}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:1px solid #d4397a;border-radius:0;color:red}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:56px}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:-56px}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:-56px}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:56px}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:48px;right:50%;top:calc(-100% - 24px);width:1px}.ph.speccer.dissection.button-center:after{background-color:#d4397a;content:"";height:48px;position:absolute;top:100%;width:1px;z-index:99999}.ph.speccer.dissection.button-outline:after{right:100%}.ph.speccer.dissection.button-icon:after{left:100%}.ph.speccer.dissection.button-icon:before{border:1px solid #d4397a;content:"";height:1.5rem;left:calc(100% + 48px);position:absolute;width:1.5rem;z-index:99999}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:48px;right:50%;top:100%;width:1px}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:#d4397a;border-radius:100%;color:#fff;content:attr(data-dissection-counter);display:flex;font-size:16px;height:1.5rem;justify-content:center;line-height:150%;position:absolute;width:1.5rem;z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:#d4397a;content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:1px;top:50%;transform:translateY(-50%);width:49px}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:49px;left:50%;transform:translateX(-50%);width:1px}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:#d4397a;border-radius:100%;color:#fff;content:attr(data-dissection-counter);display:flex;font-size:16px;height:1.5rem;justify-content:center;line-height:150%;position:absolute;width:1.5rem;z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:#d4397a;content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:1px;top:50%;transform:translateY(-50%);width:49px}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:49px;left:50%;transform:translateX(-50%);width:1px}.ph.speccer.dissection.button-icon:after,.ph.speccer.dissection.button-outline:after{background-color:#d4397a;content:"";height:1px;position:absolute;top:50%;width:48px;z-index:99999}.ph.speccer.spacing:hover{border:1px solid #333}.ph.speccer.spacing.is-specced:hover~.speccer.margin{background-color:#fff76f}.ph.speccer.spacing.is-specced:hover~.speccer.padding{background-color:#db6fff;color:#fff}.ph.speccer.spacing.margin{background-color:#fff76f66;color:#333}.ph.speccer.spacing.padding{background-color:#db6fff66;color:#ff3aa8}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:1px solid #333;border-top:1px solid #333;content:"";height:100%;left:40%;position:absolute;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:1px solid #333;content:"";height:100%;left:40%;margin-left:4px;position:absolute;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:1px solid #ff3aa8;border-right:1px solid #ff3aa8;content:"";height:9px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:1px solid #ff3aa8;content:"";height:0;margin-top:4px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:1px solid #ff3aa8;border-top:1px solid #ff3aa8;content:"";height:100%;left:40%;position:absolute;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:1px solid #ff3aa8;content:"";height:100%;left:40%;margin-left:4px;position:absolute;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:1px solid #ff3aa8;border-right:1px solid #ff3aa8;content:"";height:9px;position:absolute;top:10%;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:1px solid #ff3aa8;content:"";height:0;margin-top:4px;position:absolute;top:10%;width:100%}.ph.speccer.typography{background-color:#fff;color:#57575b;display:block;font-size:12px;line-height:140%;max-width:none;min-width:320px;padding:8px 24px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:1px solid #e227b3}.ph.speccer.typography:after{background-color:#e227b3;content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{height:1px;left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:1px;left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{height:48px;left:50%;right:auto;top:100%;transform:translateX(-50%);width:1px}.ph.speccer.typography.bottom:after{bottom:100%;height:48px;left:50%;right:auto;top:auto;transform:translateX(-50%);width:1px}.ph.speccer.typography .speccer-styles{font-size:12px;line-height:140%;list-style:none;margin:0;padding:0 0 0 1rem;width:100%}.ph.speccer.typography .speccer-styles .property{color:#3f85f2;font-size:12px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:#e227b3;font-size:12px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:1px solid red;border-bottom:none;color:red;height:8px}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:1px solid red;border-top:none;color:red}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:1px solid red;border-bottom:none;color:red}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height{border:1px solid red;border-right:none;color:red;width:8px}.ph.speccer.measure.height:after{content:attr(data-measure);left:calc(-100% - 25px);position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:1px solid red;border-left:none;color:red}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:100%;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}
+.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400: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-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.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.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.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.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.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.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{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.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.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.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-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.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.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.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top: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.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-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.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.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.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top: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.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.is-specced:hover~.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin-hover)}.is-specced:hover~.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding-hover);color:var(--ph-speccer-color-text-light)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.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.spacing.margin.bottom:before,.ph.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.spacing.margin.left:after,.ph.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.spacing.margin.left:before,.ph.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.spacing.padding.bottom:after,.ph.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.spacing.padding.bottom:before,.ph.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.spacing.padding.left:after,.ph.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.spacing.padding.left:before,.ph.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.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:12px;line-height:140%;max-width:none;min-width:320px;padding:8px 24px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);left:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.right:after{height:var(--ph-speccer-line-width);left:auto;right:100%;top:50%;transform:translateY(-50%);width:48px}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:48px;left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:12px;line-height:140%;list-style:none;margin:0;padding:0 0 0 1rem;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:12px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:12px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.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.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.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.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.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.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.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.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.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.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)}

package/src/index.js

@@ -1,28 +1,33 @@
 /* eslint no-console:0 */
 'use strict';
 
-import * as node from './lib/node';
-import * as spec from './spec';
-import * as dissect from './dissect';
-import * as measure from './measure';
-import * as typography from './typography';
-import * as browser from './browser';
+import * as __node from './lib/node';
+import * as __spacing from './spec';
+import * as __dissect from './dissect';
+import * as __measure from './measure';
+import * as __typography from './typography';
+import * as __browser from './browser';
 
 const speccer = () => {
-  node.removeAll('.speccer');
-  node.removeAll('.dissection');
+  __node.removeAll('.speccer');
+  __node.removeAll('.dissection');
 
   const _els_to_be_specced = document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)');
   const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');
   const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');
   const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section] [data-anatomy]');
 
-  _els_to_be_specced.forEach(spec.element);
-  _els_to_be_measured.forEach(measure.element);
-  _els_to_be_typography_specced.forEach(typography.element);
-  _els_to_be_dissected.forEach(dissect.element);
+  _els_to_be_specced.forEach(__spacing.element);
+  _els_to_be_measured.forEach(__measure.element);
+  _els_to_be_typography_specced.forEach(__typography.element);
+  _els_to_be_dissected.forEach(__dissect.element);
 };
 
+export const spacing = __spacing;
+export const dissect = __dissect;
+export const measure = __measure;
+export const typography = __typography;
+
 export default speccer;
 
-browser.activate(speccer);
+__browser.activate(speccer);

package/src/measure.js

@@ -71,7 +71,7 @@ export const element = el => {
         height: _el_rect.height + 'px'
       });
     } else {
-      const _measure_node = create(_el_rect.height, 'height top');
+      const _measure_node = create(_el_rect.height, 'height left');
       if (SPECCER_TAGS_TO_AVOID.indexOf(el.nodeName) >= 0) {
         node.after(el.closest('table'), _measure_node);
       } else {

package/src/styles/anatomy.styl

@@ -1,12 +1,12 @@
 .ph.speccer.dissection
   font-family sans-serif
-  height 1.5rem
-  width 1.5rem
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
   display flex
   position absolute
   border-radius 100%
-  background-color #d4397a
-  color white
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
   font-weight 400
   align-items center
   justify-content center
@@ -18,128 +18,90 @@
 .ph.speccer.dissection:after
   content ""
   position absolute
-  height 48px
+  height var(--ph-speccer-pin-space)
   top 100%
-  width 1px
-  background-color #d4397a
+  width var(--ph-speccer-line-width)
+  background-color var(--ph-speccer-pin-color)
   z-index 99999
 
 
 .ph.speccer.dissection.outline:after,
 .ph.speccer.dissection.outline.top:after
-  height 48px
-  width 1px
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
   top 100%
   right 50%
 
 .ph.speccer.dissection.outline.left:after
-  height 1px
-  width 48px
+  height var(--ph-speccer-line-width)
+  width var(--ph-speccer-pin-space)
   top 50%
   left 100%
 
 .ph.speccer.dissection.outline.right:after
-  height 1px
-  width 48px
+  height var(--ph-speccer-line-width)
+  width var(--ph-speccer-pin-space)
   top 50%
   right 100%
 
 .ph.speccer.dissection.outline.bottom:after
-  height 48px
-  width 1px
-  top calc(-100% - 24px)
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
+  top calc(-100% - (var(--ph-speccer-pin-space) / 2))
   right 50%
 
-.ph.speccer.dissection.button-center:after
-  content ""
-  position absolute
-  height 48px
-  top 100%
-  width 1px
-  background-color #d4397a
-  z-index 99999
-
-.ph.speccer.dissection.button-outline:after
-  content ""
-  position absolute
-  width 48px
-  top 50%
-  right 100%
-  height 1px
-  background-color #d4397a
-  z-index 99999
-
-.ph.speccer.dissection.button-icon:after
-  content ""
-  position absolute
-  width 48px
-  left 100%
-  top 50%
-  height 1px
-  background-color #d4397a
-  z-index 99999
-
-.ph.speccer.dissection.button-icon:before
-  content ""
-  position absolute
-  height 1.5rem
-  left calc(100% + 48px)
-  width 1.5rem
-  border 1px solid #d4397a
-  z-index 99999
-
 
 .ph.speccer.dissection
   &:after
     content ""
     position absolute
-    height 48px
+    height var(--ph-speccer-pin-space)
     top 100%
-    width 1px
-    background-color #d4397a
+    width var(--ph-speccer-line-width)
+    background-color var(--ph-speccer-pin-color)
     z-index 99999
   &.outline
     &.left
       &:after
-        height 1px
-        width 48px
+        height var(--ph-speccer-line-width)
+        width var(--ph-speccer-pin-space)
         top 50%
         left 100%
     &.right
       &:after
-        height 1px
-        width 48px
+        height var(--ph-speccer-line-width)
+        width var(--ph-speccer-pin-space)
         top 50%
         right 100%
     &.enclose
       border-radius 0
       background-color transparent
-      color red
-      border 1px solid #d4397a
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
       &.right
         &:after
-          left calc(100% + 49px)
+          left calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
           right auto
         &:before
           left 100%
           right auto
       &.left
         &:after
-          left calc(-1px - 48px)
+          left calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
           right auto
         &:before
           right 100%
           left auto
       &.top
         &:after
-          top calc(-1px - 48px)
+          top calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
           bottom auto
         &:before
           bottom 100%
           top auto
       &.bottom
         &:after
-          top calc(100% + 49px)
+          top calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
           bottom auto
         &:before
           top 100%
@@ -147,66 +109,44 @@
     &.full
       border-radius 0
       background-color transparent
-      color red
-      border 1px solid #d4397a
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
       &.right
         border-left none
         &:after
-          left calc(8px + 48px)
+          left calc(8px + var(--ph-speccer-pin-space))
         &:before
           left 100%
       &.left
         border-right none
         &:after
-          left calc(-8px - 48px)
+          left calc(-8px - var(--ph-speccer-pin-space))
         &:before
           right 100%
       &.top
         border-bottom none
         &:after
-          top calc(-8px - 48px)
+          top calc(-8px - var(--ph-speccer-pin-space))
         &:before
           bottom 100%
       &.bottom
         border-top none
         &:after
-          top calc(8px + 48px)
+          top calc(8px + var(--ph-speccer-pin-space))
         &:before
           top 100%
     &.bottom
       &:after
-        height 48px
-        width 1px
-        top calc(-100% - 24px)
+        height var(--ph-speccer-pin-space)
+        width var(--ph-speccer-line-width)
+        top calc(-100% - (var(--ph-speccer-pin-space) / 2))
         right 50%
-  &.button-center
-    &:after
-      content ""
-      position absolute
-      height 48px
-      top 100%
-      width 1px
-      background-color #d4397a
-      z-index 99999
-  &.button-outline
-    &:after
-      right 100%
-  &.button-icon
-    &:after
-      left 100%
-    &:before
-      content ""
-      position absolute
-      height 1.5rem
-      left calc(100% + 48px)
-      width 1.5rem
-      border 1px solid #d4397a
-      z-index 99999
+
 
 .ph.speccer.dissection.outline.top:after,
 .ph.speccer.dissection.outline:after
-  height 48px
-  width 1px
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
   top 100%
   right 50%
 
@@ -226,13 +166,13 @@
 .ph.speccer.dissection.outline.full.top:after,
 .ph.speccer.dissection.outline.full.bottom:after
   content attr(data-dissection-counter)
-  height 1.5rem
-  width 1.5rem
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
   display flex
   position absolute
   border-radius 100%
-  background-color #d4397a
-  color #fff
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
   align-items center
   justify-content center
   line-height 150%
@@ -255,7 +195,7 @@
 .ph.speccer.dissection.outline.full.bottom:before
   content ""
   position absolute
-  background-color #d4397a
+  background-color var(--ph-speccer-pin-color)
   z-index 100000
   display block
 
@@ -263,15 +203,15 @@
 .ph.speccer.dissection.outline.full.left:before
   top 50%
   transform translateY(-50%)
-  height 1px
-  width 49px
+  height var(--ph-speccer-line-width)
+  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
 
 .ph.speccer.dissection.outline.full.top:before,
 .ph.speccer.dissection.outline.full.bottom:before
   left 50%
   transform translateX(-50%)
-  width 1px
-  height 49px
+  width var(--ph-speccer-line-width)
+  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
 
 .ph.speccer.dissection.outline.enclose.right,
 .ph.speccer.dissection.outline.enclose.left
@@ -286,13 +226,13 @@
 .ph.speccer.dissection.outline.enclose.top:after,
 .ph.speccer.dissection.outline.enclose.bottom:after
   content attr(data-dissection-counter)
-  height 1.5rem
-  width 1.5rem
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
   display flex
   position absolute
   border-radius 100%
-  background-color #d4397a
-  color #fff
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
   align-items center
   justify-content center
   line-height 150%
@@ -315,7 +255,7 @@
 .ph.speccer.dissection.outline.enclose.bottom:before
   content ""
   position absolute
-  background-color #d4397a
+  background-color var(--ph-speccer-pin-color)
   z-index 100000
   display block
 
@@ -323,22 +263,12 @@
 .ph.speccer.dissection.outline.enclose.left:before
   top 50%
   transform translateY(-50%)
-  height 1px
-  width 49px
+  height var(--ph-speccer-line-width)
+  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
 
 .ph.speccer.dissection.outline.enclose.top:before,
 .ph.speccer.dissection.outline.enclose.bottom:before
   left 50%
   transform translateX(-50%)
-  width 1px
-  height 49px
-
-.ph.speccer.dissection.button-icon:after,
-.ph.speccer.dissection.button-outline:after
-  content ""
-  position absolute
-  width 48px
-  top 50%
-  height 1px
-  background-color #d4397a
-  z-index 99999
+  width var(--ph-speccer-line-width)
+  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))

package/src/styles/index.styl

@@ -1,25 +1,67 @@
-$ph-speccer-color-padding = rgb(219, 111, 255);
-$ph-speccer-color-margin = rgb(255, 247, 111);
+$ph-speccer-color-padding = rgba(219, 111, 255, 0.4);
+$ph-speccer-color-padding-hover = rgb(219, 111, 255);
+$ph-speccer-color-margin = rgba(255, 247, 111, 0.4);
+$ph-speccer-color-margin-hover = rgb(255, 247, 111);
 $ph-speccer-color-text-light = rgb(255, 255, 255);
-$ph-speccer-color-text-dark = rgb(51, 51, 51);
-$ph-speccer-color-border-dark = rgb(51, 51, 51);
-$ph-speccer-color-text-pink = rgb(255, 58, 168);
-$ph-speccer-color-border-pink = rgb(255, 58, 168);
+$ph-speccer-color-text-dark = rgb(51,51,51);
+$ph-speccer-color-contrast = rgb(255, 58, 168);
+$ph-speccer-spacing-color = $ph-speccer-color-contrast;
+$ph-speccer-measure-color = rgb(255,0,0);
+$ph-speccer-pin-color = $ph-speccer-color-contrast;
+$ph-speccer-typography-background-color = rgb(255, 255,255);
+$ph-speccer-typography-color-property = rgb(63, 133, 242);
+$ph-speccer-typography-color-text = rgb(87, 87, 91);
+$ph-speccer-typography-color-value = $ph-speccer-color-contrast;
 $ph-speccer-depth-opacity-400 = 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-line-height = 12px;
+$ph-speccer-pin-size = 24px
+$ph-speccer-pin-space = 48px
+$ph-speccer-line-width = 1px
+$ph-speccer-line-width-negative = -1px
+$ph-speccer-measure-size = 8px
+
+
+.ph.speccer
+  --ph-speccer-color-padding: $ph-speccer-color-padding;
+  --ph-speccer-color-padding-hover: $ph-speccer-color-padding-hover;
+  --ph-speccer-color-margin: $ph-speccer-color-margin;
+  --ph-speccer-color-margin-hover: $ph-speccer-color-margin-hover;
+  --ph-speccer-color-text-light: $ph-speccer-color-text-light;
+  --ph-speccer-color-text-dark: $ph-speccer-color-text-dark;
+  --ph-speccer-color-contrast: $ph-speccer-color-contrast;
+  --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-measure-color: $ph-speccer-measure-color;
+  --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-typography-background-color: $ph-speccer-typography-background-color;
+  --ph-speccer-typography-color-property: $ph-speccer-typography-color-property;
+  --ph-speccer-typography-color-text: $ph-speccer-typography-color-text;
+  --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
+  --ph-speccer-depth-opacity-400: $ph-speccer-depth-opacity-400;
+  --ph-speccer-font-family: $ph-speccer-font-family;
+  --ph-speccer-font-size: $ph-speccer-font-size;
+  --ph-speccer-line-height: $ph-speccer-line-height;
+  --ph-speccer-pin-size: $ph-speccer-pin-size;
+  --ph-speccer-pin-space: $ph-speccer-pin-space;
+  --ph-speccer-line-width: $ph-speccer-line-width;
+  --ph-speccer-line-width-negative: $ph-speccer-line-width-negative;
+  --ph-speccer-measure-size: $ph-speccer-measure-size;
 
 
 .ph.speccer,
 .ph.speccer::after,
 .ph.speccer::before
-  font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important
+  font-family var(--ph-speccer-font-family) !important
   justify-content center
   align-items center
   z-index 99999
   position absolute
+  pointer-events none
+  user-select none
   display flex
   font-size 12px
   box-sizing border-box
-  transition all 0.2s ease-in
   line-height 12px
 
 @require './anatomy.styl'

package/src/styles/measure.styl

@@ -1,9 +1,9 @@
 .ph.speccer.measure
   &.width
-    color red
-    border 1px solid red
+    color var(--ph-speccer-measure-color)
+    border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
     border-bottom none
-    height 8px
+    height var(--ph-speccer-measure-size)
 
 
 .ph.speccer.measure
@@ -17,8 +17,8 @@
 .ph.speccer.measure
   &.width
     &.bottom
-      color red
-      border 1px solid red
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
       border-top none
 
 
@@ -34,8 +34,8 @@
 .ph.speccer.measure
   &.width
     &.top
-      color red
-      border 1px solid red
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
       border-bottom none
 
 
@@ -50,28 +50,31 @@
 
 .ph.speccer.measure
   &.height
-    color red
-    border 1px solid red
-    border-right none
-    width 8px
+    &.left
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+      border-right none
+      width var(--ph-speccer-measure-size)
 
 
 .ph.speccer.measure
   &.height
-    &::after
-      content attr(data-measure)
-      position absolute
-      top 50%
-      left calc(-100% - 25px)
-      transform translateY(-50%) rotate(-90deg)
+    &.left
+      &::after
+        content attr(data-measure)
+        position absolute
+        top 50%
+        left calc(-100% - 20px - var(--ph-speccer-line-width))
+        transform translateY(-50%) rotate(-90deg)
 
 
 .ph.speccer.measure
   &.height
     &.right
-      color red
-      border 1px solid red
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
       border-left none
+      width var(--ph-speccer-measure-size)
 
 
 .ph.speccer.measure
@@ -81,5 +84,5 @@
         content attr(data-measure)
         position absolute
         top 50%
-        left 100%
+        left calc(100% - var(--ph-speccer-measure-size))
         transform translateY(-50%) rotate(90deg)