命中，不影响站点其他页面。把整个投稿页容器（含编辑区与右侧参数栏）整体下移 120px，给页面顶部腾出空间。 */ main.container:has(.newposts-wrap) { margin-top: 120px !important; } /* ===== 投稿页面：编辑器上方「投稿样式」切换占位标签（2026-08-04）===== 5 个标签由子主题 JS (hezi-newposts.js) 动态插入到 .editor-main-box 卡片【内部顶部】(box.insertBefore(wrap, box.firstChild))，背景直接继承主内容卡片，与主内容连成一体（不再是悬浮的独立胶囊）。仅投稿页出现（JS 内部判断 .newposts-wrap .editor-main-box 存在才插入）。颜色引用父主题 CSS 变量，自动跟随亮/暗模式。样式与切换逻辑后续可扩展。 */ .hezi-style-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .hezi-style-tabs .hezi-style-tab { padding: 7px 18px; border-radius: 8px; background: transparent; /* 背景随主内容卡片，连成一体 */ border: 1px solid var(--border, #e8e8ec); color: var(--muted-2, #8a8a8a); font-size: 14px; line-height: 1.4; cursor: pointer; transition: all 0.2s ease; user-select: none; } .hezi-style-tabs .hezi-style-tab:hover { color: var(--hezi-accent); border-color: var(--hezi-accent); } .hezi-style-tabs .hezi-style-tab.active { background: var(--hezi-accent); border-color: var(--hezi-accent); color: #fff; } body.dark-theme .hezi-style-tabs .hezi-style-tab, body.dark .hezi-style-tabs .hezi-style-tab { background: transparent; border-color: var(--border, #2a2e38); color: var(--muted-2, #9aa0a6); } body.dark-theme .hezi-style-tabs .hezi-style-tab.active, body.dark .hezi-style-tabs .hezi-style-tab.active { background: var(--hezi-accent); border-color: var(--hezi-accent); color: #fff; } /* 标签下方说明文字：随当前选中标签切换（2026-08-04） */ .hezi-style-desc { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--muted-2, #8a8a8a); } body.dark-theme .hezi-style-desc, body.dark .hezi-style-desc { color: var(--muted-2, #9aa0a6); } /* ===== 首页 Hero 区：底部灰块消除（2026-08-03 三修）===== 灰块根因：.hero 背景渐变 linear-gradient(..., rgba(18,22,28,0.5) 100%) 在底部是半透明暗色；main-card 用 margin-top:-300px 向上重叠到 hero 内，但卡片高度不足以完全覆盖 hero 底部区域 → 卡片与内容区间露出一截 hero 暗色背景（视觉=灰色条）。修复三管齐下： ① border-box 统一盒模型（padding-top:36px 不再撑高容器） ② hero 背景底部改为完全透明（即使露出也不显色） ③ hezi-hero-main 强制透明背景（防御性） */ .hero { box-sizing: border-box !important; background: linear-gradient(180deg, rgba(43,38,34,0) 0%, rgba(43,38,34,0.18) 58%, rgba(43,38,34,0) 100%) !important; } .hezi-hero-main { background: transparent !important; } /* 注：原"全站 body 内退 8px"规则已删除（2026-08-12）——它会导致页面右侧出现横向滚动条；如需该留白效果，应在框架容器内单独加 8px 外边距，而非加在 body 上。 */ /* ===== 全站深色态背景兜底（2026-08-11，根治"默认模板"白条）===== 根因：Zibll 的 main.min.css 在 wp_head 里（晚于 header.php 内联 pretheme）执行了两条破坏规则：① html{background:unset} 把背景置透明；② body{background:0 0;padding:0} 把背景重置为透明（覆盖前面的 body{background-color:var(--body-bg-color)}）。而 dark-theme 类只挂在上，:root(=) 的 --body-bg-color 恒为浅色，在深色态取不到深色；body 又被重置透明。两者叠加 → 视口透出浏览器白色（顶部 8px 内边距条 / 短内容底部白区 / 四周），即用户反馈的白条（默认模板本身不给 html/body 设实心深底，须子主题兜底）。修复： html:has(body.dark-theme) —— 用 :has() 把压成深色（写死 #1A1714，避免 var 在上回退到浅色 :root 值）； body{background-color:var(--body-bg-color)!important} —— 无条件覆盖 Zibll 的 background:0 0，且 body 自身的 --body-bg-color 在深色态已被 body.dark-theme 重定义为 #1A1714，故两态都正确。 */ :root { --hezi-bg-dark: #1A1714; } html:has(body.dark-theme) { background-color: var(--hezi-bg-dark) !important; } body { background-color: var(--body-bg-color) !important; } /* ════ 投稿中心：内容类型标签（文章 / 户型上传）═══════ */ .hezi-submit-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .hezi-submit-tabs .hezi-submit-tab { padding: 7px 20px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border, #e3e3e3); color: var(--muted-2, #8a8a8a); font-size: 13px; font-weight: 600; background: transparent; user-select: none; transition: all .15s; } .hezi-submit-tabs .hezi-submit-tab:hover { color: var(--hezi-accent); border-color: var(--hezi-accent); } .hezi-submit-tabs .hezi-submit-tab.active { background: var(--hezi-accent); border-color: var(--hezi-accent); color: #fff; } body.dark-theme .hezi-submit-tabs .hezi-submit-tab, body.dark .hezi-submit-tabs .hezi-submit-tab { background: transparent; border-color: var(--border, #2a2e38); color: var(--muted-2, #9aa0a6); } body.dark-theme .hezi-submit-tabs .hezi-submit-tab.active, body.dark .hezi-submit-tabs .hezi-submit-tab.active { background: var(--hezi-accent); border-color: var(--hezi-accent); color: #fff; } /* 户型表单面板 */ .hezi-huxing-panel { display: none; } .newposts-wrap[data-hezi-tab="huxing"] .hezi-huxing-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* 户型标签激活时：仅保留 tabDesc/stepper/wizard/footer，隐藏原生内容（右栏切换由 .newposts-form-row[data-hezi-tab] 处理） */ .newposts-wrap[data-hezi-tab="huxing"] .editor-main-box > *:not(.hezi-huxing-panel):not(.hezi-tab-desc):not(.hezi-stepper):not(.hezi-frame-footer) { display: none; } /* ===== 框架：投稿页全屏化（双栏定高 + 编辑框落底 + 侧栏内部滚动）===== 仅当带 .newposts-html 时生效，由 hezi-newposts.js 在检测到 .newposts-wrap 时加。真实 DOM：main.container > form.newposts-form-row(弹性行) > [ .content-wrap.newposts-wrap(左栏·弹性列) + .newposts-sidebar(右栏·定宽) ] 关键修复： ①

设为弹性行——左栏吃满、右栏定宽并排（旧版 form 不是 flex，整条链断裂，编辑框随内容顶破页面底部）； ② 左栏 flex:1 + overflow:hidden，编辑框 flex:1 内部滚动→真正落底不溢出页面； ③ 右栏 flex:0 0 311 + align-self:stretch + overflow-y:auto→内部滚动（回答"右侧小工具侧边栏做内部滚动"）； ④ 抵消 Zibll site-layout-2 的破坏性负 margin（投稿页不用浮动布局）。 */ html.newposts-html, html.newposts-html body { height: 100vh; height: 100dvh; overflow: hidden; } html.newposts-html body { overflow: hidden; display: flex; flex-direction: column; } /* 投稿页 main 容器：全高弹性列 */ html.newposts-html main.container:has(.newposts-wrap) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none !important; margin: 0 !important; /* 抵消 Zibll .container 默认外边距，padding 已由 8px 控制 */ } /* 是弹性行：左栏吃满、右栏定宽并排 */ html.newposts-html .newposts-form-row { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; align-items: stretch; gap: 24px; /* 主内容-侧栏间距 */ } /* 左栏：吃满剩余宽度 + 撑满高度，纵向排列，自身不滚动（滚动交给编辑框） */ .content-wrap.newposts-wrap { flex: 1 1 auto; min-height: 0; width: auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; height: auto; scrollbar-width: none; -ms-overflow-style: none; } .content-wrap.newposts-wrap::-webkit-scrollbar { display: none; } /* 左栏内部的 content-layout 也撑满，让编辑框能拿到弹性高度 */ .content-wrap.newposts-wrap > .content-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* 编辑框：flex:1 吃满左栏剩余高度；内容超高→编辑框内部滚动（不再顶破页面底部） */ .newposts-wrap .editor-main-box { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; display: flex; flex-direction: column; overflow-y: auto; margin: 0 !important; /* 统一清零，避免 .zib-widget/.full-widget-sm 默认外边距 */ } /* ===== 编辑器主体左右分栏（左=上传+模板 | 右=标题+编辑器）===== */ .editor-body-row { display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; gap: 16px; margin-top: 0; /* 左栏直接顶到卡片顶部（与标题同高），不再等标题 */ } /* 左侧栏：封面上传 + 模板，定宽 + 边框 */ .editor-left-sidebar { flex: 0 0 260px; min-height: 0; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 8px; padding: 10px; background: rgba(0,0,0,.02); } /* 左侧栏：封面上传区去掉外间距（mb20 默认 20px 底部，这里归零贴紧下方） */ .mb20.featured-edit { margin: 0; } /* 右侧：编辑器，吃满剩余宽度 + 边框 */ .editor-right-content { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 8px; overflow: hidden; /* 编辑器内容不溢出边框 */ } /* 标题在右列顶部：与编辑器等宽，加内边距 + 底边分隔 */ .editor-right-content .newposts-title { padding: 14px 14px 0; margin-bottom: 0; } .editor-right-content .newposts-title .line-form-line { left: 14px; right: 14px; bottom: 0; } /* 图片管理区/模板列表卡片 */ .editor-img-mgmt { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 6px; background: rgba(0,0,0,.015); flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; } .editor-img-mgmt-title { padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--main-color, #e0e0e0); border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(0,0,0,.04); } .editor-img-mgmt-body { flex: 1 1 auto; overflow-y: auto; } /* ===== 编辑器 tinymce 内容区：加深背景区分 ===== */ .editor-right-content .wp-editor-wrap, .editor-right-content .mce-edit-area iframe, .editor-right-content .tox-edit-area iframe, .editor-right-content .wp-editor-container { background: rgba(0,0,0,.04) !important; } /* tinymce 工具栏与内容区之间也加点底色 */ .editor-right-content .mce-container-body, .editor-right-content .tox-toolbar { background: rgba(0,0,0,.025) !important; } /* 窄屏兜底：左右分栏变上下堆叠 */ @media (max-width: 900px) { .editor-body-row { flex-direction: column; } .editor-left-sidebar { flex: none; width: 100%; } } /* ===== 自定义模板列表（左侧栏）—— 深浅主题自适应 ===== */ .hezi-tmpl-list .editor-img-mgmt-body { display: flex; flex-direction: column; gap: 0; padding: 0; overflow-x: hidden; /* 禁止横向滚动 */ } .hezi-tmpl-section { border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); } .hezi-tmpl-section:last-of-type { border-bottom: none; } .hezi-tmpl-section-label { padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-2, #9aa0a6); background: rgba(0,0,0,.04); } .hezi-tmpl-cards { padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } /* 模板卡片 —— 深色半透背景 */ .hezi-tmpl-card { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 6px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 5px; background: rgba(255,255,255,.03); cursor: default; transition: border-color .15s, background .15s; min-width: 0; } .hezi-tmpl-card:hover { border-color: var(--main-color, #f04494); background: rgba(240,68,148,.06); } .hezi-tmpl-card-info { flex: 1; min-width: 0; overflow: hidden; } .hezi-tmpl-card-title { font-size: 13px; font-weight: 500; color: var(--main-color, #e0e0e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hezi-tmpl-card-meta { font-size: 11px; color: var(--muted-2, #888); margin-top: 1px; } /* 模板操作按钮 */ .hezi-tmpl-card-actions { display: flex; gap: 3px; flex-shrink: 0; } .hezi-tmpl-btn { font-size: 11px; padding: 2px 6px; border-radius: 3px; cursor: pointer; border: 1px solid var(--border, rgba(255,255,255,.15)); background: rgba(255,255,255,.05); color: var(--muted, #bbb); transition: all .15s; } .hezi-tmpl-btn:hover { border-color: var(--main-color, #f04494); color: var(--main-color, #f04494); background: rgba(240,68,148,.1); } .hezi-tmpl-btn.danger:hover { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,.1); } /* 空状态 */ .hezi-tmpl-empty { text-align: center; padding: 14px 6px; color: var(--muted-2, #888); font-size: 12px; } /* 保存按钮 —— 不超出框架 */ .hezi-tmpl-save-btn { width: calc(100% - 16px); /* 左右各留 8px，防止溢出 */ margin: 6px 8px 10px; padding: 8px; font-size: 13px; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; /* 确保 width 包含 padding+border */ } .hezi-tmpl-save-icon { font-size: 16px; line-height: 1; } /* 消息提示 */ .hezi-tmpl-msg { margin: 0 10px 8px; padding: 7px 10px; font-size: 12px; border-radius: 4px; text-align: center; } .hezi-tmpl-msg.ok { background: rgba(39,174,96,.08); color: #27ae60; } .hezi-tmpl-msg.err { background: rgba(231,76,60,.08); color: #c0392b; } /* ===== 编辑器增强：插入的表格 + 字数统计 ===== */ /* 投稿页编辑器内插入的表格（简洁风格，适配深浅主题） */ .hezi-content-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; } .hezi-content-table th, .hezi-content-table td { border: 1px solid var(--border, #ddd); padding: 8px 10px; text-align: left; vertical-align: top; } .hezi-content-table th { background: rgba(0,0,0,.04); font-weight: 600; } .hezi-content-table tbody tr:nth-child(even) { background: rgba(0,0,0,.015); } /* 字数统计条（编辑器底部） */ .hezi-wordcount { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; color: var(--muted-2, #9aa0a6); border-top: 1px solid var(--border, rgba(255,255,255,.06)); background: rgba(0,0,0,.02); } .hezi-wc-label { opacity: .8; } .hezi-wc-num { font-weight: 600; color: var(--main-color, #f04494); } /* 第 3 行工具栏按钮（文本型）适配 */ .mce-toolbar .mce-btn[aria-label="表格"], .mce-toolbar .mce-btn[aria-label="模板"], .mce-toolbar .mce-btn[aria-label="商品"] { font-size: 12px; } /* 抵消 Zibll site-layout-2 对双栏的破坏性负 margin / 浮动 */ html.newposts-html .newposts-form-row .content-layout { margin-right: 0 !important; } html.newposts-html .newposts-form-row .newposts-sidebar { margin-left: 0 !important; float: none !important; position: relative !important; } /* 右栏：固定 311、等高、内部滚动（回答"右侧小工具侧边栏做内部滚动"） */ html.newposts-html .newposts-sidebar { flex: 0 0 311px; align-self: stretch; min-height: 0; width: 311px; overflow-y: auto; scrollbar-width: thin; } /* 文章 / 户型两个右侧栏按当前标签切换显隐（回答"两侧栏内容能否不同"：能，且已实现） */ html.newposts-html .newposts-form-row[data-hezi-tab="article"] .newposts-sidebar-huxing { display: none; } html.newposts-html .newposts-form-row[data-hezi-tab="huxing"] .newposts-sidebar-article { display: none; } /* 投稿页 footer 全隐藏（Zibll 主 footer + 子主题 hezi-footer + WP 默认 footer） */ .newposts-wrap footer, .newposts-wrap .footer, .newposts-wrap .site-footer, .newposts-wrap .hezi-footer, .newposts-wrap #footer, .newposts-wrap footer.footer, html.newposts-html footer, html.newposts-html .footer, html.newposts-html .site-footer, html.newposts-html .hezi-footer { display: none !important; } /* 窄屏兜底：放弃全屏固定，恢复自然滚动（防止 flex 定高在手机上挤压内容） */ @media (max-width: 680px) { html.newposts-html, html.newposts-html body { height: auto; overflow: visible; display: block; } html.newposts-html main.container:has(.newposts-wrap) { flex: none; display: block; min-height: 0; } html.newposts-html .newposts-form-row { flex: none; display: block; } .content-wrap.newposts-wrap { flex: none; height: auto; overflow: visible; display: block; } html.newposts-html .newposts-sidebar { flex: none; width: 100%; overflow: visible; } } /* ===== 框顶：类型说明（左标题 + 右进度条并排）===== */ .hezi-tab-desc { padding: 14px 16px 12px; border-bottom: 1px solid var(--border, #eee); display: flex; align-items: center; justify-content: space-between; background: transparent; } .hezi-tab-desc-left { display: flex; flex-direction: column; background: transparent; } .hezi-tab-desc .hezi-tab-desc-title { font-size: 16px; font-weight: 700; color: var(--main-color, #333); } .hezi-tab-desc-sub { font-size: 13px; color: var(--muted-2, #9aa0a6); margin-top: 4px; } /* ===== 三步进度条（嵌入标题行右侧，不再独占一行）===== */ .hezi-stepper { padding: 0; border-bottom: none; flex-shrink: 0; margin-left: 24px; } .hezi-stepper-list { display: flex; align-items: center; justify-content: flex-end; } .hezi-stepper-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex: none; } .hezi-stepper-num { width: 32px; height: 32px; border-radius: 50%; background: #e5e5e5; color: #9aa0a6; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: all .15s; } .hezi-stepper-item.active .hezi-stepper-num { background: #1f1f1f; color: #fff; } .hezi-stepper-lbl { font-size: 12px; color: #9aa0a6; font-weight: 600; transition: color .15s; } .hezi-stepper-item.active .hezi-stepper-lbl { color: #1f1f1f; } .hezi-stepper-line { flex: 1; height: 1px; background: #e5e5e5; margin: 0 10px; align-self: center; margin-bottom: 22px; } /* ===== 步骤内容 ===== */ .hx-step { padding: 16px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* ===== 步骤① demo hero 风格：标题行 + 左搜索 + 右 A-Z 字母索引网格 ===== */ .hx-step-find-header { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 16px; } .hx-step-find-title { font-size: 18px; font-weight: 700; color: var(--main-color, #333); } .hx-step-find-subtitle { font-size: 13px; color: var(--muted-2, #9aa0a6); font-weight: 400; margin-left: 6px; } .hx-step-find-all { font-size: 14px; color: var(--hezi-accent); text-decoration: none; cursor: pointer; transition: opacity .15s; } .hx-step-find-all:hover { opacity: .75; } /* 左右两栏等宽，右栏拉高吃满剩余空间（到下一步上方） */ .hx-step1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; flex: 1 1 auto; min-height: 0; } .hx-step1-left { display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow: hidden; } /* —— 左侧：搜索框加边框 —— */ .hx-search-row { display: flex; gap: 10px; align-items: stretch; } .hx-search-box { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--main-border-color, #E2DCD0); border-radius: 8px; background: rgba(0,0,0,.02); } .hx-search-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted-2, #9aa0a6); } .hx-search-box .hx-comm-search { flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; } .hx-search-box .hx-go-new { flex: 0 0 auto; } /* 搜索框右侧：已选小区状态显示 */ .hx-selected-status { flex: 0 0 40%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border: 1px solid var(--main-border-color, #E2DCD0); border-radius: 8px; background: rgba(0,0,0,.02); } .hx-selected-tag { font-size: 11px; color: var(--muted-2, #9aa0a6); } .hx-selected-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; } .hx-selected-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--hezi-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-selected-count { flex: 0 0 auto; white-space: nowrap; font-size: 11px; color: var(--muted-2, #9aa0a6); } .hx-selected-sub { font-size: 11px; color: var(--muted-2, #9aa0a6); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-step1-label { font-size: 13px; font-weight: 700; color: var(--main-color, #333); margin: 0; } .hx-go-new { font-size: 12px; } .hx-go-new-below { align-self: flex-start; } .hx-new-comm { margin-top: 8px; padding: 12px; border: 1px dashed var(--border, #e3e3e3); border-radius: 10px; background: rgba(0,0,0,.02); display: flex; flex-direction: column; gap: 8px; } .hx-new-comm label { font-size: 12px; font-weight: 600; } .hx-new-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* —— 左侧：急缺小区推荐卡片区 —— */ .hx-urgent-section { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 8px; background: rgba(0,0,0,.02); overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .hx-urgent-header { padding: 10px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); background: rgba(0,0,0,.03); } .hx-urgent-title { font-size: 13px; font-weight: 700; color: var(--main-color, #333); } .hx-urgent-sub { font-size: 11px; color: var(--muted-2, #9aa0a6); margin-top: 2px; } .hx-urgent-grid { padding: 8px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .hx-urgent-grid::-webkit-scrollbar { display: none; } .hx-urgent-card { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 6px; background: rgba(255,255,255,.03); cursor: pointer; transition: all .15s; position: relative; } .hx-urgent-card:hover { border-color: var(--hezi-accent); background: var(--hezi-accent-soft-2); } .hx-urgent-letter { width: 24px; height: 24px; border-radius: 50%; background: rgba(163,98,58,.12); color: #a3623a; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .hx-urgent-info { flex: 1; min-width: 0; } .hx-urgent-name { font-size: 13px; font-weight: 500; color: var(--main-color, #e0e0e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-urgent-sub { font-size: 11px; color: var(--muted-2, #888); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-urgent-meta { font-size: 11px; color: var(--muted-2, #888); margin-top: 1px; } .hx-urgent-badge { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(231,76,60,.12); color: #e74c3c; } .hx-urgent-loading, .hx-urgent-empty { text-align: center; padding: 14px 6px; color: var(--muted-2, #888); font-size: 12px; } /* —— 左侧：小区名称反馈入口 —— */ .hx-feedback-bar { display: flex; justify-content: center; } .hx-feedback-btn { width: 100%; padding: 10px; border: 1px dashed var(--border, #d9d9d9); border-radius: 8px; background: transparent; color: var(--muted-2, #888); font-size: 13px; cursor: pointer; transition: all .15s; } .hx-feedback-btn:hover { border-color: var(--hezi-accent); color: var(--hezi-accent); background: var(--hezi-accent-soft-2); } body.dark-theme .hx-feedback-btn, body.dark .hx-feedback-btn { color: var(--muted-2, #aaa); border-color: rgba(255,255,255,.15); } body.dark-theme .hx-feedback-btn:hover, body.dark .hx-feedback-btn:hover { color: var(--hezi-accent); border-color: var(--hezi-accent); background: rgba(169,116,79,.1); } /* 步骤① 右栏：拉高填满剩余空间，内部滚动 */ .hx-step1-right { min-width: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; } .hx-step1-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; border: 2px dashed var(--border, rgba(255,255,255,.08)); border-radius: 14px; background: rgba(0,0,0,.02); text-align: center; color: var(--muted-2, #9aa0a6); flex: 1 1 auto; min-height: 160px; } .hx-step1-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(163,98,58,.08); color: #a3623a; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin-bottom: 14px; } .hx-step1-empty-title { font-size: 16px; font-weight: 700; color: var(--main-color, #e0e0e0); margin: 0 0 6px; } .hx-step1-empty-sub { font-size: 13px; color: var(--muted-2, #9aa0a6); margin: 0; line-height: 1.6; } /* 搜索结果面板：顶部状态栏 + 卡片网格（每小区独立一卡） */ .hx-step1-result-panel { display: flex; flex-direction: column; gap: 12px; } .hx-step1-result-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--border, #e3e3e3); border-radius: 10px; background: rgba(0,0,0,.03); font-size: 13px; } .hx-result-header-l { color: var(--main-color, #333); } .hx-result-keyword { color: var(--hezi-accent); font-weight: 700; margin: 0 2px; } .hx-result-count-wrap { color: var(--muted-2, #9aa0a6); margin-left: 4px; } .hx-result-header-r { display: flex; align-items: center; gap: 14px; } .hx-result-clear, .hx-result-back { font-size: 13px; text-decoration: none; cursor: pointer; transition: opacity .15s; } .hx-result-clear { color: #e74c3c; } .hx-result-back { color: var(--hezi-accent); } .hx-result-clear:hover, .hx-result-back:hover { opacity: .7; } /* 搜索结果卡片网格（每小区独立一卡，3 列布局） */ .hx-az-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hx-az-card { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border: 1px solid var(--border, #e3e3e3); border-radius: 10px; background: #fff; transition: all .2s ease; min-width: 0; cursor: pointer; } .hx-az-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hx-az-row-top { display: flex; align-items: center; gap: 8px; } .hx-az-card:hover { border-color: rgba(163,98,58,.4); box-shadow: 0 2px 10px rgba(0,0,0,.06); } .hx-az-card.selected { border-color: var(--hezi-accent); background: var(--hezi-accent-soft); box-shadow: 0 0 0 2px var(--hezi-accent-soft); } .hx-az-letter { width: 30px; height: 30px; border-radius: 50%; background: #a3623a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: none; align-self: center; } .hx-az-name { flex: 1; min-width: 0; font-size: 13px; color: var(--main-color, #333); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-az-sub { font-size: 11px; color: var(--muted-2, #9aa0a6); margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-az-count { flex: none; font-size: 12px; color: var(--muted-2, #9aa0a6); font-weight: 500; } .hx-az-card.selected .hx-az-name { color: var(--hezi-accent); font-weight: 600; } .hx-az-empty { grid-column: 1 / -1; padding: 28px 10px; text-align: center; color: var(--muted-2, #9aa0a6); font-size: 13px; } /* ===== 步骤③ 确认列表 ===== */ .hx-confirm-list { display: flex; flex-direction: column; gap: 8px; } .hx-confirm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border, #e3e3e3); border-radius: 10px; background: #fafafa; } .hx-confirm-lbl { flex: none; width: 72px; font-size: 13px; color: var(--muted-2, #9aa0a6); } .hx-confirm-val { flex: 1; font-size: 14px; color: var(--main-color, #333); } .hx-confirm-row-img { align-items: center; } .hx-confirm-thumb { width: 64px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; background-color: #f2f2f2; } /* ===== 框底：sticky 下一步 ===== */ .hezi-frame-footer { position: sticky; bottom: 0; left: 0; right: 0; background: var(--main-bg-color, #FBF9F5); border: 1px solid var(--border, #eee); border-radius: 12px; padding: 12px 16px; margin: 0 16px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.08); z-index: 5; } .hezi-frame-footer-inner { display: flex; justify-content: flex-end; gap: 10px; align-items: center; } .hx-clear-footer { border-radius: 8px; background: transparent; color: var(--muted-2, #9aa0a6); border: 1px solid var(--border, #eee); } .hx-clear-footer:hover { background: rgba(0,0,0,.05); color: var(--main-color, #333); } body.dark-theme .hx-clear-footer, body.dark .hx-clear-footer { color: #9aa0a6; border-color: #2a2e38; } body.dark-theme .hx-clear-footer:hover, body.dark .hx-clear-footer:hover { background: rgba(255,255,255,.08); color: #e9e9ea; } /* ===== Toast ===== */ .hx-toast { margin: 0 16px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(46,204,113,.12); color: #27ae60; } .hx-toast.err { background: rgba(231,76,60,.12); color: #e74c3c; } /* ===== 响应式 ===== */ @media (max-width: 720px) { .hx-step1-grid { grid-template-columns: 1fr; } .hx-az-grid { grid-template-columns: repeat(2, 1fr); } } .hezi-hx-row { margin-bottom: 14px; } .hezi-hx-row > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--main-color, #333); } .hezi-hx-row .req { color: #e74c3c; } .hezi-modal-label .opt, .hezi-hx-row .opt { color: var(--muted-2, #9aa0a6); font-weight: 500; font-size: 11px; margin-left: 4px; } .hezi-hx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hezi-hx-hint { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted-2, #9aa0a6); } .hezi-hx-msg { margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; } .hezi-hx-msg.ok { background: rgba(46, 204, 113, .12); color: #27ae60; } .hezi-hx-msg.err { background: rgba(231, 76, 60, .12); color: #e74c3c; } .hezi-hx-actions { margin-top: 4px; } /* ===== 户型上传三步向导 ===== */ /* 向导整体：flex 列，让步骤内容吃满空间、footer 贴底 */ .hezi-huxing-wizard { margin-top: 4px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .hx-step { margin-top: 6px; } .hx-step-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--main-color, #333); } .hx-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hezi-accent); color: #fff; font-size: 13px; font-weight: 700; flex: none; } /* 步骤② 小区横幅（4 列信息） */ .hx-comm-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--hezi-accent-soft-2); border: 1px solid var(--hezi-accent-soft); margin-bottom: 16px; } .hx-comm-banner-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 16px; align-items: start; flex: 1; min-width: 0; } .hx-comm-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hx-comm-col-name { justify-content: center; } .hx-comm-name { font-size: 16px; font-weight: 700; color: var(--main-color, #333); } .hx-comm-row { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; color: var(--muted-2, #9aa0a6); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-comm-row:empty { display: none; } .hx-comm-row span + span::before { content: ' · '; } .hx-comm-status { color: var(--hezi-accent); font-weight: 600; } .hx-existing-wrap { margin-bottom: 16px; } .hx-existing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; } .hx-existing-title { font-size: 14px; font-weight: 700; margin: 0; color: var(--main-color, #333); } .hx-clear-comm { flex: 0 0 auto; padding: 5px 12px; font-size: 12px; line-height: 1; border-radius: 8px; background: var(--hezi-accent-soft-2); color: var(--hezi-accent); border: 1px solid var(--hezi-accent-soft); } .hx-clear-comm:hover { background: var(--hezi-accent-soft); } .hx-existing { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .hx-existing-empty { grid-column: 1 / -1; font-size: 13px; color: var(--muted-2, #9aa0a6); padding: 10px 0; } .hx-plan-card { position: relative; border: 1px solid var(--border, #e3e3e3); border-radius: 10px; overflow: hidden; background: #fff; } .hx-plan-thumb { height: 92px; background-size: cover; background-position: center; background-color: #f2f2f2; } .hx-plan-thumb-null { display: flex; align-items: center; justify-content: center; color: var(--muted-2, #9aa0a6); font-size: 12px; } .hx-plan-body { padding: 8px 10px; } .hx-plan-layout { font-size: 13px; font-weight: 600; color: var(--main-color, #333); } .hx-plan-meta { font-size: 12px; color: var(--muted-2, #9aa0a6); margin-top: 2px; } .hx-plan-flag { position: absolute; top: 6px; right: 6px; background: #f39c12; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; } .hx-form-title { font-size: 14px; font-weight: 700; margin: 4px 0 12px; color: var(--main-color, #333); } /* 步骤② 三栏卡片布局 */ .hx-form-grid { display: grid; grid-template-columns: 260px 1fr 240px; gap: 16px; align-items: start; } .hx-form-card { background: #fff; border: 1px solid var(--border, #e3e3e3); border-radius: 12px; padding: 14px; } .hx-form-card-wide { min-width: 0; } .hx-card-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--main-color, #333); } .hx-field { margin-bottom: 12px; } .hx-field:last-child { margin-bottom: 0; } .hx-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--main-color, #333); } .hx-field .req { color: #e74c3c; } .hx-field .form-control { width: 100%; } .hx-check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--main-color, #333); cursor: pointer; } .hx-check-label input { margin: 0; } .hx-thumb-preview { min-height: 180px; border: 2px dashed var(--border, #e3e3e3); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; } .hx-thumb-placeholder { font-size: 13px; color: var(--muted-2, #9aa0a6); } .hx-thumb-preview img { max-width: 100%; max-height: 260px; object-fit: contain; display: block; } .hx-add-more-bar { margin-top: 16px; padding: 14px; background: #fff; border: 1px solid var(--border, #e3e3e3); border-radius: 12px; text-align: center; } .hx-add-more { width: 100%; } .hx-add-more-tip { margin: 8px 0 0; font-size: 12px; color: var(--muted-2, #9aa0a6); } /* CAD / 户型图美化上传区 */ .hx-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border: 2px dashed var(--border, #e3e3e3); border-radius: 10px; background: #fafafa; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; } .hx-upload-zone:hover { border-color: var(--hezi-accent); background: var(--hezi-accent-soft-2); } .hx-upload-zone.dragover { border-color: var(--hezi-accent); background: var(--hezi-accent-soft); } .hx-upload-icon svg { width: 34px; height: 34px; color: var(--hezi-accent); } .hx-upload-text { font-size: 13px; font-weight: 600; color: var(--main-color, #333); } .hx-upload-hint { font-size: 12px; color: var(--muted-2, #9aa0a6); } .hx-upload-name { font-size: 12px; color: var(--hezi-accent); margin-top: 2px; word-break: break-all; } .hx-upload-zone-sm { padding: 14px; } .hx-upload-zone-sm .hx-upload-text { font-size: 13px; } @media (max-width: 1100px) { .hx-form-grid { grid-template-columns: 1fr; } .hx-comm-banner-grid { grid-template-columns: auto 1fr; gap: 10px 14px; } } @media (max-width: 768px) { .hx-comm-banner { flex-wrap: wrap; } .hx-comm-banner-grid { grid-template-columns: 1fr; width: 100%; } .hx-change-comm { width: 100%; margin-top: 8px; } } /* 暗色态 */ body.dark-theme .hezi-tab-desc, body.dark .hezi-tab-desc, body.dark-theme .hezi-stepper, body.dark .hezi-stepper, body.dark-theme .hezi-frame-footer, body.dark .hezi-frame-footer { border-color: #2a2e38; } body.dark-theme .hezi-frame-footer, body.dark .hezi-frame-footer { background: var(--main-bg-color, #242019); } body.dark-theme .hx-confirm-val, body.dark .hx-confirm-val, body.dark-theme .hx-plan-layout, body.dark .hx-plan-layout, body.dark-theme .hezi-stepper-item.active .hezi-stepper-lbl, body.dark .hezi-stepper-item.active .hezi-stepper-lbl { color: #e9e9ea; } body.dark-theme .hezi-stepper-num, body.dark .hezi-stepper-num { background: #2a2e38; color: #8a8a8a; } body.dark-theme .hezi-stepper-item.active .hezi-stepper-num, body.dark .hezi-stepper-item.active .hezi-stepper-num { background: #fff; color: #1f1f1f; } body.dark-theme .hezi-stepper-line, body.dark .hezi-stepper-line { background: #2a2e38; } body.dark-theme .hx-az-card, body.dark .hx-az-card { background: #1f232b; border-color: #2a2e38; } body.dark-theme .hx-az-card:hover, body.dark .hx-az-card:hover { border-color: rgba(163,98,58,.55); box-shadow: 0 2px 10px rgba(0,0,0,.3); } body.dark-theme .hx-step1-result-header, body.dark .hx-step1-result-header { background: rgba(255,255,255,.03); border-color: #2a2e38; } body.dark-theme .hx-step1-result-header, body.dark .hx-step1-result-header, body.dark-theme .hx-result-header-l, body.dark .hx-result-header-l { color: #e9e9ea; } body.dark-theme .newposts-wrap, body.dark .newposts-wrap, body.dark-theme .content-wrap.newposts-wrap, body.dark .content-wrap.newposts-wrap { background: transparent; } body.dark-theme .hx-new-comm, body.dark .hx-new-comm { background: #181b21; border-color: #2a2e38; } body.dark-theme .hx-confirm-row, body.dark .hx-confirm-row { background: #181b21; border-color: #2a2e38; } body.dark-theme .hx-confirm-lbl, body.dark .hx-confirm-lbl { color: #8a8a8a; } body.dark-theme .hx-comm-banner, body.dark .hx-comm-banner { background: var(--hezi-accent-soft); border-color: var(--hezi-accent-soft); } body.dark-theme .hx-comm-name, body.dark .hx-comm-name { color: #e9e9ea; } body.dark-theme .hx-comm-row, body.dark .hx-comm-row { color: #8a8a8a; } body.dark-theme .hx-form-card, body.dark .hx-form-card { background: #1f232b; border-color: #2a2e38; } body.dark-theme .hx-card-title, body.dark .hx-card-title, body.dark-theme .hx-field > label, body.dark .hx-field > label, body.dark-theme .hx-check-label, body.dark .hx-check-label { color: #e9e9ea; } body.dark-theme .hx-thumb-preview, body.dark .hx-thumb-preview { background: #181b21; border-color: #2a2e38; } body.dark-theme .hx-add-more-bar, body.dark .hx-add-more-bar { background: #1f232b; border-color: #2a2e38; } body.dark-theme .hx-upload-zone, body.dark .hx-upload-zone { background: #181b21; border-color: #2a2e38; } body.dark-theme .hx-upload-zone:hover, body.dark .hx-upload-zone:hover { background: rgba(169,116,79,.12); border-color: var(--hezi-accent); } body.dark-theme .hx-upload-zone.dragover, body.dark .hx-upload-zone.dragover { background: rgba(169,116,79,.18); } body.dark-theme .hx-upload-text, body.dark .hx-upload-text { color: #e9e9ea; } body.dark-theme .hx-upload-hint, body.dark .hx-upload-hint { color: #8a8a8a; } body.dark-theme .hx-upload-name, body.dark .hx-upload-name { color: var(--hezi-accent); } body.dark-theme .hx-plan-card, body.dark .hx-plan-card { background: #1f232b; border-color: #2a2e38; } body.dark-theme .hx-plan-thumb-null, body.dark .hx-plan-thumb-null { background: #2a2e38; color: #8a8a8a; } body.dark-theme .hx-step1-empty, body.dark .hx-step1-empty { background: rgba(255,255,255,.02); border-color: #2a2e38; } body.dark-theme .hx-step1-empty-title, body.dark .hx-step1-empty-title { color: #e9e9ea; } /* 暗色态：左侧搜索框 + 急缺小区 */ body.dark-theme .hx-search-box, body.dark .hx-search-box { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); } body.dark-theme .hx-selected-status, body.dark .hx-selected-status { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } body.dark-theme .hx-urgent-section, body.dark .hx-urgent-section { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); } body.dark-theme .hx-urgent-header, body.dark .hx-urgent-header { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.04); } body.dark-theme .hx-urgent-card, body.dark .hx-urgent-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } body.dark-theme .hx-urgent-card:hover, body.dark .hx-urgent-card:hover { background: rgba(255,255,255,.08); } /* ===== 编辑器增强：提示框 / 画廊 / 案例卡片 / 分栏 / 首字 / 目录 / 保存状态 ===== */ /* —— 提示/标注框（4 型，靠左边色条区分） —— */ .hezi-callout { margin: 14px 0; padding: 10px 14px; border-radius: 8px; border-left: 4px solid var(--hezi-accent, #f04494); background: rgba(240,68,148,.06); font-size: 14px; line-height: 1.7; } .hezi-callout .hezi-callout-label { display: inline-block; font-weight: 700; margin-right: 8px; } .hezi-callout p { margin: 4px 0 0; } .hezi-callout-info { border-left-color: #3a8ee6; background: rgba(58,142,230,.08); } .hezi-callout-warning { border-left-color: #e6a23c; background: rgba(230,162,60,.10); } .hezi-callout-danger { border-left-color: #e74c3c; background: rgba(231,76,60,.10); } .hezi-callout-example { border-left-color: #27ae60; background: rgba(39,174,96,.10); } /* —— 图片画廊（网格） —— */ .hezi-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; } .hezi-gallery-img { width: 100%; height: 140px; object-fit: cover; display: block; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(0,0,0,.04); } @media (max-width: 600px) { .hezi-gallery { grid-template-columns: repeat(2, 1fr); } } /* —— 案例卡片 —— */ .hezi-case-card { display: flex; gap: 14px; align-items: stretch; margin: 14px 0; padding: 12px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; background: rgba(255,255,255,.03); } .hezi-case-thumb-img, .hezi-case-thumb-ph { flex: 0 0 140px; width: 140px; height: 100px; object-fit: cover; border-radius: 8px; display: block; } .hezi-case-thumb-ph { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); color: var(--muted-2, #9aa0a6); font-size: 13px; border: 1px dashed var(--border, rgba(255,255,255,.15)); } .hezi-case-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hezi-case-title { font-size: 16px; font-weight: 700; color: var(--main-color, #e0e0e0); } .hezi-case-desc { font-size: 13px; color: var(--muted-2, #9aa0a6); margin-top: 6px; line-height: 1.6; flex: 1; } .hezi-case-link { font-size: 13px; color: var(--hezi-accent, #f04494); margin-top: 8px; font-weight: 600; } .hezi-case-link-wrap { text-decoration: none; } @media (max-width: 600px) { .hezi-case-card { flex-direction: column; } .hezi-case-thumb-img, .hezi-case-thumb-ph { width: 100%; flex: none; height: 160px; } } /* —— 分栏布局 —— */ .hezi-columns { display: flex; gap: 16px; margin: 14px 0; } .hezi-col { flex: 1; min-width: 0; } .hezi-col-2 .hezi-col { width: 50%; } .hezi-col-3 .hezi-col { width: 33.333%; } @media (max-width: 600px) { .hezi-columns { flex-direction: column; } .hezi-col-2 .hezi-col, .hezi-col-3 .hezi-col { width: 100%; } } /* —— 首字下沉 —— */ .hezi-dropcap { float: left; font-size: 3.2em; line-height: .9; font-weight: 700; margin: 4px 8px 0 0; color: var(--hezi-accent, #f04494); } /* —— 自动目录 —— */ .hezi-toc { margin: 16px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(0,0,0,.02); } .hezi-toc-title { font-size: 14px; font-weight: 700; color: var(--main-color, #e0e0e0); margin-bottom: 8px; } .hezi-toc ul { margin: 0; padding-left: 18px; } .hezi-toc li { margin: 4px 0; line-height: 1.6; } .hezi-toc li a { color: var(--main-color, #c9c9c9); text-decoration: none; } .hezi-toc li a:hover { color: var(--hezi-accent, #f04494); } .hezi-toc-h3 { font-size: 13px; } .hezi-toc-h3 a { color: var(--muted-2, #9aa0a6); } /* —— 第 3 行工具栏文本按钮适配（防过大） —— */ .mce-toolbar .mce-btn[aria-label="表格"], .mce-toolbar .mce-btn[aria-label="模板"], .mce-toolbar .mce-btn[aria-label="商品"], .mce-toolbar .mce-btn[aria-label="提示框"], .mce-toolbar .mce-btn[aria-label="画廊"], .mce-toolbar .mce-btn[aria-label="案例"], .mce-toolbar .mce-btn[aria-label="分栏"], .mce-toolbar .mce-btn[aria-label="首字"], .mce-toolbar .mce-btn[aria-label="目录"] { font-size: 12px; } /* —— 自动保存状态指示 —— */ .hezi-save-status { margin-left: auto; font-size: 12px; font-weight: 600; } .hezi-save-status-idle { color: var(--muted-2, #9aa0a6); } .hezi-save-status-editing { color: #e6a23c; } .hezi-save-status-saving { color: #3a8ee6; } .hezi-save-status-saved { color: #27ae60; } /* 暗色态补充 */ body.dark-theme .hezi-callout, body.dark .hezi-callout { background: rgba(255,255,255,.04); } body.dark-theme .hezi-case-card, body.dark .hezi-case-card { background: rgba(255,255,255,.03); } body.dark-theme .hezi-case-thumb-ph, body.dark .hezi-case-thumb-ph { background: rgba(255,255,255,.05); } body.dark-theme .hezi-toc, body.dark .hezi-toc { background: rgba(255,255,255,.02); } /* ===== 编辑器自建模态框（投稿页编辑器按钮：表格/商品/画廊/案例/提示） ===== 纯 DOM 模态框（heziModal 创建，挂载到父 document body），不依赖 TinyMCE windowManager，样式 100% 可控、深浅主题自适应。 */ .hezi-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 20px; } .hezi-modal { width: 100%; max-width: 620px; background: var(--main-bg, #fff); border: 1px solid var(--border, #e3e3e3); border-radius: 14px; box-shadow: 0 18px 54px rgba(0,0,0,.30); overflow: hidden; animation: heziModalIn .15s ease-out; } @keyframes heziModalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hezi-modal-head { padding: 15px 20px; font-size: 15px; font-weight: 700; color: var(--main-color, #333); border-bottom: 1px solid var(--border, #e3e3e3); background: var(--main-bg, #fff); } .hezi-modal-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; } .hezi-modal-field { margin: 0; } .hezi-modal-field.full-width { grid-column: 1 / -1; } .hezi-modal-message { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; color: var(--main-color, #333); line-height: 1.6; } @media (max-width: 560px) { .hezi-modal { max-width: calc(100% - 32px); } .hezi-modal-body { grid-template-columns: 1fr; } .hezi-modal-field.full-width { grid-column: auto; } .hezi-modal-message { grid-column: auto; } } .hezi-modal-label { display: block; font-size: 13px; font-weight: 600; color: var(--main-color, #333); margin-bottom: 6px; } .hezi-modal-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #d9d9d9); border-radius: 9px; background: var(--main-bg, #fff); color: var(--main-color, #333); padding: 8px 11px; font-size: 13px; line-height: 1.5; font-family: inherit; transition: border-color .15s, box-shadow .15s; resize: vertical; } .hezi-modal-input:focus { outline: none; border-color: var(--hezi-accent); box-shadow: 0 0 0 3px var(--hezi-accent-soft); } /* 新建小区：区域两级联动 + AI 识别按钮 */ .hx-region-row { display: flex; gap: 8px; } .hx-region-row .hezi-modal-input { flex: 1 1 0; min-width: 0; } .hx-name-row { display: flex; gap: 8px; align-items: stretch; } .hx-name-row .hezi-modal-input { flex: 1 1 auto; min-width: 0; } .hx-ai-btn { flex: 0 0 auto; white-space: nowrap; padding: 0 16px; border: none; border-radius: 9px; background: var(--hezi-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s; } .hx-ai-btn:hover { filter: brightness(1.05); } .hx-ai-btn:disabled { opacity: .6; cursor: default; filter: none; } .hx-ai-hint { margin-top: 6px; font-size: 12px; color: var(--muted-2, #9aa0a6); line-height: 1.5; } .hx-ai-hint.err { color: var(--hezi-accent); } .hezi-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--border, #e3e3e3); background: var(--main-bg, #fff); } .hezi-modal-btn { border: 1px solid var(--border, #e3e3e3); background: rgba(0,0,0,.045); color: var(--main-color, #333); border-radius: 9px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .hezi-modal-btn:hover { background: rgba(0,0,0,.09); } .hezi-modal-btn-primary { background: var(--hezi-accent, #f04494); border-color: var(--hezi-accent, #f04494); color: #fff; } .hezi-modal-btn-primary:hover { background: var(--hezi-accent-hover); } /* 深色主题：模态框整体暗色接管 */ body.dark-theme .hezi-modal, body.dark .hezi-modal, body.dark-theme .hezi-modal-head, body.dark-theme .hezi-modal-body, body.dark-theme .hezi-modal-foot, body.dark .hezi-modal-head, body.dark .hezi-modal-body, body.dark .hezi-modal-foot { background: #1f232b; border-color: #2f343d; } body.dark-theme .hezi-modal-head, body.dark-theme .hezi-modal-label, body.dark-theme .hezi-modal-message, body.dark .hezi-modal-head, body.dark .hezi-modal-label, body.dark .hezi-modal-message { color: #e9e9ea; } body.dark-theme .hezi-modal-input, body.dark .hezi-modal-input { background: #15181e; border-color: #353b45; color: #e9e9ea; } body.dark-theme .hezi-modal-input:focus, body.dark .hezi-modal-input:focus { border-color: var(--hezi-accent); box-shadow: 0 0 0 3px var(--hezi-accent-soft); } body.dark-theme .hezi-modal-btn, body.dark .hezi-modal-btn { background: rgba(255,255,255,.07); border-color: #353b45; color: #e9e9ea; } body.dark-theme .hezi-modal-btn:hover, body.dark .hezi-modal-btn:hover { background: rgba(255,255,255,.13); } /* 卡片标题单行省略号（2026-08-18）：列表页(.posts-item.card)标题强制一行，超出加 … 父主题 .posts-item.card .item-heading 有 min-height:2.8em 预留两行，这里压成单行高度； white-space:nowrap + overflow:hidden + text-overflow:ellipsis 实现省略号。 body:not(.single) 前缀使特异性 (0,4,0) 压过父主题 (0,3,0)。 */ body:not(.single) .posts-item.card .item-heading { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }