npm - @phun-ky/speccer - Versions diffs - 10.0.8 → 11.0.0 - Mend

@phun-ky/speccer 10.0.8 → 11.0.0

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.

Files changed (9) hide show

package/dist/speccer.css CHANGED Viewed

@@ -13,19 +13,22 @@
 .ph-speccer.speccer{
   --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-spacing-padding-color: var(--ph-speccer-color-carbon);
+  --ph-speccer-spacing-padding-color-background: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
+  --ph-speccer-spacing-margin-color: var(--ph-speccer-color-red);
+  --ph-speccer-spacing-margin-color-background: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
+  --ph-speccer-spacing-line-width: var(--ph-speccer-line-width);
   --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
   --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
   --ph-speccer-typography-color-text: var(--ph-speccer-base-color);
   --ph-speccer-typography-color-value: var(--ph-speccer-base-color);
   --ph-speccer-mark-background-color: rgb(from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-20));
   --ph-speccer-mark-border-color: var(--ph-speccer-base-color);
-  --ph-speccer-mark-border-width: 1px;
+  --ph-speccer-mark-border-width: 1.5px;
   --ph-speccer-mark-border-style: solid;
   --ph-speccer-measure-color: var(--ph-speccer-color-red);
+  --ph-speccer-measure-line-width: 1.5px;
+  --ph-speccer-measure-border-style: dotted;
   --ph-speccer-measure-size: 8px;
   --ph-speccer-a11y-color-background: var(--ph-speccer-color-beautifulBlue);
   --ph-speccer-a11y-landmark-color-background: var(--ph-speccer-color-fuchsiaBlue);
@@ -35,8 +38,8 @@
   --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-line-width: 1.5px;
+  --ph-speccer-line-width-negative: -1.5px;
   --ph-speccer-opacity-20: 0.2;
   --ph-speccer-opacity-40: 0.4;
   --ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@@ -88,7 +91,7 @@ svg.ph-speccer .ph-speccer.circle {
   counter-reset: type;
 }
 .ph-speccer.speccer.pin {
-  font-family: sans-serif;
+  font-family: var(--ph-speccer-font-family);
   height: var(--ph-speccer-pin-size);
   width: var(--ph-speccer-pin-size);
   display: flex;
@@ -113,6 +116,7 @@ svg.ph-speccer .ph-speccer.circle {
   z-index: 99999;
 }
 .ph-speccer.speccer.pin.svg::after,
+.ph-speccer.speccer.pin.text::after,
 .ph-speccer.speccer.pin.curly::after {
   content: none !important;
 }
@@ -155,6 +159,59 @@ svg.ph-speccer .ph-speccer.circle {
   top: 50%;
   right: 100%;
 }
+.ph-speccer.path.speccer.text {
+  color: var(--ph-speccer-color-text-dark);
+}
+.ph-speccer.speccer.pin.text {
+  font-family: var(--ph-speccer-font-family);
+  height: auto;
+  min-height: var(--ph-speccer-pin-size);
+  display: flex;
+  position: absolute;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--ph-speccer-color-text-dark);
+  font-weight: 400;
+  align-items: flex-start;
+  justify-content: center;
+  line-height: 130%;
+  z-index: 100000;
+  flex-direction: column;
+  width: 250px;
+  grid-gap: 2px;
+}
+.ph-speccer.speccer.pin.text.right {
+  padding-left: 1rem;
+}
+.ph-speccer.speccer.pin.text.left {
+  padding-right: 1rem;
+  width: 170px;
+}
+.ph-speccer.speccer.pin.text.top {
+  padding-bottom: 1rem;
+}
+.ph-speccer.speccer.pin.text.bottom {
+  padding-top: 1rem;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.title {
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 11px;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.description {
+  line-height: 130%;
+  position: relative;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.ph-speccer.speccer.pin.text .ph-speccer.heading {
+  line-height: 130%;
+  position: relative;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  color: var(--ph-speccer-base-color);
+}
 .ph-speccer.speccer.pin.enclose {
   border-radius: 0;
   background-color: transparent;
@@ -668,6 +725,13 @@ svg.ph-speccer .ph-speccer.circle {
 }
 .ph-speccer.speccer.typography.syntax > pre {
   margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: var(--ph-speccer-font-family);
+  color: var(--ph-speccer-color-text-light);
+  background: transparent;
+  border-radius: 0;
 }
 .ph-speccer.speccer.typography.syntax {
   --ph-speccer-color-code-color-1: #737373;
@@ -740,254 +804,455 @@ svg.ph-speccer .ph-speccer.circle {
   color: var(--ph-speccer-color-code-color-8);
 }
 .ph-speccer.speccer.speccer-grid-container {
-  counter-reset: column-gap;
   justify-content: initial;
   transition: var(--ph-speccer-transition-default);
+  display: grid;
+  position: absolute;
+  counter-reset: column-gap;
   column-gap: var(--ph-speccer-grid-gap-original);
+  justify-content: initial;
+  transition: var(--ph-speccer-transition-default);
+  display: grid;
+  position: absolute;
+}
+.ph-speccer.speccer.speccer-grid-row-container {
+  justify-content: initial;
+  transition: var(--ph-speccer-transition-default);
   display: grid;
   position: absolute;
+  counter-reset: row-gap;
+  row-gap: var(--ph-speccer-grid-row-gap-original);
 }
 .ph-speccer.speccer.speccer-grid-item {
   transition: var(--ph-speccer-transition-default);
+  position: relative;
+  height: 100%;
   border-left: 1px solid var(--ph-speccer-base-color);
   border-right: 1px solid var(--ph-speccer-base-color);
+}
+.ph-speccer.speccer.speccer-grid-row-item {
+  transition: var(--ph-speccer-transition-default);
   position: relative;
   height: 100%;
+  border-top: 1px solid var(--ph-speccer-base-color);
+  border-bottom: 1px solid var(--ph-speccer-base-color);
+  width: 100%;
 }
 .ph-speccer.speccer.speccer-grid-item::before {
   transition: var(--ph-speccer-transition-default);
   font-family: var(--ph-speccer-font-family) !important;
-  counter-increment: column-gap;
   font-size: 16px;
-  content: counter(column-gap);
   position: absolute;
+  background-color: var(--ph-speccer-base-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ph-speccer-color-text-light);
+  counter-increment: column-gap;
+  content: counter(column-gap);
   top: -32px;
   left: 100%;
-  background-color: var(--ph-speccer-base-color);
   height: 32px;
   width: calc(var(--ph-speccer-grid-gap) + 2px);
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+}
+.ph-speccer.speccer.speccer-grid-row-item::before {
+  transition: var(--ph-speccer-transition-default);
+  font-family: var(--ph-speccer-font-family) !important;
+  font-size: 16px;
+  position: absolute;
+  background-color: var(--ph-speccer-base-color);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--ph-speccer-color-text-light);
+  counter-increment: row-gap;
+  content: counter(row-gap);
+  left: -32px;
+  top: 100%;
+  width: 32px;
+  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
   border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 .ph-speccer.speccer.speccer-grid-item:first-child::after {
   transition: var(--ph-speccer-transition-default);
   font-family: var(--ph-speccer-font-family) !important;
-  counter-increment: column-gap;
   font-size: 16px;
-  content: counter(column-gap);
   position: absolute;
+  background-color: var(--ph-speccer-base-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ph-speccer-color-text-light);
+  counter-increment: column-gap;
+  content: counter(column-gap);
   top: -32px;
   left: 100%;
-  background-color: var(--ph-speccer-base-color);
   height: 32px;
   width: calc(var(--ph-speccer-grid-gap) + 2px);
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+}
+.ph-speccer.speccer.speccer-grid-row-item:first-child::after {
+  transition: var(--ph-speccer-transition-default);
+  font-family: var(--ph-speccer-font-family) !important;
+  font-size: 16px;
+  position: absolute;
+  background-color: var(--ph-speccer-base-color);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--ph-speccer-color-text-light);
+  counter-increment: row-gap;
+  content: counter(row-gap);
+  left: -32px;
+  top: 100%;
+  width: 32px;
+  height: calc(var(--ph-speccer-grid-row-gap) + 2px);
   border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 .ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item::before,
 .ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child::after {
   left: calc(100% - ((var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original)) / 2));
 }
+.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item::before,
+.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child::after {
+  top: calc(100% - ((var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original)) / 2));
+}
 .ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child::before {
   position: absolute;
   top: -32px;
   right: auto;
   left: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
 }
+.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child::before {
+  position: absolute;
+  left: -32px;
+  bottom: auto;
+  top: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
+}
 .ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child::before {
   position: absolute;
   top: -32px;
   left: auto;
   right: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
 }
+.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child::before {
+  position: absolute;
+  left: -32px;
+  top: auto;
+  bottom: calc((var(--ph-speccer-grid-row-gap) + 2px) / 2 * -1);
+}
 .ph-speccer.speccer.spacing {
-  pointer-events: auto;
+  pointer-events: none;
   transition: none;
-  border: var(--ph-speccer-line-width) solid transparent;
-}
-.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);
+  white-space: nowrap;
 }
 .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 {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 100%;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  width: 9px;
-  left: 40%;
+  background-color: var(--ph-speccer-spacing-padding-color-background);
+  color: var(--ph-speccer-spacing-padding-color);
 }
-.ph-speccer.speccer.spacing.margin.bottom::before,
-.ph-speccer.speccer.spacing.margin.top::before {
+.ph-speccer.speccer.spacing.padding::after,
+.ph-speccer.speccer.spacing.padding::before {
   transition: none;
   content: "";
   position: absolute;
-  height: 100%;
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  margin-left: 4px;
-  width: 0;
-  left: 40%;
 }
-.ph-speccer.speccer.spacing.margin.left::after,
-.ph-speccer.speccer.spacing.margin.right::after {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 9px;
-  border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  width: 100%;
-  top: 10%;
-}
-.ph-speccer.speccer.spacing.margin.left::before,
-.ph-speccer.speccer.spacing.margin.right::before {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 0;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
-  margin-top: 4px;
-  width: 100%;
-  top: 10%;
+.ph-speccer.speccer.spacing.padding.bottom,
+.ph-speccer.speccer.spacing.padding.top {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 4px;
 }
 .ph-speccer.speccer.spacing.padding.bottom::after,
 .ph-speccer.speccer.spacing.padding.top::after {
-  transition: none;
-  content: "";
-  position: absolute;
+  left: calc(6ch - 5px);
   height: 100%;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  width: 9px;
-  left: 40%;
+  width: 10px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
 }
 .ph-speccer.speccer.spacing.padding.bottom::before,
 .ph-speccer.speccer.spacing.padding.top::before {
-  transition: none;
-  content: "";
-  position: absolute;
+  left: 6ch;
   height: 100%;
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  margin-left: 4px;
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
   width: 0;
-  left: 40%;
+}
+.ph-speccer.speccer.spacing.padding.left,
+.ph-speccer.speccer.spacing.padding.right {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  padding-bottom: 4px;
 }
 .ph-speccer.speccer.spacing.padding.left::after,
 .ph-speccer.speccer.spacing.padding.right::after {
-  transition: none;
-  content: "";
-  position: absolute;
-  height: 9px;
-  border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
+  top: calc(100% - 24px - 10px);
+  height: 10px;
   width: 100%;
-  top: 10%;
+  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
 }
 .ph-speccer.speccer.spacing.padding.left::before,
 .ph-speccer.speccer.spacing.padding.right::before {
+  top: calc(100% - 24px - 5px);
+  height: 0;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);
+  width: 100%;
+}
+.ph-speccer.speccer.spacing.margin {
+  background-color: var(--ph-speccer-spacing-margin-color-background);
+  color: var(--ph-speccer-spacing-margin-color);
+}
+.ph-speccer.speccer.spacing.margin.bottom,
+.ph-speccer.speccer.spacing.margin.top {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 4px;
+}
+.ph-speccer.speccer.spacing.margin.right,
+.ph-speccer.speccer.spacing.margin.left {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  padding-bottom: 4px;
+}
+.ph-speccer.speccer.spacing.margin::after,
+.ph-speccer.speccer.spacing.margin::before {
   transition: none;
   content: "";
   position: absolute;
+}
+.ph-speccer.speccer.spacing.margin.bottom::after,
+.ph-speccer.speccer.spacing.margin.top::after {
+  left: calc(6ch - 5px);
+  height: 100%;
+  width: 10px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  border-bottom: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+}
+.ph-speccer.speccer.spacing.margin.bottom::before,
+.ph-speccer.speccer.spacing.margin.top::before {
+  left: 6ch;
+  height: 100%;
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  width: 0;
+}
+.ph-speccer.speccer.spacing.margin.left::after,
+.ph-speccer.speccer.spacing.margin.right::after {
+  height: 10px;
+  border-right: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  border-left: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
+  width: 100%;
+  top: calc(100% - 24px - 10px);
+}
+.ph-speccer.speccer.spacing.margin.left::before,
+.ph-speccer.speccer.spacing.margin.right::before {
   height: 0;
-  border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
-  margin-top: 4px;
+  border-top: var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);
   width: 100%;
-  top: 10%;
+  top: calc(100% - 24px - 5px);
 }
 .ph-speccer.speccer.measure {
   display: flex;
 }
-.ph-speccer.speccer.measure.width {
+.ph-speccer.speccer.measure.height {
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-bottom: none;
-  height: var(--ph-speccer-measure-size);
+  border-top: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+  border-bottom: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
 }
-.ph-speccer.speccer.measure.width::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.height.left::before {
+  content: '';
+  display: block;
+  height: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  top: calc(-100% - 10px);
-}
-.ph-speccer.speccer.measure.width.bottom {
-  color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-top: none;
+  left: calc(64px - 5px);
+  width: 10px;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
 }
-.ph-speccer.speccer.measure.width.bottom::after {
+.ph-speccer.speccer.measure.height.left::after {
+  position: static;
   content: attr(data-measure);
+  display: flex;
+  width: 64px;
+  height: 100%;
+  line-height: 100%;
+  margin-right: auto;
+  border-right: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+.ph-speccer.speccer.measure.height.right::before {
+  content: '';
+  display: block;
+  height: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  top: calc(100% + 5px);
+  left: calc(100% - 64px - 5px);
+  width: 10px;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
+}
+.ph-speccer.speccer.measure.height.right::after {
+  position: static;
+  content: attr(data-measure);
+  display: flex;
+  width: 64px;
+  height: 100%;
+  line-height: 100%;
+  margin-left: auto;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-start;
+  padding-left: 8px;
 }
-.ph-speccer.speccer.measure.width.top {
+.ph-speccer.speccer.measure.width {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
-  border-bottom: none;
+  border-left: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+  border-right: var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);
+}
+.ph-speccer.speccer.measure.width.top::before {
+  content: '';
+  display: block;
+  width: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
+  position: absolute;
+  top: calc(36px - 5px);
+  height: 10px;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  border-right: var(--ph-speccer-measure-line-width) solid;
 }
 .ph-speccer.speccer.measure.width.top::after {
+  position: static;
   content: attr(data-measure);
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  width: 100%;
+  line-height: 18px;
+  margin-bottom: auto;
+  border-bottom: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-end;
+  padding-bottom: 4px;
+}
+.ph-speccer.speccer.measure.width.bottom::before {
+  content: '';
+  display: block;
+  width: calc(100% + var(--ph-speccer-measure-line-width));
+  background: transparent;
   position: absolute;
-  bottom: calc(100% + 5px);
+  top: calc(100% - 36px - 5px);
+  height: 10px;
+  border-left: var(--ph-speccer-measure-line-width) solid;
+  border-right: var(--ph-speccer-measure-line-width) solid;
+}
+.ph-speccer.speccer.measure.width.bottom::after {
+  position: static;
+  content: attr(data-measure);
+  display: flex;
+  height: 36px;
+  width: 100%;
+  line-height: 18px;
+  margin-top: auto;
+  flex-direction: column;
+  border-top: var(--ph-speccer-measure-line-width) solid;
+  justify-content: flex-start;
+  padding-top: 4px;
+}
+.ph-speccer.speccer.measure.slim.height {
+  width: var(--ph-speccer-measure-size);
+}
+.ph-speccer.speccer.measure.slim.height::before {
+  content: none !important;
 }
-.ph-speccer.speccer.measure.height.left {
+.ph-speccer.speccer.measure.slim.height.left {
   color: var(--ph-speccer-measure-color);
-  border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
   border-right: none;
-  width: var(--ph-speccer-measure-size);
 }
-.ph-speccer.speccer.measure.height.left::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.slim.height.right {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-left: none;
+}
+.ph-speccer.speccer.measure.slim.height.left::after {
   position: absolute;
   top: 50%;
+  width: auto;
+  height: auto;
+  margin: 0;
+  white-space: nowrap;
+  padding: 0;
+  border: none;
   left: calc(-100% - 20px - var(--ph-speccer-line-width));
   transform: translateY(-50%) rotate(-90deg);
 }
-.ph-speccer.speccer.measure.height.right {
-  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.speccer.measure.height.right::after {
-  content: attr(data-measure);
+.ph-speccer.speccer.measure.slim.height.right::after {
   position: absolute;
+  width: auto;
+  height: auto;
+  border: none;
+  padding: 0;
+  margin: 0;
   top: 50%;
+  white-space: nowrap;
   left: calc(100% - var(--ph-speccer-measure-size));
   transform: translateY(-50%) rotate(90deg);
 }
-.ph-speccer.speccer.measure.subtle.width.top,
-.ph-speccer.speccer.measure.subtle.width.bottom,
-.ph-speccer.speccer.measure.subtle.height.right,
-.ph-speccer.speccer.measure.subtle.height.left {
+.ph-speccer.speccer.measure.slim.width {
+  height: var(--ph-speccer-measure-size);
+}
+.ph-speccer.speccer.measure.slim.width::before {
+  content: none !important;
+}
+.ph-speccer.speccer.measure.slim.width.bottom {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-top: none;
+}
+.ph-speccer.speccer.measure.slim.width.top {
+  color: var(--ph-speccer-measure-color);
+  border: var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);
+  border-bottom: none;
+}
+.ph-speccer.speccer.measure.slim.width.top::after {
+  position: absolute;
+  bottom: calc(100% + 5px);
+  padding: 0;
+  border: none;
+  height: auto;
+}
+.ph-speccer.speccer.measure.slim.width.bottom::after {
+  position: absolute;
+  top: calc(100% + 5px);
+  padding: 0;
+  border: none;
+  height: auto;
+}
+.ph-speccer.speccer.measure.slim.subtle.width.top,
+.ph-speccer.speccer.measure.slim.subtle.width.bottom,
+.ph-speccer.speccer.measure.slim.subtle.height.right,
+.ph-speccer.speccer.measure.slim.subtle.height.left {
   border-style: dashed;
 }
-.ph-speccer.speccer.measure.subtle.width.top {
+.ph-speccer.speccer.measure.slim.subtle.width.top {
   border-bottom: none;
 }
-.ph-speccer.speccer.measure.subtle.width.bottom {
+.ph-speccer.speccer.measure.slim.subtle.width.bottom {
   border-top: none;
 }
-.ph-speccer.speccer.measure.subtle.height.right {
+.ph-speccer.speccer.measure.slim.subtle.height.right {
   border-left: none;
 }
-.ph-speccer.speccer.measure.subtle.height.left {
+.ph-speccer.speccer.measure.slim.subtle.height.left {
   border-right: none;
 }
 .ph-speccer.speccer.mark {