/* ========================================================================= ez-caliper-v2.css — the measuring instrument. DEV ONLY. Deliberately loud and unbranded. Every other surface on this page is walker-token styled so it reads as the shop; this one should read as an instrument bolted on, so that seeing it in a screenshot is immediately recognisable as "the caliper is still switched on". ========================================================================= */ /* .ez-cal-on lands on only when EZ_CALIPER is true, so nothing below can reach a buyer even if the stylesheet ships. */ .ez-cal-on .flipflop-preview{ cursor:zoom-in; outline:1px dashed #d81b60; outline-offset:1px; } .ez-cal{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column; background:#11161b; color:#e8edf2; font:13px/1.45 ui-monospace,Menlo,Consolas,monospace; } .ez-cal-bar{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:#0a0e12; border-bottom:1px solid #2a3440; flex:0 0 auto; } .ez-cal-bar b{color:#ff4081; letter-spacing:.18em;} .ez-cal-ctx{color:#9fb3c8;} .ez-cal-sp{flex:1 1 auto;} .ez-cal-bar button{ padding:5px 11px; border:1px solid #3a4756; border-radius:4px; background:#1b232c; color:#e8edf2; font:inherit; cursor:pointer; } .ez-cal-bar button:hover{background:#26313d; border-color:#4d5f73;} .ez-cal-body{display:flex; flex:1 1 auto; min-height:0;} /* ---------------------------------------------------------------- stage */ .ez-cal-stage{ position:relative; flex:1 1 auto; min-width:0; /* A checker so a transparent PNG's extent is visible — knowing where the canvas ends matters as much as where the sandal does. */ background: repeating-conic-gradient(#1b2129 0% 25%, #151a21 0% 50%) 50% / 18px 18px; } .ez-cal-photo, .ez-cal-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* contain here and xMidYMid meet on the SVG are the same computation, which is what keeps the two registered at any panel size. */ .ez-cal-photo{object-fit:contain;} .ez-cal-svg{overflow:visible; touch-action:none;} /* the live imprint, cloned off the row — dimmed so it reads as reference rather than as something the caliper is measuring */ .ez-cal-live{opacity:.55;} /* ----------------------------------------------------- the instrument itself Stroke widths are in PHOTO units, so they are set via vector-effect rather than a number that would thicken as the panel magnifies. */ .ez-cal-inst line{vector-effect:non-scaling-stroke; fill:none;} .ez-cal-ext{stroke:#ff4081; stroke-width:1; stroke-dasharray:5 6; opacity:.42;} .ez-cal-bar-l{stroke:#ff4081; stroke-width:1.5;} .ez-cal-cap{stroke:#ff4081; stroke-width:2.5;} .ez-cal-mid{stroke:#40c4ff; stroke-width:2;} .ez-cal-txt{ fill:#ff80ab; font-family:ui-monospace,Menlo,Consolas,monospace; paint-order:stroke; stroke:#11161b; stroke-width:3px; vector-effect:non-scaling-stroke; } .ez-cal-h{ fill:#11161b; stroke:#ff4081; stroke-width:2; vector-effect:non-scaling-stroke; cursor:grab; } .ez-cal-h:hover{fill:#ff4081;} .ez-cal-inst.is-active .ez-cal-bar-l{stroke:#ffd740;} .ez-cal-inst.is-active .ez-cal-h{stroke:#ffd740;} /* --------------------------------------------------------- stencil proxy Amber, and deliberately not magenta: it is the thing being POSITIONED, while the caliper is the thing doing the measuring, and conflating the two colours makes the bud clearance harder to read rather than easier. Partial fill so the strap buds stay visible THROUGH the glyphs — clearance you cannot see under is not clearance you can judge. */ .ez-cal-stencil text{ fill:rgba(255,215,64,.62); stroke:#ffd740; stroke-width:.75; vector-effect:non-scaling-stroke; paint-order:stroke fill; } /* the envelope that actually has to miss the buds — glyph gaps are not clearance, so the box is the number, not the letterforms */ .ez-cal-tbox{ fill:none; stroke:#ffd740; stroke-width:1; stroke-dasharray:4 4; opacity:.75; vector-effect:non-scaling-stroke; } /* ----------------------------------------------------------------- side */ .ez-cal-side{ flex:0 0 330px; display:flex; flex-direction:column; border-left:1px solid #2a3440; min-height:0; } .ez-cal-list{flex:0 0 auto; overflow:auto; padding:10px; max-height:50%;} /* the stencil rig — sits above the list and is never repainted, so its inputs keep focus and caret while the stage redraws underneath */ .ez-cal-rig{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:10px; border-bottom:1px solid #2a3440; background:#0f141a; } .ez-cal-rig label{display:flex; align-items:center; gap:5px; color:#7f93a8;} .ez-cal-rig input{ background:#0d1217; color:#ffd740; font:inherit; border:1px solid #2a3440; border-radius:3px; padding:3px 6px; } .ez-cal-tx{width:150px; letter-spacing:.06em;} .ez-cal-ts{width:72px;} .ez-cal-tc{color:#5f7387;} .ez-cal-tc.over{color:#ff5252; font-weight:700;} .ez-cal-rig button{ padding:4px 10px; border:1px solid #3a4756; border-radius:4px; background:#1b232c; color:#e8edf2; font:inherit; cursor:pointer; } .ez-cal-rig button:hover{background:#26313d;} .ez-cal-item{ border:1px solid #2a3440; border-radius:5px; padding:8px; margin-bottom:8px; background:#151b22; } .ez-cal-item.is-active{border-color:#ffd740;} .ez-cal-item > input{ width:calc(100% - 66px); background:#0d1217; color:#e8edf2; font:inherit; border:1px solid #2a3440; border-radius:3px; padding:3px 6px; } .ez-cal-t{ width:26px; margin-left:5px; background:#151b22; color:#5f7387; font:inherit; font-weight:700; border:1px solid #2a3440; border-radius:3px; cursor:pointer; } .ez-cal-t.is-on{background:#3a2f00; color:#ffd740; border-color:#6b5600;} .ez-cal-item > button[data-act="del"]{ width:26px; margin-left:5px; background:#2a1520; color:#ff80ab; font:inherit; border:1px solid #4a2030; border-radius:3px; cursor:pointer; } .ez-cal-item dl{ display:grid; grid-template-columns:auto 1fr; gap:1px 10px; margin:7px 0 0; } .ez-cal-item dt{color:#7f93a8;} .ez-cal-item dd{margin:0; color:#e8edf2;} .ez-cal-log{ flex:1 1 auto; min-height:0; margin:0 10px 10px; background:#0d1217; color:#9fb3c8; border:1px solid #2a3440; border-radius:4px; padding:8px; font:11px/1.4 ui-monospace,Menlo,Consolas,monospace; resize:none; } @media (max-width:900px){ .ez-cal-body{flex-direction:column;} .ez-cal-side{flex:0 0 46%; border-left:0; border-top:1px solid #2a3440;} .ez-cal-list{max-height:none;} } /* --------------------------------------------------------- cross-foot pair The mirror axis a pair caliper reports. Cyan, matching the midpoint tick it replaces, so the colour still reads as "centre" — but full width, because for a pair caliper the centre is a LINE the whole pair reflects across, not a point on one bar. Two of them coinciding is the confirmation. */ .ez-cal-axis{ stroke:#40c4ff; stroke-width:1; stroke-dasharray:2 7; opacity:.7; vector-effect:non-scaling-stroke; } .ez-cal-p{ width:26px; margin-left:5px; background:#151b22; color:#5f7387; font:inherit; font-weight:700; border:1px solid #2a3440; border-radius:3px; cursor:pointer; } .ez-cal-p.is-on{background:#04323f; color:#40c4ff; border-color:#0a5a70;} .ez-cal-v{ width:26px; margin-left:5px; background:#151b22; color:#5f7387; font:inherit; font-weight:700; border:1px solid #2a3440; border-radius:3px; cursor:pointer; } .ez-cal-v.is-on{background:#04323f; color:#40c4ff; border-color:#0a5a70;} .ez-cal-item > input{width:calc(100% - 118px);} /* room for T + P + V + del */ .ez-cal-sum{ margin-top:4px; padding:8px; border-radius:5px; background:#04323f; border:1px solid #0a5a70; color:#b8e8f5; } .ez-cal-sum b{color:#8affff;} .ez-cal-sum.warn{background:#3a1a00; border-color:#6b3000; color:#ffcc80;} .ez-cal-sum.warn b{color:#ffab40;}