:root { --bg: #0f1420; --panel: #171e2e; --panel-2: #1d2638; --text: #e8ebf2; --muted: #8a8f98; --primary: #4f8cff; --up: #e0484f; --down: #2e9e5b; --border: #2a3348; --nav-bg: rgba(15, 20, 32, 0.92); } /* 亮色主题： */ :root[data-theme="light"] { --bg: #f4f6fb; --panel: #ffffff; --panel-2: #eef1f7; --text: #1a2333; --muted: #6b7280; --primary: #3a7bff; --up: #e0484f; --down: #1f8a4d; --border: #d9dfeb; --nav-bg: rgba(255, 255, 255, 0.9); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.7 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } a { color: var(--primary); text-decoration: none; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } /* 宽容器：用于后台等需要展示多列宽表格的页面（1500px 适配 24" 屏） */ .container-wide { max-width: 1500px; margin: 0 auto; padding: 0 20px; } /* 更宽的容器：仅因子详情页使用，让主区更舒展（不影响后台页面） */ .container-wider { max-width: 1600px; margin: 0 auto; padding: 0 20px; } .nav { background: var(--nav-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .nav-inner { display: flex; align-items: center; justify-content: space-between; /* 导航用更宽的版心，避免链接过多被挤断行 */ max-width: 1440px; /* 空间不足时整体换行撑高，而非横向溢出（宽屏单行不受影响） */ flex-wrap: wrap; min-height: 60px; row-gap: 6px; padding: 6px 0; } .brand { font-size: 20px; font-weight: 700; color: var(--text); white-space: nowrap; } .brand-sub { font-size: 11px; color: var(--muted); margin-left: 8px; letter-spacing: 2px; } .nav-links { display: flex; gap: 14px; align-items: center; font-size: 14px; /* 窄屏下链接组内部换行，避免撑破页面 */ flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; } .nav-links a { color: var(--text); white-space: nowrap; } .nav-user { color: var(--muted); margin-right: 6px; } .inline-form { display: inline-flex; align-items: center; } .hero { padding: 64px 0 40px; text-align: center; } .hero h1 { font-size: 34px; margin-bottom: 14px; } .hero p { color: var(--muted); max-width: 640px; margin: 0 auto 26px; } .hero .cta { display: flex; gap: 12px; justify-content: center; } .btn { display: inline-block; padding: 9px 20px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: 14px; } .btn-primary { background: var(--primary); color: #fff; } .btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); } .btn-danger { background: transparent; color: var(--up); border-color: var(--up); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; text-align: center; } .stat b { display: block; font-size: 26px; } .stat span { color: var(--muted); font-size: 13px; } h2.section { margin: 40px 0 16px; font-size: 22px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: block; color: var(--text); } .card:hover { border-color: var(--primary); } .card h3 { font-size: 16px; margin-bottom: 4px; } .card .fid { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; } .card .metrics { display: flex; gap: 14px; margin-top: 12px; } .card .metrics div { font-size: 13px; color: var(--muted); } .card .metrics b { display: block; font-size: 15px; } .up { color: var(--up); } .down { color: var(--down); } .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 12px; border: 1px solid var(--border); } .tag.active { color: #fff; background: var(--primary); border-color: var(--primary); } table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } th, td { padding: 10px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 500; background: var(--panel-2); } tr:last-child td { border-bottom: none; } /* 紧凑表格：管理后台因子表等需要展示多列的场景 */ table.compact-table { table-layout: fixed; /* 列宽由 colgroup 控制 */ } table.compact-table th { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; } table.compact-table td { padding: 6px 8px; font-size: 12.5px; line-height: 1.45; vertical-align: top; word-break: break-word; /* 文本列允许换行，避免文字被截断 */ } /* 短内容列：不换行，保证单行显示 */ table.compact-table td.nowrap-cell { white-space: nowrap; } /* 数值列：右对齐 + 等宽字体 + 不换行 */ table.compact-table td.num-cell { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; } /* 因子库：整行可点击进入详情，悬停高亮提示 */ .factor-row { cursor: pointer; } .factor-row:hover td { background: rgba(79, 140, 255, 0.1); } /* 因子库表格工具栏：左说明 + 右侧「列设置」下拉 */ .factor-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; } .col-settings { position: relative; } .col-settings-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 178px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .col-settings-panel label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); } .col-settings-panel label:hover { background: var(--panel-2); } .col-settings-head { font-size: 12px; color: var(--muted); padding: 2px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .col-settings-foot { font-size: 11px; color: var(--muted); padding: 6px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; } .detail-head { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 8px; flex-wrap: wrap; } .detail-head h1 { font-size: 26px; } .detail-head .fid { color: var(--muted); font-family: Consolas, monospace; } .detail-desc { margin: 10px 0 4px; color: var(--text); font-size: 15px; } .detail-desc > p { color: var(--muted); } .sbt-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .sbt-tab { padding: 6px 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; } .sbt-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .sbt-tab-body { margin-top: 6px; } /* 顶层分区导航：把长页面拆成标签页，减少纵向滚动（详情页 / 因子库共用） */ .dt-tabs { position: sticky; top: 60px; z-index: 9; display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; margin: 8px 0 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; } .dt-tab { padding: 7px 18px; border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .dt-tab:hover { color: var(--text); background: var(--panel-2); } .dt-tab.active { background: var(--primary); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); } .dt-section[hidden] { display: none; } @media (max-width: 640px) { .dt-tabs { position: static; width: 100%; } } .chip { display: inline-block; padding: 4px 12px; margin: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 13px; } .chip:hover { border-color: var(--primary); color: var(--primary); } .period-tabs { display: flex; gap: 8px; margin: 14px 0; } .period-tabs a { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .period-tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); } .metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 16px 0; } .metric { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; } .metric b { display: block; font-size: 17px; } .metric span { color: var(--muted); font-size: 12px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 18px 0; } .panel h2 { font-size: 17px; margin-bottom: 10px; } .locked { text-align: center; padding: 34px 20px; color: var(--muted); } /* 404/500 错误页：居中的大号状态码 + 友好提示 + 操作按钮 */ .error-page { text-align: center; padding: 80px 20px 60px; max-width: 560px; margin: 0 auto; } .error-page .error-code { font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: 2px; background: linear-gradient(135deg, var(--primary), #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; } .error-page h1 { font-size: 22px; margin-bottom: 10px; } .error-page p { color: var(--muted); margin-bottom: 28px; } .error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* 广场：排序切换（最新 / 最热） */ .sort-toggle .sort-opt { padding: 8px 16px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; } .sort-toggle .sort-opt.active { background: var(--primary); color: #fff; } /* 搜索结果关键字高亮 */ mark { background: rgba(232, 161, 61, 0.35); color: inherit; border-radius: 3px; padding: 0 2px; } .formula { background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: 12px 16px; font-family: Consolas, monospace; font-size: 14px; } .auth-box { max-width: 400px; margin: 60px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } .auth-box h1 { font-size: 20px; margin-bottom: 18px; text-align: center; } .field { margin-bottom: 14px; } .field label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; } .field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); } .err { color: var(--up); font-size: 13px; margin-bottom: 10px; } .demo-accounts { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.9; } .strength { height: 6px; background: var(--border); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; } .strength-fill { height: 100%; width: 0; border-radius: 3px; transition: width 0.2s ease, background 0.2s ease; } .strength-text { font-size: 12px; color: var(--muted); min-height: 16px; } .price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; } .price-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; } .price-card.featured { border-color: var(--primary); } .price-card h3 { font-size: 17px; } .price-card .price { font-size: 30px; margin: 8px 0; } .price-card ul { list-style: none; color: var(--muted); margin-bottom: 18px; } .price-card li { padding: 4px 0; } .price-card li::before { content: "✓ "; color: var(--down); } .footer { margin-top: 60px; border-top: 1px solid var(--border); padding: 26px 0; color: var(--muted); font-size: 13px; } .footer a { color: var(--muted); } .admin-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 20px; } form.admin-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 800px) { .cards, .stats { grid-template-columns: 1fr 1fr; } .metric-grid { grid-template-columns: repeat(3, 1fr); } .admin-grid, .price-cards { grid-template-columns: 1fr; } /* 宽表格在窄屏内横向滚动，避免撑破页面 */ table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; } .factor-tools input[type="search"] { min-width: 140px; } } /* 手机窄屏：导航换行、卡片单列、标题紧凑，避免横向溢出 */ @media (max-width: 640px) { .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 8px; } .brand-sub { display: none; } .nav-links { flex-wrap: wrap; gap: 10px; font-size: 14px; } .cards, .stats { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .hero { padding: 40px 0 28px; } .hero h1 { font-size: 26px; } .detail-head { flex-direction: column; gap: 4px; } .price-cards, .admin-grid, form.admin-form .row { grid-template-columns: 1fr; } } /* 可搜索股票下拉组合框 */ .stock-search { position: relative; } .stock-drop { position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: 280px; overflow: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; z-index: 30; display: none; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .stock-opt { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .stock-opt:hover { background: rgba(79, 140, 255, 0.14); } .stock-opt code { color: var(--muted); font-size: 12px; } .stock-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; } /* 因子库会员筛选工具栏 */ .factor-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .factor-tools input[type="search"], .factor-tools select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 13px; } .factor-tools input[type="search"] { flex: 1; min-width: 200px; } /* 表头数值条件筛选（eg > 1） */ .th-metric { white-space: nowrap; } .th-metric .th-label { margin-bottom: 4px; } .cond-input { display: block; box-sizing: border-box; width: 100%; min-width: 64px; margin-top: 4px; padding: 3px 6px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 400; white-space: normal; } .cond-input::placeholder { color: var(--muted); opacity: 0.8; } .cond-input:focus { outline: none; border-color: var(--primary); } /* 表头可点击排序 */ .sort-head { color: var(--muted); cursor: pointer; white-space: nowrap; } .sort-head:hover { color: var(--text); } .sort-head.active { color: var(--primary); font-weight: 600; } .sort-arrow { margin-left: 3px; font-size: 11px; } .sort-arrow-idle { color: var(--muted); } .sort-head.active .sort-arrow { color: var(--primary); } /* ===== 因子详情页：左侧栏布局 ===== */ .fd-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; } .fd-main { min-width: 0; /* 防止 grid 内溢出 */ } .fd-side { order: -1; /* 视觉置于左列（DOM 中仍在主内容之后，窄屏堆叠时列表保持在下方） */ position: sticky; top: 76px; /* nav 高度 + 一点呼吸距离 */ align-self: start; min-width: 0; } .fd-side .panel { margin: 0; padding: 12px 14px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; gap: 8px; } .fd-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fd-side-nav { display: flex; gap: 6px; } .fd-fac-list { overflow-y: auto; min-height: 120px; flex: 1; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; margin-right: -4px; } .fd-fac-item { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; color: var(--text); text-decoration: none; } .fd-fac-item:hover { background: var(--panel-2); border-color: var(--border); } .fd-fac-item.active { background: var(--panel-2); border-color: var(--primary); } .fd-fac-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-fac-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .fd-side-foot { border-top: 1px solid var(--border); padding-top: 8px; font-size: 12px; } #cmt-list { overflow-y: auto; max-height: calc(100vh - 320px); padding-right: 4px; margin-right: -4px; } #cmt-list::-webkit-scrollbar, .fd-fac-list::-webkit-scrollbar { width: 6px; } #cmt-list::-webkit-scrollbar-thumb, .fd-fac-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } @media (max-width: 1200px) { .fd-layout { grid-template-columns: 1fr; } .fd-side { position: static; order: 0; /* 窄屏堆叠时恢复默认：列表位于主内容下方 */ } .fd-side .panel, #cmt-list { max-height: none; } .fd-fac-list { max-height: 320px; } } /* ================= 站点设置 / 公告条 / 自定义页面（站点正规化补强） ================= */ /* 全站公告条：导航下方，可关闭 */ .site-announce { background: var(--panel-2); border-bottom: 1px solid var(--border); } .site-announce-inner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; flex-wrap: wrap; } .site-announce-tag { background: var(--down); color: var(--bg); border-radius: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; flex-shrink: 0; } .site-announce-title { font-weight: 600; color: var(--text); } .site-announce-content { color: var(--muted); flex: 1; min-width: 200px; } .site-announce-close { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; flex-shrink: 0; } .site-announce-close:hover { color: var(--text); } /* 管理后台标签页（站点设置页） */ .admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .form-grid input, .form-grid textarea { width: 100%; box-sizing: border-box; } @media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } } /* 自定义页面正文排版（/p/{slug}，Markdown 渲染结果） */ .rich-page { margin: 28px 0; padding: 28px 32px; } .rich-page h1 { margin-top: 0; } .rich-page-body { line-height: 1.8; } .rich-page-body h1, .rich-page-body h2, .rich-page-body h3, .rich-page-body h4 { margin: 22px 0 10px; } .rich-page-body ul, .rich-page-body ol { padding-left: 24px; margin: 8px 0; } .rich-page-body li { margin: 4px 0; } .rich-page-body blockquote { border-left: 3px solid var(--border); color: var(--muted); padding: 4px 14px; margin: 12px 0; } .rich-page-body pre { overflow-x: auto; padding: 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); } .rich-page-body hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; } /* 移动端导航折叠：≤900px 隐藏链接组，汉堡按钮展开为纵向面板 */ .nav-toggle { display: none; margin-left: auto; } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding: 10px 0 4px; gap: 12px; } .nav-links.nav-open { display: flex; } .nav-inner { flex-wrap: wrap; } }