diff --git a/src/app.css b/src/app.css index 76440c5..8b7ba45 100644 --- a/src/app.css +++ b/src/app.css @@ -59,8 +59,7 @@ --success: #2f9e5c; --warn: #d9901b; --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08); - --page-line: rgba(0, 0, 0, 0.18); - --grid-line: rgba(0, 0, 0, 0.05); + --page-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); --ghost: rgba(0, 0, 0, 0.045); --ghost-border: rgba(0, 0, 0, 0.12); --radius: 6px; @@ -86,8 +85,7 @@ --success: #44cf6e; --warn: #e9973f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35); - --page-line: rgba(255, 255, 255, 0.16); - --grid-line: rgba(255, 255, 255, 0.04); + --page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.5); --ghost: rgba(255, 255, 255, 0.04); --ghost-border: rgba(255, 255, 255, 0.14); color-scheme: dark; diff --git a/src/lib/components/CanvasView.svelte b/src/lib/components/CanvasView.svelte index d401e9b..4f05d39 100644 --- a/src/lib/components/CanvasView.svelte +++ b/src/lib/components/CanvasView.svelte @@ -28,13 +28,6 @@ let stage: HTMLDivElement; const cssVars = pageCssVars(); - // Background grid: world-anchored, stepping up ×4 when zoomed out so lines never get denser than ~12px. - const gridStep = $derived.by(() => { - let step = 24 * viewport.scale; - while (step < 12) step *= 4; - return step; - }); - // ---- autosave -------------------------------------------------------- $effect(() => { if (doc.version > 0) untrack(() => workspace.scheduleSave()); @@ -529,7 +522,6 @@ class:panning class:erasing={tools.tool === 'eraser'} bind:this={stage} - style="--grid: {gridStep}px; background-position: {viewport.x}px {viewport.y}px" onpointerdown={onPointerDown} onpointermove={onPointerMove} onpointerup={onPointerUp} @@ -668,11 +660,7 @@ touch-action: none; user-select: none; -webkit-user-select: none; - background-color: var(--bg-canvas); - background-image: - linear-gradient(to right, var(--grid-line) 1px, transparent 1px), - linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); - background-size: var(--grid) var(--grid); + background: var(--bg-canvas); } .stage :global(.cm-content) { user-select: text; diff --git a/src/lib/components/PageView.svelte b/src/lib/components/PageView.svelte index ad52f25..51843b8 100644 --- a/src/lib/components/PageView.svelte +++ b/src/lib/components/PageView.svelte @@ -49,8 +49,7 @@ inset: 0; background: #ffffff; overflow: hidden; - /* Crisp 1 screen-px outline, no blur. */ - box-shadow: 0 0 0 calc(1px / var(--s)) var(--page-line); + box-shadow: var(--page-shadow); } .paper.invert { filter: invert(0.88) hue-rotate(180deg);