screengraft 0.63.3 → 0.63.4
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/package.json +1 -1
- package/ui/index.html +14 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "screengraft",
|
|
3
|
-
"version": "0.63.
|
|
3
|
+
"version": "0.63.4",
|
|
4
4
|
"description": "Put a UI screenshot or screen recording onto a photographed device screen with the perspective exactly right \u2014 a homography you confirm by hand, not a generative guess.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mockup",
|
package/ui/index.html
CHANGED
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
stroke in the system; it sits over the photograph, so it has to read on
|
|
90
90
|
any tone. The two shadows are the Button Group's and the Status pill's. */
|
|
91
91
|
/* Button Group 145:372, read from the node's own paints on 14 Sep 2026:
|
|
92
|
-
the stroke is
|
|
92
|
+
the stroke is four paints, 0.75px OUTSIDE the box, each with a blend
|
|
93
93
|
mode, so the hairline takes its look from the photograph under it —
|
|
94
94
|
lighter on a dark backdrop, darker on a light one, a touch desaturated.
|
|
95
95
|
The MCP's code export had flattened it to one colour twice over.
|
|
@@ -105,6 +105,8 @@
|
|
|
105
105
|
--group-edge-lum:rgba(255,70,70,.15);
|
|
106
106
|
--group-edge-hue:rgba(126,126,126,.2);
|
|
107
107
|
--group-edge-lift:rgba(255,255,255,.4);
|
|
108
|
+
/* The Button Group's stroke weight (0.75, set 14 Sep); the pills keep 1px. */
|
|
109
|
+
--group-bw:.75px;
|
|
108
110
|
--group-shadow:0 2px 4px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.12), 0 4px 24px rgba(0,0,0,.25);
|
|
109
111
|
--pill-shadow:0 2px 2px rgba(0,0,0,.03), 0 3px 5px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.25);
|
|
110
112
|
|
|
@@ -587,13 +589,17 @@
|
|
|
587
589
|
.bgroup{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;flex:none;
|
|
588
590
|
background:var(--raise);border:0;
|
|
589
591
|
border-radius:var(--r-sm);box-shadow:var(--group-shadow)}
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
.bgroup::after{
|
|
595
|
-
|
|
596
|
-
|
|
592
|
+
/* A ring is a SPREAD SHADOW, not a border: Chrome snaps a border to whole
|
|
593
|
+
device pixels, so 0.75px painted as 0.5 (one of two); a shadow's spread is
|
|
594
|
+
antialiased and renders the true 1.5 device pixels. Same outside-the-box
|
|
595
|
+
placement, the ring's colour is the shadow's. */
|
|
596
|
+
.bgroup::before,.bgroup::after,.bgroup > .ring{content:"";position:absolute;inset:0;
|
|
597
|
+
border-radius:var(--r-sm);pointer-events:none;
|
|
598
|
+
box-shadow:0 0 0 var(--group-bw) var(--ring)}
|
|
599
|
+
.bgroup::before{--ring:var(--group-edge-sat);mix-blend-mode:saturation;z-index:1}
|
|
600
|
+
.bgroup::after{--ring:var(--group-edge-lum);mix-blend-mode:luminosity;z-index:2}
|
|
601
|
+
.bgroup > .ring{--ring:var(--group-edge-hue);mix-blend-mode:hue;z-index:3}
|
|
602
|
+
.bgroup > .ring.lift{--ring:var(--group-edge-lift);mix-blend-mode:soft-light;z-index:4}
|
|
597
603
|
.bgroup.row{flex-direction:row}
|
|
598
604
|
.bgroup > .segbtn:first-of-type{border-top-left-radius:var(--r-sm);border-top-right-radius:var(--r-sm)}
|
|
599
605
|
.bgroup > .segbtn:last-of-type{border-bottom-left-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
|