From abf5ea9baa496330b17f6c74fde5e32651ac7a9e Mon Sep 17 00:00:00 2001 From: Codex Bot Date: Thu, 12 Nov 2026 17:05:08 +0800 Subject: [PATCH] docs(styles): explain toolbar inheritance and workspace layering --- src/components/ui/icon-button.module.css | 1 + src/components/ui/toolbar.module.css | 1 + src/components/workspace/editable-title.module.css | 1 + src/components/workspace/workspace.module.css | 2 ++ 4 files changed, 5 insertions(+) diff --git a/src/components/ui/icon-button.module.css b/src/components/ui/icon-button.module.css index ab5a221..33e9194 100644 --- a/src/components/ui/icon-button.module.css +++ b/src/components/ui/icon-button.module.css @@ -18,6 +18,7 @@ /* SVG 同时约束宽高与 flex-basis，防止图标在文字/布局挤压下变形。 */ .button svg { width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); flex: 0 0 var(--toolbar-icon-size, 20px); } /* 悬停填底、键盘可见焦点描边、禁用态降低透明度并提示不可操作。 */ +/* hover 未排除 :disabled，禁用按钮仍可能命中悬停底色；真正禁用语义由原生 disabled 属性承担。 */ .button:hover { background: #e9e7e3; } .button:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; } .button:disabled { opacity: 0.45; cursor: not-allowed; } diff --git a/src/components/ui/toolbar.module.css b/src/components/ui/toolbar.module.css index a37eae6..5ad3893 100644 --- a/src/components/ui/toolbar.module.css +++ b/src/components/ui/toolbar.module.css @@ -1,6 +1,7 @@ /* Toolbar 共享表面：统一控件尺寸变量、排列间距、边框和背景；不负责自身在画布中的定位。 */ /* 提供后代按钮消费的 CSS 变量；半透明背景与 backdrop blur 处理工具栏背后的内容。 */ .surface { + /* 变量按 DOM 继承：渲染到 body Portal 的浮层不会仅因 React 父子关系继承此处尺寸。 */ --toolbar-icon-size: 20px; --toolbar-control-width: 32px; --toolbar-control-height: 32px; diff --git a/src/components/workspace/editable-title.module.css b/src/components/workspace/editable-title.module.css index 038fad9..9722cd8 100644 --- a/src/components/workspace/editable-title.module.css +++ b/src/components/workspace/editable-title.module.css @@ -9,6 +9,7 @@ .title[data-selected="true"] { background: #ede5dc; border-color: #d3c0b2; } .title:disabled { cursor: default; } /* 编辑态给定目标宽度但受上方 max-width 限制，readonly 时降低透明度。 */ +/* max-width:100% 相对包含块，不是固定视口保证；浮动条宿主还需 min-width:0/宽度预算配合。 */ .input { width: 220px; border-color: #a47764; background: white; outline: none; } .input[readonly] { opacity: 0.65; } /* 错误框显示在标题下方，并以视口宽度限制最大宽度；长说明允许换行。 */ diff --git a/src/components/workspace/workspace.module.css b/src/components/workspace/workspace.module.css index b104254..055a9aa 100644 --- a/src/components/workspace/workspace.module.css +++ b/src/components/workspace/workspace.module.css @@ -128,6 +128,7 @@ .settingsActions button[type="submit"] { background: #37352f; color: white; border-color: #37352f; } .settingsActions button:disabled { opacity: 0.5; cursor: not-allowed; } /* 固定全视口画布置于底层；点阵背景与加载/错误状态由后续类分别承担。 */ +/* 主画布铺满整个视口，不按侧栏宽度缩窄；侧栏/浮动条通过更高层级叠在画布上方。 */ .graph { position: fixed; inset: 0; z-index: 0; display: flex; width: 100%; height: 100dvh; background: #fffefb; } .graphSurface { width: 100%; height: 100%; background-image: radial-gradient(#b8aea245 1px, transparent 1px); background-size: 22px 22px; } .graphStatus { position: absolute; left: 50%; top: 72px; transform: translateX(-50%); max-width: calc(100vw - 48px); padding: 8px 12px; border-radius: 6px; background: #fffefbe6; color: #9a948c; text-align: center; font-size: 13px; } @@ -173,4 +174,5 @@ .directoryToggle { display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #87837c; cursor: pointer; } .directoryToggle:hover { background: #eae7e2; } .directoryToggle:focus-visible { outline: 2px solid #9b877a; outline-offset: -2px; } +/* 此处旋转过渡没有单独的 reduced-motion 覆盖；上面的媒体查询只关闭指定的菜单/浮动条效果。 */ .directoryToggle svg { transition: transform 120ms ease; }