/** * 文思全局外观：浅色/深色背景图、紫强调色、圆角与磨砂面板。 * 由各页面 中 link 引入；theme.js 负责切换 body.theme-light / theme-dark。 */ :root { --wensi-accent: #6344d4; --wensi-accent-hover: #5438c4; --wensi-radius: 14px; --wensi-radius-lg: 18px; --wensi-shadow: 0 14px 42px rgba(15, 23, 42, 0.22); --wensi-shadow-lg: 0 24px 55px rgba(15, 23, 42, 0.35); /* 深色模式统一玻璃：单层透明度，各面板共用，略再透以露出底图 */ --wensi-dark-glass-bg: rgba(6, 8, 14, 0.032); --wensi-dark-glass-border: rgba(255, 255, 255, 0.085); /* 深色可编辑区：灰底替代近黑，与侧栏/按钮更协调 */ --wensi-dark-input-bg: #1e293b; /** * 全站背景图（唯一需要替换的文件位置）： * 将你的浅色 / 深色 PNG 放到 frontend/backgrounds/ 下，默认文件名如下。 * 若改名，只改下面两行变量即可，无需逐个页面修改。 */ --wensi-bg-dark-image: url("../backgrounds/bg-dark.png"); --wensi-bg-light-image: url("../backgrounds/bg-light.png"); } /* ----- 页面背景：所有引入 wensi-appearance.css 且 body 带 theme-dark/theme-light 的页面 ----- */ /* 渐变层仅轻微压暗/提亮，否则高不透明度会把 PNG 完全挡住 */ body.theme-dark { background-color: rgba(4, 3, 12, 0.28) !important; background-image: linear-gradient(165deg, rgba(10, 8, 26, 0.07), rgba(18, 12, 40, 0.1)), var(--wensi-bg-dark-image) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } body.theme-light { background-color: #faf7ff !important; background-image: linear-gradient(165deg, rgba(255, 252, 250, 0.28), rgba(255, 248, 252, 0.34)), var(--wensi-bg-light-image) !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; } /* 让背景在 IDE 类页面边缘露出一圈（登录页不加 padding，避免与全屏动效布局冲突） */ body.theme-dark:not(.login-page), body.theme-light:not(.login-page) { box-sizing: border-box; padding: 12px; } /* 仅写作/知识库 IDE：默认 chrome 约 96px；Sudowrite 顶栏仅菜单时约 48px */ body.theme-dark .toolbar-main ~ .layout, body.theme-light .toolbar-main ~ .layout, body.theme-dark .ide-chrome ~ .layout, body.theme-light .ide-chrome ~ .layout { height: calc(100vh - 96px - 24px) !important; } body.sudowrite-ide.theme-dark .ide-chrome ~ .layout, body.sudowrite-ide.theme-light .ide-chrome ~ .layout { height: calc(100vh - 48px - 24px) !important; } /* ----- 导航与面板：高透明 + 模糊，透出背景图（可输入区见文末「输入岛」） ----- */ body.theme-dark .topbar, body.theme-dark .menu-bar, body.theme-dark .toolbar-main, body.theme-dark .left-pane, body.theme-dark .right-pane, body.theme-dark .sidebar, body.theme-dark .meta-panel, body.theme-dark .panel, body.theme-dark .card, body.theme-dark .modal, body.theme-dark .modal-card, body.theme-dark .modal-content, body.theme-dark .game-menu-float, body.theme-dark .knowledge-hover-card, body.theme-dark .match-panel, body.theme-dark .reference-panel { background: var(--wensi-dark-glass-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; border-color: var(--wensi-dark-glass-border) !important; } /* 中间主栏：完全透明、不 backdrop-blur，壁纸才能直通到编辑区周围 */ body.theme-dark .center-pane, body.theme-dark .editor-panel { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 浅色下由 theme.js 覆盖面板透明度；此处保留非 theme 注入页的兜底 */ body.theme-light .topbar, body.theme-light .menu-bar, body.theme-light .toolbar-main, body.theme-light .left-pane, body.theme-light .right-pane, body.theme-light .sidebar, body.theme-light .meta-panel, body.theme-light .panel, body.theme-light .card, body.theme-light .modal, body.theme-light .modal-card, body.theme-light .modal-content, body.theme-light .game-menu-float, body.theme-light .knowledge-hover-card, body.theme-light .match-panel, body.theme-light .reference-panel { background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: none; border-color: rgba(255, 255, 255, 0.35) !important; } body.theme-light .center-pane, body.theme-light .editor-panel { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ----- 圆角（保留布局与拖动条尺寸） ----- */ body.theme-dark .btn, body.theme-light .btn, body.theme-dark .input, body.theme-light .input, body.theme-dark .select, body.theme-light .select, body.theme-dark .modal-card, body.theme-light .modal-card, body.theme-dark .card, body.theme-light .card, body.theme-dark .menu-dropdown, body.theme-light .menu-dropdown, body.theme-dark .ws-tab, body.theme-light .ws-tab, body.theme-dark .chart-kind-tabs, body.theme-light .chart-kind-tabs { border-radius: var(--wensi-radius) !important; } body.theme-dark .chat-messages, body.theme-light .chat-messages, body.theme-dark .summary-view, body.theme-light .summary-view, body.theme-dark .breadcrumb, body.theme-light .breadcrumb, body.theme-dark .note-area, body.theme-light .note-area, body.theme-dark .word-count, body.theme-light .word-count { border-radius: var(--wensi-radius) !important; } body.theme-dark .editor-highlight-wrap::before, body.theme-light .editor-highlight-wrap::before, body.theme-dark .chapter-title-input, body.theme-light .chapter-title-input { border-radius: var(--wensi-radius) !important; } /* ----- 紫强调色 ----- */ body.theme-dark .menu-action:hover, body.theme-light .menu-action:hover { background: var(--wensi-accent) !important; color: #f8fafc !important; } body.theme-dark .node-row.active, body.theme-light .node-row.active { background: rgba(99, 68, 212, 0.92) !important; color: #fff !important; } body.theme-dark .resizer-v:hover, body.theme-light .resizer-v:hover, body.theme-dark .resizer-h:hover, body.theme-light .resizer-h:hover { background: var(--wensi-accent) !important; } body.theme-dark .btn-primary, body.theme-light .btn-primary { background: linear-gradient(135deg, #6344d4, #8b6ae8) !important; border-color: rgba(99, 68, 212, 0.95) !important; color: #fff !important; } body.theme-dark .btn-primary:hover, body.theme-light .btn-primary:hover { background: linear-gradient(135deg, #5438c4, #7c5ddb) !important; } body.theme-light .ws-tab.active { border-color: rgba(99, 68, 212, 0.65) !important; background: rgba(99, 68, 212, 0.18) !important; color: #4c1d95 !important; } body.theme-dark .ws-tab.active { border-color: rgba(99, 68, 212, 0.75) !important; background: rgba(99, 68, 212, 0.35) !important; color: #e9d5ff !important; } body.theme-light .switch.on, body.theme-dark .switch.on { background: linear-gradient(135deg, #6344d4, #8b6ae8) !important; border-color: rgba(99, 68, 212, 0.9) !important; } /* ----- 登录页 login.html：底层粒子仍可显示 ----- */ body.theme-dark #bgCanvas, body.theme-dark #fireworkContainer { opacity: 0.48; } body.theme-light #bgCanvas, body.theme-light #fireworkContainer { opacity: 0.44; } body.theme-light .panel { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.38) !important; border-radius: var(--wensi-radius-lg) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.theme-dark .panel { background: var(--wensi-dark-glass-bg) !important; border-color: var(--wensi-dark-glass-border) !important; border-radius: var(--wensi-radius-lg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-light .submit { background: linear-gradient(90deg, #6344d4, #8b6ae8) !important; } body.theme-dark .submit { background: linear-gradient(90deg, #5438c4, #6366f1) !important; } /* ----- typing-game / velocity / bubble：整页主题 ----- */ body.theme-dark.velocity-page, body.theme-light.velocity-page { padding: 12px; } body.theme-dark .test-container { border-radius: var(--wensi-radius-lg) !important; box-shadow: var(--wensi-shadow-lg); } body.theme-light .test-container { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.35) !important; border-radius: var(--wensi-radius-lg) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.theme-dark .game-container { border-radius: var(--wensi-radius-lg) !important; box-shadow: var(--wensi-shadow-lg); background: var(--wensi-dark-glass-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-light .game-container { background: rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body.theme-dark.bubble-page canvas { opacity: 0.92; } /* bubble 页 body 已有主题背景，仅保留 canvas 微透明 */ /* ----- 深色：可输入区域近黑底浅字（theme.js 无深色块，在此统一） ----- */ body.theme-dark input[type="text"], body.theme-dark input[type="password"], body.theme-dark input[type="number"], body.theme-dark input[type="search"], body.theme-dark input[type="email"], body.theme-dark input[type="url"], body.theme-dark input[type="tel"], body.theme-dark input[type="date"], body.theme-dark input[type="datetime-local"], body.theme-dark input:not([type]), body.theme-dark textarea, body.theme-dark select { background: var(--wensi-dark-input-bg) !important; color: #f1f5f9 !important; border-color: rgba(255, 255, 255, 0.18) !important; } body.theme-dark .input, body.theme-dark .select, body.theme-dark .chapter-title-input, body.theme-dark .chat-input { background: var(--wensi-dark-input-bg) !important; color: #f1f5f9 !important; border-color: rgba(255, 255, 255, 0.18) !important; } body.theme-dark .editor-highlight-wrap::before { background: var(--wensi-dark-input-bg) !important; border-color: rgba(255, 255, 255, 0.14) !important; } body.theme-dark .editor-textarea { color: #f1f5f9 !important; caret-color: #f1f5f9 !important; } /* 镜像层叠正文：textarea 须透明底，否则下层 mark 高亮 / Tab 幽灵字被遮住 */ body.theme-dark #chapter-content.editor-textarea, body.theme-dark #knowledge-content.kb-editor-textarea, body.theme-light #chapter-content.editor-textarea, body.theme-light #knowledge-content.kb-editor-textarea { background: transparent !important; } /* 知识库正文区：浅色须提亮衬底与字色，否则内联深色 ::before 在 theme-light 下像「整块黑」 */ body.theme-light .kb-editor-highlight-wrap::before { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; } body.theme-light #knowledge-content.kb-editor-textarea { color: #111827 !important; caret-color: #111827 !important; } body.theme-dark .kb-editor-highlight-wrap::before { background: var(--wensi-dark-input-bg) !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* 写作页 / 知识库正文：深色模式下选区填充为白色（勿改其它主题与控件） */ body.theme-dark #chapter-content.editor-textarea::selection, body.theme-dark #knowledge-content.kb-editor-textarea::selection { background: #ffffff; color: #0b1324; } body.theme-dark #chapter-content.editor-textarea::-moz-selection, body.theme-dark #knowledge-content.kb-editor-textarea::-moz-selection { background: #ffffff; color: #0b1324; } body.theme-dark .editor-highlight-wrap.tab-ghost-active .editor-highlight-layer { color: #f1f5f9 !important; } body.theme-dark .editor-highlight-wrap.tab-ghost-active .editor-textarea { color: transparent !important; caret-color: #f1f5f9 !important; } body.theme-dark .note-area { background: var(--wensi-dark-input-bg) !important; color: #f1f5f9 !important; border-color: rgba(255, 255, 255, 0.18) !important; } body.theme-dark .summary-view { background: var(--wensi-dark-glass-bg) !important; color: #e2e8f0 !important; border-color: var(--wensi-dark-glass-border) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-dark .chat-messages { background: var(--wensi-dark-glass-bg) !important; border-color: var(--wensi-dark-glass-border) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-dark .breadcrumb { background: var(--wensi-dark-glass-bg) !important; border-color: var(--wensi-dark-glass-border) !important; } body.theme-dark .word-count { background: var(--wensi-dark-glass-bg) !important; border-color: var(--wensi-dark-glass-border) !important; color: #e2e8f0 !important; } body.theme-dark .resizer-v, body.theme-dark .resizer-h { background: rgba(255, 255, 255, 0.06) !important; } body.theme-light .resizer-v, body.theme-light .resizer-h { background: rgba(255, 255, 255, 0.22) !important; } /* 深色：普通按钮半透明，不挡背景 */ body.theme-dark .btn:not(.danger) { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f1f5f9 !important; } body.theme-dark .btn:not(.danger):hover { background: rgba(255, 255, 255, 0.11) !important; } /* 写作页主栏：编辑区外留白，让壁纸在四周可见（projects.html #center-pane） */ body.theme-dark #center-pane .editor-wrap, body.theme-light #center-pane .editor-wrap { padding: 18px 24px 24px !important; background: transparent !important; } /* ----- 弹窗：深色模式灰调卡片（记忆 / 改密 / 各 IDE 弹窗等统一） ----- */ body.theme-dark .modal-mask { background: rgba(2, 6, 23, 0.58) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.theme-dark .modal-card, body.theme-dark .modal-content { background: rgba(30, 41, 59, 0.94) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; color: #e2e8f0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); padding: 18px 22px !important; max-height: 85vh !important; } body.theme-dark .modal-card h3 { color: #f8fafc !important; } body.theme-dark .modal-card .sub { color: #94a3b8 !important; } body.theme-dark .modal-card label { color: #cbd5e1 !important; } body.theme-dark .modal-list { background: rgba(15, 23, 42, 0.65) !important; border-color: rgba(148, 163, 184, 0.2) !important; } body.theme-dark .modal-item:hover { background: rgba(99, 68, 212, 0.18) !important; } body.theme-dark .modal-card .note-area, body.theme-dark .modal-card textarea.note-area { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(148, 163, 184, 0.22) !important; color: #f1f5f9 !important; } body.theme-dark .modal-card .status { color: #94a3b8 !important; } body.theme-dark .modal-card .chapter-title-input, body.theme-dark .modal-card input[type="text"], body.theme-dark .modal-card input[type="password"], body.theme-dark .modal-card input[type="number"], body.theme-dark .modal-card input[type="file"], body.theme-dark .modal-card textarea, body.theme-dark .modal-card select { background: var(--wensi-dark-input-bg) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f1f5f9 !important; } body.theme-dark .modal-card .btn:not(.danger):not(.btn-primary) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f1f5f9 !important; } body.theme-dark .modal-card .btn:not(.danger):not(.btn-primary):hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.22) !important; } body.theme-dark .modal-card .btn.btn-primary { background: linear-gradient(135deg, #6344d4, #8b6ae8) !important; border-color: rgba(99, 68, 212, 0.85) !important; color: #fff !important; } body.theme-dark .modal-card .btn.btn-primary:hover { background: linear-gradient(135deg, #5438c4, #7c5ddb) !important; border-color: rgba(129, 140, 248, 0.65) !important; color: #fff !important; } body.theme-dark .modal-card .btn.danger { background: rgba(127, 29, 29, 0.45) !important; border-color: rgba(248, 113, 113, 0.35) !important; color: #fecaca !important; } body.theme-dark .modal-card .btn.danger:hover { background: rgba(127, 29, 29, 0.62) !important; border-color: rgba(252, 165, 165, 0.45) !important; } body.theme-dark .modal-card .msg { color: #fca5a5 !important; } body.theme-dark .modal-card .msg.ok { color: #86efac !important; } /* 后台等页使用 .modal-mask > .modal（无 .modal-card） */ body.theme-dark .modal-mask .modal { background: rgba(30, 41, 59, 0.94) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; color: #e2e8f0 !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.theme-dark .modal-mask .modal h3 { color: #f8fafc !important; } body.theme-dark .modal-mask .modal label { color: #cbd5e1 !important; } body.theme-dark .modal-mask .modal input, body.theme-dark .modal-mask .modal textarea, body.theme-dark .modal-mask .modal select { background: var(--wensi-dark-input-bg) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f1f5f9 !important; } body.theme-dark .modal-mask .modal .btn:not(.danger):not(.btn-primary) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f1f5f9 !important; } body.theme-dark .modal-mask .modal .btn:not(.danger):not(.btn-primary):hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.22) !important; } body.theme-dark .modal-mask .modal .msg { color: #fca5a5 !important; } body.theme-dark .modal-mask .modal .msg.ok, body.theme-dark .modal-mask .modal .ok { color: #86efac !important; } /* 知识库文件树图谱：外层已是深色，壳体与全局灰调弹窗协调 */ body.theme-dark #kb-tree-viz-modal .kb-viz-shell { background: rgba(30, 41, 59, 0.92) !important; border-color: rgba(148, 163, 184, 0.22) !important; } /* 浅色页（如用户中心）：弹窗内卡片与写作页深色主题下同款高对比浅色板，避免整页玻璃透到弹窗里 */ body.theme-light .modal-mask { background: rgba(15, 23, 42, 0.38) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.theme-light .modal-card, body.theme-light .modal-content { background: rgba(255, 252, 248, 0.98) !important; border-color: rgba(203, 213, 225, 0.95) !important; color: #1e293b !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18); padding: 18px 22px !important; max-height: 85vh !important; } body.theme-light .modal-card h3 { color: #0f172a !important; } body.theme-light .modal-card .sub { color: #64748b !important; } body.theme-light .modal-card label { color: #475569 !important; } body.theme-light .modal-list { background: rgba(241, 245, 249, 0.97) !important; border-color: rgba(203, 213, 225, 0.95) !important; } body.theme-light .modal-item:hover { background: rgba(99, 68, 212, 0.07) !important; } body.theme-light .modal-card .note-area, body.theme-light .modal-card textarea.note-area { background: #ffffff !important; border-color: rgba(203, 213, 225, 0.95) !important; color: #1e293b !important; } body.theme-light .modal-card .chapter-title-input, body.theme-light .modal-card input[type="text"], body.theme-light .modal-card input[type="password"], body.theme-light .modal-card input[type="number"], body.theme-light .modal-card input[type="file"], body.theme-light .modal-card select { background: #ffffff !important; border-color: rgba(203, 213, 225, 0.95) !important; color: #1e293b !important; } body.theme-light .modal-card .btn:not(.danger) { background: rgba(241, 245, 249, 0.95) !important; border-color: rgba(148, 163, 184, 0.55) !important; color: #1e293b !important; } body.theme-light .modal-card .btn:not(.danger):hover { background: rgba(226, 232, 240, 0.98) !important; border-color: rgba(99, 68, 212, 0.35) !important; } body.theme-light .modal-card .btn.danger { background: rgba(254, 226, 226, 0.95) !important; border-color: rgba(248, 113, 113, 0.45) !important; color: #991b1b !important; } /* 自定义「眼睛」显隐时，关闭 Edge/IE 在输入内容后才出现的内置密码显示按钮，避免与页内按钮叠成「双眼睛」 */ .wensi-pwd-row input[type="password"]::-ms-reveal, .wensi-pwd-row input[type="password"]::-ms-clear { display: none !important; } /* 密码「眼睛」：去掉按钮形底与描边，仅保留图标（各页局部样式以此为准） */ .wensi-pwd-row { position: relative; } .wensi-pwd-row .wensi-pwd-toggle, .wensi-pwd-row button.wensi-pwd-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } button.wensi-pwd-toggle, .wensi-pwd-toggle { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; min-width: 28px; padding: 4px 6px !important; line-height: 1 !important; cursor: pointer; color: rgba(148, 163, 184, 0.95); } button.wensi-pwd-toggle:hover, .wensi-pwd-toggle:hover { background: transparent !important; color: #e2e8f0; opacity: 0.92; } body.theme-light button.wensi-pwd-toggle, body.theme-light .wensi-pwd-toggle { color: #64748b !important; background: transparent !important; border: none !important; } body.theme-light button.wensi-pwd-toggle:hover, body.theme-light .wensi-pwd-toggle:hover { color: #1e293b !important; background: transparent !important; } button.wensi-pwd-toggle:focus-visible, .wensi-pwd-toggle:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.85); outline-offset: 2px; }