diff --git a/chrome.html b/chrome.html index fdf8371..905318e 100644 --- a/chrome.html +++ b/chrome.html @@ -66,10 +66,14 @@ .searchbox { display: flex; align-items: center; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 12px 0 3px; } .searchbox:focus-within { border-color: #4b7bec; } - .engine-btn { width: 34px; height: 30px; border: none; cursor: pointer; border-radius: 999px 0 0 999px; padding: 0; - background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b98a9' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.2 10.2 L14 14'/%3E%3C/svg%3E") no-repeat left 8px center / 14px; } - .engine-btn::after { content: "▾"; position: relative; left: 12px; font-size: 9px; color: var(--dim); } + /* dropdown button shows the SELECTED engine's favicon (emoji fallback) + a caret */ + .engine-btn { display: flex; align-items: center; gap: 3px; height: 30px; border: none; cursor: pointer; + border-radius: 999px 0 0 999px; padding: 0 4px 0 8px; background: transparent; } .engine-btn:hover { background-color: var(--hover); } + .engine-btn #engineIcon { display: grid; place-items: center; width: 16px; height: 16px; } + .engine-btn .eimg { width: 16px; height: 16px; border-radius: 3px; } + .engine-btn .esym { font-size: 14px; line-height: 1; } + .engine-btn .cv { font-size: 8px; color: var(--dim); } #search { flex: 1; padding: 7px 4px; } .tor { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #2b2f3a; color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 12.5px; } .tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; } @@ -116,7 +120,7 @@