From 82bd66bfdc5abea279e9732b55258cf28f9e2d4f Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 17:33:21 +0000 Subject: [PATCH] A white search box The box sat on the grey "soft" fill. It is white now, as the tiles are, with the line colour as its border so it still stands off the page. On hover the border darkens a little, on focus it turns to the accent as before. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_014YZFmEpRdxrjNxTq4x9J4J --- src/styles/global.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index d89164b..55f35c0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -101,11 +101,12 @@ img { max-width: 100%; height: auto; } .search { position: relative; max-width: 190px; } .search-field { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 11px; - border: 1px solid transparent; border-radius: 16px; background: var(--soft); cursor: text; - transition: border-color .15s, background-color .15s; + border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: text; + transition: border-color .15s; } -.search-field:hover { border-color: var(--line); } -.search-field:focus-within { border-color: var(--brand); background: var(--card); } +/* White, as the tiles are, so its hairline is what sets it off the page. */ +.search-field:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--muted)); } +.search-field:focus-within { border-color: var(--brand); } .search-icon { width: 14px; height: 14px; flex: none; color: var(--muted); opacity: .7; } .search-field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none;