diff --git a/chrome.html b/chrome.html index b77270b..37135c0 100644 --- a/chrome.html +++ b/chrome.html @@ -37,8 +37,20 @@ .ic:hover { background: var(--line2); color: var(--ink); } .ic:active { background: var(--line); } .ic:disabled { opacity: .28; cursor: default; background: transparent; } - /* indeterminate loading bar under the toolbar */ - .loadbar { height: 2px; overflow: hidden; background: transparent; } + /* downloads button — a small badge sits over the icon when there's activity */ + .dlbtn { position: relative; } + .dlbtn.spin::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; + border: 1.5px solid transparent; border-top-color: #4b7bec; animation: dlspin .9s infinite linear; } + @keyframes dlspin { to { transform: rotate(360deg); } } + .dlbadge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; + background: #4b7bec; color: #fff; border-radius: 7px; font-size: 9.5px; font-weight: 700; + display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg); } + .dlbtn.done .dlbadge { background: #4fd1a5; } + .dlbtn.err .dlbadge { background: #f6768a; } + /* indeterminate loading bar under the toolbar — collapses when idle so it + doesn't take a permanent 2px strip below the address bar */ + .loadbar { height: 0; overflow: hidden; background: transparent; transition: height .12s linear; } + .loadbar.on { height: 2px; } .loadbar.on::after { content: ""; display: block; height: 100%; width: 35%; border-radius: 2px; background: linear-gradient(90deg, transparent, #4b7bec, #d6ff3d, transparent); animation: loadslide 1.1s infinite linear; } @keyframes loadslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } } @@ -58,10 +70,14 @@ .secbadge.warn svg .shk { stroke: #f6ad55; } .secbadge.warn svg .bdy { fill: #f6ad55; } input { padding: 7px 6px; border-radius: 999px; border: none; background: transparent; color: inherit; font-size: 13.5px; outline: none; } #url { flex: 1; } - /* minimal registry indicator at the END of the address bar */ + /* registry indicator at the END of the address bar — one or two chips */ + #reg { display: inline-flex; gap: 4px; align-items: center; } .reg { font-size: 10.5px; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; - background: rgba(214,255,61,.13); color: #d6ff3d; border: 1px solid #d6ff3d33; } - .reg.icann { background: rgba(139,152,169,.14); color: #9aa6b6; border-color: var(--line2); } + background: rgba(214,255,61,.13); color: #d6ff3d; border: 1px solid #d6ff3d33; cursor: default; user-select: none; } + .reg.icann { background: rgba(76,158,255,.13); color: #4c9eff; border-color: rgba(76,158,255,.28); } + /* collision candidate: two chips shown together; inactive one is dim + clickable */ + .reg.switch { cursor: pointer; opacity: .55; } + .reg.switch:hover { opacity: 1; } .star { border: none; background: transparent; cursor: pointer; color: var(--dim); font-size: 15px; padding: 2px 4px; border-radius: 6px; } .star:hover { background: var(--line2); color: var(--ink); } .star.on { color: #ffd23d; } /* search box: engine icon (click = pick engine) + a wide typing area */ @@ -125,6 +141,10 @@ + @@ -136,9 +156,9 @@ got it diff --git a/main.js b/main.js index c7fe59e..0a54947 100644 --- a/main.js +++ b/main.js @@ -214,7 +214,7 @@ function collisionPromptOnce({ host, tld }) { if (collisionWin && !collisionWin.isDestroyed()) { try { collisionWin.close(); } catch {} } const parent = BrowserWindow.getFocusedWindow() || win; collisionWin = new BrowserWindow({ - parent, modal: true, width: 480, height: 340, resizable: false, minimizable: false, + parent, modal: true, width: 640, height: 520, resizable: false, minimizable: false, maximizable: false, autoHideMenuBar: true, title: "Open with…", show: false, webPreferences: { preload: path.join(__dirname, "collision-preload.js"), sandbox: true, contextIsolation: true }, }); diff --git a/popover.html b/popover.html index 07a3aef..e4d3e8b 100644 --- a/popover.html +++ b/popover.html @@ -61,7 +61,7 @@