diff --git a/README.md b/README.md index 3fb59d6..35a8fc3 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,8 @@ The app lets someone upload or drop in an image, choose a text/icon/background c - `i18n.js` owns supported languages, translated UI strings, language persistence, and translated attributes such as `aria-label`. - `app.js` owns view routing, the accessibility statement view, error display, loading state, intro panel state, and theme preference. - `image.js` owns file input, drag/drop, thumbnail preview, image decoding, canvas sizing, and cached source pixels. -- `canvas.js` contains canvas access, rendering, drawing, and keyboard handling for the color picker crosshairs. -- `toolbar.js` owns the checker toolbar state, selected test color, reset action, and crosshair placement. +- `canvas.js` contains canvas access, rendering, and drawing. +- `toolbar.js` owns the checker toolbar state, selected test color, and reset action. - `contrast.js` performs the pixel-by-pixel contrast highlight pass. - `color.js` contains RGB/hex conversion, pixel sampling, luminance, and contrast-ratio math. - `pwa.js` registers the service worker. diff --git a/app/css/style.css b/app/css/style.css index 7c8dd51..bc1e3db 100644 --- a/app/css/style.css +++ b/app/css/style.css @@ -1168,10 +1168,6 @@ input[type=color] { user-select: none; } -.preview-viewport.is-color-picker { - cursor: crosshair; -} - .preview-canvas-layer { position: relative; min-width: 100%; @@ -1228,10 +1224,6 @@ input[type=color] { background-position: 0 0, 0 16px, 16px -16px, -16px 0; } -.preview-viewport.is-color-picker .preview { - cursor: crosshair; -} - .preview-viewport.is-hand-tool .preview { cursor: grab; } @@ -1245,29 +1237,6 @@ input[type=color] { white-space: normal; } -#crosshairs { - pointer-events: none; - display: none; - position: absolute; - width: 16px; - height: 16px; -} - -#crosshairs svg { - width: 100%; - height: 100%; -} - -#crosshairs svg .white { - stroke: white; - stroke-linejoin: round; - stroke-width: 100; -} - -.preview:focus + .contrast-overlay + #crosshairs { - display: block; -} - /* One task at a time: chooser, simple checker, and image checker. */ .tool-chooser:focus, .image-contrast-view:focus { @@ -1449,18 +1418,6 @@ input[type=color] { font-weight: 700; } -.picker-button { - gap: 8px; - white-space: normal; -} - -.picker-button svg { - flex: 0 0 auto; - width: 18px; - height: 18px; - fill: currentColor; -} - .selected-test-color { display: inline-flex; align-items: center; @@ -1480,15 +1437,6 @@ input[type=color] { background: var(--selected-color); } -.picker-instruction { - flex-basis: 100%; - margin: 0; - padding: 10px 12px; - border-left: 4px solid var(--accent); - background: var(--panel); - color: var(--text); -} - .result-view-controls { display: flex; flex-wrap: wrap; @@ -1511,10 +1459,6 @@ input[type=color] { z-index: 1; } -#crosshairs { - z-index: 2; -} - .palette-card { display: block; padding: 0; @@ -1633,10 +1577,6 @@ input[type=color] { flex-wrap: wrap; } - .picker-button { - flex: 1 1 190px; - } - select { width: 100%; } @@ -1645,7 +1585,6 @@ input[type=color] { @media (forced-colors: active) { .tool-choice, .checker-result, - .picker-instruction, .palette-pairs > li { forced-color-adjust: auto; border: 2px solid CanvasText; @@ -2366,8 +2305,7 @@ body { min-height: 40px; } -.loaded-image-summary .cta:hover, -.picker-button:hover { +.loaded-image-summary .cta:hover { border-color: var(--text); background: var(--panel-soft); color: var(--text); @@ -2408,7 +2346,6 @@ body { display: grid; grid-template-areas: "settings action" - "instruction instruction" "result result"; grid-template-columns: minmax(0, 1fr) auto; align-content: start; @@ -2449,11 +2386,6 @@ body { gap: 8px; } -.color-field .picker-button { - grid-column: 1 / span 2; - justify-content: flex-start; -} - .color-field .hex-color-control, .checker select { width: 100%; @@ -2474,15 +2406,6 @@ body { background: var(--panel-soft); } -.picker-instruction { - grid-area: instruction; - margin: 0; - padding: 8px 0 8px 16px; - border: 0; - border-left: 3px solid var(--accent); - background: transparent; -} - .view-controls { grid-area: action; display: flex; diff --git a/app/index.php b/app/index.php index ce19c46..87ec350 100644 --- a/app/index.php +++ b/app/index.php @@ -176,9 +176,6 @@ - @@ -196,7 +193,6 @@ -
@@ -223,45 +219,12 @@ -

Use the zoom controls to inspect the image. If the image is larger than the visible preview, use the pan buttons or scroll the preview. Focus the image preview and use arrow keys to move the color picker.

+

Use the zoom controls to inspect the image. If the image is larger than the visible preview, use the pan buttons or scroll the preview.

- + - -
- -