bsncubed
f267c430d9
Three features plus the design-system swap. Installer. Inno-compile.iss builds a per-user installer into %APPDATA%\ipswap with PrivilegesRequired=lowest, so it never shows a UAC prompt. That matches the app's asInvoker manifest, and it is also what lets the in-app updater replace the .exe later without elevation — a Program Files install could not. It offers a desktop shortcut and an optional start-with-Windows entry, and reuses the app's own single-instance mutex as AppMutex so setup notices a running copy, since a running .exe cannot be overwritten. Uninstall leaves presets.json, config.json and the log in place. Launching. Opening ipswap opens the editor in a browser, starting the tray first if it is not already up; if it is, the running copy opens the browser and the second process exits. internal/instance does this with a loopback control listener whose port and token live in a mode-600 session.json, plus a session-local named mutex on Windows to settle a launch race. A stale session file from a crash is detected by a failed call and treated as "no primary", so it can never wedge startup. The Run-key entry now passes --background, because a browser tab at every login is not wanted. Switching from the browser. New endpoints for active state, apply preview and apply. The browser confirms against the same before/after text the tray's MessageBox shows, built from a live read at prompt time. Apply requires the session token in a header like every other mutation — it changes the machine's network, so it is not a weaker case than editing a preset. A netsh refusal for lack of elevation comes back as 409 with a flag, so the page can point at "Relaunch as administrator" instead of showing a generic failure. To avoid two copies of that sequence, internal/switcher now owns everything between "the user said yes" and "the adapter changed", and both front ends call it. It serialises applies: two interleaved netsh sequences on one adapter would leave it matching neither preset, and there are now two ways to start one. CSS. apointless.css is vendored from bsncubed/css and left untouched; the previous file was the boarding-pass stylesheet and its class names did not match this markup. ipswap.css adds only what the design system does not ship — page chrome, tables, modals, stat tiles, a success alert — on its tokens, so re-pulling apointless.css restyles the app. Not verified: the installer is uncompiled (no Inno Setup or wine on this box) and the UI is not visually rendered (headless Firefox hangs here). Both are checked as far as the tooling allows — assets and endpoints serve, and every DOM id the JS touches exists in the markup. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
229 lines
5.1 KiB
CSS
229 lines
5.1 KiB
CSS
/*
|
|
* ipswap-specific styles.
|
|
*
|
|
* apointless.css is vendored verbatim from bsncubed/css and must not be edited
|
|
* here — re-pull it to update. This file adds only what the design system does
|
|
* not ship (page chrome, tables, modals, stat tiles) and is built strictly on
|
|
* its tokens, so a refreshed apointless.css restyles this too.
|
|
*/
|
|
|
|
/* ------------------------------------------------------------- layout --- */
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
padding: 14px 24px;
|
|
background: var(--surface-1);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand .version {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.page {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding: 24px 24px 72px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.row-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stack { display: flex; flex-direction: column; gap: 16px; }
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 24px 0 10px;
|
|
}
|
|
|
|
.muted { color: var(--text-muted); }
|
|
.faint { color: var(--text-faint); font-size: 0.82rem; }
|
|
|
|
/* --------------------------------------------------------- stat tiles --- */
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.stat .label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
color: var(--text-faint);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.stat .value {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.05rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* ------------------------------------------------------------- tables --- */
|
|
|
|
/* Wide content scrolls inside its own container so the page body never does. */
|
|
.table-scroll { overflow-x: auto; }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
|
|
th {
|
|
padding: 9px 14px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-strong);
|
|
color: var(--text-faint);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td {
|
|
padding: 11px 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: middle;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
tbody tr:last-child td { border-bottom: none; }
|
|
tbody tr:hover { background: var(--surface-2); }
|
|
|
|
/* The row whose preset is currently live. */
|
|
tbody tr.is-active { background: var(--accent-soft); }
|
|
tbody tr.is-active:hover { background: var(--accent-soft); }
|
|
|
|
td.addr { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
|
|
td.actions { text-align: right; white-space: nowrap; }
|
|
td.actions .btn + .btn { margin-left: 6px; }
|
|
|
|
/* -------------------------------------------------------------- forms --- */
|
|
|
|
.field { margin-bottom: 14px; }
|
|
|
|
.field-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
|
|
.check label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 0.88rem; }
|
|
|
|
select.input { font-family: var(--font-sans); }
|
|
|
|
.sec-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
|
|
.sec-row .input { flex: 1; }
|
|
.sec-row .input.narrow { flex: 0 0 150px; }
|
|
|
|
/* ------------------------------------------------------------- modals --- */
|
|
|
|
dialog {
|
|
padding: 0;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface-1);
|
|
color: var(--text);
|
|
box-shadow: var(--shadow);
|
|
width: min(720px, 94vw);
|
|
}
|
|
|
|
dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
|
|
|
|
.modal-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.modal-body { padding: 18px; max-height: 68vh; overflow-y: auto; }
|
|
|
|
.modal-foot {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 14px 18px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- alerts --- */
|
|
|
|
/* apointless.css ships error/warn/info but no success variant. */
|
|
.alert-ok {
|
|
background: var(--ok-soft);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.alert + .alert { margin-top: 8px; }
|
|
#alerts:not(:empty) { margin-bottom: 16px; }
|
|
|
|
/* -------------------------------------------------------------- misc --- */
|
|
|
|
.empty {
|
|
padding: 36px 18px;
|
|
text-align: center;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.busy {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.page { padding: 16px 14px 56px; }
|
|
.topbar { padding: 12px 14px; }
|
|
}
|