49 lines
2.8 KiB
HTML
49 lines
2.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
/* The bar over an open sidebar panel (a web app or an extension's panel):
|
||
|
|
its name, then Maximize/Restore and Close at the top right. */
|
||
|
|
:root {
|
||
|
|
color-scheme: light dark;
|
||
|
|
--bg:#121826; --ink:#e7eaf1; --mut:#8b98a9; --line2:rgba(255,255,255,.10);
|
||
|
|
--acid:#d6ff3d; --hover: rgba(255,255,255,.08);
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root { --bg:#e4e8ee; --ink:#1a1f28; --mut:#5c6676; --line2:rgba(0,0,0,.10); --acid:#0AC18E; --hover: rgba(0,0,0,.06); }
|
||
|
|
}
|
||
|
|
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; user-select: none;
|
||
|
|
font: 600 12.5px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
|
||
|
|
.bar { display: flex; align-items: center; height: 100%; padding: 0 4px 0 12px; box-sizing: border-box;
|
||
|
|
border-bottom: 1px solid var(--line2); gap: 2px; }
|
||
|
|
.title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
|
|
button { width: 26px; height: 24px; border: none; border-radius: 6px; background: transparent; color: var(--mut);
|
||
|
|
display: grid; place-items: center; cursor: pointer; padding: 0; }
|
||
|
|
button:hover { background: var(--hover); color: var(--ink); }
|
||
|
|
button svg { width: 14px; height: 14px; display: block; }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="bar">
|
||
|
|
<span class="title" id="title"></span>
|
||
|
|
<button id="max" title="Maximize"></button>
|
||
|
|
<button id="close" title="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const H = window.panelHeader;
|
||
|
|
const ICON_MAX = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>';
|
||
|
|
const ICON_RESTORE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="12" height="12" rx="2"/><path d="M8 8V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2"/></svg>';
|
||
|
|
const title = document.getElementById("title"), max = document.getElementById("max");
|
||
|
|
function render(s) {
|
||
|
|
title.textContent = (s && s.title) || "";
|
||
|
|
const isMax = !!(s && s.max);
|
||
|
|
max.innerHTML = isMax ? ICON_RESTORE : ICON_MAX;
|
||
|
|
max.title = isMax ? "Restore" : "Maximize";
|
||
|
|
}
|
||
|
|
max.onclick = () => H && H.toggleMax();
|
||
|
|
document.getElementById("close").onclick = () => H && H.close();
|
||
|
|
// Double-click the bar: maximize / restore, like a window title bar.
|
||
|
|
document.querySelector(".bar").addEventListener("dblclick", (e) => { if (e.target.closest("button")) return; H && H.toggleMax(); });
|
||
|
|
H && H.getState().then(render).catch(() => {});
|
||
|
|
H && H.onState(render);
|
||
|
|
</script>
|
||
|
|
</body></html>
|