mAi
e5dd31144a
Phase 5e slice A. New surface alongside /timeline (chronological spine) and
/dashboard (today/week buckets) — a 7×N month grid that answers "show me my
month at a glance." Monday-leading weeks per the German convention, with
adjacent-month lead-in/trail-out cells greyed to keep the grid rectangular.
web/calendar.go (new):
- calendarPayload / calendarWeek / calendarDay / calendarRow types.
- parseCalendarQuery: reads ?month=YYYY-MM (defaults to current month),
?kind=event,todo,doc (defaults to all three; creation excluded by design),
inherits the full TreeFilter via ParseTreeFilter so ?tag=work / ?mgmt=mai
scope identically to /timeline.
- handleCalendar: TTL-cached at 60s per (filter, month, kinds).
- buildCalendar: items → TreeFilter narrow → aggregate.{Todos,Events,Docs}
for the grid window → bin by YYYY-MM-DD → stable per-cell sort (timed
first, then by kind rank, then summary).
- layoutCalendarWeeks: pure function building the rectangular grid; lead
days computed from mondayWeekday(monthStart), trailing pad from
(totalCells % 7). Each cell caps visible rows at 3 and surfaces the
remainder via ExtraCount so the template emits a "+N more" drill-down
link to /timeline scoped to that single day.
- formatMonthLabel: German month names (Mai, März, Juni, Dezember).
- docSummary: prefers item_link.note, falls back to last path segment of
ref_id, then ref_id verbatim.
web/templates/calendar.tmpl (new):
- Grid markup as a <table role="grid"> — semantically a calendar grid,
works without JS, and the layout calc already pre-chunks weeks.
- Header carries h1 (German month label), prev/next/today nav, and the
cached/fresh + total-rows counts line.
- Each cell: .calendar-cell, .is-today, .adjacent-month conditional
classes; .today-pill rendered when IsToday.
- Rows: .row-event / .row-todo (+ .overdue) / .row-doc with a leading
time slot and an <a> to /i/<itemPath>.
- "+N more" link drills into /timeline?from=YYYY-MM-DD&to=YYYY-MM-DD.
web/static/style.css:
- ~95 lines of minimal grid styling: 7-column table-fixed, 110px cell
height, today border accent, adjacent-month opacity 0.4, per-kind row
border-left colour. Slice B will refine cell sizing + add the mobile
breakpoint + chip strip.
web/server.go:
- New calendar template parse (layout.tmpl + calendar.tmpl), calendar
field on Server (cache.TTLCache[*calendarPayload]), route registration
GET /calendar.
web/templates/layout.tmpl:
- Nav anchor added between timeline and graph.
web/server_test.go:
- TestLayoutHasViewportMeta now probes /calendar too.
Tests (web/calendar_test.go — pure unit):
- TestCalendarLayoutMondayLead, TestCalendarLayoutTrailingPad: grid math
for Friday-leading (May 2026) and Monday-trailing (June 2026) months.
- TestCalendarTodayCell: IsToday flag lands on the right cell only.
- TestCalendarCellRowOverflow: >3 seeded rows → 3 visible + ExtraCount=2.
- TestMondayWeekday: Sunday→6, Monday→0 conversion.
- TestFormatMonthLabel: German month strings.
- TestParseCalendarQuery{Defaults,MonthParam,KindFilter}: URL parsing.
Tests (web/calendar_integration_test.go — DB integration):
- TestCalendarRendersMonthGrid: empty-data smoke through srv.Routes().
- TestCalendarSurfacesDatedLink: seeds an item_link on today, asserts
the rendered cell carries the note text + .is-today class.
- TestCalendarFilterScopeByTag: seeds two tagged items, confirms
?tag=<work-tag> only renders the work-item rows.
- TestCalendarAdjacentMonthDays: May 2026 (Fri-leading) renders the
Apr 27 lead-in cell with .adjacent-month.
- TestCalendarNavPrevNextLinks: prev → 2026-04, next → 2026-06 links
present.
Slice B follows: refined CSS, mobile breakpoint (≤480px → vertical list
of days), HTMX filter chip strip, docs/design.md §17.
847 lines
37 KiB
CSS
847 lines
37 KiB
CSS
/* 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
|
|
`<html data-theme="light">` 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; }
|
|
header { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 8px 16px; }
|
|
header nav { display: flex; gap: 16px; align-items: center; }
|
|
header .logout-form { margin: 0 0 0 auto; }
|
|
header .logout-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; font: inherit; }
|
|
header .logout-btn:hover { color: var(--bad); text-decoration: underline; }
|
|
header .brand { font-weight: 600; font-size: 1.1em; color: var(--fg); text-decoration: none; }
|
|
header a { color: var(--accent); text-decoration: none; }
|
|
header a:hover { text-decoration: underline; }
|
|
main { padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
|
|
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); }
|
|
#tree-filterbar small { opacity: 0.75; margin-left: 2px; }
|
|
.tree-section .empty { padding: 24px; color: var(--muted); }
|
|
.tree-section .clear { color: var(--bad); }
|
|
|
|
/* Documents / PER-dated artifacts (phase 3c). */
|
|
.documents { margin-top: 24px; }
|
|
.documents .doc-add { display: flex; gap: 6px; margin: 8px 0 12px; align-items: center; flex-wrap: wrap; }
|
|
.documents .doc-add input[type="text"] { flex: 1; min-width: 8em; }
|
|
.documents ul.docs { list-style: none; padding: 0; margin: 0; }
|
|
.documents li.doc-row {
|
|
display: flex; gap: 8px; align-items: baseline; padding: 6px 0;
|
|
border-bottom: 1px dotted var(--border); flex-wrap: wrap;
|
|
}
|
|
.documents li.doc-row:last-child { border-bottom: none; }
|
|
.documents li.doc-row.highlight { background: var(--highlight); padding-left: 8px; border-left: 3px solid var(--warn); }
|
|
.documents .per {
|
|
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88em;
|
|
color: var(--accent); background: var(--bg-alt); padding: 1px 6px; border-radius: 4px;
|
|
}
|
|
.documents .ref-type {
|
|
display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px;
|
|
background: var(--surface); border: 1px solid var(--border); color: var(--muted);
|
|
}
|
|
.documents .ref-type-document { color: var(--accent); border-color: var(--accent); }
|
|
.documents .ref-type-note { color: var(--ok); border-color: var(--ok); }
|
|
.documents .ref-type-url { color: var(--warn); border-color: var(--warn); }
|
|
.documents .ref-id { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; flex: 1; min-width: 8em; }
|
|
.documents .doc-note { color: var(--muted); font-style: italic; }
|
|
.documents .doc-remove .x {
|
|
background: var(--surface); color: var(--muted); border-color: var(--border);
|
|
font-size: 1.05em; line-height: 1; padding: 2px 6px;
|
|
}
|
|
.documents .doc-remove .x:hover { color: var(--bad); border-color: var(--bad); }
|
|
|
|
/* --- /admin/bulk page --- */
|
|
.bulk-section .counts { margin: 8px 0; color: var(--muted); }
|
|
#bulk-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
|
|
#bulk-filter input[type=search] { width: 28em; }
|
|
#bulk-filter select[multiple] { min-width: 9em; }
|
|
#bulk-filter label.checkbox { display: inline-flex; align-items: center; gap: 4px; }
|
|
#bulk-actions fieldset.actions {
|
|
margin: 12px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px;
|
|
}
|
|
#bulk-actions .action-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
|
#bulk-actions .action-row label { display: inline-flex; flex-direction: column; font-size: 0.85em; color: var(--muted); }
|
|
#bulk-actions .action-row input, #bulk-actions .action-row select { padding: 4px 6px; }
|
|
#bulk-actions button[type=submit] { padding: 6px 14px; align-self: flex-end; }
|
|
table.bulk { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.92em; }
|
|
table.bulk th, table.bulk td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
|
|
table.bulk th { background: var(--bg-alt); color: var(--muted); font-weight: 500; }
|
|
table.bulk td.cell-tags .tag { margin-right: 4px; }
|
|
table.bulk .chip-x {
|
|
background: transparent; border: none; color: var(--muted); padding: 0 4px; cursor: pointer; font-size: 1em;
|
|
}
|
|
table.bulk .chip-x:hover { color: var(--bad); }
|
|
table.bulk .chip-add { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }
|
|
table.bulk .chip-add input { padding: 1px 4px; font-size: 0.85em; width: 7em; }
|
|
table.bulk .chip-add-btn {
|
|
background: transparent; border: 1px solid var(--border); color: var(--accent);
|
|
padding: 0 6px; font-size: 0.9em; cursor: pointer; min-height: 0; border-radius: 3px;
|
|
}
|
|
table.bulk .chip-add-btn:hover { background: var(--accent); color: var(--accent-fg); }
|
|
|
|
/* --- /dashboard --- */
|
|
.dashboard .dash-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
|
|
.dashboard .card {
|
|
border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px;
|
|
background: var(--surface);
|
|
}
|
|
.dashboard .card header h2 { margin: 0 0 4px 0; font-size: 1.1em; }
|
|
.dashboard .card header .task-groups { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85em; margin: 4px 0 8px; }
|
|
.dashboard .card header .task-groups .overdue { color: var(--bad); font-weight: 600; }
|
|
.dashboard .empty { padding: 8px 0; font-style: italic; }
|
|
.dashboard .task-list, .dashboard .issue-list, .dashboard .doc-list { list-style: none; padding: 0; margin: 0; }
|
|
.dashboard .task-row, .dashboard .issue-row, .dashboard .doc-row {
|
|
display: flex; gap: 8px; align-items: baseline;
|
|
padding: 6px 0; border-bottom: 1px dotted var(--border); flex-wrap: wrap;
|
|
}
|
|
.dashboard .task-row:last-child, .dashboard .issue-row:last-child, .dashboard .doc-row:last-child { border-bottom: none; }
|
|
.dashboard .task-row .check button {
|
|
background: transparent; border: 1px solid var(--border); border-radius: 3px;
|
|
padding: 0 6px; cursor: pointer; color: var(--muted);
|
|
}
|
|
.dashboard .task-row .check button:hover { color: var(--ok); border-color: var(--ok); }
|
|
.dashboard .task-row .proj, .dashboard .issue-row .proj, .dashboard .doc-row .proj {
|
|
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; color: var(--muted);
|
|
min-width: 10em;
|
|
}
|
|
.dashboard .task-row .summary { flex: 1; }
|
|
.dashboard .task-row .due { font-size: 0.85em; color: var(--muted); }
|
|
.dashboard .task-row .due.bad { color: var(--bad); font-weight: 600; }
|
|
.dashboard .task-row.bucket-overdue { background: var(--highlight-bad); }
|
|
.dashboard .issue-row .iss { flex: 1; }
|
|
.dashboard .issue-row .label {
|
|
font-size: 0.72em; padding: 1px 6px; border-radius: 999px;
|
|
background: var(--bg-alt); color: var(--muted); border: 1px solid var(--border);
|
|
}
|
|
.dashboard .issue-row .upd { font-size: 0.8em; }
|
|
|
|
/* --- /graph --- */
|
|
.graph-canvas { overflow: auto; border: 1px solid var(--border); margin-top: 12px; background: var(--bg); }
|
|
.graph-svg { display: block; }
|
|
#graph-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
|
|
#graph-filterbar input[type=search] { width: 22em; }
|
|
#graph-filterbar select[multiple] { min-width: 9em; }
|
|
#graph-filterbar .download { color: var(--accent); margin-left: auto; }
|
|
.graph-legend { margin: 8px 0; font-size: 0.85em; }
|
|
.graph-legend .legend-key {
|
|
display: inline-block; padding: 2px 8px; border-radius: 3px;
|
|
border: 2px solid; margin-right: 4px; font-family: ui-monospace, monospace; font-size: 0.85em;
|
|
}
|
|
.graph-legend .key-mai { border-color: var(--graph-mai); color: var(--graph-mai); }
|
|
.graph-legend .key-self { border-color: var(--graph-self); color: var(--graph-self); }
|
|
.graph-legend .key-external { border-color: var(--graph-external); color: var(--graph-external); }
|
|
.graph-legend .key-mixed { border-color: var(--graph-mixed); color: var(--graph-mixed); border-style: dashed; }
|
|
.graph-legend .key-unmanaged { border-color: var(--graph-unmanaged); color: var(--graph-unmanaged); }
|
|
|
|
/* --- /dashboard polish (3g) --- */
|
|
.dashboard .counts .refresh { margin-left: 12px; color: var(--accent); cursor: pointer; }
|
|
.dashboard .counts .refresh:hover { text-decoration: underline; }
|
|
.dashboard .card-collapsed {
|
|
margin: 6px 0; padding: 4px 12px;
|
|
border-left: 3px solid var(--border); font-style: italic;
|
|
}
|
|
.dashboard .card-stale header h2 { color: var(--warn); }
|
|
.dashboard .stale-list { list-style: none; padding: 0; margin: 0; }
|
|
.dashboard .stale-row {
|
|
display: flex; gap: 8px; align-items: baseline;
|
|
padding: 6px 0; border-bottom: 1px dotted var(--border);
|
|
}
|
|
.dashboard .stale-row:last-child { border-bottom: none; }
|
|
.dashboard .stale-row .repo { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; }
|
|
.dashboard .stale-row .last-active { color: var(--warn); font-size: 0.9em; }
|
|
|
|
/* --- Issues writeback (3h) --- */
|
|
.issues .new-issue { margin: 8px 0; }
|
|
.issues .new-issue-form, .issues .comment-form {
|
|
display: flex; flex-direction: column; gap: 4px; padding: 6px 0;
|
|
}
|
|
.issues .new-issue-form input[name=title] { width: 100%; }
|
|
.issues .new-issue-form textarea, .issues .comment-form textarea {
|
|
width: 100%; resize: vertical; font-family: inherit; padding: 4px;
|
|
}
|
|
.issues .issue-row form { display: inline-flex; align-items: center; margin-left: 4px; }
|
|
.issues .issue-row form button {
|
|
background: transparent; border: 1px solid var(--border); border-radius: 3px;
|
|
padding: 1px 6px; cursor: pointer; color: var(--muted); font-size: 0.85em;
|
|
}
|
|
.issues .issue-close button:hover { color: var(--ok); border-color: var(--ok); }
|
|
.issues .issue-reopen button:hover { color: var(--warn); border-color: var(--warn); }
|
|
.issues .issue-comment summary { font-size: 0.85em; cursor: pointer; }
|
|
|
|
/* ------------------------------------------------------------------
|
|
Phase 3i — Mobile responsiveness
|
|
Two breakpoints: tablet (≤ 768px), phone (≤ 480px).
|
|
Goals:
|
|
- Touch targets ≥ 44px on phone for buttons + chip toggles.
|
|
- Filter-chip strips become horizontal-scroll with edge fade.
|
|
- Tables (classify, bulk) become card lists.
|
|
- Dashboard cards stack vertically.
|
|
- SVG graph stays scrollable inside its container.
|
|
- Header nav wraps cleanly without burger (small site, ≤ 5 links).
|
|
------------------------------------------------------------------ */
|
|
|
|
@media (max-width: 768px) {
|
|
main { padding: 12px 14px; }
|
|
header { padding: 8px 12px; }
|
|
header nav { flex-wrap: wrap; gap: 12px; }
|
|
header .logout-form { margin-left: 0; }
|
|
|
|
/* Filter chip strips become horizontal-scrollable. */
|
|
.tagbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
#tree-filterbar .chip-row,
|
|
#bulk-filter,
|
|
#dashboard-filter,
|
|
#graph-filterbar {
|
|
flex-wrap: nowrap; white-space: nowrap;
|
|
}
|
|
/* Form rows inside filter bars can still wrap their internal labels. */
|
|
#tree-filterbar .chip-row .muted { position: sticky; left: 0; background: var(--bg); padding-right: 6px; z-index: 1; }
|
|
|
|
/* Touch targets — chip buttons, status pills, action buttons. */
|
|
.tag, .mgmt-chip, .status-chip, .has-chip, .tag-on, .chip-on { padding: 6px 10px; font-size: 0.85em; }
|
|
button { padding: 10px 16px; min-height: 44px; }
|
|
.add { font-size: 1.4em; padding: 4px 10px; }
|
|
|
|
/* Trees: tighter indent so deep paths still fit. */
|
|
.tree ul { padding-left: 10px; }
|
|
.node { padding: 4px 0; }
|
|
.slug { display: block; margin-left: 0; }
|
|
|
|
/* Tables → card lists (classify / bulk / caldav admin). */
|
|
table.classify, table.bulk { display: block; border: none; }
|
|
table.classify thead, table.bulk thead { display: none; }
|
|
table.classify tbody, table.bulk tbody { display: block; }
|
|
table.classify tr, table.bulk tr {
|
|
display: block; margin-bottom: 12px; padding: 10px 12px;
|
|
border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
|
|
}
|
|
table.classify td, table.bulk td {
|
|
display: block; padding: 4px 0; border: none;
|
|
}
|
|
table.classify td::before, table.bulk td::before {
|
|
content: attr(data-label); display: block;
|
|
color: var(--muted); font-size: 0.8em; margin-bottom: 2px;
|
|
}
|
|
|
|
/* Bulk action row wraps. */
|
|
#bulk-actions .action-row { flex-direction: column; align-items: stretch; gap: 8px; }
|
|
#bulk-actions .action-row label { width: 100%; }
|
|
#bulk-actions button[type=submit] { width: 100%; }
|
|
|
|
/* Dashboard: cards already stack in 1-col grid; widen them a bit. */
|
|
.dashboard .card { padding: 10px 12px; }
|
|
.dashboard .task-row, .dashboard .issue-row, .dashboard .doc-row, .dashboard .stale-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
.dashboard .task-row .proj, .dashboard .issue-row .proj, .dashboard .doc-row .proj, .dashboard .stale-row .proj {
|
|
min-width: 0; flex-basis: 100%; font-size: 0.78em;
|
|
}
|
|
.dashboard .task-row .check button { padding: 8px 14px; }
|
|
|
|
/* Detail page edit form — single column. */
|
|
.edit, .promote, .inline-promote { grid-template-columns: 1fr; }
|
|
|
|
/* Issues writeback — collapsed forms expand to full width. */
|
|
.issues .repo-block { padding: 0 4px; }
|
|
.issues .issue-row { flex-wrap: wrap; }
|
|
.issues .issue-row form { width: 100%; margin-left: 0; margin-top: 4px; }
|
|
|
|
/* Graph: SVG container scrolls; the SVG itself keeps its natural size
|
|
so pinch-zoom (viewport meta) just works. */
|
|
.graph-canvas { max-width: 100vw; max-height: 75vh; overflow: auto; }
|
|
|
|
/* Documents section — chips wrap. */
|
|
.documents li.doc-row { flex-wrap: wrap; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
html { font-size: 15px; } /* nudge up so default body text is legible without zooming */
|
|
header { padding: 6px 10px; }
|
|
header nav { gap: 8px; }
|
|
header nav a { font-size: 0.95em; }
|
|
main { padding: 8px 10px; }
|
|
|
|
/* Even tighter chip-row scroll behaviour on phone. */
|
|
.tag, .mgmt-chip, .status-chip, .has-chip { padding: 8px 12px; }
|
|
|
|
/* Inline forms in tree / classify use stacked layout. */
|
|
.classify .inline-classify { display: block; }
|
|
.classify .inline-classify select, .classify .inline-classify button { width: 100%; margin-top: 4px; }
|
|
|
|
/* Dashboard header counts wrap onto two lines. */
|
|
.dashboard .card header .task-groups { gap: 6px; font-size: 0.78em; }
|
|
|
|
/* Bulk page — drop the primary-path column entirely on phone to save space. */
|
|
table.bulk td.col-path { display: none; }
|
|
}
|
|
|
|
/* Wide-laptop tier: anchor max-width so the page doesn't sprawl on a 4K monitor. */
|
|
@media (min-width: 1280px) {
|
|
main { max-width: 1200px; }
|
|
.dashboard .dash-grid { grid-template-columns: 1fr 1fr; }
|
|
.dashboard .card-stale { grid-column: span 2; }
|
|
}
|
|
|
|
/* Graph fit-to-screen toggle (Phase 3i): when ".fit" is on the canvas,
|
|
the SVG width:100% squashes it to the viewport instead of natural size.
|
|
Maintains aspect ratio via preserveAspectRatio default. */
|
|
.graph-canvas .graph-controls {
|
|
display: flex; gap: 8px; align-items: center; padding: 4px 8px; margin: 0;
|
|
background: var(--bg-alt); border-bottom: 1px solid var(--border);
|
|
}
|
|
.graph-canvas .fit-screen {
|
|
font-size: 0.85em; padding: 4px 10px; min-height: 0;
|
|
background: var(--surface); color: var(--accent); border: 1px solid var(--border);
|
|
}
|
|
.graph-canvas .fit-screen:hover { background: var(--accent); color: var(--accent-fg); }
|
|
.graph-canvas.fit .graph-svg { width: 100%; height: auto; }
|
|
|
|
/* --- Dashboard Events card (Phase 3l) --- */
|
|
.dashboard .card-events .event-day { margin-bottom: 12px; }
|
|
.dashboard .card-events .event-day:last-child { margin-bottom: 0; }
|
|
.dashboard .card-events .event-day h3 {
|
|
font-size: 0.85em; margin: 8px 0 4px; color: var(--muted); font-weight: 500;
|
|
}
|
|
.dashboard .card-events .event-list { list-style: none; padding: 0; margin: 0; }
|
|
.dashboard .card-events .event-row {
|
|
display: flex; gap: 8px; align-items: baseline;
|
|
padding: 4px 0; border-bottom: 1px dotted var(--border); flex-wrap: wrap;
|
|
}
|
|
.dashboard .card-events .event-row:last-child { border-bottom: none; }
|
|
.dashboard .card-events .event-row .start {
|
|
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88em;
|
|
color: var(--muted); min-width: 4.5em;
|
|
}
|
|
.dashboard .card-events .event-row .proj {
|
|
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; color: var(--muted);
|
|
}
|
|
.dashboard .card-events .event-row .summary { flex: 1; min-width: 8em; }
|
|
.dashboard .card-events .event-row .loc { font-size: 0.85em; }
|
|
.dashboard .card-events .event-row .recurring {
|
|
font-size: 0.85em; color: var(--accent); cursor: help;
|
|
}
|
|
|
|
/* --- /admin index (Phase 3o) --- */
|
|
.admin-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 16px;
|
|
margin: 16px 0 32px;
|
|
}
|
|
.admin-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
background: var(--surface);
|
|
}
|
|
.admin-card.disabled { opacity: 0.55; }
|
|
.admin-card h2 { margin: 0 0 4px; font-size: 1.05em; }
|
|
.admin-card h2 a { color: var(--accent); text-decoration: none; }
|
|
.admin-card h2 a:hover { text-decoration: underline; }
|
|
.admin-card .count { margin: 0 0 8px; font-size: 0.95em; }
|
|
.admin-card .count strong { font-size: 1.4em; color: var(--fg); }
|
|
.admin-card .desc { margin: 0; font-size: 0.9em; color: var(--muted); }
|
|
|
|
.admin-system { margin-top: 32px; padding-top: 16px; border-top: 1px dotted var(--border); }
|
|
.admin-system h2 { font-size: 1.05em; margin: 0 0 8px; color: var(--muted); }
|
|
.system-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 6px 16px;
|
|
margin: 0;
|
|
font-size: 0.92em;
|
|
}
|
|
.system-grid dt { font-weight: 600; color: var(--muted); }
|
|
.system-grid dd { margin: 0; }
|
|
.system-grid code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.9em; color: var(--accent); }
|
|
.system-grid .ok { color: var(--ok); font-weight: 500; }
|
|
|
|
.health-list { list-style: none; padding: 0; margin: 0; }
|
|
.health-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
|
|
.health-row .dot {
|
|
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--muted);
|
|
}
|
|
.health-ok .dot { background: var(--ok); }
|
|
.health-down .dot { background: var(--bad); }
|
|
.health-row a { color: var(--muted); text-decoration: none; }
|
|
.health-row a:hover { color: var(--accent); }
|
|
|
|
/* --- /timeline (Phase 4a) --- */
|
|
.timeline .spine { list-style: none; padding: 0; margin: 16px 0; }
|
|
.timeline .spine-day {
|
|
border-left: 2px solid var(--border);
|
|
padding: 4px 0 12px 16px;
|
|
margin-left: 8px;
|
|
position: relative;
|
|
}
|
|
.timeline .spine-day.sticky-today {
|
|
border-left-color: var(--accent);
|
|
}
|
|
.timeline .spine-day.sticky-tomorrow {
|
|
border-left-color: var(--ok);
|
|
}
|
|
.timeline .day-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
|
|
.timeline .day-header h2 {
|
|
margin: 0; font-size: 0.95em; font-weight: 600; color: var(--muted);
|
|
}
|
|
.timeline .day-header h2 a { color: inherit; text-decoration: none; }
|
|
.timeline .day-header h2 a:hover { color: var(--accent); }
|
|
.timeline .sticky-pill {
|
|
display: inline-block;
|
|
background: var(--accent); color: var(--accent-fg);
|
|
padding: 1px 8px; border-radius: 9999px;
|
|
font-size: 0.75em; font-weight: 600; text-transform: uppercase;
|
|
}
|
|
.timeline .spine-day.sticky-tomorrow .sticky-pill { background: var(--ok); }
|
|
.timeline .day-rows { list-style: none; padding: 0; margin: 0; }
|
|
.timeline .row {
|
|
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
|
|
padding: 4px 6px;
|
|
border-bottom: 1px dotted transparent;
|
|
font-size: 0.95em;
|
|
}
|
|
.timeline .row:hover { background: var(--surface-hover); }
|
|
.timeline .row.far-future { opacity: 0.5; }
|
|
.timeline .row .time {
|
|
display: inline-block; min-width: 48px; font-variant-numeric: tabular-nums;
|
|
color: var(--muted); font-size: 0.85em;
|
|
}
|
|
.timeline .row .proj { color: var(--accent); text-decoration: none; font-size: 0.9em; }
|
|
.timeline .row .proj:hover { text-decoration: underline; }
|
|
.timeline .row .summary { flex: 1; }
|
|
.timeline .kind-badge {
|
|
font-size: 0.7em; font-weight: 600; text-transform: uppercase;
|
|
padding: 1px 6px; border-radius: 3px;
|
|
background: var(--border); color: var(--muted);
|
|
}
|
|
.timeline .kind-event { background: var(--kind-event-bg); color: var(--kind-event-fg); }
|
|
.timeline .kind-todo { background: var(--kind-todo-bg); color: var(--kind-todo-fg); }
|
|
.timeline .kind-doc { background: var(--kind-doc-bg); color: var(--kind-doc-fg); }
|
|
.timeline .kind-creation { background: var(--kind-creation-bg); color: var(--kind-creation-fg); }
|
|
.timeline .row .check button,
|
|
.timeline .row .x {
|
|
background: none; border: 1px solid var(--border);
|
|
border-radius: 3px; padding: 0 6px; cursor: pointer;
|
|
font-size: 0.9em; color: var(--muted);
|
|
}
|
|
.timeline .row .check button:hover { color: var(--ok); border-color: var(--ok); }
|
|
.timeline .row .x:hover { color: var(--bad); border-color: var(--bad); }
|
|
.timeline .row .todo-edit input[type=text] { width: 14em; max-width: 40vw; }
|
|
.timeline .row .todo-edit input[type=date] { width: 9em; }
|
|
.timeline .row.row-todo.done .summary { text-decoration: line-through; color: var(--muted); }
|
|
.timeline .row .per {
|
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
|
font-size: 0.85em; color: var(--accent);
|
|
}
|
|
.timeline .row .ref-id {
|
|
font-size: 0.85em; color: var(--muted); text-decoration: none;
|
|
max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.timeline .row .ref-id:hover { color: var(--accent); text-decoration: underline; }
|
|
.timeline .row .ref-type {
|
|
font-size: 0.7em; font-weight: 600; padding: 1px 4px;
|
|
border-radius: 3px; background: var(--border); color: var(--muted);
|
|
}
|
|
.timeline .row .creation-marker { font-style: italic; }
|
|
.timeline .row .recurring { color: var(--accent); font-size: 0.85em; cursor: help; }
|
|
.timeline .row .duration { font-size: 0.8em; }
|
|
.timeline .empty { padding: 16px 0; font-style: italic; }
|
|
|
|
/* --- /dashboard task-row edit + delete (Phase 4a) --- */
|
|
.dashboard .task-row .task-edit { font-size: 0.85em; }
|
|
.dashboard .task-row .task-edit summary {
|
|
cursor: pointer; padding: 0 4px; user-select: none;
|
|
}
|
|
.dashboard .task-row .task-edit summary:hover { color: var(--accent); }
|
|
.dashboard .task-row .task-edit .todo-edit {
|
|
display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
|
|
}
|
|
.dashboard .task-row .task-edit input[type=text] { width: 16em; max-width: 50vw; }
|
|
.dashboard .task-row .task-edit input[type=date] { width: 9em; }
|
|
.dashboard .task-row .todo-delete {
|
|
display: inline-flex; align-items: center;
|
|
}
|
|
.dashboard .task-row .todo-delete .x {
|
|
background: none; border: 1px solid var(--border);
|
|
border-radius: 3px; padding: 0 6px; cursor: pointer;
|
|
font-size: 0.9em; color: var(--muted);
|
|
}
|
|
.dashboard .task-row .todo-delete .x:hover { color: var(--bad); border-color: var(--bad); }
|
|
|
|
/* --- Theme toggle (Phase 4b) --- */
|
|
header .theme-toggle {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--fg);
|
|
padding: 2px 8px;
|
|
font-size: 1.05em;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
min-height: 0;
|
|
}
|
|
header .theme-toggle:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
header .theme-toggle .theme-icon {
|
|
display: inline-block;
|
|
font-size: 1.2em;
|
|
line-height: 1;
|
|
}
|
|
@media (max-width: 480px) {
|
|
header .theme-toggle { padding: 6px 10px; font-size: 1em; min-height: 36px; }
|
|
}
|
|
|
|
/* --- Public listing (Phase 4d) --- */
|
|
fieldset.public-listing {
|
|
margin: 20px 0 8px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg-alt);
|
|
}
|
|
fieldset.public-listing legend {
|
|
font-weight: 600;
|
|
font-size: 0.95em;
|
|
padding: 0 6px;
|
|
color: var(--accent);
|
|
}
|
|
fieldset.public-listing > p.muted {
|
|
margin: 4px 0 12px;
|
|
font-size: 0.85em;
|
|
}
|
|
fieldset.public-listing label { margin-top: 8px; }
|
|
.public-screenshots { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
|
|
.public-screenshot-row { display: flex; gap: 6px; align-items: center; }
|
|
.public-screenshot-row input[type=url] { flex: 1; }
|
|
.public-screenshot-remove {
|
|
background: var(--surface); color: var(--muted);
|
|
border: 1px solid var(--border); border-radius: 3px;
|
|
padding: 2px 8px; font-size: 1em; line-height: 1; cursor: pointer; min-height: 0;
|
|
}
|
|
.public-screenshot-remove:hover { color: var(--bad); border-color: var(--bad); }
|
|
.public-screenshot-add {
|
|
margin-top: 6px;
|
|
background: transparent; color: var(--accent);
|
|
border: 1px solid var(--border); border-radius: 4px;
|
|
padding: 4px 10px; font-size: 0.9em; cursor: pointer; min-height: 0;
|
|
}
|
|
.public-screenshot-add:hover { background: var(--accent); color: var(--accent-fg); }
|
|
|
|
/* --- Detail-page collapsibles (Phase 4e) --- */
|
|
details.proj-section {
|
|
margin: 16px 0;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 8px;
|
|
}
|
|
details.proj-section[open] {
|
|
border-bottom: 1px dotted var(--border);
|
|
padding-bottom: 8px;
|
|
}
|
|
details.proj-section > summary.proj-section-summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
font-size: 1.05em;
|
|
font-weight: 600;
|
|
padding: 4px 0 4px 22px;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
details.proj-section > summary.proj-section-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
details.proj-section > summary.proj-section-summary::before {
|
|
content: "▸";
|
|
position: absolute;
|
|
left: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.9em;
|
|
transition: transform 0.12s;
|
|
display: inline-block;
|
|
}
|
|
details.proj-section[open] > summary.proj-section-summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
details.proj-section > summary.proj-section-summary:hover { color: var(--accent); }
|
|
details.proj-section > summary.proj-section-summary small { font-weight: 400; }
|
|
|
|
.proj-section-reset {
|
|
color: var(--muted);
|
|
font-size: 0.85em;
|
|
text-decoration: none;
|
|
margin-left: auto;
|
|
}
|
|
.proj-section-reset:hover { color: var(--accent); text-decoration: underline; }
|
|
.visually-hidden {
|
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
}
|
|
|
|
/* --- Calendar month-grid view (Phase 5e) --- */
|
|
.calendar-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.calendar-header h1 { margin: 0; }
|
|
.calendar-nav {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
}
|
|
.calendar-nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
.calendar-nav a:hover { color: var(--accent); border-color: var(--accent); }
|
|
.calendar-nav .today { background: var(--surface-alt, transparent); }
|
|
.calendar-grid {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.calendar-grid thead th {
|
|
text-align: left;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
font-size: 0.85em;
|
|
padding: 4px 6px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.calendar-cell {
|
|
vertical-align: top;
|
|
border: 1px solid var(--border);
|
|
padding: 4px 6px;
|
|
height: 110px;
|
|
width: 14.2857%; /* 1/7 */
|
|
}
|
|
.calendar-cell.adjacent-month { opacity: 0.4; }
|
|
.calendar-cell.is-today {
|
|
border-color: var(--accent);
|
|
box-shadow: inset 0 0 0 1px var(--accent);
|
|
}
|
|
.cell-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
}
|
|
.cell-header .day-num {
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
}
|
|
.today-pill {
|
|
font-size: 0.7em;
|
|
background: var(--accent);
|
|
color: var(--accent-fg);
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.cell-rows { list-style: none; padding: 0; margin: 0; }
|
|
.cell-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
font-size: 0.85em;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
margin-bottom: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.cell-row .time { color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
.cell-row .row-link { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
|
|
.cell-row .row-link:hover { color: var(--accent); }
|
|
.cell-row.row-event { border-left: 3px solid var(--accent); padding-left: 6px; }
|
|
.cell-row.row-todo { border-left: 3px solid var(--ok, #5e8ad0); padding-left: 6px; }
|
|
.cell-row.row-todo.overdue { border-left-color: var(--warn, #d08a5e); }
|
|
.cell-row.row-doc { border-left: 3px solid var(--muted); padding-left: 6px; opacity: 0.85; }
|
|
.cell-more {
|
|
display: inline-block;
|
|
font-size: 0.78em;
|
|
margin-top: 2px;
|
|
text-decoration: none;
|
|
}
|
|
.cell-more:hover { color: var(--accent); text-decoration: underline; }
|