chenmoranzhi/writing-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move theme menu to the header and group present chrome under it.

Browse Source 
Also align Token stats with the settings shell and drop leftover lifecycle toggle wiring.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
chenmoranzhi
2026-09-03 00:58:25 +08:00
co-authored by Cursor
parent 92b2d88738
commit 770a8fdcdc
10 changed files with 1119 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/styles.css
+240 -53
View File
@@ -1,13 +1,14 @@
/* Functional layout — agent-first, no production-line chrome */
:root {
--bg: #f4f4f5;
/* Default = modern；实际以色主题 data-color-theme 为准 */
--bg: #f8f8f8;
--surface: #fff;
--border: #d4d4d8;
--text: #18181b;
--muted: #71717a;
--accent: #2563eb;
--accent-soft: #dbeafe;
--border: #e0e0e0;
--text: #2c2c2c;
--muted: #999999;
--accent: #4a9fb0;
--accent-soft: rgba(74, 159, 176, 0.12);
--ok: #16a34a;
--warn: #ca8a04;
--danger: #dc2626;
@@ -22,11 +23,65 @@
--composer-control-h: 36px;
--font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
--font-read: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", Georgia, serif;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
font-family: var(--font-ui);
font-size: 14px;
color: var(--text);
}
/* 仿纸暖黄（护眼）*/
html[data-color-theme="paper"] {
--bg: #f5ecd7;
--surface: #fbf8f2;
--border: #d9d0c1;
--text: #3e3a35;
--muted: #8b8580;
--accent: #8b9a6b;
--accent-soft: rgba(139, 154, 107, 0.15);
--shadow: 0 8px 24px rgba(62, 58, 53, 0.1);
}
/* 现代清爽 */
html[data-color-theme="modern"] {
--bg: #f8f8f8;
--surface: #fff;
--border: #e0e0e0;
--text: #2c2c2c;
--muted: #999999;
--accent: #4a9fb0;
--accent-soft: rgba(74, 159, 176, 0.12);
--shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* 夜间暗色 */
html[data-color-theme="dark"] {
--bg: #1e1e1e;
--surface: #2d2d30;
--border: #3e3e40;
--text: #bdbbb6;
--muted: #757575;
--accent: #d4a76a;
--accent-soft: rgba(212, 167, 106, 0.15);
--shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* 豆沙绿 */
html[data-color-theme="green"] {
--bg: #dce5d9;
--surface: #f4f9f2;
--border: #c0cfbb;
--text: #2b3330;
--muted: #7a8580;
--accent: #7d9b7a;
--accent-soft: rgba(125, 155, 122, 0.15);
--shadow: 0 8px 24px rgba(43, 51, 48, 0.1);
}
html {
background: var(--bg);
color: var(--text);
}
/* 开创作后缩进左侧栏 */
body.rail-collapsed {
--books-w: var(--books-w-collapsed);
@@ -37,6 +92,8 @@ html, body {
height: 100%;
margin: 0;
overflow: hidden; /* 浏览器层永不出现页面滚动条 */
background: var(--bg);
color: var(--text);
}
button, input, textarea { font: inherit; }
a.link { color: var(--accent); text-decoration: none; }
@@ -255,7 +312,18 @@ body[data-nav-level="root"] .burst-badge { display: none; }
body.rail-collapsed .panel-rail { align-items: stretch; }
/* composer 按内容自适应；中间区吃掉剩余高度，整页锁在视口内 */
/* panel-main：上=悬停遮盖 chrome；下=工作区（左中右在 main-body / head 内） */
.panel-main {
display: grid;
grid-template-rows: minmax(0, 1fr);
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.main-stack {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
min-width: 0;
@@ -264,19 +332,105 @@ body.rail-collapsed .panel-rail { align-items: stretch; }
overflow: hidden;
}
/* 顶缘热区 + 遮盖条：不占文档流，悬停/聚焦才展开 */
.main-chrome {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 30;
height: 10px;
pointer-events: auto;
}
.main-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 0 12px;
gap: 8px 12px;
min-height: 40px;
padding: 4px 12px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(8px);
box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 8%, transparent);
transform: translateY(calc(-100% + 10px));
opacity: 0;
pointer-events: none;
transition:
transform 0.18s ease,
opacity 0.14s ease;
}
.main-chrome:hover,
.main-chrome:focus-within,
.main-chrome:has(.theme-menu[open]) {
height: auto;
min-height: 40px;
}
.main-chrome:hover .main-head,
.main-chrome:focus-within .main-head,
.main-chrome:has(.theme-menu[open]) .main-head {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.main-head-left { min-width: 0; }
.main-head-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.main-app-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
flex-wrap: wrap;
}
.main-app-nav a {
padding: 5px 10px;
border-radius: 6px;
text-decoration: none;
color: var(--muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.main-app-nav a:hover {
color: var(--text);
background: var(--accent-soft);
}
.main-app-nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.main-head-right {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
flex-wrap: wrap;
min-width: 0;
}
.main-head-action[hidden] { display: none !important; }
.work-title { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-meta { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
.main-head {
grid-template-columns: 1fr;
justify-items: stretch;
min-height: 0;
padding: 6px 10px;
gap: 6px;
}
.main-head-left { display: none; }
.main-app-nav { justify-content: flex-start; }
.main-head-right { justify-content: flex-start; }
}
@media (hover: none) {
/* 触控无悬停：顶缘仍可点开，聚焦后保持 */
.main-chrome {
height: 12px;
}
}
.main-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
@@ -1774,30 +1928,6 @@ body.design-workspace .flow-step[data-run="done"] .flow-name {
}
.sidebar-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
/* Lifecycle */
.lifecycle-toggle {
display: inline-flex;
flex: 0 0 auto;
align-self: center;
border: 1px solid var(--border);
border-radius: 8px;
padding: 2px;
background: var(--surface);
}
.lifecycle-toggle[hidden] { display: none; }
.lifecycle-btn {
border: none; background: transparent; padding: 4px 10px; border-radius: 6px;
font-size: 12px; cursor: pointer; color: var(--muted); font-weight: 500;
}
.lifecycle-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lifecycle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lifecycle-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
body[data-lifecycle="play"] { --accent: #16a34a; --accent-soft: #dcfce7; --bg: #f0fdf4; }
body[data-lifecycle="play"] .panel-rail { background: #f7fef9; }
/* Skill picker — primary action when starting */
.skill-picker {
padding: 16px;
@@ -2201,18 +2331,36 @@ body.rail-collapsed .message-feed {
.msg-review .ws-focus-hint { margin-bottom: 0; font-size: 11px; }
.msg-review .review-worker-set { margin: 0 0 6px; }
/* 顶栏「更多」：冷入口收纳 */
/* 顶栏主题菜单：色主题 + 选壳 */
.more-menu {
position: relative;
display: inline-block;
flex: 0 0 auto;
}
.more-menu-sum {
list-style: none;
cursor: pointer;
user-select: none;
line-height: 1;
height: 28px;
min-width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-inline: 6px;
}
.more-menu-sum::-webkit-details-marker { display: none; }
.more-menu-sum::marker { content: ""; }
.hamburger-icon {
display: block;
width: 14px;
height: 11px;
background:
linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.more-menu[open] .more-menu-sum {
background: var(--accent-soft);
border-color: var(--accent);
@@ -2220,22 +2368,34 @@ body.rail-collapsed .message-feed {
}
.more-menu-panel {
position: absolute;
left: auto;
right: 0;
top: calc(100% + 4px);
bottom: auto;
z-index: 80;
min-width: 132px;
min-width: 188px;
max-height: min(70vh, 480px);
overflow: auto;
padding: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 1px;
}
.composer .more-menu-panel {
top: auto;
bottom: calc(100% + 4px);
.more-menu-sep {
height: 1px;
margin: 4px 6px;
background: var(--border);
}
.more-menu-label {
padding: 6px 10px 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
}
.more-menu-item {
display: block;
@@ -2260,6 +2420,43 @@ body.rail-collapsed .message-feed {
background: var(--bg);
color: var(--accent);
}
.more-theme-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
}
.more-theme-item.is-active {
background: var(--accent-soft);
color: var(--accent);
}
.more-theme-icon {
flex: 0 0 auto;
width: 1.25em;
text-align: center;
font-size: 15px;
line-height: 1;
}
.more-theme-copy {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.more-theme-name {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.more-theme-desc {
font-size: 11px;
color: var(--muted);
font-weight: 400;
line-height: 1.2;
}
.more-theme-item.is-active .more-theme-desc {
color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
/* 提问索引气泡：决策在下方询问卡 */
.msg-bubble-index {
@@ -4487,7 +4684,7 @@ body.design-workspace .af-mosaic {
.timeline-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.timeline-empty { color: var(--muted); }
/* Composer — 单行：状态 / 输入 / 更多；菜单向上弹出不被裁切 */
/* Composer — emoji 更多在左 / 输入 / 发送；菜单向上弹出不被裁切 */
.composer {
border-top: 1px solid var(--border);
padding: 6px var(--workspace-pad-x, 16px) 8px;
@@ -4507,7 +4704,8 @@ body.design-workspace .af-mosaic {
align-self: center;
min-width: 0;
}
.composer:has(.composer-mode-chip) > .status {
.composer:has(.composer-mode-chip) > .status,
.composer:has(.composer-input-shell) > .status {
display: none;
}
#composer-main {
@@ -4517,17 +4715,6 @@ body.design-workspace .af-mosaic {
max-height: min(50vh, 420px);
overflow: auto;
}
.composer > .more-menu {
flex: 0 0 auto;
align-self: flex-end;
margin-bottom: 2px;
}
.composer .more-menu-sum {
height: calc(var(--composer-control-h) - 8px);
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
/* 唯一描边：输入 + 操作同框 */
.composer-input-shell {
flex: 1 1 auto;