theseus/link-status.html

32 lines
1.6 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
<html><head><meta charset="utf-8">
<style>
:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
html, body { margin: 0; background: transparent; overflow: hidden; }
.pill { background: #1c222c; border: 1px solid #ffffff26; border-top: none; border-left: none;
border-radius: 0 8px 0 0; box-shadow: 0 -2px 12px #0006;
color: #b9c2d0; font-size: 11.5px; padding: 4px 10px 4px 8px;
display: inline-block; max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
/* Off-screen twin used only to measure the URL's natural width. The
visible pill is capped at 100% of this view, so measuring IT would
just report whatever width the view already has — the pill could
never grow past its first 100px and long links got cut short. */
.measure { position: absolute; left: 0; top: 0; visibility: hidden; max-width: none; }
@media (prefers-color-scheme: light) {
.pill { background: #ffffff; color: #3c4453; border-color: rgba(0,0,0,.15); }
}
</style></head>
<body><span class="pill" id="p"></span><span class="pill measure" id="m" aria-hidden="true"></span>
<script>
const p = document.getElementById("p");
const m = document.getElementById("m");
window.linkstatus.onUrl((url) => {
const s = String(url || "");
p.textContent = s; m.textContent = s;
// Ask main for the natural width; main clamps to the tab area and the
// visible pill ellipsises whatever doesn't fit.
requestAnimationFrame(() => { try { window.linkstatus.resize(m.offsetWidth + 2, p.offsetHeight + 2); } catch (e) {} });
});
</script></body></html>