43 lines
9.6 KiB
CSS
43 lines
9.6 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--surface-canvas: #e8f0f5; --surface-raised: #fff; --surface-subtle: #f4f8fb;
|
|
--text-primary: #17263a; --text-secondary: #4f6278; --border-default: #cedce7;
|
|
--accent: #086fc7; --accent-subtle: #e8f4ff; --success: #15725d; --warning: #865200;
|
|
--font-family-ui: "Inter Variable", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC Variable", system-ui, sans-serif;
|
|
--radius-control: 10px; --radius-card: 14px;
|
|
}
|
|
[data-theme="dark"] { color-scheme: dark; --surface-canvas: #07131f; --surface-raised: #102335; --surface-subtle: #162c40; --text-primary: #edf7ff; --text-secondary: #b5c6d5; --border-default: #29445a; --accent: #72c5ff; --accent-subtle: #123b5b; --success: #73d9bb; --warning: #f2bd66; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; padding: 24px; background: var(--surface-subtle); color: var(--text-primary); font: 13px/1.65 var(--font-family-ui); }
|
|
button, select { font: inherit; color: inherit; }
|
|
button { cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-control); padding: 8px 12px; background: transparent; }
|
|
button:hover { background: var(--accent-subtle); }
|
|
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
|
select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-raised); }
|
|
h1, h2, h3, p { margin: 0; } h1 { font-size: 24px; font-weight: 600; line-height: 1.4; } h2 { font-size: 14px; } h3 { font-size: 13px; }
|
|
.demo-bar, .demo-footer { max-width: 1500px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.demo-bar { margin-bottom: 16px; }.demo-bar strong { font-weight: 600; }.demo-bar span { margin-left: 16px; color: var(--text-secondary); font-size: 12px; }
|
|
#theme { border-color: var(--border-default); }
|
|
.workspace { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 240px minmax(0, 1fr) 328px; height: calc(100dvh - 132px); min-height: 640px; border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); }
|
|
.sidebar { display: flex; flex-direction: column; padding: 24px 16px; background: var(--surface-canvas); border-right: 1px solid var(--border-default); overflow: auto; }
|
|
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-size: 16px; }.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-control); color: var(--surface-raised); background: var(--text-primary); font-weight: 700; }
|
|
label, .eyebrow { font-size: 11px; color: var(--text-secondary); }label { display: block; margin-bottom: 8px; }
|
|
.muted, .metadata, .sidebar-note, .task-footnote { color: var(--text-secondary); font-size: 12px; }
|
|
#project-meta { margin: 8px 0 32px; }.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.section-heading > span { color: var(--text-secondary); font-size: 11px; }
|
|
#sessions { margin-top: 12px; display: grid; gap: 8px; }#sessions button { text-align: left; width: 100%; padding: 12px; }#sessions button[aria-current="true"] { color: var(--accent); background: var(--surface-raised); border-color: var(--border-default); }
|
|
#sessions small { display: block; color: var(--text-secondary); margin-top: 4px; font-size: 11px; }.sidebar-note { margin-top: auto; padding-top: 32px; line-height: 1.9; }
|
|
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }.conversation-header { padding: 24px 32px; border-bottom: 1px solid var(--border-default); }.eyebrow { margin-bottom: 8px; }.metadata { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
|
|
.messages { flex: 1; min-height: 0; overflow: auto; padding: 32px; }.message { max-width: 720px; margin: 0 auto 32px; }.message-author { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; font-weight: 600; }.message-author time { margin-left: auto; color: var(--text-secondary); font-size: 11px; font-weight: 400; }.message p { font-size: 14px; line-height: 1.9; white-space: pre-line; }.message.user p { background: var(--surface-subtle); padding: 16px; border-radius: var(--radius-card); }
|
|
.linked-task { display: block; margin-top: 16px; text-align: left; width: 100%; border-color: var(--border-default); color: var(--accent); }.linked-task small { display: block; color: var(--text-secondary); margin-top: 4px; }
|
|
.composer { padding: 16px 32px 24px; }.composer-box { padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-card); color: var(--text-secondary); }.composer-box div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 24px; font-size: 11px; }.composer > p { margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
|
|
.tasks { border-left: 1px solid var(--border-default); background: var(--surface-subtle); padding: 24px 16px; overflow: auto; }.tasks header { margin-bottom: 24px; }.tasks header p { margin-top: 4px; }.badge { border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 0 8px; }.scope-label { margin: 8px 0 16px; color: var(--text-secondary); font-size: 11px; overflow-wrap: anywhere; }
|
|
.filters { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); padding-bottom: 12px; margin-bottom: 16px; }.filters button { padding: 4px 12px; font-size: 12px; }.filters [aria-pressed="true"] { color: var(--accent); background: var(--accent-subtle); border-color: var(--accent); }
|
|
.task-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 16px; margin-bottom: 12px; }.task-card .status { flex-shrink: 0; font-size: 11px; color: var(--accent); }.task-card .status.done { color: var(--success); }.task-card p { color: var(--text-secondary); font-size: 11px; margin-top: 8px; }.empty { padding: 24px 8px; color: var(--text-secondary); text-align: center; }.demo-footer { color: var(--text-secondary); margin-top: 12px; font-size: 11px; }
|
|
.session-stats { padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }.session-stats h3 { font-weight: 500; }.stat-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 12px; gap: 16px; }.stat-grid dt { font-size: 12px; color: var(--text-secondary); }.stat-grid dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }.session-stats details { margin-top: 16px; font-size: 11px; color: var(--text-secondary); }.session-stats summary { cursor: pointer; }.session-stats details p { margin-top: 8px; }.task-heading { margin: 24px 0 12px; }.task-duration { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12px; }.task-duration span { color: var(--text-secondary); }.task-duration strong { font-weight: 500; }
|
|
.task-session { padding: 4px 0; margin-top: 4px; text-align: left; color: var(--accent); font-size: 11px; }.task-actions { display: flex; gap: 8px; margin-top: 12px; }.task-actions button { border-color: var(--border-default); padding: 4px 12px; font-size: 12px; }
|
|
.task-toolbar { display: flex; gap: 4px; }.task-toolbar button { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; color: var(--text-secondary); }#new-task { font-size: 22px; line-height: 1; }.task-toolbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }.task-toolbar .is-active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }#task-filter { margin-bottom: 16px; }#task-count { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
|
|
#task-form { padding: 16px; margin-bottom: 24px; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); }#task-form label { margin-top: 12px; }#task-form textarea, #task-form input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-primary); font: inherit; }#task-form textarea { resize: vertical; }#task-form p { margin-top: 12px; }#task-form button[type="submit"] { color: var(--accent); border-color: var(--accent); }textarea:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }.task-card h3, .task-session, #sessions button { overflow-wrap: anywhere; }
|
|
@media (max-width: 1100px) { .workspace { grid-template-columns: 200px minmax(0, 1fr) 280px; }.conversation-header, .messages { padding: 24px; }.composer { padding: 16px 24px; } }
|
|
@media (max-width: 850px) { body { padding: 16px; }.workspace { height: auto; grid-template-columns: 200px minmax(0, 1fr); }.tasks { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border-default); }#task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.task-card { margin: 0; }.messages { min-height: 280px; }.demo-footer > span:last-child { display: none; } }
|
|
@media (max-width: 560px) { body { padding: 8px; }.demo-bar { align-items: start; }.demo-bar span { display: block; margin-left: 0; }.workspace { display: flex; flex-direction: column; }.sidebar { border-right: 0; border-bottom: 1px solid var(--border-default); padding: 16px; }.brand, .sidebar-note { display: none; }#project-meta { margin: 8px 0 16px; }#sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); }#sessions button { padding: 8px; }.conversation-header, .messages { padding: 24px 16px; }.composer { padding: 16px; }#task-list { grid-template-columns: 1fr; }.demo-footer { padding: 0 8px; } }
|