Skip to content

Unify input and container styling to glass design#118

Merged
rogerdigital merged 2 commits into
mainfrom
style/glass-input-unification
Jun 24, 2026
Merged

Unify input and container styling to glass design#118
rogerdigital merged 2 commits into
mainfrom
style/glass-input-unification

Conversation

@rogerdigital

Copy link
Copy Markdown
Owner

Summary

Unifies the previously inconsistent input and container styling across the app to a single glass design (translucent light-gray background, no border by default, subtle border on focus), using the custom-prompt textarea as the reference standard.

1. Unify form inputs to glass style

Three different "boxed input" styles were coexisting (white surface + border + focus ring vs. glass). All boxed inputs now use the glass style:

  • promptTextarea (reference): fixed a focus flicker caused by border toggling from none to 1px solid — now uses a transparent border that stays constant.
  • Settings fieldInput/fieldTextarea: white bg + border + focus ring → glass
  • PublishChecklist titleInput/contentArea: surface white bg → glass
  • TemplatePicker saveInput: surface white bg → glass

Writing-canvas inputs (title/body/immersive title) keep their borderless design.

2. Apply glass to editor/preview/publish containers

  • editorCard (editor outer frame): surface white bg + shadow → glass; inner editorWrap reverted to transparent to let the outer glass show through.
  • Preview area: phone frame / top bar / content area unified to glass; article content area keeps white for paper-reading effect.
  • publishPanel: surface white bg + shadow → glass.
  • Toolbar: background aligned with the editor input area (transparent), keeping the light top/bottom separator lines.

3. Layout refinements

  • Publish checklist step 2: platform check cards (boxed cards with bg/border/radius) → flat list (bottom separator lines).
  • Platform selector: heavy white pill chips → flat glass chips; selected state uses a light glass bg + bold text (removed the bottom indicator line, lightened the selected bg).

Verification

  • `pnpm build` passes
  • `pnpm lint` passes (lint-staged: prettier + eslint)

Out of scope

Cards/panels used as structural containers (settings connection cards, field groupings) are intentionally left with their own border — they serve a different visual role (container/grouping) than inputs (interactive controls).

把所有框式输入统一到自定义 prompt 输入框的 glass 风格(浅灰半透明底、
默认无边框、聚焦浮现细边框),取代之前三套混用的表单风格:

- promptTextarea(参照基准,修正聚焦从无到有边框的闪烁:改用透明边框常驻)
- Settings fieldInput/fieldTextarea:白底+边框+聚焦光环 → glass
- PublishChecklist titleInput/contentArea:surface 白底 → glass
- TemplatePicker saveInput:surface 白底 → glass

写作台画布输入(标题/正文/沉浸标题)保持无边框不动。
…platform selector

写作台编辑器卡片、预览区、底部发布区整体 glass 化,并重新设计平台选择:

- editorCard 外层:surface 白底+阴影 → glass 灰底+透明边框;内层
  editorWrap 回退透明,透出外层 glass。
- 预览区 phone frame/顶栏/内容区统一 glass;文章内容区保留白纸效果。
- publishPanel:surface 白底+阴影 → glass。
- 工具栏背景与编辑器输入区一致(透明),上下保留 borderFaint 分隔线。
- PublishChecklist 第2步平台检测卡片:独立卡片 → 平铺列表(靠底部分隔线)。
- 平台选择重设计:厚重白底胶囊 → 扁平 glass chip,选中态浅 glass 底+
  加粗(去掉底部指示线)。
@rogerdigital rogerdigital merged commit ba6f2df into main Jun 24, 2026
3 checks passed
@rogerdigital rogerdigital deleted the style/glass-input-unification branch June 24, 2026 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant