felixm/antidrift
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add settings gear, overlay, and file-browser modal to the UI

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Felix Martin
2026-06-01 20:26:24 -04:00
parent 326990d69a
commit ce201c57bb
3 changed files with 142 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+43
View File
@@ -127,3 +127,46 @@ input:focus { outline: 0; border-color: var(--accent); }
.enforce-note { opacity: 0.8; font-size: 0.85em; }
.enforce-toggle { display: flex; align-items: center; gap: 0.4em; }
.hint { opacity: 0.7; font-size: 0.85em; margin: 0.2em 0 0.6em; }
/* Settings: header gear + overlay modal */
.gear {
background: none; border: 0; color: var(--ink-dim); cursor: pointer;
font-size: 14px; padding: 0 4px; vertical-align: middle;
}
.gear:hover { color: var(--accent); }
.overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.5);
display: flex; align-items: flex-start; justify-content: center;
padding: 8vh 16px; z-index: 10;
}
.overlay[hidden] { display: none; }
.modal {
width: 100%; max-width: 520px; background: var(--panel);
border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
.modal h2 { margin: 0 0 12px; font-size: 16px; }
.modal-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-actions .btn { margin-top: 0; }
.path-row { display: flex; gap: 8px; align-items: center; }
.path-row input { flex: 1; }
.path-row .btn { margin-top: 0; white-space: nowrap; }
.set-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 1em; }
.browse {
margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
background: var(--bg); max-height: 260px; overflow-y: auto;
}
.browse[hidden] { display: none; }
.browse-dir {
padding: 8px 10px; font-size: 12px; color: var(--ink-dim);
font-family: ui-monospace, monospace; border-bottom: 1px solid var(--line);
position: sticky; top: 0; background: var(--bg);
}
.browse-list { list-style: none; margin: 0; padding: 4px 0; }
.browse-list button {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
color: var(--ink); font: inherit; font-size: 13px; padding: 5px 12px;
font-family: ui-monospace, monospace;
}
.browse-list button:hover { background: var(--line); color: var(--accent); }