/* 字体法则层（#242）的旧苹果灰令牌，在本页换成规则书冷灰（它负责的弹窗细节文字随之统一） */ html.wbx-on, html.wbx-on body, html.wbx-on #saas-fullscreen-app-wrapper { --sf-1: #18181B !important; --sf-2: #52525B !important; --sf-3: #71717A !important; --sf-4: #A1A1AA !important; --sf-brand: #4A55C7 !important; --sf-ok: #166534 !important; --sf-warn: #9A3412 !important; --sf-err: #991B1B !important; } html.wbx-on.dark-mode, html.wbx-on.dark-mode body, html.wbx-on.dark-mode #saas-fullscreen-app-wrapper { --sf-1: #FAFAFA !important; --sf-2: #D4D4D8 !important; --sf-3: #A1A1AA !important; --sf-4: #71717A !important; --sf-brand: #8E96F0 !important; --sf-ok: #86EFAC !important; --sf-warn: #FED7AA !important; --sf-err: #FCA5A5 !important; } /* ---------- 第一帧：容器里有新版外壳时，旧版侧栏和内容区直接不显示（不等脚本） ---------- */ html body #saas-dashboard-main-container:has(> #wbx) { display: block !important; height: 100vh !important; overflow: hidden !important; background: transparent !important; } html body #saas-dashboard-main-container:has(> #wbx) > :not(#wbx) { display: none !important; } html body #saas-fullscreen-app-wrapper:has(#wbx) { display: block !important; } /* ---------- 页面外壳：纸面 1024 居中，撑满屏幕高度 ---------- */ html.wbx-on body.saas-takeover-active, html.wbx-on #saas-fullscreen-app-wrapper { background: #E9E9EB !important; } html.wbx-on.dark-mode body.saas-takeover-active, html.wbx-on.dark-mode #saas-fullscreen-app-wrapper { background: #09090B !important; } html.wbx-on #saas-fullscreen-app-wrapper { display: block !important; } html.wbx-on #saas-dashboard-main-container { display: block !important; height: 100vh !important; overflow: hidden !important; background: transparent !important; } html.wbx-on #saas-global-sidebar, html.wbx-on .ds-col-center-wrapper { display: none !important; } #wbx { --w-t1: #18181B; --w-t2: #3F3F46; --w-t3: #71717A; --w-t4: #A1A1AA; --w-t5: #52525B; --w-line: #E4E4E7; --w-row: #F4F4F5; --w-soft: #FAFAFA; --w-paper: #FFFFFF; --w-ink: #27272A; --w-ink-edge: #18181B; --w-on-ink: #FAFAFA; --w-sel: #52525B; --w-field: #D4D4D8; --w-fill: #F7F7F8; --w-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --w-serif: "Songti SC", "STSong", "SimSun", serif; width: 1024px; max-width: 100%; height: 100vh; margin: 0 auto; display: flex; flex-direction: column; font-family: var(--w-sans); color: var(--w-t1); -webkit-font-smoothing: antialiased; } html.dark-mode #wbx { --w-t1: #FAFAFA; --w-t2: #D4D4D8; --w-t3: #A1A1AA; --w-t4: #71717A; --w-t5: #A1A1AA; --w-line: #3F3F46; --w-row: #27272A; --w-soft: #1F1F23; --w-paper: #18181B; --w-ink: #F4F4F5; --w-ink-edge: #FAFAFA; --w-on-ink: #18181B; --w-field: #52525B; --w-fill: #1F1F23; } #wbx *, #wbx *::before, #wbx *::after { box-sizing: border-box; } #wbx > .sos-banner { flex-shrink: 0; } #wbx .wbx-paper { flex: 1; min-height: 0; padding: 20px 48px 0; background: var(--w-paper); display: flex; flex-direction: column; gap: 24px; box-shadow: 0 0 0 1px #F4F4F5, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); } /* V1.3：和首页、AI 编剧的纸面阴影完全一致，切换时纸面两侧的灰底不再变深浅 */ #wbx .wbx-hero { flex-shrink: 0; text-align: center; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } #wbx .wbx-hero h1 { margin: 0; font-family: var(--w-serif); font-size: 24px; line-height: 32px; font-weight: 400; color: var(--w-t1); } #wbx .wbx-hero p { margin: 0; font-family: var(--w-serif); font-size: 18px; line-height: 28px; color: var(--w-t2); } #wbx .wbx-tool { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #wbx .wbx-total { font-size: 13px; line-height: 18px; color: var(--w-t3); } #wbx .wbx-search { width: 280px; height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--w-field); border-radius: 4px; background: var(--w-paper); color: var(--w-t4); box-shadow: 0 1px 2px rgba(0,0,0,.05); } #wbx .wbx-search:focus-within { border-color: var(--w-t3); } #wbx .wbx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 14px/20px var(--w-sans); color: var(--w-t1); } #wbx .wbx-search input::placeholder { color: var(--w-t4); } /* ---------- 三栏 ---------- */ #wbx .wbx-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 24px; } #wbx .wbx-col { min-height: 0; display: flex; flex-direction: column; background: var(--w-paper); border: 1px solid var(--w-line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); } #wbx .wbx-col-hd { height: 52px; flex-shrink: 0; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--w-line); } #wbx .wbx-col-hd b { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .35px; color: var(--w-t1); } #wbx .wbx-col-hd i { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--w-t3); } #wbx .wbx-new { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--w-field); border-radius: 4px; background: var(--w-paper); box-shadow: 0 1px 2px rgba(0,0,0,.05); font: 600 12px/16px var(--w-sans); letter-spacing: .3px; color: var(--w-t5); cursor: pointer; white-space: nowrap; } #wbx .wbx-new:hover { background: var(--w-soft); border-color: var(--w-t4); } #wbx .wbx-col-bd { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 64px; } #wbx .wbx-col-bd > div { display: block !important; } /* 文件夹分组条 */ #wbx .saas-folder-group { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #wbx .saas-folder-header { height: 37px !important; margin: 0 !important; padding: 6px 12px 6px 16px !important; display: flex !important; align-items: center !important; gap: 8px !important; background: var(--w-soft) !important; border: 0 !important; border-bottom: 1px solid var(--w-line) !important; border-radius: 0 !important; cursor: pointer; } #wbx .saas-folder-group + .saas-folder-group .saas-folder-header { border-top: 1px solid var(--w-line) !important; } #wbx .saas-folder-line { display: none !important; } #wbx .saas-folder-title { flex: 1; min-width: 0; margin: 0 !important; font: 600 13px/20px var(--w-sans) !important; letter-spacing: 0 !important; color: var(--w-t1) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wbx .saas-folder-count { order: 2; min-width: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; font: 400 12px/16px var(--w-sans) !important; color: var(--w-t3) !important; } #wbx .saas-folder-toggle-icon { order: 3; width: 14px !important; height: 14px !important; display: inline-flex !important; color: var(--w-t3) !important; background: transparent !important; transition: transform .15s; } #wbx .saas-folder-toggle-icon svg { width: 14px !important; height: 14px !important; stroke-width: 2 !important; } #wbx .saas-folder-content { display: block !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; } #wbx .saas-folder-group.is-collapsed .saas-folder-content, #wbx .saas-folder-group.collapsed .saas-folder-content, #wbx .saas-folder-group.folded .saas-folder-content { display: none !important; } #wbx .saas-folder-group.is-collapsed .saas-folder-toggle-icon, #wbx .saas-folder-group.collapsed .saas-folder-toggle-icon, #wbx .saas-folder-group.folded .saas-folder-toggle-icon { transform: rotate(-90deg); } /* 条目：两行，操作悬停出现 */ #wbx .saas-grid-card { position: relative !important; display: block !important; width: auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 10px 16px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--w-row) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer; overflow: visible !important; } #wbx .saas-grid-card:hover { background: var(--w-soft) !important; } #wbx .saas-card-icon, #wbx .saas-card-side { display: none !important; } #wbx .saas-card-body { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; background: transparent !important; } html body #wbx .wbx-col .saas-grid-card .saas-card-name { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--w-serif) !important; font-size: 14px !important; line-height: 22px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--w-t1) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: unset !important; } html body #wbx .wbx-col .saas-grid-card .saas-card-desc { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; font-family: var(--w-sans) !important; font-size: 11px !important; line-height: 16px !important; font-weight: 400 !important; color: var(--w-t3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #wbx .saas-card-footer { position: absolute !important; top: 8px !important; right: 8px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; display: none !important; } #wbx .saas-grid-card:hover .saas-card-footer, #wbx .saas-grid-card:focus-within .saas-card-footer { display: block !important; } #wbx .saas-card-actions { display: flex !important; gap: 2px !important; padding: 2px !important; border-radius: 6px !important; background: var(--w-paper) !important; box-shadow: 0 0 0 1px var(--w-line), 0 1px 2px rgba(0,0,0,.05) !important; } #wbx .saas-card-actions button { width: 26px !important; height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: var(--w-t5) !important; box-shadow: none !important; opacity: 1 !important; } #wbx .saas-card-actions button svg { width: 14px !important; height: 14px !important; } #wbx .saas-card-actions button:hover { background: rgba(161,161,170,.2) !important; color: var(--w-t1) !important; } #wbx .saas-card-actions button.danger:hover { background: #FEE2E2 !important; color: #991B1B !important; } #wbx .wbx-hide { display: none !important; } /* 空状态（插件写死的行内样式） */ #wbx .wbx-col-bd div[style*="dashed"] { margin: 16px !important; padding: 24px 16px !important; border: 1px dashed rgba(161,161,170,.55) !important; border-radius: 8px !important; background: rgba(228,228,231,.25) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #wbx .wbx-col-bd div[style*="dashed"] > div:first-child { display: none !important; } #wbx .wbx-col-bd div[style*="dashed"] > div:nth-child(2) { margin: 0 0 4px !important; font: 600 14px/20px var(--w-sans) !important; color: var(--w-t1) !important; } #wbx .wbx-col-bd div[style*="dashed"] > div:nth-child(3) { font-family: var(--w-serif) !important; font-size: 14px !important; line-height: 22px !important; color: var(--w-t3) !important; } #wbx .wbx-empty-search { margin: 16px; font-size: 13px; color: var(--w-t3); text-align: center; } /* 未登录：锁定卡片放进纸面 */ #wbx .wbx-guest { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 24px; } #wbx .wbx-guest-card { width: 100%; max-width: 560px; padding: 32px 24px; border: 1px dashed rgba(161,161,170,.55); border-radius: 8px; background: rgba(228,228,231,.25); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } #wbx .wbx-guest-card b { font: 600 16px/24px var(--w-sans); color: var(--w-t1); } #wbx .wbx-guest-card span { font: 400 15px/24px var(--w-serif); color: var(--w-t3); } #wbx .wbx-guest-card button { margin-top: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--w-ink-edge); border-radius: 4px; background: var(--w-ink); color: var(--w-on-ink); font: 600 13px/16px var(--w-sans); cursor: pointer; } /* V2.1.2 · 工具页隐藏滚动条（仍可滚动；不依赖 wbx-on 类，只要页面里有 #wbx 就生效） */ html body #wbx, html body #wbx *, html body #saas-dashboard-main-container:has(> #wbx), html.wbx-on, html.wbx-on body, html.wbx-on #saas-dashboard-main-container, html:has(#wbx), html:has(#wbx) body { scrollbar-width: none !important; -ms-overflow-style: none !important; } html body #wbx::-webkit-scrollbar, html body #wbx *::-webkit-scrollbar, html body #saas-dashboard-main-container:has(> #wbx)::-webkit-scrollbar, html.wbx-on::-webkit-scrollbar, html.wbx-on body::-webkit-scrollbar, html.wbx-on #saas-dashboard-main-container::-webkit-scrollbar, html:has(#wbx)::-webkit-scrollbar, html:has(#wbx) body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } html body #wbx::-webkit-scrollbar-thumb, html body #wbx *::-webkit-scrollbar-thumb, html body #saas-dashboard-main-container:has(> #wbx)::-webkit-scrollbar-thumb, html.wbx-on::-webkit-scrollbar-thumb, html.wbx-on body::-webkit-scrollbar-thumb, html.wbx-on #saas-dashboard-main-container::-webkit-scrollbar-thumb, html:has(#wbx)::-webkit-scrollbar-thumb, html:has(#wbx) body::-webkit-scrollbar-thumb { background: transparent !important; display: none !important; } /* V2.1.3 · 首页统一的 40px 小滑块（.sos-ms-layer，由 #199 的脚本画出）在工具页不显示 */ .sos-ms-layer, .sos-ms-thumb { display: none !important; } /* 窄屏 / 手机：三栏改上下排，整页滚动 */ @media (max-width: 960px) { #wbx .wbx-paper { padding: 20px 24px 0; } } @media (max-width: 860px) { html.wbx-on #saas-dashboard-main-container { overflow-y: auto !important; } #wbx { height: auto; min-height: 100vh; } #wbx .wbx-cols { grid-template-columns: minmax(0, 1fr); } #wbx .wbx-col-bd { overflow: visible; padding-bottom: 8px; } #wbx .wbx-tool { flex-wrap: wrap; } #wbx .wbx-search { width: 100%; } #wbx .wbx-tool-r { flex-wrap: wrap; width: 100%; } #wbx .wbx-tool-r .wbx-g2 { margin-right: 0; } } @media (max-width: 720px) { #wbx .wbx-paper { padding: 20px 16px 0; box-shadow: none; } #wbx .wbx-hero p { font-size: 16px; line-height: 24px; } } /* ================= 弹窗：灵感构建 / 结构骨架 / 快速改名 / 系统确认（规则书「弹窗」） ================= */ html.wbx-on body #story-modal-bg, html.wbx-on body #structure-modal-bg, html.wbx-on body #quickedit-modal-bg, html.wbx-on body #saas-dialog-overlay { background: rgba(9,9,11,.4) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.wbx-on body #story-modal-box, html.wbx-on body #structure-modal-box, html.wbx-on body #quickedit-modal-box, html.wbx-on body #saas-dialog-box { --m-t1: #18181B; --m-t2: #3F3F46; --m-t3: #71717A; --m-t4: #A1A1AA; --m-t5: #52525B; --m-line: #E4E4E7; --m-row: #F4F4F5; --m-soft: #FAFAFA; --m-fill: #F7F7F8; --m-paper: #FFFFFF; --m-ink: #27272A; --m-ink-edge: #18181B; --m-on-ink: #FAFAFA; --m-field: #D4D4D8; border: 1px solid var(--m-line) !important; border-radius: 12px !important; background: var(--m-paper) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1) !important; font-family: "DM Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif !important; color: var(--m-t1) !important; } html.wbx-on.dark-mode body #story-modal-box, html.wbx-on.dark-mode body #structure-modal-box, html.wbx-on.dark-mode body #quickedit-modal-box, html.wbx-on.dark-mode body #saas-dialog-box { --m-t1: #FAFAFA; --m-t2: #D4D4D8; --m-t3: #A1A1AA; --m-t4: #71717A; --m-t5: #A1A1AA; --m-line: #3F3F46; --m-row: #27272A; --m-soft: #1F1F23; --m-fill: #1F1F23; --m-paper: #18181B; --m-ink: #F4F4F5; --m-ink-edge: #FAFAFA; --m-on-ink: #18181B; --m-field: #52525B; } html.wbx-on body :is(#story-modal-box, #structure-modal-box, #quickedit-modal-box) h3 { margin: 0 !important; font-family: "Songti SC", "STSong", "SimSun", serif !important; font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--m-t1) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-head, .storyos-structure-head) { padding: 24px 24px 16px !important; border-bottom: 1px solid var(--m-line) !important; background: var(--m-paper) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-head, .storyos-structure-head) :is(p, .storyos-structure-sub, div > div:not(:first-child)) { font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--m-t3) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-head, .storyos-structure-head) > button, html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-head, .storyos-structure-head) button:last-child { width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--m-t3) !important; font-size: 18px !important; box-shadow: none !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-head, .storyos-structure-head) button:last-child:hover { background: rgba(161,161,170,.2) !important; color: var(--m-t1) !important; } /* 输入框一律灰底 */ html.wbx-on body :is(#story-modal-box, #structure-modal-box, #quickedit-modal-box) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { background-color: var(--m-fill) !important; border: 1px solid var(--m-line) !important; border-radius: 8px !important; box-shadow: none !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; color: var(--m-t1) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box, #quickedit-modal-box) :is(input, select, textarea):focus { background-color: var(--m-paper) !important; border-color: var(--m-t3) !important; outline: none !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) textarea { font-family: "Songti SC", "STSong", "SimSun", serif !important; line-height: 24px !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box, #quickedit-modal-box) ::placeholder { color: var(--m-t4) !important; } /* 字段名、分节标题：去掉彩色竖条 */ html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-field-label, .storyos-story-side-label, .storyos-story-titlebox-label, .storyos-structure-label) { font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--m-t5) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-sec-head, .storyos-structure-section-title) { font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; letter-spacing: .35px !important; color: var(--m-t1) !important; padding-left: 0 !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-sec-bar) { display: none !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-sec-head, .storyos-structure-section-title)::before { display: none !important; content: none !important; } /* 灵感构建：左侧目录 */ html.wbx-on body #story-modal-box .storyos-story-nav { background: var(--m-soft) !important; border-right: 1px solid var(--m-line) !important; } html.wbx-on body #story-modal-box .storyos-story-navlink { border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--m-t5) !important; background: transparent !important; } html.wbx-on body #story-modal-box .storyos-story-navlink:hover { background: rgba(161,161,170,.2) !important; color: var(--m-t1) !important; } html.wbx-on body #story-modal-box .storyos-story-navlink.active { background: #52525B !important; color: #FFFFFF !important; font-weight: 600 !important; } html.wbx-on body #story-modal-box .storyos-story-navnum { border-radius: 9999px !important; background: var(--m-line) !important; color: var(--m-t5) !important; font-size: 11px !important; font-weight: 600 !important; } html.wbx-on body #story-modal-box .storyos-story-navlink.active .storyos-story-navnum { background: rgba(255,255,255,.2) !important; color: #FFFFFF !important; } html.wbx-on body #story-modal-box .storyos-story-nav-meta { border-top-color: var(--m-line) !important; } html.wbx-on body #story-modal-box .storyos-story-titlebox { background: var(--m-fill) !important; border: 1px solid var(--m-line) !important; border-radius: 8px !important; } html.wbx-on body #story-modal-box .storyos-story-titlebox input { background: transparent !important; border: 0 !important; } html.wbx-on body #story-quill-paper-wrap { border: 1px solid var(--m-line) !important; border-radius: 8px !important; background: var(--m-paper) !important; box-shadow: none !important; overflow: hidden !important; } html.wbx-on body #story-quill-paper-wrap .ql-toolbar { border: 0 !important; border-bottom: 1px solid var(--m-line) !important; background: var(--m-soft) !important; } html.wbx-on body #story-quill-paper-wrap .ql-container { border: 0 !important; } html.wbx-on body #story-quill-paper-wrap .ql-editor { font-family: "Songti SC", "STSong", "SimSun", serif !important; font-size: 15px !important; line-height: 26px !important; color: var(--m-t1) !important; } html.wbx-on body #story-quill-counter { background: var(--m-soft) !important; border-top: 1px solid var(--m-line) !important; font-size: 12px !important; color: var(--m-t4) !important; } /* 标签胶囊（规则书「标签胶囊」） */ html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-tag, .storyos-structure-tag, .storyos-structure-node-chip) { height: 28px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid var(--m-line) !important; border-radius: 9999px !important; background: var(--m-paper) !important; box-shadow: none !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; color: var(--m-t5) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-tag, .storyos-structure-tag, .storyos-structure-node-chip):hover { background: var(--m-soft) !important; border-color: var(--m-t4) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-tag.active, .storyos-story-tag.selected, .storyos-story-tag.on, .storyos-structure-tag.selected, .storyos-structure-tag.active, .storyos-structure-node-chip.active) { background: #52525B !important; border-color: #52525B !important; color: #FFFFFF !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-tag-add, .storyos-structure-tag.custom-add, .storyos-structure-add-node-chip) { border-style: dashed !important; border-color: rgba(161,161,170,.6) !important; background: transparent !important; color: var(--m-t5) !important; } /* 结构骨架：卡片、时间线灰阶、诊断和提示 */ html.wbx-on body #structure-modal-box .storyos-structure-body { background: var(--m-soft) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-structure-card, .storyos-structure-advanced) { border: 1px solid var(--m-line) !important; border-radius: 8px !important; background: var(--m-paper) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; } html.wbx-on body #structure-modal-box .storyos-structure-advanced summary { font-size: 14px !important; font-weight: 600 !important; color: var(--m-t1) !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment { background: #E4E4E7 !important; background-image: none !important; box-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment:nth-child(even) { background: #D4D4D8 !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment.active { background: #52525B !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment .storyos-structure-segment-label { color: var(--m-t5, #52525B) !important; font-weight: 600 !important; text-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment.active .storyos-structure-segment-label { color: #FFFFFF !important; } html.wbx-on body #structure-modal-box .storyos-structure-boundary, html.wbx-on body #structure-modal-box .storyos-structure-boundary::before, html.wbx-on body #structure-modal-box .storyos-structure-boundary::after { border-color: #71717A !important; background-color: #FFFFFF !important; box-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-stage-meta strong { font-size: 13px !important; font-weight: 600 !important; color: var(--m-t1) !important; } html.wbx-on body #structure-modal-box .storyos-structure-stage-meta span, html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-structure-axis, .storyos-structure-timeline-row-axis) { font-size: 11px !important; font-weight: 400 !important; color: var(--m-t4) !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-structure-diagnostics, .storyos-structure-tip, .storyos-structure-stage-purpose) { border: 0 !important; border-radius: 6px !important; background: var(--m-row) !important; font-size: 12px !important; line-height: 18px !important; font-weight: 400 !important; color: var(--m-t2) !important; } html.wbx-on body #structure-modal-box .storyos-structure-diagnostics li { font-size: 13px !important; line-height: 20px !important; color: var(--m-t2) !important; } html.wbx-on body #structure-modal-box .storyos-structure-current-meta { border: 0 !important; background: var(--m-row) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--m-t1) !important; } html.wbx-on body #structure-modal-box .storyos-structure-section-head em, html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-structure-note-counter, #structure-stage-note-count) { font-size: 12px !important; font-weight: 400 !important; font-style: normal !important; color: var(--m-t3) !important; } html.wbx-on body #structure-modal-box .storyos-structure-mini-btn { height: 26px !important; padding: 4px 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; font-size: 12px !important; font-weight: 500 !important; color: var(--m-t5) !important; box-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-mini-btn:hover { background: rgba(161,161,170,.2) !important; color: var(--m-t1) !important; } html.wbx-on body #structure-modal-box .storyos-structure-mini-btn.danger { color: var(--m-t3) !important; } html.wbx-on body #structure-modal-box .storyos-structure-mini-btn.danger:hover { background: #FEE2E2 !important; color: #991B1B !important; } html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-structure-tag-box) { border: 1px solid var(--m-line) !important; border-radius: 8px !important; background: var(--m-soft) !important; } /* 页脚按钮 */ html.wbx-on body :is(#story-modal-box, #structure-modal-box) :is(.storyos-story-footer, .storyos-structure-footer) { padding: 16px 24px 20px !important; border-top: 1px solid var(--m-line) !important; background: var(--m-paper) !important; gap: 8px !important; } html.wbx-on body :is(#story-modal-box .storyos-story-footer, #structure-modal-box .storyos-structure-footer, #quickedit-modal-box, #saas-dialog-box) button { height: 32px !important; padding: 0 14px !important; border-radius: 4px !important; font-size: 13px !important; line-height: 16px !important; font-weight: 600 !important; letter-spacing: .3px !important; box-shadow: none !important; transform: none !important; } html.wbx-on body :is(#story-modal-box .storyos-story-footer button:not(:last-child), #structure-modal-box .storyos-structure-cancel, #quickedit-modal-box button:first-of-type, #saas-dialog-cancel) { border: 1px solid var(--m-field) !important; background: var(--m-paper) !important; color: var(--m-t5) !important; } html.wbx-on body :is(#story-modal-box .storyos-story-footer button:last-child, #structure-modal-box .storyos-structure-save, #quickedit-modal-box button:last-of-type) { border: 1px solid var(--m-ink-edge) !important; background: var(--m-ink) !important; background-image: none !important; color: var(--m-on-ink) !important; } html.wbx-on body #saas-dialog-confirm { border: 1px solid #7F1D1D !important; background: #991B1B !important; color: #FFFFFF !important; } /* 快速改名、系统确认 */ html.wbx-on body #quickedit-modal-box { padding: 24px !important; gap: 12px !important; } html.wbx-on body #quickedit-modal-box h3 { margin-bottom: 8px !important; } html.wbx-on body #quickedit-modal-box input { height: 40px !important; padding: 0 12px !important; } html.wbx-on body #saas-dialog-box { padding: 24px !important; } html.wbx-on body #saas-dialog-message { margin: 0 0 20px !important; font-size: 14px !important; line-height: 22px !important; color: var(--m-t2) !important; } html.wbx-on body #structure-modal-box .storyos-structure-segment { opacity: 1 !important; } html.wbx-on body #structure-modal-box .storyos-structure-boundary { background: transparent !important; border: 0 !important; box-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-boundary::before, html.wbx-on body #structure-modal-box .storyos-structure-boundary::after { background: #71717A !important; border: 0 !important; box-shadow: none !important; } html.wbx-on body #structure-modal-box .storyos-structure-stage-purpose :is(strong, b, span:first-child) { color: var(--m-t1) !important; font-weight: 600 !important; } html.wbx-on body #story-modal-box #story-quill-container, html.wbx-on body #story-modal-box #story-quill-container .ql-editor { background: var(--m-paper) !important; } html.wbx-on body #story-modal-box #story-quill-counter { color: var(--m-t4) !important; } html.wbx-on body #story-modal-box .storyos-story-nav-meta div:not([class]), html.wbx-on body #story-modal-box .storyos-story-sec div:not([class]):not(:has(*)) { color: var(--m-t3) !important; } /* ======================= V2.0 方案 X1：三类分开 ======================= */ #wbx .wbx-tool { margin-top: 28px; } #wbx .wbx-tabs { display: inline-flex; padding: 3px; border-radius: 9999px; background: var(--w-row); gap: 0; } #wbx .wbx-tabs button { all: unset; box-sizing: border-box; height: 30px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; font: 400 13px/18px var(--w-sans); color: var(--w-t5); cursor: pointer; } #wbx .wbx-tabs button:hover { color: var(--w-t1); } /* V2.0.5 · 我的资产 W1：最前面加「剧本库」（回到我的资产），和我的资产顶部同一栏：剧本库 · 人物设计 · 故事灵感 · 结构设计 */ #wbx .wbx-tabs a.wbx-lib { all: unset; box-sizing: border-box; height: 30px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; font: 400 13px/18px var(--w-sans); color: var(--w-t5); cursor: pointer; white-space: nowrap; } #wbx .wbx-tabs a.wbx-lib:hover { color: var(--w-t1); } #wbx .wbx-tabs a.wbx-lib:focus-visible { outline: 2px solid var(--w-t1); outline-offset: 1px; } /* V2.0.6 · K4（规则书 V2.113）：左「剧本 · 小说」一个胶囊；右「创作工具」小标 + 「人物设计 · 故事灵感 · 结构设计」一个胶囊，再往右是搜索和新建按钮 */ #wbx .wbx-tabs .wbx-dis { all: unset; box-sizing: border-box; height: 30px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; font: 400 13px/18px var(--w-sans); color: var(--w-t4); cursor: default; white-space: nowrap; } #wbx .wbx-ctl { margin-right: 2px; font: 600 11px/16px var(--w-sans); letter-spacing: .08em; color: var(--w-t3); white-space: nowrap; } #wbx .wbx-tool-r .wbx-g2 { margin-right: 0; } /* V2.0.9：右边不再接搜索框，胶囊贴右 */ /* V2.0.7 · 人物设计 C3「头像节点卡」（规则书 V2.115 / V2.116）：每份图谱一张卡，上半截迷你关系图，下半截标题 + 人数关系数 + 更新时间；故事灵感、结构设计不受影响 */ html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)) !important; gap: 20px !important; padding: 20px 0 8px !important; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-group.is-collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-group.collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-group.folded .saas-folder-content { display: none !important; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card, html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-content .saas-grid-card:first-child { display: flex !important; flex-direction: column !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid #EDEDF0 !important; border-radius: 10px !important; background: var(--w-paper) !important; overflow: hidden !important; box-shadow: none !important; transition: border-color .12s, box-shadow .12s; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card:hover { border-color: #D4D4D8 !important; background: var(--w-paper) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } #wbx .wbx-cm-g { height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: #FAFAFA; background-image: radial-gradient(#E4E4E7 1px, transparent 1.2px); background-size: 14px 14px; color: #D4D4D8; } #wbx .wbx-cm-g.is-pending { background-color: #FAFAFA; background-image: radial-gradient(#E4E4E7 1px, transparent 1.2px); background-size: 14px 14px; } #wbx .wbx-cm-g svg { display: block; width: 100%; height: 140px; } /* V2.10.0 · EUS-3「渐变连线 + 点阵」（规则书 V2.197） */ html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card, html body #wbx .wbx-col[data-wbx="charmap"] .saas-folder-content .saas-grid-card:first-child { border-radius: 16px !important; } #wbx .wbx-cm-g .wbx-cm-n { fill: #FFFFFF; } #wbx .wbx-cm-g .wbx-cm-t { fill: #3F3F46; } html.dark-mode #wbx .wbx-cm-g, html.dark-mode #wbx .wbx-cm-g.is-pending { background-color: #1F1F23; background-image: radial-gradient(#3F3F46 1px, transparent 1.2px); } html.dark-mode #wbx .wbx-cm-g .wbx-cm-n { fill: #18181B; } html.dark-mode #wbx .wbx-cm-g .wbx-cm-t { fill: #E4E4E7; } #wbx .wbx-col[data-wbx="charmap"] .wbx-bs-tag { left: 10px; top: 10px; background: #FFFFFF; color: #52525B; box-shadow: 0 0 0 1px #E4E4E7; } html.dark-mode #wbx .wbx-col[data-wbx="charmap"] .wbx-bs-tag { background: #27272A; color: #D4D4D8; box-shadow: 0 0 0 1px #3F3F46; } #wbx .wbx-cm-none { font: 400 12px/16px var(--w-sans); color: var(--w-t4); } html.dark-mode #wbx .wbx-cm-g { color: #3F3F46; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-card-body { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: baseline; row-gap: 8px !important; column-gap: 8px !important; padding: 10px 14px 14px !important; border-top: 1px solid var(--w-row) !important; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card .saas-card-name { grid-column: 1 / -1; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; white-space: normal !important; height: 40px !important; font-family: var(--w-sans) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--w-t1) !important; } #wbx .wbx-cm-m { font: 400 12px/16px var(--w-sans); font-variant-numeric: tabular-nums; color: var(--w-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card .saas-card-desc { grid-column: 1 / -1; font-size: 12px !important; line-height: 16px !important; color: var(--w-t4) !important; font-variant-numeric: tabular-nums; text-align: left; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-grid-card .wbx-cm-m + .saas-card-desc { grid-column: 2; text-align: right; } html body #wbx .wbx-col[data-wbx="charmap"] .saas-card-footer { top: 8px !important; right: 8px !important; transform: none !important; } /* V2.0.9 · 搜索和新建按钮放到当前分页第一个文件夹行最右端（规则书 V2.118；搜索规格同我的资产 V2.114） */ #wbx .wbx-paper > .wbx-tools2 { display: none; } #wbx .saas-folder-header { position: relative !important; } #wbx .saas-folder-header > .wbx-tools2 { position: absolute; right: 0; top: calc(50% + 6px); transform: translateY(-50%); } #wbx .wbx-tools2 { display: flex; align-items: center; gap: 10px; z-index: 2; cursor: default; } #wbx .wbx-orphan { display: block !important; text-align: right; padding: 18px 0 6px; min-height: 36px; box-sizing: content-box; } #wbx .wbx-orphan:empty { display: none !important; } #wbx .wbx-orphan > .wbx-tools2 { display: inline-flex; } #wbx .wbx-sbox { display: inline-flex; align-items: center; } #wbx .wbx-sbtn { all: unset; box-sizing: border-box; width: 30px; height: 30px; border: 1px solid var(--w-field); border-radius: 6px; background: var(--w-paper); color: var(--w-t3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #wbx .wbx-sbtn:hover { border-color: var(--w-t4); color: var(--w-t1); } #wbx .wbx-sbtn:focus-visible { outline: 2px solid var(--w-t1); outline-offset: 2px; } #wbx .wbx-sbox .wbx-search { display: none; } #wbx .wbx-sbox.is-open .wbx-search { display: flex; width: 220px; height: 30px; border-radius: 6px; } #wbx .wbx-sbox.is-open .wbx-sbtn { display: none; } #wbx .wbx-tools2 .wbx-new-main { height: 30px; } /* V2.0.10 · 文件夹行和剧本页逐像素一致（规则书 V2.119）：不被插件调淡；内距 18 / 6；第一个文件夹行离顶栏 32；颜色同剧本页。 （前缀 html body 是为了压过样式表更靠后的老规则——同优先级时后写的赢） */ html body #wbx .saas-folder-header { opacity: 1 !important; padding: 18px 0 6px !important; min-height: 0 !important; } html body #wbx .wbx-tool + .wbx-cols { margin-top: 8px; } html body #wbx .saas-folder-title { color: #8C8C8F !important; } html body #wbx .saas-folder-count { font-size: 13px !important; color: #C7C7CB !important; } html body #wbx .saas-folder-toggle-icon { color: #AAAAAF !important; } html body #wbx .saas-folder-toggle-icon svg { stroke-width: 1.8 !important; } html body #wbx .saas-folder-header:hover .saas-folder-title { color: #3F3F46 !important; } html.dark-mode body #wbx .saas-folder-title { color: #8E8E96 !important; } /* V2.0.11 · 结构设计 S1「分段时间条」（规则书 V2.120）：每份骨架一张卡，上半截是故事时间轴（每个阶段一段，宽度=占整部剧的百分比），下半截标题 + 集数阶段数 + 结构类型 */ html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 20px !important; padding: 20px 0 8px !important; } html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-group.is-collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-group.collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-group.folded .saas-folder-content { display: none !important; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card, html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-content .saas-grid-card:first-child { display: flex !important; flex-direction: column !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid #EDEDF0 !important; border-radius: 10px !important; background: var(--w-paper) !important; overflow: hidden !important; box-shadow: none !important; transition: border-color .12s, box-shadow .12s; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card:hover { border-color: #D4D4D8 !important; background: var(--w-paper) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } #wbx .wbx-sk-g { height: 92px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--w-fill); } #wbx .wbx-sk-g.is-pending { background-color: #FAFAFA; background-image: radial-gradient(#E4E4E7 1px, transparent 1.2px); background-size: 14px 14px; } /* V2.8.0 · EUR-2「一整条 + 刻度」（规则书 V2.194） */ html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card, html body #wbx .wbx-col[data-wbx="structure"] .saas-folder-content .saas-grid-card:first-child { border-radius: 16px !important; } #wbx .wbx-sk-g.is-line { display: block; padding: 0 16px; } #wbx .wbx-sk-ln { position: absolute; left: 16px; right: 16px; top: 50%; height: 22px; margin-top: -11px; } #wbx .wbx-sk-sg { position: absolute; top: 0; bottom: 0; border-radius: 9999px; background-repeat: no-repeat; } #wbx .wbx-sk-mk { position: absolute; top: -13px; bottom: -13px; width: 1.5px; margin-left: -.75px; background: rgba(63,63,70,.55); } #wbx .wbx-sk-mk::before { content: ""; position: absolute; top: -1px; left: -2.25px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #52525B; } html body #wbx .wbx-col[data-wbx="structure"] .saas-card-body { row-gap: 0 !important; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card.wbx-sk-ok .wbx-sk-m { display: none !important; } html.dark-mode #wbx .wbx-sk-g.is-pending { background-color: #1F1F23; background-image: radial-gradient(#3F3F46 1px, transparent 1.2px); } html.dark-mode #wbx .wbx-sk-mk { background: rgba(250,250,250,.45); } html.dark-mode #wbx .wbx-sk-mk::before { border-top-color: #D4D4D8; } #wbx .wbx-sk-none { font: 400 12px/16px var(--w-sans); color: var(--w-t4); } html body #wbx .wbx-col[data-wbx="structure"] .saas-card-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px !important; padding: 12px 14px 14px !important; border-top: 1px solid var(--w-row) !important; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card .saas-card-name { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; white-space: normal !important; height: 40px !important; font-family: var(--w-sans) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--w-t1) !important; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card .saas-card-desc { font-size: 12px !important; line-height: 16px !important; color: var(--w-t4) !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } html body #wbx .wbx-col[data-wbx="structure"] .saas-grid-card.wbx-sk-ok .saas-card-desc { display: none !important; } #wbx .wbx-sk-m { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 12px/16px var(--w-sans); font-variant-numeric: tabular-nums; } #wbx .wbx-sk-m span:first-child { color: var(--w-t3); white-space: nowrap; } #wbx .wbx-sk-m span:last-child { color: var(--w-t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #wbx .wbx-col[data-wbx="structure"] .saas-card-footer { top: 8px !important; right: 8px !important; transform: none !important; } @media (max-width: 720px) { #wbx .saas-folder-header { flex-wrap: wrap !important; } #wbx .saas-folder-header > .wbx-tools2 { position: static; transform: none; order: 9; width: 100%; justify-content: flex-end; margin-top: 8px; } } /* V2.0.8 · 故事灵感 N4「撕页便签」（规则书 V2.117）：纸色按卡片在文件夹里的顺序轮换；顶上粘胶条、撕口虚线、右下角翘起一个角；标题衬线 17，那句话衬线 13 */ html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 24px !important; padding: 22px 0 10px !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-folder-group.is-collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="story"] .saas-folder-group.collapsed .saas-folder-content, html body #wbx .wbx-col[data-wbx="story"] .saas-folder-group.folded .saas-folder-content { display: none !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card { --sn-p: #FFF3BF; --sn-b: #F8E38A; } /* 默认色（优先级低于下面按顺序轮换的规则） */ html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+1) { --sn-p: #FBE3E7; --sn-b: #F6C9D1; } html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+2) { --sn-p: #DDEFE4; --sn-b: #BFE0CD; } html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+3) { --sn-p: #FFF3BF; --sn-b: #F8E38A; } html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+4) { --sn-p: #DCE8F7; --sn-b: #BCD0EC; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+1) { --sn-p: #4A2F36; --sn-b: #5D3A43; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+2) { --sn-p: #2C4338; --sn-b: #38554A; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+3) { --sn-p: #4A4426; --sn-b: #5F5830; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-folder-content > .saas-grid-card:nth-child(4n+4) { --sn-p: #2D3B50; --sn-b: #3A4C66; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card, html body #wbx .wbx-col[data-wbx="story"] .saas-folder-content .saas-grid-card:first-child { position: relative !important; display: block !important; width: auto !important; min-height: 206px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); transition: filter .12s, transform .12s; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card:hover { background: transparent !important; filter: drop-shadow(0 5px 7px rgba(0,0,0,.22)); transform: translateY(-1px) !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(var(--sn-b) 0 22px, transparent 22px), repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 4px, transparent 4px 8px) 0 22px / 100% 1.5px no-repeat, var(--sn-p); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 1; width: 24px; height: 24px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.55)); clip-path: polygon(0 0, 100% 0, 0 100%); } html body #wbx .wbx-col[data-wbx="story"] .saas-card-body { position: relative; z-index: 2; display: block !important; padding: 36px 16px 18px !important; border: 0 !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card .saas-card-name { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; white-space: normal !important; max-height: 52px; margin: 0 !important; font-family: var(--w-serif) !important; font-size: 17px !important; line-height: 26px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: #18181B !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-grid-card .saas-card-desc { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4 !important; white-space: normal !important; max-height: 84px; margin: 8px 0 0 !important; font-family: var(--w-serif) !important; font-size: 13px !important; line-height: 21px !important; font-weight: 400 !important; color: #3F3F46 !important; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-grid-card .saas-card-name { color: #FAFAFA !important; } html.dark-mode #wbx .wbx-col[data-wbx="story"] .saas-grid-card .saas-card-desc { color: #D4D4D8 !important; } html body #wbx .wbx-col[data-wbx="story"] .saas-card-footer { z-index: 3; top: -12px !important; right: 8px !important; transform: none !important; } /* 悬停时的操作骑在卡片顶边上，不盖住标题 */ #wbx .wbx-tabs button i { font-style: normal; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; color: var(--w-t4); } html[data-wbx-tab="charmap"] #wbx .wbx-tabs [data-tab="charmap"], html[data-wbx-tab="story"] #wbx .wbx-tabs [data-tab="story"], html[data-wbx-tab="structure"] #wbx .wbx-tabs [data-tab="structure"] { background: var(--w-paper); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; color: var(--w-t1); } #wbx .wbx-tool-r { display: inline-flex; align-items: center; gap: 8px; } #wbx .wbx-search { width: 220px; height: 32px; } #wbx .wbx-new-main { all: unset; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 4px; background: var(--w-ink-edge); color: var(--w-on-ink); display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--w-sans); cursor: pointer; } #wbx .wbx-new-main:hover { background: var(--w-ink); } /* V2.0.4：按钮文字第一帧就是「新建图谱 / 闪现灵感 / 新建骨架」（按记住的分类，由页头脚本提前写进 html 的 data-wbx-tab），不再先显示「新建」再变长 */ #wbx .wbx-new-main span { font-size: 0 !important; display: inline-flex; align-items: center; height: 16px; line-height: 16px; } /* V2.5.1：字号 0 的外框按基线对齐会把字顶高，改成自己上下居中 */ #wbx .wbx-new-main span::after { content: "新建人物设计"; display: block; font-size: 12px; line-height: 16px; } #wbx .wbx-new-main svg { display: block; flex: none; } html[data-wbx-tab="story"] #wbx .wbx-new-main span::after { content: "故事便签"; } html[data-wbx-tab="structure"] #wbx .wbx-new-main span::after { content: "新建骨架"; } html.dark-mode #wbx .wbx-new-main { background: #FAFAFA; color: #18181B; } /* 只显示当前一类：第一帧由页头脚本设定 data-wbx-tab */ #wbx .wbx-cols { display: block !important; grid-template-columns: none !important; gap: 0 !important; padding-bottom: 0 !important; overflow-y: auto; } html[data-wbx-tab="charmap"] #wbx .wbx-col:not([data-wbx="charmap"]), html[data-wbx-tab="story"] #wbx .wbx-col:not([data-wbx="story"]), html[data-wbx-tab="structure"] #wbx .wbx-col:not([data-wbx="structure"]) { display: none !important; } #wbx .wbx-col { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #wbx .wbx-col-hd { display: none !important; } #wbx .wbx-col-bd { overflow: visible !important; padding-bottom: 48px !important; } /* 文件夹：「全部」里是灰色小标分组；选了某个文件夹就只显示它、不显示分组头 */ #wbx .saas-folder-header { height: auto !important; padding: 18px 0 6px !important; background: transparent !important; border: 0 !important; cursor: pointer; } #wbx .saas-folder-group + .saas-folder-group .saas-folder-header { border-top: 0 !important; } #wbx .saas-folder-title { flex: 0 1 auto !important; font: 600 14px/20px var(--w-sans) !important; letter-spacing: 0 !important; color: var(--w-t2) !important; } /* V2.0.3 · K1：类目名 14 / 600 深灰 */ #wbx .saas-folder-count { font-family: var(--w-sans) !important; font-size: 13px !important; line-height: 20px !important; color: var(--w-t4) !important; font-variant-numeric: tabular-nums; } #wbx .saas-folder-header { padding: 14px 0 6px !important; min-height: 40px; box-sizing: border-box; } #wbx .saas-folder-toggle-icon { color: var(--w-t3) !important; } #wbx .saas-folder-header:hover .saas-folder-title { color: var(--w-t1) !important; } #wbx .saas-folder-group.wbx-fhide { display: none !important; } #wbx .saas-folder-group.wbx-fonly .saas-folder-header { display: none !important; } #wbx .saas-folder-group.wbx-fonly .saas-folder-content { display: block !important; } /* 列表行 */ #wbx .saas-grid-card { padding: 12px 8px !important; margin: 0 -8px !important; border-top: 1px solid var(--w-row) !important; border-radius: 6px !important; } #wbx .saas-folder-content .saas-grid-card:first-child { border-top: 1px solid var(--w-line) !important; } html body #wbx .wbx-col .saas-grid-card .saas-card-name { font-family: var(--w-sans) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--w-t1) !important; } html body #wbx .wbx-col .saas-grid-card .saas-card-desc { font-size: 12px !important; line-height: 18px !important; color: var(--w-t4) !important; } #wbx .saas-card-footer { top: 50% !important; right: 8px !important; transform: translateY(-50%); } /* V2.0.2：胶囊不显示数量 */ #wbx .wbx-tabs button i { display: none !important; } /* ===== V2.2.0 · 头脑风暴（规则书 V2.170）===== */ html[data-wbx-tab="structure"] #wbx .wbx-tools2 .wbx-bs-btn { display: none !important; } /* V2.4.1：结构设计不做头脑风暴 */ #wbx .wbx-tools2 .wbx-bs-btn { all: unset; box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--w-field); background: var(--w-paper); color: var(--w-t5); display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--w-sans); cursor: pointer; white-space: nowrap; } #wbx .wbx-tools2 .wbx-bs-btn svg { width: 12px; height: 12px; flex: none; color: var(--w-t3); } #wbx .wbx-tools2 .wbx-bs-btn:hover { border-color: var(--w-t4); color: var(--w-t1); } #wbx .wbx-tools2 .wbx-bs-btn:hover svg { color: var(--w-t1); } #wbx .wbx-tools2 .wbx-bs-btn[aria-pressed="true"] { border-color: var(--w-ink-edge); color: var(--w-t1); } #wbx .wbx-tools2 .wbx-bs-btn:focus-visible { outline: 2px solid var(--w-t1); outline-offset: 2px; } /* 卡片上的「来自头脑风暴」小标 + 悬停「以此为基础继续风暴」 */ #wbx .saas-grid-card { position: relative; } #wbx .wbx-bs-tag { position: absolute; left: 8px; top: 8px; z-index: 3; height: 20px; padding: 0 8px; border-radius: 9999px; background: var(--w-ink); color: var(--w-on-ink); display: inline-flex; align-items: center; gap: 4px; font: 600 11px/20px var(--w-sans); pointer-events: none; white-space: nowrap; } #wbx .wbx-bs-tag svg { width: 10px; height: 10px; flex: none; } /* V2.10.2：构思卡片悬停只留「改名」「删除」；不显示「继续风暴」「打开」按钮和「来自头脑风暴」小标 */ html body #wbx .saas-card-actions button.wbx-bs-go, html body #wbx .saas-card-actions button.saas-action-btn:not(.danger) { display: none !important; } html body #wbx .wbx-bs-tag { display: none !important; } #wbx .saas-card-footer { z-index: 4; } #wbx .wbx-col[data-wbx="story"] .wbx-bs-tag { top: auto; bottom: 10px; left: 12px; } #wbx .saas-card-actions button.wbx-bs-go { color: var(--w-t5) !important; } #wbx .saas-card-actions button.wbx-bs-go svg { width: 14px !important; height: 14px !important; } /* 弹窗 */ #wbx-bs { --b-t1: #18181B; --b-t2: #3F3F46; --b-t3: #71717A; --b-t4: #A1A1AA; --b-t5: #52525B; --b-line: #E4E4E7; --b-row: #F4F4F5; --b-soft: #FAFAFA; --b-paper: #FFFFFF; --b-ink: #27272A; --b-on: #FAFAFA; --b-field: #D4D4D8; --b-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --b-serif: "Songti SC", "STSong", "SimSun", serif; position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; font-family: var(--b-sans); color: var(--b-t1); } html.dark-mode #wbx-bs { --b-t1: #FAFAFA; --b-t2: #D4D4D8; --b-t3: #A1A1AA; --b-t4: #71717A; --b-t5: #A1A1AA; --b-line: #3F3F46; --b-row: #27272A; --b-soft: #1F1F23; --b-paper: #18181B; --b-ink: #F4F4F5; --b-on: #18181B; --b-field: #52525B; } #wbx-bs.is-open { display: flex; } #wbx-bs *, #wbx-bs *::before, #wbx-bs *::after { box-sizing: border-box; } #wbx-bs .bs-dim { position: absolute; inset: 0; background: rgba(24,24,27,.46); } #wbx-bs .bs-box { position: relative; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--b-paper); border-radius: 18px; box-shadow: 0 24px 70px rgba(24,24,27,.28); display: flex; flex-direction: column; overflow: hidden; } #wbx-bs.is-list .bs-box { width: min(720px, calc(100vw - 24px)); height: min(802px, calc(100vh - 28px)); } #wbx-bs .bs-hd { display: flex; align-items: center; gap: 14px; padding: 22px 28px 0; flex: none; } #wbx-bs .bs-t { font: 700 22px/30px var(--b-serif); } #wbx-bs .bs-x { all: unset; margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--b-t3); cursor: pointer; font-size: 22px; line-height: 1; } #wbx-bs .bs-x:hover { background: var(--b-row); color: var(--b-t1); } #wbx-bs .bs-sub { padding: 4px 28px 0; font-size: 13px; line-height: 20px; color: var(--b-t3); flex: none; } #wbx-bs .bs-bd { padding: 0 28px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; } #wbx-bs .bs-bd::-webkit-scrollbar { display: none; } #wbx-bs .bs-seg { display: inline-flex; padding: 3px; border-radius: 9999px; background: var(--b-row); gap: 2px; } #wbx-bs .bs-seg button { all: unset; box-sizing: border-box; height: 30px; padding: 0 17px; border-radius: 9999px; display: inline-flex; align-items: center; font: 600 13.5px/18px var(--b-sans); color: var(--b-t5); cursor: pointer; } #wbx-bs .bs-seg button.is-on { background: var(--b-ink); color: var(--b-on); } #wbx-bs .bs-lab { font: 700 14px/20px var(--b-sans); margin: 20px 0 8px; } #wbx-bs .bs-lab small { font-weight: 400; font-size: 12.5px; color: var(--b-t3); margin-left: 4px; } #wbx-bs .bs-ta { width: 100%; height: 116px; resize: none; border: 1px solid var(--b-field); border-radius: 10px; background: var(--b-paper); padding: 12px 14px; font: 400 15px/23px var(--b-sans); color: var(--b-t1); outline: none; } #wbx-bs .bs-ta:focus { border-color: var(--b-ink); } #wbx-bs .bs-ta::placeholder { color: var(--b-t4); } #wbx-bs .bs-hint { font-size: 12px; line-height: 18px; color: var(--b-t3); margin-top: 8px; } #wbx-bs .bs-ex { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 30px; padding: 5px 13px; margin: 8px 8px 0 0; border-radius: 9999px; border: 1px dashed var(--b-t4); font: 400 13px/18px var(--b-sans); color: var(--b-t5); cursor: pointer; } #wbx-bs .bs-ex:hover { border-color: var(--b-ink); color: var(--b-t1); } #wbx-bs .bs-chip { all: unset; box-sizing: border-box; height: 32px; padding: 0 13px; border-radius: 9999px; border: 1px solid var(--b-field); display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--b-sans); color: var(--b-t1); background: var(--b-paper); cursor: pointer; margin: 0 8px 8px 0; } #wbx-bs .bs-chip.is-on { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on); } #wbx-bs .bs-chip.is-add { border-style: dashed; } #wbx-bs .bs-pick { margin: 0 0 10px; border: 1px solid var(--b-line); border-radius: 10px; max-height: 190px; overflow-y: auto; scrollbar-width: none; } #wbx-bs .bs-pick::-webkit-scrollbar { display: none; } #wbx-bs .bs-pick h6 { margin: 0; padding: 8px 12px 4px; font: 700 12px/16px var(--b-sans); color: var(--b-t3); background: var(--b-soft); } #wbx-bs .bs-pick button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 12px; font: 400 13.5px/20px var(--b-sans); color: var(--b-t1); cursor: pointer; border-top: 1px solid var(--b-row); } #wbx-bs .bs-pick button:hover { background: var(--b-row); } #wbx-bs details.bs-adv { margin-top: 12px; } #wbx-bs details.bs-adv summary { cursor: pointer; font: 700 13px/20px var(--b-sans); color: var(--b-t5); list-style: none; } #wbx-bs details.bs-adv summary::-webkit-details-marker { display: none; } #wbx-bs details.bs-adv summary::before { content: "▸ "; font-size: 11px; } #wbx-bs details.bs-adv[open] summary::before { content: "▾ "; } #wbx-bs .bs-resume { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--b-row); font-size: 13px; color: var(--b-t2); display: flex; align-items: center; gap: 10px; } #wbx-bs .bs-resume button { all: unset; margin-left: auto; font: 700 13px/18px var(--b-sans); border-bottom: 1px solid var(--b-t3); cursor: pointer; color: var(--b-t1); } #wbx-bs .bs-ft { flex: none; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--b-line); background: var(--b-paper); } #wbx-bs .bs-ft .bs-note { font-size: 12.5px; color: var(--b-t3); } #wbx-bs .bs-ft .bs-sp { flex: 1; } #wbx-bs .bs-go, #wbx-bs .bs-gh { all: unset; box-sizing: border-box; height: 42px; padding: 0 22px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 8px; font: 700 14px/18px var(--b-sans); cursor: pointer; white-space: nowrap; } #wbx-bs .bs-go { background: var(--b-ink); color: var(--b-on); border: 1px solid var(--b-ink); } #wbx-bs .bs-go[disabled] { opacity: .35; cursor: default; } #wbx-bs .bs-gh { border: 1px solid var(--b-field); color: var(--b-t1); background: var(--b-paper); padding: 0 20px; } #wbx-bs .bs-gh:hover { background: var(--b-row); } #wbx-bs .bs-go:focus-visible, #wbx-bs .bs-gh:focus-visible, #wbx-bs .bs-chip:focus-visible, #wbx-bs .bs-seg button:focus-visible, #wbx-bs .bs-th:focus-visible, #wbx-bs .bs-x:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 2px; } #wbx-bs .bs-sel { height: 42px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--b-field); background: var(--b-paper); color: var(--b-t1); font: 600 13px/18px var(--b-sans); max-width: 180px; } #wbx-bs .bs-newf { height: 42px; width: 150px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--b-ink); background: var(--b-paper); color: var(--b-t1); font: 600 13px/18px var(--b-sans); outline: none; } #wbx-bs .bs-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 28px; border-bottom: 1px solid var(--b-row); margin: 0 -28px; } #wbx-bs .bs-row .n { width: 20px; flex: none; padding-top: 3px; font-size: 12px; color: var(--b-t4); font-variant-numeric: tabular-nums; } #wbx-bs .bs-row .m { flex: 1; min-width: 0; } #wbx-bs .bs-row .tt { font: 700 16px/22px var(--b-serif); } #wbx-bs .bs-row .ds { font-size: 13px; line-height: 19px; color: var(--b-t5); margin-top: 1px; } #wbx-bs .bs-row .ca { font-size: 11.5px; line-height: 17px; color: var(--b-t3); margin-top: 3px; } #wbx-bs .bs-row.is-up { background: var(--b-row); box-shadow: inset 3px 0 0 var(--b-ink); } #wbx-bs .bs-row.is-dn { background: var(--b-soft); } #wbx-bs .bs-row.is-dn .tt, #wbx-bs .bs-row.is-dn .ds { color: var(--b-t4); text-decoration: line-through; } #wbx-bs .bs-ths { flex: none; display: flex; gap: 8px; } #wbx-bs .bs-th { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--b-field); display: inline-flex; align-items: center; justify-content: center; color: var(--b-t3); background: var(--b-paper); cursor: pointer; } #wbx-bs .bs-th:hover { border-color: var(--b-ink); color: var(--b-t1); } #wbx-bs .bs-th svg { width: 17px; height: 17px; } #wbx-bs .bs-th.is-up { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on); } #wbx-bs .bs-th.is-dn { background: var(--b-t5); border-color: var(--b-t5); color: var(--b-paper); } #wbx-bs .bs-rs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } #wbx-bs .bs-rs button { all: unset; box-sizing: border-box; height: 22px; padding: 0 9px; border-radius: 9999px; border: 1px solid var(--b-field); font: 400 11.5px/20px var(--b-sans); color: var(--b-t5); background: var(--b-paper); cursor: pointer; } #wbx-bs .bs-rs button.is-on { background: var(--b-t5); border-color: var(--b-t5); color: var(--b-paper); } #wbx-bs .bs-load { padding: 70px 0; text-align: center; color: var(--b-t3); font-size: 14px; } #wbx-bs .bs-err { margin-top: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--b-field); font-size: 13px; color: #991B1B; } html.dark-mode #wbx-bs .bs-err { color: #FCA5A5; } .wbx-bs-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 100001; height: 46px; padding: 0 20px; border-radius: 9999px; background: #18181B; color: #FAFAFA; display: flex; align-items: center; gap: 14px; font: 600 14px/20px "DM Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; box-shadow: 0 10px 30px rgba(24,24,27,.3); white-space: nowrap; max-width: calc(100vw - 24px); } html.dark-mode .wbx-bs-toast { background: #F4F4F5; color: #18181B; } .wbx-bs-toast button { all: unset; cursor: pointer; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-weight: 700; } .wbx-bs-toast .x { border: 0; opacity: .6; } .wbx-bs-flash { animation: wbxbsflash 1.6s ease-out 1; } @keyframes wbxbsflash { 0% { background: rgba(113,113,122,.25); } 100% { background: transparent; } } @media (max-width: 560px) { #wbx-bs .bs-box { border-radius: 14px; } #wbx-bs .bs-hd, #wbx-bs .bs-ft { padding-left: 18px; padding-right: 18px; } #wbx-bs .bs-bd { padding: 0 18px; } #wbx-bs .bs-row { margin: 0 -18px; padding: 12px 18px; } #wbx-bs .bs-ft { flex-wrap: wrap; } } /* V2.3.0 · 故事灵感 横向轮播 */ #wbx-bs.is-deck .bs-box { width: min(1180px, calc(100vw - 24px)); height: min(800px, calc(100vh - 28px)); } #wbx-bs .bs-seed { display: flex; align-items: center; gap: 10px; height: 56px; margin-top: 20px; padding: 0 8px 0 18px; border: 1.5px solid var(--b-ink); border-radius: 12px; background: var(--b-paper); } #wbx-bs .bs-seed-in { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 17px/24px var(--b-sans); color: var(--b-t1); } #wbx-bs .bs-seed-in::placeholder { color: var(--b-t4); } #wbx-bs .bs-dice { all: unset; box-sizing: border-box; height: 38px; padding: 0 12px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--b-sans); color: var(--b-t5); cursor: pointer; } #wbx-bs .bs-dice:hover { background: var(--b-row); color: var(--b-t1); } #wbx-bs .bs-dice svg, #wbx-bs .bs-gh svg { width: 14px; height: 14px; } #wbx-bs .bs-lk { all: unset; cursor: pointer; font: 600 12.5px/18px var(--b-sans); color: var(--b-t5); } #wbx-bs .bs-lk:hover { color: var(--b-t1); text-decoration: underline; text-underline-offset: 3px; } #wbx-bs .bs-lk:focus-visible, #wbx-bs .bs-dice:focus-visible, #wbx-bs .bs-nav:focus-visible, #wbx-bs .bs-stage:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 2px; } #wbx-bs .bs-seedline { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 28px 0; font-size: 14px; } #wbx-bs .bs-seedline b { font-weight: 600; } #wbx-bs .bs-sp { flex: 1; } #wbx-bs .bs-gh.bs-sm { height: 34px; padding: 0 13px; font-size: 12.5px; gap: 6px; } #wbx-bs .bs-gh[disabled] { opacity: .4; cursor: default; } #wbx-bs .bs-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; } #wbx-bs .bs-sw { position: absolute; top: 18px; left: 50%; width: min(440px, calc(100% - 140px)); transform: translateX(-50%); border-radius: 20px; background: var(--b-paper); border: 1px solid var(--b-line); box-shadow: 0 14px 40px rgba(24,24,27,.14); overflow: hidden; transition: transform .22s ease, opacity .22s ease; user-select: none; touch-action: pan-y; } #wbx-bs .bs-sw.is-center { z-index: 3; cursor: grab; transform: translateX(calc(-50% + var(--dx, 0px))) rotate(var(--rot, 0deg)); } #wbx-bs .bs-sw.is-dragging { transition: none; } #wbx-bs .bs-sw.is-prev, #wbx-bs .bs-sw.is-next { z-index: 1; top: 44px; opacity: .35; box-shadow: none; pointer-events: none; } #wbx-bs .bs-sw.is-prev { transform: translateX(calc(-50% - 520px)) scale(.86); } #wbx-bs .bs-sw.is-next { transform: translateX(calc(-50% + 520px)) scale(.86); } #wbx-bs .bs-sw.is-no.is-center { opacity: .6; } #wbx-bs .bs-sw-hero { position: relative; height: 168px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: flex-end; } #wbx-bs .bs-p0 { background: #FBE3E7; } #wbx-bs .bs-p1 { background: #DDEFE4; } #wbx-bs .bs-p2 { background: #FFF3BF; } #wbx-bs .bs-p3 { background: #DCE8F7; } html.dark-mode #wbx-bs .bs-p0 { background: #4A2F36; } html.dark-mode #wbx-bs .bs-p1 { background: #2C4338; } html.dark-mode #wbx-bs .bs-p2 { background: #4A4426; } html.dark-mode #wbx-bs .bs-p3 { background: #2D3B50; } #wbx-bs .bs-sw-tape { position: absolute; top: 0; left: 50%; width: 84px; height: 16px; margin-left: -42px; background: rgba(255,255,255,.55); } #wbx-bs .bs-sw-gn { font-size: 12px; font-weight: 600; color: var(--b-t2); } #wbx-bs .bs-sw-nm { font: 700 34px/42px var(--b-serif); margin-top: 4px; color: var(--b-t1); } #wbx-bs .bs-stamp { position: absolute; left: 22px; top: 20px; padding: 3px 14px; border: 3px solid var(--b-ink); border-radius: 8px; font: 800 24px/30px var(--b-sans); letter-spacing: .1em; color: var(--b-t1); background: var(--b-paper); transform: rotate(-12deg); } #wbx-bs .bs-stamp.is-no { left: auto; right: 22px; transform: rotate(12deg); color: var(--b-t3); border-color: var(--b-t3); } #wbx-bs .bs-sw-bd { padding: 18px 24px 20px; } #wbx-bs .bs-sw-lg { font: 400 15.5px/26px var(--b-sans); color: var(--b-t1); } #wbx-bs .bs-sw-fx { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: 14px; font-size: 13px; line-height: 18px; } #wbx-bs .bs-sw-fx b { font-weight: 500; color: var(--b-t4); white-space: nowrap; } #wbx-bs .bs-sw-fx span { color: var(--b-t2); } #wbx-bs .bs-sw-nw { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--b-line); font-size: 12.5px; line-height: 19px; color: var(--b-t3); } #wbx-bs .bs-sw-nw b { color: var(--b-t1); } #wbx-bs .bs-sw-add { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--b-t1); } #wbx-bs .bs-nav { all: unset; position: absolute; top: 230px; z-index: 4; width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: var(--b-t3); cursor: pointer; } #wbx-bs .bs-nav:hover { background: var(--b-row); color: var(--b-t1); } #wbx-bs .bs-nav[disabled] { opacity: .25; cursor: default; } #wbx-bs .bs-nav.is-l { left: calc(50% - 280px); } #wbx-bs .bs-nav.is-r { right: calc(50% - 280px); } #wbx-bs .bs-acts { flex: none; display: flex; justify-content: center; gap: 12px; padding: 12px 28px 0; } #wbx-bs .bs-wide { height: 46px; padding: 0 34px; font-size: 15px; } #wbx-bs .bs-acts .bs-gh:not(.bs-wide) { height: 46px; } #wbx-bs .bs-addrow { flex: none; text-align: center; padding-top: 8px; } #wbx-bs .bs-addpick { flex: none; width: min(440px, calc(100% - 56px)); margin: 8px auto 0; } #wbx-bs .bs-dots { flex: none; display: flex; justify-content: center; gap: 8px; padding: 12px 0 14px; } #wbx-bs .bs-dots span { width: 8px; height: 8px; border-radius: 9999px; background: var(--b-line); transition: width .15s; } #wbx-bs .bs-dots span.is-yes { background: var(--b-ink); } #wbx-bs .bs-dots span.is-no { background: var(--b-t4); } #wbx-bs .bs-dots span.is-cur { width: 22px; background: var(--b-t3); } #wbx-bs .bs-dots span.is-cur.is-yes { background: var(--b-ink); } #wbx-bs.is-deck .bs-ft { gap: 8px; flex-wrap: wrap; } @media (max-width: 760px) { #wbx-bs .bs-stage { overflow-y: auto; scrollbar-width: none; } #wbx-bs .bs-stage::-webkit-scrollbar { display: none; } #wbx-bs .bs-sw.is-center { position: relative; top: 0; left: auto; width: calc(100% - 72px); margin: 12px auto; transform: translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)); } #wbx-bs .bs-nav { top: 200px; } #wbx-bs .bs-sw.is-prev, #wbx-bs .bs-sw.is-next { display: none; } #wbx-bs .bs-nav.is-l { left: 6px; } #wbx-bs .bs-nav.is-r { right: 6px; } #wbx-bs .bs-wide { padding: 0 20px; } #wbx-bs .bs-sw-nm { font-size: 26px; line-height: 34px; } } /* V2.3.1 · 模拟 AI 的交互：骨架卡 + 思考文案、要/不要飞出、已存提示 */ #wbx-bs .bs-skel { pointer-events: none; } #wbx-bs .bs-skel.is-center { min-height: 400px; } #wbx-bs .bs-skel .bs-sw-hero { background: var(--b-row); } #wbx-bs .bs-ln { display: block; height: 12px; border-radius: 6px; margin: 0 0 12px; background: var(--b-row); } #wbx-bs .bs-shim { background: linear-gradient(90deg, var(--b-row) 0%, var(--b-soft) 40%, var(--b-row) 80%); background-size: 200% 100%; animation: bsShim 1.1s linear infinite; } @keyframes bsShim { from { background-position: 100% 0; } to { background-position: -100% 0; } } #wbx-bs .bs-think { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 14px; color: var(--b-t3); } #wbx-bs .bs-sw.is-center.fly-r { transform: translateX(calc(-50% + 720px)) rotate(18deg); opacity: 0; } #wbx-bs .bs-sw.is-center.fly-l { transform: translateX(calc(-50% - 720px)) rotate(-18deg); opacity: 0; } #wbx-bs .bs-sw.is-center.is-in { animation: bsIn .26s ease-out; } @keyframes bsIn { from { opacity: 0; margin-top: 18px; } to { opacity: 1; margin-top: 0; } } #wbx-bs .bs-stamp.is-pop { animation: bsPop .2s ease-out; } @keyframes bsPop { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } } #wbx-bs .bs-tip { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 6; height: 32px; padding: 0 14px; border-radius: 9999px; background: var(--b-ink); color: var(--b-on); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; animation: bsTip 1.8s ease forwards; } @keyframes bsTip { 0% { opacity: 0; margin-top: -8px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; } } #wbx-bs .bs-cnt.bs-pulse { display: inline-block; animation: bsPulse .5s ease; } @keyframes bsPulse { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } } @media (max-width: 760px) { #wbx-bs .bs-sw.is-center.fly-r { transform: translateX(520px) rotate(18deg); } #wbx-bs .bs-sw.is-center.fly-l { transform: translateX(-520px) rotate(-18deg); } #wbx-bs .bs-skel.is-center { min-height: 320px; } } @media (prefers-reduced-motion: reduce) { #wbx-bs .bs-sw, #wbx-bs .bs-shim, #wbx-bs .bs-tip, #wbx-bs .bs-stamp, #wbx-bs .bs-cnt { animation: none !important; transition: none !important; } } /* V2.4.0 · 人物设计轮播（EUE-1）：迷你关系图 + 冲突核心 + 每人一行；开始页「给哪个故事配人物」 */ #wbx-bs .bs-stage { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } #wbx-bs .bs-stage::-webkit-scrollbar { display: none; } #wbx-bs .bs-cw { width: min(480px, calc(100% - 140px)); } #wbx-bs .bs-cw-g { position: relative; background: var(--b-soft); border-bottom: 1px solid var(--b-row); padding: 4px 6px 0; } #wbx-bs .bs-cw-g svg { display: block; } #wbx-bs .bs-cw-g .ln { stroke: var(--b-field); stroke-width: 1.4; } #wbx-bs .bs-cw-g .pl { fill: var(--b-paper); stroke: var(--b-line); } #wbx-bs .bs-cw-g .plt { fill: var(--b-t5); font: 400 11px var(--b-sans); } #wbx-bs .bs-cw-g .nd { fill: var(--b-paper); stroke: var(--b-ink); stroke-width: 1.4; } #wbx-bs .bs-cw-g .nd.h { fill: var(--b-ink); } #wbx-bs .bs-cw-g .nt { fill: var(--b-t1); font: 700 15px var(--b-serif); } #wbx-bs .bs-cw-g .nt.h { fill: var(--b-on); } #wbx-bs .bs-cw-g .lb { fill: var(--b-t5); font: 400 11.5px var(--b-sans); } #wbx-bs .bs-cw-g .lb.hl { fill: var(--b-t1); font-weight: 700; paint-order: stroke; stroke: var(--b-soft); stroke-width: 3px; } #wbx-bs .bs-cw .bs-sw-bd { padding: 12px 22px 16px; } #wbx-bs .bs-cw-nm { font: 700 24px/30px var(--b-serif); color: var(--b-t1); margin-top: 2px; } #wbx-bs .bs-cw-core { font-size: 13.5px; line-height: 21px; color: var(--b-t1); margin: 4px 0 6px; } #wbx-bs .bs-cw-r { display: grid; grid-template-columns: 58px 50px 1fr; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--b-row); font-size: 12px; line-height: 17px; } #wbx-bs .bs-cw-r b { font: 700 14px/18px var(--b-serif); color: var(--b-t1); } #wbx-bs .bs-cw-r em { font-style: normal; font-size: 11px; line-height: 16px; padding: 0 7px; border: 1px solid var(--b-line); border-radius: 9999px; color: var(--b-t3); justify-self: start; white-space: nowrap; } #wbx-bs .bs-cw-r em.h { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on); } #wbx-bs .bs-cw-r em.v { border-color: var(--b-ink); color: var(--b-t1); } #wbx-bs .bs-cw-r span { color: var(--b-t2); min-width: 0; overflow-wrap: anywhere; } #wbx-bs .bs-cw-r i { font-style: normal; color: var(--b-t4); } #wbx-bs .bs-cw .bs-sw-nw { margin-top: 8px; padding-top: 10px; } #wbx-bs .bs-sref { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #wbx-bs .bs-sref-c { all: unset; box-sizing: border-box; min-height: 74px; padding: 12px 14px; border: 1px solid var(--b-line); border-radius: 12px; background: var(--b-paper); cursor: pointer; display: flex; flex-direction: column; gap: 2px; } #wbx-bs .bs-sref-c b { font: 700 16px/22px var(--b-serif); color: var(--b-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wbx-bs .bs-sref-c span { font-size: 11.5px; color: var(--b-t4); } #wbx-bs .bs-sref-c i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--b-t1); margin-top: 2px; } #wbx-bs .bs-sref-c:hover { border-color: var(--b-t4); } #wbx-bs .bs-sref-c.is-on { border-color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-ink); } #wbx-bs .bs-sref-c.is-add { border-style: dashed; border-color: var(--b-t4); align-items: center; justify-content: center; font: 600 13px/18px var(--b-sans); color: var(--b-t2); } #wbx-bs .bs-sref-c:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 2px; } /* V2.11.0 · 头脑风暴开始页：故事 EUT-3「抽卡」/ 人物 EUU-4「极简一行」（规则书 V2.202） */ #wbx-bs .bs-u { position: relative; padding: 28px 32px 24px; overflow-y: auto; scrollbar-width: none; } #wbx-bs.is-u3 .bs-x, #wbx-bs.is-u4 .bs-x { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; } #wbx-bs .bs-u-more { margin-top: 12px; font-size: 12.5px; line-height: 18px; color: var(--b-t4); } #wbx-bs .bs-u-more button { all: unset; cursor: pointer; font-weight: 700; color: var(--b-t2); } #wbx-bs .bs-u-more button:hover { color: var(--b-t1); text-decoration: underline; text-underline-offset: 3px; } #wbx-bs .bs-u-more button:focus-visible, #wbx-bs .bs-u4-t:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 2px; border-radius: 4px; } #wbx-bs .bs-u-pk { margin-top: 12px; text-align: left; } #wbx-bs .bs-u-pk .bs-pick { margin: 0; } /* 故事：抽卡 */ #wbx-bs.is-u3 .bs-box { width: min(600px, calc(100vw - 24px)); border-radius: 26px; background-color: var(--b-soft); background-image: radial-gradient(var(--b-line) 1px, transparent 1.3px); background-size: 16px 16px; } #wbx-bs.is-u3 .bs-u { text-align: center; } #wbx-bs.is-u3 .bs-seg { background: transparent; padding: 0; gap: 6px; } #wbx-bs.is-u3 .bs-seg button { height: 28px; padding: 0 13px; font: 600 12.5px/1 var(--b-sans); background: var(--b-paper); color: var(--b-t3); box-shadow: 0 0 0 1px var(--b-line); } #wbx-bs.is-u3 .bs-seg button.is-on { background: var(--b-ink); color: var(--b-on); box-shadow: none; } #wbx-bs .bs-u3-fan { position: relative; width: 300px; height: 148px; margin: 18px auto 0; } #wbx-bs .bs-u3-fan b { position: absolute; left: 50%; bottom: 0; width: 94px; height: 130px; margin-left: -47px; border-radius: 14px; border: 3px solid #FFFFFF; box-shadow: 0 12px 20px -10px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); font: 700 30px/1 var(--b-serif); transition: transform .25s ease; } #wbx-bs .bs-u3-fan b svg { width: 26px; height: 26px; } #wbx-bs .bs-u3-fan b:nth-child(1) { background: linear-gradient(150deg, #EE9A9A, #F4D27A); transform: translateX(-88px) rotate(-12deg); } #wbx-bs .bs-u3-fan b:nth-child(2) { background: linear-gradient(150deg, #86C6C9, #A99BEA); z-index: 1; } #wbx-bs .bs-u3-fan b:nth-child(3) { background: linear-gradient(150deg, #B9D58C, #6FB7B0); transform: translateX(88px) rotate(12deg); } #wbx-bs .bs-u:has(.bs-u3-go:hover) .bs-u3-fan b:nth-child(1) { transform: translateX(-98px) rotate(-16deg); } #wbx-bs .bs-u:has(.bs-u3-go:hover) .bs-u3-fan b:nth-child(2) { transform: translateY(-6px); } #wbx-bs .bs-u:has(.bs-u3-go:hover) .bs-u3-fan b:nth-child(3) { transform: translateX(98px) rotate(16deg); } html.dark-mode #wbx-bs .bs-u3-fan b { border-color: #27272A; } #wbx-bs.is-u3 .bs-seed { width: min(440px, 100%); height: 56px; margin: 18px auto 0; padding: 0 8px 0 22px; border-radius: 9999px; border: 1.5px solid var(--b-ink); background: var(--b-paper); } #wbx-bs.is-u3 .bs-dice { height: 40px; background: var(--b-row); } #wbx-bs .bs-u3-go { margin-top: 18px; height: 50px; padding: 0 30px; font-size: 15px; } #wbx-bs .bs-u3-ref { font-weight: 600 !important; } /* 人物：极简一行 */ #wbx-bs.is-u4 .bs-box { width: min(640px, calc(100vw - 24px)); border-radius: 24px; } #wbx-bs.is-u4 .bs-u { padding: 34px 40px 28px; } #wbx-bs .bs-u4-k { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--b-t4); } #wbx-bs.is-u4 .bs-seed { height: auto; margin-top: 12px; padding: 0 0 10px; border: 0; border-bottom: 2px solid var(--b-ink); border-radius: 0; background: transparent; } #wbx-bs.is-u4 .bs-seed-in { font: 600 30px/40px var(--b-sans); letter-spacing: -.01em; } #wbx-bs.is-u4 .bs-seed-in::placeholder { color: var(--b-field); } #wbx-bs.is-u4 .bs-dice { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--b-row); } #wbx-bs.is-u4 .bs-dice svg { width: 16px; height: 16px; } #wbx-bs .bs-u4-op { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; } #wbx-bs .bs-u4-op + .bs-u4-op, #wbx-bs .bs-u-pk + .bs-u4-op { margin-top: 12px; } #wbx-bs .bs-u4-l { font-size: 14px; color: var(--b-t4); } #wbx-bs.is-u4 .bs-seg { background: transparent; padding: 0; gap: 16px; } #wbx-bs.is-u4 .bs-seg button, #wbx-bs .bs-u4-t { all: unset; box-sizing: border-box; height: 24px; padding: 0; border-radius: 0; background: transparent; cursor: pointer; font: 500 14px/22px var(--b-sans); color: var(--b-t4); } #wbx-bs.is-u4 .bs-seg button:hover, #wbx-bs .bs-u4-t:hover { color: var(--b-t1); } #wbx-bs.is-u4 .bs-seg button.is-on, #wbx-bs .bs-u4-t.is-on { background: transparent; color: var(--b-t1); font-weight: 700; box-shadow: inset 0 -2px 0 var(--b-ink); } #wbx-bs .bs-u4-bar { width: 1px; height: 14px; background: var(--b-line); } #wbx-bs .bs-u4-ft { display: flex; align-items: center; gap: 12px; margin-top: 30px; } #wbx-bs .bs-u4-ft .bs-u-more { flex: 1; margin: 0; } #wbx-bs .bs-u4-go { width: 56px; height: 56px; padding: 0; justify-content: center; } @media (max-width: 560px) { #wbx-bs .bs-u, #wbx-bs.is-u4 .bs-u { padding: 24px 18px 20px; } #wbx-bs.is-u4 .bs-seed-in { font-size: 24px; line-height: 32px; } #wbx-bs .bs-u3-fan { transform: scale(.85); } } @media (prefers-reduced-motion: reduce) { #wbx-bs .bs-u3-fan b { transition: none; } } /* V2.13.0 · 人物结果卡横版 EUX-1「左图右人」（规则书 V2.205） */ #wbx-bs .bs-cw.bs-cwx { width: min(920px, calc(100% - 120px)); display: flex; align-items: stretch; } #wbx-bs .bs-cwx .bs-cw-g { flex: 0 0 360px; width: 360px; min-height: 340px; padding: 0; border-bottom: 0; border-right: 1px solid var(--b-row); background-color: var(--b-soft); background-image: radial-gradient(var(--b-line) 1px, transparent 1.3px); background-size: 14px 14px; display: flex; align-items: center; } #wbx-bs .bs-cwx .bs-cw-g svg { width: 100%; height: auto; aspect-ratio: 360 / 340; } #wbx-bs .bs-cwx .bs-sw-bd { flex: 1; min-width: 0; padding: 20px 24px 18px; } #wbx-bs .bs-cwx .bs-cw-nm { font-size: 26px; line-height: 32px; } #wbx-bs .bs-cwx .bs-cw-core { margin: 4px 0 12px; } #wbx-bs .bs-cw-pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; } #wbx-bs .bs-cw-p { padding: 8px 11px 9px; border-radius: 12px; background: var(--b-soft); min-width: 0; } #wbx-bs .bs-cw-ph { display: flex; align-items: center; gap: 8px; } #wbx-bs .bs-cw-ph b { font: 700 15px/20px var(--b-serif); color: var(--b-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #wbx-bs .bs-cw-ph em { flex: none; font-style: normal; font-size: 11px; line-height: 18px; padding: 0 8px; border: 1px solid var(--b-line); border-radius: 9999px; color: var(--b-t3); white-space: nowrap; } #wbx-bs .bs-cw-ph em.h { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on); } #wbx-bs .bs-cw-ph em.v { border-color: var(--b-ink); color: var(--b-t1); } #wbx-bs .bs-cw-pd { margin-top: 3px; font-size: 12px; line-height: 18px; color: var(--b-t2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } #wbx-bs .bs-cw-pd i { font-style: normal; color: var(--b-t4); } #wbx-bs .bs-cwx .bs-sw-nw { margin-top: 12px; } #wbx-bs .bs-cwx.is-prev, #wbx-bs .bs-cwx.is-next { opacity: 0; } #wbx-bs.is-cx .bs-nav { top: 168px; } #wbx-bs.is-cx .bs-nav.is-l { left: max(6px, calc(50% - min(460px, 50% - 60px) - 50px)); } #wbx-bs.is-cx .bs-nav.is-r { right: max(6px, calc(50% - min(460px, 50% - 60px) - 50px)); } @media (max-width: 760px) { #wbx-bs .bs-cw.bs-cwx { flex-direction: column; } #wbx-bs .bs-cwx .bs-cw-g { flex: none; width: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--b-row); } #wbx-bs .bs-cwx .bs-cw-g svg { max-height: 300px; } #wbx-bs .bs-cw-pp { grid-template-columns: minmax(0, 1fr); } } /* V2.12.0 · 人物头脑风暴「人物桌 · 多条关系线」（EUW-2，规则书 V2.203） */ #wbx-bs.is-u5 .bs-box { width: min(720px, calc(100vw - 24px)); border-radius: 26px; background-color: var(--b-soft); background-image: radial-gradient(var(--b-line) 1px, transparent 1.3px); background-size: 16px 16px; } #wbx-bs.is-u5 .bs-x { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; } #wbx-bs.is-u5 .bs-u { text-align: center; padding: 26px 28px 22px; } #wbx-bs .bs-tblw { position: relative; width: min(600px, 100%); margin: 16px auto 0; } #wbx-bs .bs-tbl { position: relative; width: 100%; aspect-ratio: 600 / 340; } #wbx-bs .bs-tbl > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #wbx-bs .bs-tl { stroke: var(--b-field); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; vector-effect: non-scaling-stroke; } #wbx-bs .bs-tl.is-on { stroke: var(--b-ink); stroke-width: 2; stroke-dasharray: 7 5; } #wbx-bs .bs-st { fill: var(--b-paper); stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } #wbx-bs .bs-st.is-k { stroke-dasharray: none; } #wbx-bs .bs-sn { position: absolute; transform: translate(-50%, -50%); width: 46px; text-align: center; font: 700 14px/18px var(--b-sans); color: var(--b-t4); pointer-events: none; } #wbx-bs .bs-sn.is-k { font-size: 12px; color: var(--b-t2); } #wbx-bs .bs-cap { all: unset; box-sizing: border-box; position: absolute; z-index: 2; transform: translate(-50%, -50%); height: 26px; min-width: 26px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--b-paper); color: var(--b-t4); box-shadow: 0 0 0 1px var(--b-field); font: 500 12px/1 var(--b-sans); white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; } #wbx-bs .bs-cap:hover { color: var(--b-t1); box-shadow: 0 0 0 1px var(--b-t4); } #wbx-bs .bs-cap.is-on { height: 30px; padding: 0 10px 0 9px; background: var(--b-ink); color: var(--b-on); box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); font-weight: 600; font-size: 12.5px; } #wbx-bs .bs-cap i { font-style: normal; font-size: 13px; } #wbx-bs .bs-cap em { font-style: normal; font-size: 11px; opacity: .55; } #wbx-bs .bs-cap.is-open { outline: 2px solid var(--b-t1); outline-offset: 2px; } #wbx-bs .bs-cap:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 2px; } #wbx-bs .bs-tie-pop { position: absolute; z-index: 4; width: 220px; padding: 6px; border-radius: 14px; background: var(--b-paper); box-shadow: 0 0 0 1px var(--b-line), 0 18px 34px -14px rgba(0,0,0,.35); text-align: left; } #wbx-bs .bs-tie-pop button { all: unset; box-sizing: border-box; width: 100%; height: 32px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--b-sans); color: var(--b-t2); cursor: pointer; } #wbx-bs .bs-tie-pop button:hover, #wbx-bs .bs-tie-pop button:focus-visible { background: var(--b-row); color: var(--b-t1); } #wbx-bs .bs-tie-pop button.is-on { background: var(--b-row); color: var(--b-t1); font-weight: 700; } #wbx-bs .bs-tie-pop button.is-w { color: var(--b-t4); } #wbx-bs .bs-tie-pop i { font-style: normal; width: 16px; text-align: center; } #wbx-bs .bs-tie-own { display: flex; gap: 6px; padding: 4px; } #wbx-bs .bs-tie-in { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--b-field); border-radius: 9px; background: var(--b-paper); color: var(--b-t1); font: 400 13px/1 var(--b-sans); outline: none; } #wbx-bs .bs-tie-in:focus { border-color: var(--b-ink); } #wbx-bs .bs-tie-own button { width: auto; padding: 0 12px; background: var(--b-ink); color: var(--b-on); font-weight: 700; justify-content: center; } #wbx-bs .bs-tie-own button:hover { background: var(--b-ink); color: var(--b-on); opacity: .9; } #wbx-bs .bs-tbl-in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: min(375px, 63%); height: 52px; margin: 0; padding: 0 6px 0 18px; border-radius: 9999px; border: 1.5px solid var(--b-ink); background: var(--b-paper); box-shadow: 0 10px 20px -12px rgba(0,0,0,.3); } #wbx-bs .bs-tbl-in .bs-seed-in { font-size: 15px; } #wbx-bs .bs-tbl-in .bs-dice { height: 40px; background: var(--b-row); } #wbx-bs .bs-u-hint { margin-top: 10px; font-size: 12px; color: var(--b-t4); } #wbx-bs .bs-u5-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; } #wbx-bs .bs-step { display: inline-flex; align-items: center; height: 30px; border-radius: 9999px; background: var(--b-paper); box-shadow: 0 0 0 1px var(--b-line); } #wbx-bs .bs-step b { min-width: 44px; text-align: center; font: 700 13px/1 var(--b-sans); color: var(--b-t1); } #wbx-bs .bs-step button { all: unset; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--b-t3); cursor: pointer; font-size: 15px; } #wbx-bs .bs-step button:hover { background: var(--b-row); color: var(--b-t1); } #wbx-bs .bs-step button[disabled] { opacity: .3; cursor: default; background: transparent; } #wbx-bs .bs-step button:focus-visible { outline: 2px solid var(--b-t1); outline-offset: 1px; } #wbx-bs.is-u5 .bs-seg { background: transparent; padding: 0; gap: 6px; } #wbx-bs.is-u5 .bs-seg button { height: 28px; padding: 0 13px; font: 600 12.5px/1 var(--b-sans); background: var(--b-paper); color: var(--b-t3); box-shadow: 0 0 0 1px var(--b-line); } #wbx-bs.is-u5 .bs-seg button.is-on { background: var(--b-ink); color: var(--b-on); box-shadow: none; } #wbx-bs.is-u5 .bs-err { text-align: left; } @media (max-width: 560px) { #wbx-bs.is-u5 .bs-u { padding: 22px 12px 18px; } #wbx-bs .bs-tblw { margin-top: 14px; } #wbx-bs .bs-tbl-in { position: relative; left: auto; top: auto !important; transform: none; width: 100%; height: 48px; margin-top: 10px; padding-left: 14px; } #wbx-bs .bs-tbl-in .bs-dice { height: 34px; padding: 0 8px; font-size: 12px; } #wbx-bs .bs-st { stroke-width: 2; } #wbx-bs .bs-sn { font-size: 12px; } #wbx-bs .bs-sn.is-k { font-size: 10.5px; } #wbx-bs .bs-cap.is-on { max-width: 46%; overflow: hidden; } } @media (max-width: 760px) { #wbx-bs .bs-cw { width: calc(100% - 72px); } #wbx-bs .bs-sref { grid-template-columns: repeat(2, minmax(0, 1fr)); } #wbx-bs .bs-cw-r { grid-template-columns: 52px 46px 1fr; } } /* ===== /头脑风暴 ===== */