/* projax — minimal style. Desktop-first; Phase 3i adds phone + tablet responsiveness via two breakpoints at the file end. Phase 4b: theme palette. Default is dark; the layout flips `` from the projax_theme cookie. Every panel colour lives in a CSS variable so a switch is just a class flip — no inline overrides anywhere in the codebase. */ /* Theme-independent: kept so we get sane behaviour even if both selectors below somehow miss (defence in depth). */ :root { color-scheme: dark; } :root, :root[data-theme="dark"] { color-scheme: dark; --fg: #e6e6e0; --muted: #8a8880; --bg: #0e0e0e; --bg-alt: #1a1a1a; --surface: #161616; --surface-hover: #1f1f1f; --border: #2c2c2c; --accent: #6fa7e8; --accent-fg: #0a0a0a; --warn: #f0a060; --ok: #74c79b; --bad: #e07070; --highlight: #3a3208; --highlight-warn: #3a2a10; --highlight-bad: #3a1212; --kind-event-bg: #1a2540; --kind-event-fg: #8eb5f0; --kind-todo-bg: #3a2810; --kind-todo-fg: #f0c068; --kind-doc-bg: #143020; --kind-doc-fg: #7adba0; --kind-creation-bg: #281a40; --kind-creation-fg: #b090ec; /* Graph node keys — adjusted up in dark mode for contrast against the dark canvas. */ --graph-mai: #6fa7e8; --graph-self: #74c79b; --graph-external: #f0a060; --graph-mixed: #b090ec; --graph-unmanaged: #8a8880; } :root[data-theme="light"] { color-scheme: light; --fg: #1a1a1a; --muted: #6a6a6a; --bg: #fafafa; --bg-alt: #f0efe8; --surface: #ffffff; --surface-hover: #f7f7f7; --border: #d8d4c8; --accent: #2f5d9e; --accent-fg: #ffffff; --warn: #b35900; --ok: #2b7a4b; --bad: #a02929; --highlight: #fff5d6; --highlight-warn: #fff5e6; --highlight-bad: #fff5f5; --kind-event-bg: #e8f0ff; --kind-event-fg: #2055aa; --kind-todo-bg: #fef6e0; --kind-todo-fg: #a87000; --kind-doc-bg: #e8f8ee; --kind-doc-fg: #267a4d; --kind-creation-bg: #f0e8ff; --kind-creation-fg: #5a3aaa; --graph-mai: #2563eb; --graph-self: #15803d; --graph-external: #ea580c; --graph-mixed: #7c3aed; --graph-unmanaged: #9ca3af; } * { box-sizing: border-box; } html { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); } body { margin: 0; } /* Phase 5g — top-nav is gone; .projax-sidebar fills the same role on desktop, .projax-bottom-nav (Slice B) on mobile. main has a sidebar- width margin on desktop and zero on mobile. */ main.projax-main { padding: 16px 24px; max-width: 1100px; margin: 0 auto 0 var(--projax-sidebar-width, 220px); transition: margin-left 200ms ease; } html[data-sidebar-collapsed="true"] main.projax-main { margin-left: var(--projax-sidebar-collapsed-width, 56px); } @media (max-width: 767px) { main.projax-main { margin-left: 0; } } h1 { font-size: 1.4em; margin: 0 0 8px; } h2 { font-size: 1.1em; margin: 24px 0 8px; } .counts { color: var(--muted); margin: 0 0 16px; } .tree ul { list-style: none; padding-left: 18px; margin: 4px 0; border-left: 1px dotted var(--border); } .tree > ul.forest { padding-left: 0; border-left: none; } .node { margin: 2px 0; } .node.area > a { font-weight: 600; } .slug { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; margin-left: 8px; } .status { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); margin-left: 8px; } .status-active { color: var(--ok); } .status-done { color: var(--accent); } .status-archived { color: var(--muted); } .source { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 4px; background: var(--bg-alt); border: 1px solid var(--border); } .source-mai\.projects { color: var(--warn); } .tag { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); margin-left: 4px; color: var(--accent); text-decoration: none; } a.tag:hover { background: var(--accent); color: var(--accent-fg); } .tag-on { background: var(--accent); color: var(--accent-fg); } .mgmt { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); margin-left: 4px; color: var(--muted); } .mgmt-mai { color: var(--warn); border-color: var(--warn); } .mgmt-self { color: var(--ok); border-color: var(--ok); } .tagbar { margin: 12px 0; padding: 8px 0; border-bottom: 1px dotted var(--border); } .tagbar .muted { color: var(--muted); margin-right: 8px; } .tagbar .clear { margin-left: 12px; color: var(--bad); } .muted { color: var(--muted); } .add { margin-left: 6px; color: var(--accent); text-decoration: none; } .add:hover { text-decoration: underline; } .orphans { margin-top: 32px; } .flat { list-style: none; padding: 0; } .flat li { padding: 4px 0; border-bottom: 1px dashed var(--border); } .edit, .promote, .inline-promote { display: grid; gap: 12px; max-width: 720px; } .inline-promote { display: contents; } form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--muted); } form label.checkbox { flex-direction: row; align-items: center; gap: 8px; } form input[type="text"], form input:not([type]), form select, form textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 4px; } form textarea { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.92em; } form .actions { display: flex; gap: 12px; align-items: center; } button { font: inherit; padding: 6px 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); border-radius: 4px; cursor: pointer; } button:hover { filter: brightness(0.92); } .cancel { color: var(--muted); text-decoration: none; } .cancel:hover { text-decoration: underline; color: var(--bad); } .readonly pre { background: var(--bg-alt); padding: 12px; border: 1px solid var(--border); border-radius: 4px; white-space: pre-wrap; } table.classify { width: 100%; border-collapse: collapse; margin-top: 16px; } table.classify th, table.classify td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } table.classify input, table.classify select { width: 100%; } .error { color: var(--bad); } /* Tasks section — HTMX-driven VTODO writeback (phase 2.b). */ .tasks .cal-block { border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; margin: 8px 0 16px; background: var(--surface); } .tasks .cal-block h3 { font-size: 0.95em; margin: 0 0 8px; color: var(--muted); } .tasks ul.todo { list-style: none; padding: 0; margin: 0; } .tasks li.todo-row { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--border); } .tasks li.todo-row:last-child { border-bottom: none; } .tasks li.todo-row form.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; } .tasks li.todo-row .todo-edit { flex: 1; } .tasks li.todo-row .todo-edit input[type="text"] { flex: 1; min-width: 12em; } .tasks li.todo-row button { padding: 2px 8px; } .tasks li.todo-row button.check, .tasks li.todo-row button.x { background: var(--surface); color: var(--muted); border-color: var(--border); font-size: 1.1em; line-height: 1; padding: 2px 6px; } .tasks li.todo-row button.check:hover { color: var(--ok); border-color: var(--ok); } .tasks li.todo-row button.x:hover { color: var(--bad); border-color: var(--bad); } .tasks .todo-create { display: flex; gap: 6px; margin: 6px 0 10px; } .tasks .todo-create input[type="text"] { flex: 1; } .tasks ul.done .summary { color: var(--muted); text-decoration: line-through; flex: 1; } .banner.warn { background: var(--highlight-warn); border: 1px solid var(--warn); color: var(--warn); padding: 6px 10px; border-radius: 4px; margin: 8px 0; } /* Issues section — Gitea-issue ingest (phase 2.d). */ .issues .repo-block { border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; margin: 8px 0 16px; background: var(--surface); } .issues .repo-block h3 { font-size: 0.95em; margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; } .issues .repo-block h3 a { color: var(--accent); text-decoration: none; } .issues .repo-block h3 a:hover { text-decoration: underline; } .issues ul.issues { list-style: none; padding: 0; margin: 0; } .issues li.issue-row { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--border); flex-wrap: wrap; } .issues li.issue-row:last-child { border-bottom: none; } .issues li.issue-row .num { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; text-decoration: none; } .issues li.issue-row .title { color: var(--fg); text-decoration: none; flex: 1; min-width: 12em; } .issues li.issue-row .title:hover { text-decoration: underline; color: var(--accent); } .issues li.issue-row .label { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--accent); } .issues li.issue-row .milestone { font-size: 0.72em; padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--warn); } .issues li.issue-row .assignee { font-size: 0.78em; color: var(--muted); } .issues ul.closed .title { color: var(--muted); } /* Tree-page filter bar (phase 3b). */ .tree-section { display: block; } #tree-filterbar { padding: 12px 0; border-bottom: 1px dotted var(--border); margin-bottom: 12px; } #tree-filterbar .search { margin: 0 0 8px; display: flex; } #tree-filterbar .search input[type="search"] { width: 100%; font: inherit; padding: 6px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 4px; } #tree-filterbar .chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; } #tree-filterbar .chip-row .muted { width: 4em; flex-shrink: 0; } .mgmt-chip, .status-chip, .has-chip { display: inline-block; font-size: 0.78em; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); text-decoration: none; } .mgmt-chip:hover, .status-chip:hover, .has-chip:hover { color: var(--fg); border-color: var(--accent); } .chip-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .chip-on:hover { color: var(--accent-fg); filter: brightness(0.92); } /* Phase 5i Slice A — project scope chip. The picker uses a bare