mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Settings page: themes (Dark, Light, Cyberpunk, Retro) with xterm palettes and hub-synced choice, change password, access tokens, about

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-18 13:14:01 -07:00
co-authored by Claude Fable 5.1
parent 254e0cdd58
commit a4f39859b6
11 changed files with 319 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+39 -10
View File
@@ -3,11 +3,12 @@
--fg: #d0d7de; --muted: #7d8590; --accent: #e3a33b; --accent2: #58a6ff;
--ok: #3fb950; --bad: #ff7b72;
--s1: #3987e5; --s2: #c98500; --track: rgba(57, 135, 229, .18);
--btn-fg: #111; --term-bg: var(--term-bg); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--header-h: 44px; --footer-h: 28px; --rail-w: 220px;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 var(--font); overscroll-behavior: none; transition: background .2s, color .2s; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
@@ -18,7 +19,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.login-logo { width: 160px; height: 160px; align-self: center; border-radius: 50%; margin-bottom: 4px; }
.login h1 { text-align: center; margin: 0 0 8px; font-weight: 600; color: var(--accent); letter-spacing: .5px; }
.login input { padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; }
.login button, .primary { padding: 10px 12px; background: var(--accent); color: #111; border-radius: 6px; font-weight: 600; }
.login button, .primary { padding: 10px 12px; background: var(--accent); color: var(--btn-fg); border-radius: 6px; font-weight: 600; }
.login button:disabled { opacity: .5; }
.error { color: var(--bad); font-size: 13px; }
@@ -57,7 +58,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.sdot.run { background: var(--ok); }
/* main + terminal */
.main { flex: 1; min-width: 0; position: relative; background: #0d1117; }
.main { flex: 1; min-width: 0; position: relative; background: var(--term-bg); }
.term { position: absolute; inset: 0; padding: 6px 0 0 6px; }
.term-inner { height: 100%; }
.term .xterm { height: 100%; }
@@ -66,7 +67,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
/* key bar (touch devices / narrow screens) */
.keybar { display: none; gap: 4px; padding: 4px 6px; background: var(--bg2); border-top: 1px solid var(--border); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.keybar button { flex: 0 0 auto; padding: 8px 10px; min-width: 40px; background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; font-family: ui-monospace, monospace; font-size: 13px; }
.keybar button.on { background: var(--accent); color: #111; border-color: var(--accent); }
.keybar button.on { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); }
@media (pointer: coarse), (max-width: 800px) { .keybar { display: flex; } }
/* mobile: rail becomes a drawer */
@@ -114,7 +115,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.dash-bar .hint { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-bar select.btn { padding: 3px 6px; }
.btn { padding: 5px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; color: var(--fg); }
.btn.on { background: var(--accent); color: #111; border-color: var(--accent); }
.btn.on { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); }
.mod-tools { display: flex; gap: 4px; margin: -4px -4px 6px auto; justify-content: flex-end; }
.mod-tools button { padding: 2px 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--muted); }
.mod-tools button:hover:not(:disabled) { color: var(--fg); } .mod-tools button:disabled { opacity: .35; cursor: default; }
@@ -150,8 +151,8 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tabs button { padding: 6px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
.unit-file { margin: 0; padding: 10px; background: #0d1117; border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; }
.logs { flex: 1; min-height: 240px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; background: #0d1117; overflow: hidden; }
.unit-file { margin: 0; padding: 10px; background: var(--term-bg); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; }
.logs { flex: 1; min-height: 240px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; background: var(--term-bg); overflow: hidden; }
.logs-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; background: var(--bg2); }
.log-lines { flex: 1; overflow: auto; padding: 6px 8px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.log { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; }
@@ -177,8 +178,8 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.cron-detail .back { display: none; align-self: flex-start; }
.cron-detail h2 { margin: 0; font-size: 15px; font-weight: 600; font-family: ui-monospace, monospace; word-break: break-all; white-space: pre-wrap; }
.notice { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--muted); background: var(--bg2); }
.editor { width: 100%; min-height: 260px; padding: 10px; background: #0d1117; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; resize: vertical; }
.run-out { margin: 0; padding: 10px; background: #0d1117; border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; }
.editor { width: 100%; min-height: 260px; padding: 10px; background: var(--term-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; resize: vertical; }
.run-out { margin: 0; padding: 10px; background: var(--term-bg); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; }
@media (max-width: 800px) {
.cron-list { width: 100%; border-right: 0; } .has-sel .cron-list { display: none; }
.cron-detail .back { display: inline-block; }
@@ -325,7 +326,7 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
.phead { background: var(--bg2); cursor: default; padding: 0 10px; border-top: 1px solid var(--border); }
.th { padding: 6px 0; text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } .th.num { text-align: right; } .th.on { color: var(--fg); }
.pdetail { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--border); background: var(--bg2); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -6px 16px rgba(0,0,0,.4); }
.cmdline { font-size: 12px; word-break: break-all; white-space: pre-wrap; color: var(--fg); background: #0d1117; padding: 8px; border-radius: 6px; border: 1px solid var(--border); max-height: 120px; overflow: auto; }
.cmdline { font-size: 12px; word-break: break-all; white-space: pre-wrap; color: var(--fg); background: var(--term-bg); padding: 8px; border-radius: 6px; border: 1px solid var(--border); max-height: 120px; overflow: auto; }
@media (max-width: 800px) {
.procs-top { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; }
.cmdline { max-height: 72px; }
@@ -348,3 +349,31 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
.addform label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.addform input { padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 15px; }
.header .badge.bad { color: var(--bad); border-color: var(--bad); }
/* settings + themes */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.theme-card { text-align: left; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.theme-card:hover { border-color: var(--accent2); } .theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tprev { border: 1px solid; border-radius: 6px; overflow: hidden; font-size: 9px; height: 96px; display: flex; flex-direction: column; }
.tprev-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid; font-weight: 700; }
.tprev-dot { width: 6px; height: 6px; border-radius: 50%; }
.tprev-body { flex: 1; display: flex; }
.tprev-rail { width: 34px; border-right: 1px solid; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; }
.tprev-rail span { display: block; height: 7px; border-radius: 2px; background: transparent; }
.tprev-main { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.tprev-tile { border: 1px solid; border-radius: 4px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; } .tprev-tile b { font-size: 12px; }
.tprev-bar { height: 4px; border-radius: 2px; overflow: hidden; } .tprev-bar div { height: 100%; }
.tprev-term { flex: 1; border-radius: 4px; padding: 4px 6px; font-family: var(--mono); }
/* per-theme flourishes */
[data-theme="cyberpunk"] .brand, [data-theme="cyberpunk"] .login h1 { text-shadow: 0 0 8px rgba(255, 43, 214, .7), 0 0 18px rgba(255, 43, 214, .35); }
[data-theme="cyberpunk"] .gicon, [data-theme="cyberpunk"] .box-title { text-shadow: 0 0 6px rgba(0, 229, 255, .6); }
[data-theme="cyberpunk"] .leaf.active, [data-theme="cyberpunk"] .group-head.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(255, 43, 214, .25); }
[data-theme="retro"] body, [data-theme="retro"] .btn, [data-theme="retro"] input, [data-theme="retro"] select { font-family: var(--mono); }
[data-theme="retro"] .brand, [data-theme="retro"] .login h1 { text-shadow: 0 0 6px rgba(255, 176, 0, .6); letter-spacing: 1px; }
[data-theme="retro"] .app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px); }
[data-theme="retro"] .tile, [data-theme="retro"] .card, [data-theme="retro"] .box { border-radius: 2px; }
[data-theme="light"] .term-overlay { background: rgba(255,255,255,.6); }
[data-theme="light"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,.15); }
[data-theme="light"] .modal-back { background: rgba(0,0,0,.35); }