Spaces:
Paused
Paused
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| font-family: | |
| system-ui, | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| sans-serif; | |
| color: #111; | |
| background: #f5f5f5; | |
| } | |
| html, | |
| body { | |
| min-height: 100%; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: #f5f5f5; | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| /* ================================ | |
| APP | |
| ================================ */ | |
| .app { | |
| width: min(1200px, 100%); | |
| min-height: 100vh; | |
| margin: 0 auto; | |
| padding: 16px; | |
| } | |
| /* ================================ | |
| HEADER | |
| ================================ */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .brand h1 { | |
| font-size: 22px; | |
| line-height: 1.1; | |
| } | |
| .brand p { | |
| margin-top: 4px; | |
| color: #666; | |
| font-size: 13px; | |
| } | |
| .upload-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 42px; | |
| padding: 0 16px; | |
| border-radius: 8px; | |
| background: #111; | |
| color: #fff; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| /* ================================ | |
| WORKSPACE | |
| ================================ */ | |
| .workspace { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| /* ================================ | |
| IMAGE AREA | |
| ================================ */ | |
| .drop-zone { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| min-height: 60vh; | |
| overflow: hidden; | |
| border: 2px dashed #ccc; | |
| border-radius: 12px; | |
| background: | |
| linear-gradient(45deg, #eee 25%, transparent 25%), | |
| linear-gradient(-45deg, #eee 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, #eee 75%), | |
| linear-gradient(-45deg, transparent 75%, #eee 75%); | |
| background-size: 24px 24px; | |
| background-position: | |
| 0 0, | |
| 0 12px, | |
| 12px -12px, | |
| -12px 0; | |
| } | |
| .drop-zone.dragover { | |
| border-color: #111; | |
| } | |
| /* ================================ | |
| EMPTY STATE | |
| ================================ */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| color: #555; | |
| text-align: center; | |
| pointer-events: none; | |
| } | |
| .empty-state strong { | |
| color: #222; | |
| font-size: 16px; | |
| } | |
| .empty-state span { | |
| font-size: 13px; | |
| } | |
| /* ================================ | |
| CANVAS STAGE | |
| ================================ */ | |
| .canvas-stage { | |
| position: relative; | |
| display: block; | |
| flex-shrink: 0; | |
| line-height: 0; | |
| touch-action: none; | |
| } | |
| /* | |
| * Both canvases occupy the exact same | |
| * coordinate space. | |
| */ | |
| #imageCanvas, | |
| #selectionCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: block; | |
| max-width: none; | |
| max-height: none; | |
| } | |
| #imageCanvas { | |
| z-index: 1; | |
| } | |
| #selectionCanvas { | |
| z-index: 2; | |
| touch-action: none; | |
| cursor: crosshair; | |
| } | |
| /* ================================ | |
| CONTROLS | |
| ================================ */ | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| padding: 16px; | |
| border: 1px solid #ddd; | |
| border-radius: 12px; | |
| background: #fff; | |
| } | |
| .control-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .label { | |
| color: #333; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| /* ================================ | |
| SELECTOR BUTTONS | |
| ================================ */ | |
| .selector-buttons { | |
| display: grid; | |
| grid-template-columns: | |
| repeat(2, 1fr); | |
| gap: 8px; | |
| } | |
| .selector-buttons button { | |
| min-height: 42px; | |
| padding: 8px 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| background: #fff; | |
| color: #111; | |
| transition: | |
| background 0.15s ease, | |
| color 0.15s ease, | |
| border-color 0.15s ease; | |
| } | |
| .selector-buttons button:hover { | |
| border-color: #999; | |
| } | |
| .selector-buttons button.active { | |
| border-color: #111; | |
| background: #111; | |
| color: #fff; | |
| } | |
| /* ================================ | |
| RANGE CONTROLS | |
| ================================ */ | |
| #sizeRange, | |
| #penSizeRange { | |
| width: 100%; | |
| cursor: pointer; | |
| } | |
| #sizeValue, | |
| #penSizeValue { | |
| color: #666; | |
| font-size: 12px; | |
| } | |
| /* ================================ | |
| DESCRIPTION | |
| ================================ */ | |
| .control-description { | |
| color: #666; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| /* ================================ | |
| ACTIONS | |
| ================================ */ | |
| .actions { | |
| display: grid; | |
| grid-template-columns: | |
| 1fr 1fr; | |
| gap: 8px; | |
| } | |
| .actions button { | |
| min-height: 42px; | |
| padding: 8px 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| background: #fff; | |
| color: #111; | |
| } | |
| .actions button:hover:not(:disabled) { | |
| border-color: #999; | |
| } | |
| #exportImage { | |
| border-color: #111; | |
| background: #111; | |
| color: #fff; | |
| } | |
| #exportImage:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* ================================ | |
| HIDDEN | |
| ================================ */ | |
| [hidden] { | |
| display: none ; | |
| } | |
| /* ================================ | |
| DESKTOP | |
| ================================ */ | |
| @media (min-width: 800px) { | |
| .app { | |
| padding: 24px; | |
| } | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: | |
| minmax(0, 1fr) | |
| 280px; | |
| align-items: start; | |
| } | |
| .drop-zone { | |
| min-height: 75vh; | |
| } | |
| .controls { | |
| position: sticky; | |
| top: 24px; | |
| } | |
| .selector-buttons { | |
| grid-template-columns: | |
| repeat(2, 1fr); | |
| } | |
| } | |
| /* ================================ | |
| MOBILE | |
| ================================ */ | |
| @media (max-width: 500px) { | |
| .app { | |
| padding: 12px; | |
| } | |
| .topbar { | |
| align-items: flex-start; | |
| } | |
| .brand h1 { | |
| font-size: 20px; | |
| } | |
| .brand p { | |
| font-size: 12px; | |
| } | |
| .upload-button { | |
| min-height: 38px; | |
| padding: 0 12px; | |
| font-size: 13px; | |
| } | |
| .drop-zone { | |
| min-height: 55vh; | |
| border-radius: 10px; | |
| } | |
| .controls { | |
| padding: 14px; | |
| } | |
| .selector-buttons button { | |
| min-height: 40px; | |
| } | |
| .actions { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ================================ | |
| VERY SMALL SCREENS | |
| ================================ */ | |
| @media (max-width: 350px) { | |
| .topbar { | |
| flex-direction: column; | |
| } | |
| .upload-button { | |
| width: 100%; | |
| } | |
| } |