From da050dfd3c3799f5b8c363170d75b255c3d06e97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Mon, 18 May 2026 18:55:34 +0200 Subject: [PATCH] Style search cancel button to match ink-soft grey MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Override the browser-default blue/accent-coloured × with a custom SVG circle using --ink-soft (#5b4f44) so it blends with the UI. Co-Authored-By: Claude Sonnet 4.6 --- assets/css/main.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index e3b6812..cab64db 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -184,6 +184,18 @@ mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color: @keyframes roux-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes roux-fade-in { from { opacity: 0; } to { opacity: 1; } } +/* ── search cancel button ── */ +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; + width: 13px; height: 13px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235b4f44' opacity='.45'/%3E%3Cpath stroke='%23f1ebe0' stroke-width='2.2' stroke-linecap='round' d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + cursor: pointer; + opacity: 1; +} + /* ── scrollbar ── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }