zhengzhaowen/pixel-bead-pattern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add draggable preview and keep 30 histories

Browse Source
This commit is contained in:
wuyanwanwu
2026-08-14 00:12:38 +08:00
parent 67683a9de1
commit 28dadddf71
14 changed files with 88 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+4 -3
View File
@@ -76,9 +76,10 @@ input[type="range"] { accent-color: var(--green); }
.zoom-control button { width: 36px; height: 36px; border: 1px solid var(--line); background: white; cursor: pointer; font-size: 20px; }
.zoom-control input { width: 95px; }
.zoom-control output { width: 38px; color: var(--muted); font-size: 11px; text-align: right; }
.canvas-stage { min-height: 610px; flex: 1; overflow: auto; display: grid; place-items: center; padding: 36px; touch-action: pan-x pan-y; }
.canvas-wrap { width: max-content; line-height: 0; position: relative; border: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(32,39,36,.13); background: white; }
.canvas-wrap canvas { cursor: crosshair; image-rendering: pixelated; }
.canvas-stage { min-height: 610px; flex: 1; overflow: auto; display: block; padding: 36px; cursor: grab; touch-action: none; overscroll-behavior: contain; user-select: none; }
.canvas-stage.is-dragging { cursor: grabbing; }
.canvas-wrap { width: max-content; line-height: 0; position: relative; margin: auto; border: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(32,39,36,.13); background: white; }
.canvas-wrap canvas { cursor: inherit; image-rendering: pixelated; }
.pixel-tooltip { position: absolute; z-index: 5; width: max-content; max-width: 260px; padding: 9px 11px; display: grid; grid-template-columns: 14px auto; align-items: center; gap: 3px 8px; color: white; background: rgba(22, 30, 27, .94); border: 1px solid rgba(255,255,255,.2); box-shadow: 4px 4px 0 rgba(0,0,0,.2); border-radius: 3px; line-height: 1.35; pointer-events: none; }
.tooltip-swatch { width: 14px; height: 14px; grid-row: 1 / 3; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); }
.pixel-tooltip strong { font-size: 11px; }