explewd/waste-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Restyle web UI with terminal-green theme and monospace font

Browse Source 
Switch accent color from purple to green, add JetBrains Mono font,
and unify light/dark palettes into a single dark theme.
This commit is contained in:
Fredrik Johansson
2026-07-08 22:59:37 +02:00
parent 697a7e614d
commit b649f4d012
4 changed files with 44 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/index.html
View File

@@ -4,7 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#863bff" /> <meta name="theme-color" content="#00e87a" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

4
web/public/manifest.json
View File

@@ -4,8 +4,8 @@
"description": "Decentralized friend-to-friend encrypted mesh networking", "description": "Decentralized friend-to-friend encrypted mesh networking",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#0d0d0d", "background_color": "#080808",
"theme_color": "#863bff", "theme_color": "#00e87a",
"icons": [ "icons": [
{ {
"src": "/icon-192.png", "src": "/icon-192.png",

39
web/src/App.css
View File

@@ -1,26 +1,33 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--bg: #0f0f13; --bg: #080808;
--surface: #1a1a22; --surface: #0e0e0e;
--border: #2a2a36; --border: rgba(255, 255, 255, 0.09);
--accent: #7c6af7; --accent: #00e87a;
--text: #e0e0e8; --accent-dim: rgba(0, 232, 122, 0.12);
--muted: #6b6b80; --accent-border: rgba(0, 232, 122, 0.3);
--text: #c8c8c8;
--heading: #f0f0f0;
--muted: #666;
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
--sidebar-w: 220px; --sidebar-w: 220px;
} }
html, body, #root { height: 100%; } html, body, #root { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; -webkit-font-smoothing: antialiased; }
button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; } button { cursor: pointer; background: var(--accent); color: #000; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-family: var(--mono); font-weight: 600; transition: all 0.15s; }
button:hover:not(:disabled) { background: #00ff88; border-color: #00ff88; }
button:active:not(:disabled) { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: default; } button:disabled { opacity: 0.4; cursor: default; }
input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; } input { background: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--mono); outline: none; width: 100%; }
input:focus { border-color: var(--accent); } input:focus { border-color: var(--accent-border); }
/* ── onboarding ── */ /* ── onboarding ── */
.onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; max-width: 380px; margin: 0 auto; padding: 2rem; } .onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; max-width: 380px; margin: 0 auto; padding: 2rem; }
.onboarding h1 { font-size: 2rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; } .onboarding h1 { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--heading); margin-bottom: 4px; }
.onboarding h1::before { content: '> '; color: var(--muted); font-weight: 400; }
.onboarding .status { color: var(--muted); font-size: 13px; } .onboarding .status { color: var(--muted); font-size: 13px; }
.onboarding .status.connecting { color: var(--accent); } .onboarding .status.connecting { color: var(--accent); }
.onboarding .status.disconnected { color: #e06060; } .onboarding .status.disconnected { color: #e06060; }
@@ -69,7 +76,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.sidebar-new-room input { font-size: 12px; padding: 4px 8px; } .sidebar-new-room input { font-size: 12px; padding: 4px 8px; }
.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sidebar-item:hover { background: rgba(255,255,255,0.04); } .sidebar-item:hover { background: rgba(255,255,255,0.04); }
.sidebar-item.active { background: var(--accent); color: #fff; } .sidebar-item.active { background: var(--accent); color: #000; font-weight: 600; }
.sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; } .sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; }
/* peer rows in sidebar */ /* peer rows in sidebar */
@@ -127,7 +134,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.file-entry-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-entry-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-entry-size { color: var(--muted); font-size: 11px; flex-shrink: 0; } .file-entry-size { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.file-entry-dl { background: none; color: var(--accent); font-size: 14px; padding: 1px 4px; flex-shrink: 0; } .file-entry-dl { background: none; color: var(--accent); font-size: 14px; padding: 1px 4px; flex-shrink: 0; }
.file-entry-dl:hover { background: rgba(124,106,247,0.15); } .file-entry-dl:hover { background: var(--accent-dim); }
/* ── share manager ── */ /* ── share manager ── */
.share-manager { width: 100%; display: flex; flex-direction: column; gap: 4px; } .share-manager { width: 100%; display: flex; flex-direction: column; gap: 4px; }
@@ -179,11 +186,11 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.reaction-add:hover { color: var(--accent); background: none; } .reaction-add:hover { color: var(--accent); background: none; }
.reaction-picker { display: flex; gap: 4px; padding: 4px 16px 2px; } .reaction-picker { display: flex; gap: 4px; padding: 4px 16px 2px; }
.reaction-picker-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 18px; padding: 2px 6px; line-height: 1.4; cursor: pointer; } .reaction-picker-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 18px; padding: 2px 6px; line-height: 1.4; cursor: pointer; }
.reaction-picker-btn:hover { border-color: var(--accent); background: rgba(124,106,247,0.12); } .reaction-picker-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 16px 4px; } .reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 16px 4px; }
.reaction-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; padding: 1px 8px; cursor: pointer; color: var(--text); } .reaction-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; padding: 1px 8px; cursor: pointer; color: var(--text); }
.reaction-chip:hover { border-color: var(--accent); background: rgba(124,106,247,0.1); } .reaction-chip:hover { border-color: var(--accent); background: rgba(0,232,122,0.1); }
.reaction-chip.mine { border-color: var(--accent); background: rgba(124,106,247,0.18); } .reaction-chip.mine { border-color: var(--accent); background: rgba(0,232,122,0.18); }
/* ── mobile hamburger / close buttons ── */ /* ── mobile hamburger / close buttons ── */
.menu-btn-mobile { display: none; background: none; color: var(--muted); font-size: 18px; padding: 0 8px 0 0; line-height: 1; } .menu-btn-mobile { display: none; background: none; color: var(--muted); font-size: 18px; padding: 0 8px 0 0; line-height: 1; }

46
web/src/index.css
View File

@@ -1,23 +1,23 @@
:root { :root {
--text: #6b6375; --text: #c8c8c8;
--text-h: #08060d; --text-h: #f0f0f0;
--bg: #fff; --bg: #080808;
--border: #e5e4e7; --border: rgba(255, 255, 255, 0.09);
--code-bg: #f4f3ec; --code-bg: #0e0e0e;
--accent: #aa3bff; --accent: #00e87a;
--accent-bg: rgba(170, 59, 255, 0.1); --accent-bg: rgba(0, 232, 122, 0.12);
--accent-border: rgba(170, 59, 255, 0.5); --accent-border: rgba(0, 232, 122, 0.3);
--social-bg: rgba(244, 243, 236, 0.5); --social-bg: rgba(14, 14, 14, 0.5);
--shadow: --shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; 0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.6);
--sans: system-ui, 'Segoe UI', Roboto, sans-serif; --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
--heading: system-ui, 'Segoe UI', Roboto, sans-serif; --heading: 'JetBrains Mono', ui-monospace, monospace;
--mono: ui-monospace, Consolas, monospace; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
font: 18px/145% var(--sans); font: 18px/145% var(--sans);
letter-spacing: 0.18px; letter-spacing: 0.18px;
color-scheme: light dark; color-scheme: dark;
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
font-synthesis: none; font-synthesis: none;
@@ -30,24 +30,8 @@
} }
} }
@media (prefers-color-scheme: dark) { #social .button-icon {
:root { filter: invert(1) brightness(2);
--text: #9ca3af;
--text-h: #f3f4f6;
--bg: #16171d;
--border: #2e303a;
--code-bg: #1f2028;
--accent: #c084fc;
--accent-bg: rgba(192, 132, 252, 0.15);
--accent-border: rgba(192, 132, 252, 0.5);
--social-bg: rgba(47, 48, 58, 0.5);
--shadow:
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
}
#social .button-icon {
filter: invert(1) brightness(2);
}
} }
#root { #root {