valknar/roux
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style search cancel button to match ink-soft grey

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-18 18:55:34 +02:00
parent 50047451d9
commit da050dfd3c
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+12
View File
@@ -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-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes roux-fade-in { from { opacity: 0; } to { opacity: 1; } } @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 ── */ /* ── scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }