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

Add crop controls and larger patterns

Browse Source
This commit is contained in:
wuyanwanwu
2026-08-14 00:01:53 +08:00
parent 6037bde760
commit 76cc35b709
15 changed files with 128 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+8 -3
View File
@@ -45,11 +45,16 @@ button { color: inherit; }
.panel-heading h2, .pattern-toolbar h2 { margin: 0; font-size: 18px; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.upload-card { height: 170px; display: block; position: relative; overflow: hidden; cursor: pointer; border: 1px dashed #a5a59e; background: #ebe7dd; }
.upload-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-card { width: 100%; min-height: 100px; max-height: 260px; display: block; position: relative; overflow: hidden; border: 1px dashed #a5a59e; background: #ebe7dd; }
.upload-card canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.upload-card input { position: absolute; opacity: 0; pointer-events: none; }
.crop-preview { cursor: grab; touch-action: none; }
.crop-preview:active { cursor: grabbing; }
.crop-frame { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(20,30,25,.22); pointer-events: none; }
.upload-overlay { position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; color: white; background: rgba(22, 75, 57, .86); font-size: 12px; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 9px 0 24px; color: var(--muted); font-size: 11px; }
.crop-zoom { margin-top: 0; }
.reset-crop { width: 100%; margin: 7px 0 20px; padding: 7px; border: 1px solid var(--line); background: white; cursor: pointer; color: var(--muted); font-size: 11px; }
.field-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.field-row label, .field { display: flex; flex-direction: column; gap: 8px; }
.field-row label span, .field > span { color: var(--muted); font-size: 12px; }
@@ -149,7 +154,7 @@ input[type="range"] { accent-color: var(--green); }
.hero-badge { display: none; }
.workspace { margin-bottom: 0; grid-template-columns: 1fr; border-bottom: 0; }
.control-panel { border-right: 0; border-bottom: 1px solid var(--ink); padding: 24px 20px; }
.upload-card { height: 210px; }
.upload-card { height: auto; min-height: 160px; }
.pattern-panel { min-height: 620px; }
.pattern-toolbar { align-items: flex-start; flex-direction: column; padding: 20px; }
.zoom-control { width: 100%; }