commit a7acd7bba4e5a297d92f1af26988f145a169b727
Author: Coder Agent <coder@agents.omni>
Date: Mon Feb 16 20:40:23 2026
Harmonize News and Files UI styling
Align /news and /files with the shared visual system used by /tasks:
same base colors, nav treatment, spacing scale, and card-like surfaces.
Task-Id: t-619
diff --git a/Omni/Newsreader/Web.hs b/Omni/Newsreader/Web.hs
index 5d6064ad..b36ecdcc 100644
--- a/Omni/Newsreader/Web.hs
+++ b/Omni/Newsreader/Web.hs
@@ -351,56 +351,60 @@ shell title body =
css :: Text
css =
T.unlines
- [ ":root { --fg: #1a1a1a; --bg: #fafafa; --muted: #777; --link: #1a0dab;",
- " --border: #eee; --hover: #f0f0f0; }",
+ [ ":root { --fg: #1f2937; --bg: #f5f5f5; --muted: #6b7280; --link: #0066cc;",
+ " --border: #d0d0d0; --hover: #f3f4f6; --card: #ffffff; }",
"@media (prefers-color-scheme: dark) {",
- " :root { --fg: #d4d4d4; --bg: #111; --muted: #888; --link: #8ab4f8;",
- " --border: #222; --hover: #1a1a1a; }",
+ " :root { --fg: #d4d4d4; --bg: #111827; --muted: #9ca3af; --link: #60a5fa;",
+ " --border: #374151; --hover: #1f2937; --card: #111827; }",
"}",
"* { box-sizing: border-box; margin: 0; padding: 0; }",
- "body { font: 16px/1.6 -apple-system, system-ui, sans-serif;",
- " max-width: 680px; margin: 0 auto; padding: 1rem;",
- " background: var(--bg); color: var(--fg); }",
+ "body { font: 14px/1.3 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;",
+ " max-width: 960px; margin: 0 auto; padding: 0.5rem 0.75rem;",
+ " background: var(--bg); color: var(--fg); min-height: 100vh; }",
"a { color: var(--link); text-decoration: none; }",
"a:hover { text-decoration: underline; }",
"",
- "nav { display: flex; align-items: baseline; gap: 1rem;",
- " padding: 0.5rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }",
- ".brand { font-weight: 600; font-size: 1.1rem; color: var(--fg); }",
- ".nav-links { display: flex; gap: 1rem; font-size: 0.9rem; }",
- ".nav-links a { color: var(--muted); }",
+ "nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;",
+ " background: var(--card); border-bottom: 1px solid var(--border);",
+ " padding: 0.375rem 0.75rem; margin-bottom: 0.5rem; }",
+ ".brand { font-weight: 700; font-size: 1rem; color: var(--link); }",
+ ".brand:hover { text-decoration: none; }",
+ ".nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; font-size: 0.82rem; }",
+ ".nav-links a { color: #374151; padding: 0.25rem 0.6rem; border-radius: 2px; }",
+ ".nav-links a:hover { background: var(--hover); text-decoration: none; }",
"",
- ".article-card { margin-bottom: 1.5rem; }",
- ".article-card .title { font-size: 1.05rem; font-weight: 500; display: block; }",
- ".article-card .meta { font-size: 0.8rem; color: var(--muted); margin: 0.15rem 0 0.3rem; }",
- ".article-card .snippet { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }",
+ ".article-card { margin-bottom: 0.45rem; background: var(--card); border: 1px solid #e5e7eb; border-radius: 2px; padding: 0.6rem 0.7rem; }",
+ ".article-card .title { font-size: 0.95rem; font-weight: 600; display: block; color: var(--link); }",
+ ".article-card .meta { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0.3rem; }",
+ ".article-card .snippet { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }",
"",
- ".full-article h1 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 0.3rem; }",
- ".full-article .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }",
- ".full-article .content p { margin-bottom: 1rem; }",
+ ".full-article h1 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.4rem; }",
+ ".full-article .meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }",
+ ".full-article .content p { margin-bottom: 0.85rem; line-height: 1.5; }",
"",
- ".topic { margin-bottom: 2rem; }",
- ".topic h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }",
+ ".topic { margin-bottom: 1rem; }",
+ ".topic h2 { font-size: 1rem; margin-bottom: 0.35rem; }",
".topic .count { font-weight: normal; color: var(--muted); }",
"",
- ".feed-list { list-style: none; }",
- ".feed-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }",
+ ".feed-list { list-style: none; background: var(--card); border: 1px solid #e5e7eb; border-radius: 2px; }",
+ ".feed-list li { padding: 0.5rem 0.7rem; border-bottom: 1px solid #e5e7eb; }",
+ ".feed-list li:last-child { border-bottom: none; }",
".small { font-size: 0.8rem; }",
".muted { color: var(--muted); }",
- ".empty { color: var(--muted); font-style: italic; }",
+ ".empty { color: var(--muted); font-style: italic; margin: 0.5rem 0; }",
"",
- ".add-feed { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }",
- ".add-feed input { flex: 1; padding: 0.4rem; font-size: 0.9rem;",
- " border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 3px; }",
- ".add-feed button { padding: 0.4rem 0.8rem; font-size: 0.9rem;",
- " border: 1px solid var(--border); background: var(--hover); color: var(--fg);",
- " border-radius: 3px; cursor: pointer; }",
+ ".add-feed { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }",
+ ".add-feed input { flex: 1; padding: 0.35rem 0.5rem; font-size: 0.85rem;",
+ " border: 1px solid #d1d5db; background: var(--card); color: var(--fg); border-radius: 2px; }",
+ ".add-feed button { padding: 0.35rem 0.65rem; font-size: 0.82rem;",
+ " border: 1px solid #d1d5db; background: var(--hover); color: var(--fg);",
+ " border-radius: 2px; cursor: pointer; }",
"",
- ".search-form { margin-bottom: 1.5rem; }",
- ".search-form input { width: 100%; padding: 0.5rem; font-size: 1rem;",
- " border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 3px; }",
+ ".search-form { margin-bottom: 0.75rem; }",
+ ".search-form input { width: 100%; padding: 0.45rem 0.5rem; font-size: 0.9rem;",
+ " border: 1px solid #d1d5db; background: var(--card); color: var(--fg); border-radius: 2px; }",
"",
- "h1 { font-size: 1.3rem; margin-bottom: 1rem; }"
+ "h1 { font-size: 1.15rem; margin-bottom: 0.6rem; }"
]
-- ============================================================================
diff --git a/Omni/Serve.hs b/Omni/Serve.hs
index 6c7297d8..d1f5c05c 100755
--- a/Omni/Serve.hs
+++ b/Omni/Serve.hs
@@ -209,52 +209,48 @@ pageShell title body =
css :: Text
css =
T.unlines
- [ ":root { --bg: #fff; --fg: #222; --muted: #666; --border: #e0e0e0;",
- " --link: #0366d6; --code-bg: #f6f8fa; --hover: #f5f5f5; }",
+ [ ":root { --bg: #f5f5f5; --fg: #1f2937; --muted: #6b7280; --border: #d0d0d0;",
+ " --link: #0066cc; --code-bg: #111827; --code-fg: #d4d4d4; --hover: #f3f4f6; --card: #fff; }",
"@media (prefers-color-scheme: dark) {",
- " :root { --bg: #1a1a1a; --fg: #d4d4d4; --muted: #888; --border: #333;",
- " --link: #58a6ff; --code-bg: #2d2d2d; --hover: #252525; }",
+ " :root { --bg: #111827; --fg: #d4d4d4; --muted: #9ca3af; --border: #374151;",
+ " --link: #60a5fa; --code-bg: #0b1220; --code-fg: #d4d4d4; --hover: #1f2937; --card: #111827; }",
"}",
"* { box-sizing: border-box; }",
- "body { font-family: -apple-system, system-ui, sans-serif;",
- " max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem;",
- " background: var(--bg); color: var(--fg); line-height: 1.6; }",
+ "body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;",
+ " font-size: 14px; max-width: 960px; margin: 0 auto; padding: 0.5rem 0.75rem;",
+ " background: var(--bg); color: var(--fg); line-height: 1.4; min-height: 100vh; }",
"a { color: var(--link); text-decoration: none; }",
"a:hover { text-decoration: underline; }",
- ".topnav { display: flex; gap: 1rem; align-items: baseline;",
- " border-bottom: 1px solid var(--border); margin: 0 0 1rem; padding: 0.5rem 0; }",
- ".topnav-link { color: var(--muted); font-size: 0.95rem; }",
- ".topnav-link:hover { color: var(--fg); }",
- ".breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }",
- "h1 { font-size: 1.5rem; margin: 0 0 1rem; }",
+ ".topnav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;",
+ " background: var(--card); border-bottom: 1px solid var(--border); margin: 0 0 0.5rem; padding: 0.375rem 0.75rem; }",
+ ".topnav-link { color: #374151; font-size: 0.82rem; padding: 0.25rem 0.6rem; border-radius: 2px; }",
+ ".topnav-link:hover { background: var(--hover); color: #374151; text-decoration: none; }",
+ ".breadcrumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }",
+ "h1 { font-size: 1.15rem; margin: 0 0 0.6rem; }",
"",
"/* Directory listing */",
- ".listing { width: 100%; border-collapse: collapse; }",
- ".listing th { text-align: left; border-bottom: 2px solid var(--border);",
- " padding: 0.4rem 0.8rem; font-size: 0.85rem; color: var(--muted); }",
- ".listing td { padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--border); }",
+ ".listing { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid #e5e7eb; border-radius: 2px; overflow: hidden; }",
+ ".listing th { text-align: left; border-bottom: 1px solid #e5e7eb;",
+ " padding: 0.4rem 0.65rem; font-size: 0.8rem; color: var(--muted); }",
+ ".listing td { padding: 0.38rem 0.65rem; border-bottom: 1px solid #e5e7eb; font-size: 0.86rem; }",
+ ".listing tr:last-child td { border-bottom: none; }",
".listing tr:hover { background: var(--hover); }",
- ".listing .size, .listing .modified { text-align: right; ",
- " font-size: 0.85rem; color: var(--muted); white-space: nowrap; }",
+ ".listing .size, .listing .modified { text-align: right;",
+ " font-size: 0.8rem; color: var(--muted); white-space: nowrap; }",
"",
"/* Markdown */",
- ".markdown-body { font-size: 1rem; }",
- ".markdown-body h1 { font-size: 1.8rem; border-bottom: 1px solid var(--border);",
- " padding-bottom: 0.3rem; }",
- ".markdown-body h2 { font-size: 1.4rem; border-bottom: 1px solid var(--border);",
- " padding-bottom: 0.2rem; }",
- ".markdown-body h3 { font-size: 1.15rem; }",
- ".markdown-body pre { background: var(--code-bg); padding: 1rem;",
- " border-radius: 6px; overflow-x: auto; font-size: 0.9rem; }",
- ".markdown-body code { background: var(--code-bg); padding: 0.15rem 0.3rem;",
- " border-radius: 3px; font-size: 0.9em; }",
+ ".markdown-body { font-size: 0.92rem; background: var(--card); border: 1px solid #e5e7eb; border-radius: 2px; padding: 0.75rem; }",
+ ".markdown-body h1 { font-size: 1.4rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; }",
+ ".markdown-body h2 { font-size: 1.2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.15rem; }",
+ ".markdown-body h3 { font-size: 1.05rem; }",
+ ".markdown-body pre { background: var(--code-bg); color: var(--code-fg); padding: 0.75rem;",
+ " border-radius: 2px; overflow-x: auto; font-size: 0.82rem; }",
+ ".markdown-body code { background: #eef2f7; padding: 0.12rem 0.28rem; border-radius: 2px; font-size: 0.86em; }",
".markdown-body pre code { background: none; padding: 0; }",
".markdown-body img { max-width: 100%; height: auto; }",
".markdown-body table { border-collapse: collapse; width: 100%; }",
- ".markdown-body th, .markdown-body td { border: 1px solid var(--border);",
- " padding: 0.4rem 0.8rem; }",
- ".markdown-body blockquote { border-left: 4px solid var(--border);",
- " margin-left: 0; padding-left: 1rem; color: var(--muted); }"
+ ".markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.3rem 0.55rem; }",
+ ".markdown-body blockquote { border-left: 3px solid #d1d5db; margin-left: 0; padding-left: 0.75rem; color: var(--muted); }"
]
-- ============================================================================