/* ===================================================================== * style.v11.css — 现代轻玄学 · 双主题（浅色"宣纸" / 深色"夜观"） * 设计语言：宣纸米底 + 细鎏金线 + 墨褐文字 + 朱砂仅作强调与"涨"。 * 覆盖 v10 令牌与少量硬编码表面，保持组件结构不变、渐进接管。 * 主题切换：（_head.php 预绘脚本 + 顶栏按钮） * ===================================================================== */ /* ---------- ① 浅色「宣纸」：现代轻玄学微调 ---------- */ :root{ color-scheme:light; /* 核心色（降饱和、提亮纸感）*/ --red:#9c2729; --red-deep:#6e1414; --red-light:#b84848; --gold:#b3893a; --gold-bright:#d9b35e; --gold-dim:#97722a; --ink:#2b2117; --ink-soft:#6f5e49; --ink-faint:#a2947a; --cream:#f3ecdd; --paper:#fffcf4; --paper-warm:#faf3e2; --line:#e7dcbd; /* 行情色（A股红涨绿跌）*/ --up:#c0392b; --down:#1f8a4c; --flat:#8a7a5a; --pos:#1f8a4c; --neg:#c0392b; --warn:#c2601a; --ok-bg:#e9f4ea; --warn-bg:#fbf1dd; --err-bg:#fbe9e7; --shadow-sm:0 1px 3px rgba(60,40,10,.07); --shadow-md:0 6px 18px rgba(60,40,10,.10); --shadow-lg:0 12px 36px rgba(60,40,10,.14); --line-soft:rgba(120,90,30,.14); } /* ---------- ② 深色「夜观」：墨底 + 暗金 + 微光 ---------- */ [data-theme="dark"]{ color-scheme:dark; --red:#e08a74; --red-deep:#c96a52; --red-light:#ef9e8a; /* 提亮保 AA */ --gold:#d4a94e; --gold-bright:#e6c274; --gold-dim:#a8873a; --ink:#efe6d2; --ink-soft:#c4b294; --ink-faint:#8f8066; --cream:#151009; --paper:#201812; --paper-warm:#251c13; --line:#3c2f1d; --up:#f2836a; --down:#5fc08c; --flat:#a39474; --pos:#5fc08c; --neg:#f2836a; --warn:#e0a458; --ok-bg:rgba(95,192,140,.14); --warn-bg:rgba(224,164,88,.16); --err-bg:rgba(240,131,106,.16); --shadow-sm:0 1px 3px rgba(0,0,0,.45); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 12px 36px rgba(0,0,0,.6); --line-soft:rgba(212,169,78,.16); } /* ---------- ③ 表面接管：让双主题在既有组件结构上自洽 ---------- */ html[data-theme="dark"] html{ background:var(--cream); } [data-theme="dark"] body{ background:var(--cream); } [data-theme="dark"] .card, [data-theme="dark"] .sub-card, [data-theme="dark"] .tip, [data-theme="dark"] .load, [data-theme="dark"] .detail, [data-theme="dark"] .engine-box, [data-theme="dark"] .seg, [data-theme="dark"] .panel, [data-theme="dark"] .rank, [data-theme="dark"] .box, [data-theme="dark"] .pillar, [data-theme="dark"] .pillar.on, [data-theme="dark"] .row-card, [data-theme="dark"] .list-row{ background:var(--paper); border-color:var(--line); color:var(--ink); } [data-theme="dark"] table th{ background:var(--paper-warm); } [data-theme="dark"] table td, [data-theme="dark"] table th{ border-color:var(--line); } [data-theme="dark"] .badge, [data-theme="dark"] .tag{ color:var(--ink); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{ background:var(--paper); color:var(--ink); border-color:var(--line); } [data-theme="dark"] .muted{ color:var(--ink-faint); } [data-theme="dark"] .en{ color:var(--ink-faint); } /* 朱砂语义与涨跌解耦：涨跌状态带统一（A股红涨绿跌） */ .b-pos{ background:var(--ok-bg); color:var(--pos); border-color:rgba(31,138,76,.35); } .b-neg{ background:var(--err-bg); color:var(--neg); border-color:rgba(192,57,43,.35); } .b-gold{ background:var(--warn-bg); color:var(--gold-dim); border-color:rgba(179,137,58,.4); } /* ---------- ④ 轻玄学质感：留白/线/焦点 ---------- */ .card{ box-shadow:var(--shadow-sm); } .card h2{ letter-spacing:.02em; } a{ transition:color .18s var(--ease); } :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; border-radius:4px; } ::selection{ background:rgba(179,137,58,.25); } /* 细金线分隔：替代粗边框/重阴影 */ hr, .divider{ border:0; border-top:1px solid var(--line-soft); } /* 表格滚动提示条（横向滑动场景） */ .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .tbl-scroll th{ position:sticky; top:0; z-index:1; } /* ---------- ⑤ 主题切换按钮 ---------- */ .gz-theme-btn{ display:inline-flex;align-items:center;gap:4px; background:rgba(0,0,0,.14); color:var(--gold-bright); border:1px solid rgba(232,200,102,.35); border-radius:20px; padding:3px 10px; font-size:.8rem; cursor:pointer; margin-left:8px; transition:background .2s var(--ease), transform .15s var(--ease); } .gz-theme-btn:hover{ background:rgba(0,0,0,.26); } .gz-theme-btn:active{ transform:scale(.96); } /* ---------- ⑥ 动效克制：尊重减弱动态偏好 ---------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ---------- ⑦ 五行行业徽章（金木水火土 · 只标股票） ---------- */ .wx-badge{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 3px;margin-right:5px; border-radius:5px;font-size:.72rem;font-weight:600;line-height:1; vertical-align:1px;letter-spacing:0; } .wx-jin{background:#f2e1b0;color:#6a4c0e;border:1px solid rgba(170,130,40,.4)} .wx-mu {background:#d9ecdf;color:#1e5a3a;border:1px solid rgba(40,120,80,.35)} .wx-shui{background:#d9e6f1;color:#214565;border:1px solid rgba(50,100,160,.35)} .wx-huo{background:#f6dcd1;color:#98311e;border:1px solid rgba(180,70,40,.35)} .wx-tu {background:#efe0c8;color:#795521;border:1px solid rgba(150,110,50,.35)} [data-theme="dark"] .wx-jin{background:rgba(212,169,78,.16);color:#e2c376;border-color:rgba(212,169,78,.4)} [data-theme="dark"] .wx-mu {background:rgba(95,192,140,.14);color:#7fd4a8;border-color:rgba(95,192,140,.35)} [data-theme="dark"] .wx-shui{background:rgba(100,150,220,.16);color:#9cc0ea;border-color:rgba(120,170,230,.35)} [data-theme="dark"] .wx-huo{background:rgba(240,131,106,.16);color:#f0a28e;border-color:rgba(240,131,106,.4)} [data-theme="dark"] .wx-tu {background:rgba(224,164,88,.16);color:#e2c08a;border-color:rgba(224,164,88,.4)} /* ---------- ⑧ 首页"今日玄机"视觉深化（不改结构，覆盖内联噪音渐变） ---------- */ .merge-timing{ border-left:4px solid var(--gold); background:linear-gradient(160deg, var(--paper) 0%, var(--paper-warm) 100%) !important; } [data-theme="dark"] .merge-timing{ background:linear-gradient(160deg,#1d1610 0%,#241b11 100%) !important; } .merge-timing .sub-card{ background:var(--paper); border-color:var(--line); box-shadow:none; } .merge-timing .sub-label{ color:var(--gold-dim); border-bottom-color:var(--line-soft); } .merge-timing .sub-label.highlight{ color:var(--red); border-bottom-color:rgba(156,39,41,.35); } [data-theme="dark"] .merge-timing .wtf{ color:var(--gold-dim); } [data-theme="dark"] .wtf::after{ background:var(--paper-warm); border-color:var(--gold-dim); color:var(--gold); } /* 卡题与数据呼吸感 */ .card{ padding:16px; border-radius:14px; } .sub-card{ border-radius:12px; } .num, .pi{ font-variant-numeric:tabular-nums; } /* 榜单行：徽章/名称/右侧涨跌更整齐 */ .rank li{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:8px 4px; border-bottom:1px dashed var(--line-soft); } .rank li:last-child{ border-bottom:0; } .rank .nm{ order:-1; } /* 说明条收敛为轻灰底（不喧宾夺主） */ .card .tip, .tip{ background:var(--paper-warm); border:1px solid var(--line-soft); color:var(--ink-soft); border-radius:8px; } [data-theme="dark"] .tip{ background:var(--paper); } /* 折叠/详情（未来 details 统一） */ details.help summary{ cursor:pointer; color:var(--ink-soft); font-size:.82rem; } details.help[open] summary{ color:var(--ink); } /* ---------- ⑨ 体检报告：行业对比 peers ---------- */ tr.is-my{ background:#fff2d6; } [data-theme="dark"] tr.is-my{ background:rgba(224,164,88,.12); } #hp_report table th{ white-space:nowrap; } #hp_report table td{ vertical-align:middle; } /* ---------- ⑩ 子卡标题等高：内容/问号按钮差异导致的左右错位全站修复 ---------- */ .sub-card{ display:flex !important; flex-direction:column; } .sub-card > .sub-label{ position:relative !important; min-height:26px; display:flex !important; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:22px !important; margin-bottom:8px !important; padding-bottom:4px !important; border-bottom:1px dashed var(--line-soft) !important; } /* ? 帮助按钮：绝对定位退出行高影响（避免短标题卡被按钮撑高） */ .sub-card .sub-label .wtf{ position:absolute !important; top:2px !important; right:0 !important; float:none !important; margin:0 !important; } /* 单行标题（?按钮加宽后右侧富余空间不浪费） */ .sub-card > .sub-label > .wtf{ right:0; } /* 短标题与长标题视觉对齐：限制标题主体基线居中 */ .sub-card > .sub-label{ line-height:1.3; } [data-theme="dark"] .sub-card > .sub-label{ border-bottom-color:var(--line-soft) !important; } /* ---------- ⑪ 回测：移动端"卡片/表格"视图切换 ---------- */ .rank-tabs-right{ margin-left:auto; display:inline-flex; gap:4px; } .bt-cards-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; } .bt-card{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; } .bt-card .bt-card-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .bt-card .bt-card-code{ font-family:var(--font-body); font-variant-numeric:tabular-nums; } .bt-card .bt-card-name{ max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bt-card .bt-card-op{ display:flex; gap:6px; } .bt-card .bt-card-op .btn{ padding:2px 8px; font-size:.72rem; } [data-theme="dark"] .bt-card{ background:var(--paper); border-color:var(--line); } /* 移动端：卡片视图优先（由 JS 根据视口+localStorage 选）；桌面默认表格 */ @media (max-width:959px){ .bt-target-table{ display:none; } } /* ---------- ⑫ CSS 文件级深色补充（按钮/计量轨道等渐变浅底） ---------- */ [data-theme="dark"] .btn{ background:linear-gradient(180deg,#3a2c1a,#2a1f12) !important; color:#f4e7c9 !important; border-color:var(--gold-dim) !important; } [data-theme="dark"] .btn-sec{ background:var(--paper) !important; } [data-theme="dark"] .meter{ background:#33291c !important; border-color:var(--line) !important; } [data-theme="dark"] .pillar.on{ background:rgba(212,169,78,.10) !important; } [data-theme="dark"] .tag, [data-theme="dark"] .badge{ background:var(--paper) !important; } /* ---------- ⑬ 首页 Hero：综合气场主数字（第3张卡=当日气场/权重引擎） ---------- */ .timing-basics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:stretch; } .timing-basics .sub-card{ min-height:100%; } .timing-basics .sub-card:nth-child(3){ border:1px solid var(--gold-dim); background: linear-gradient(160deg, rgba(179,137,58,.10), var(--paper)) !important; } .timing-basics .stat{ text-align:center; padding:6px 0 2px; } .timing-basics .stat .v{ font-size:2.5rem; color:var(--red); font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(179,137,58,.15); } .timing-basics .stat .k{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; } [data-theme="dark"] .timing-basics .sub-card:nth-child(3){ background:linear-gradient(160deg, rgba(212,169,78,.14), var(--paper)) !important; } [data-theme="dark"] .timing-basics .stat .v{ text-shadow:0 0 18px rgba(224,138,116,.25); } @media (max-width:700px){ .timing-basics{ grid-template-columns:1fr; } .timing-basics .stat .v{ font-size:2.2rem; } } /* ---------- ⑭ 顶部导航对齐修复：brand 左、菜单流式右对齐（宽屏 space-between） ---------- */ .sitehead-inner{ justify-content:space-between; flex-wrap:wrap; } .sitehead-inner .nav{ flex:1 1 auto; justify-content:flex-end; } @media (max-width:900px){ .sitehead-inner{ justify-content:center; gap:10px; } .sitehead-inner .nav{ justify-content:center; flex-basis:100%; } .brand{ flex:0 0 auto; } } /* ---------- ⑮ 通用居中兜底：数字/徽章类内容在卡片内水平居中 ---------- */ .merge-timing h2, .timing-title, .card h2, .card h3{ text-align:left; } .timing-basics .stat{ text-align:center; } .timing-basics .sub-card{ display:flex; flex-direction:column; } .timing-basics .sub-card .sub-label{ text-align:left; } /* ---------- ⑯ 子卡不再强制等高：各卡按内容自然高度（避免「当日气场」大文本撑高整行） ---------- */ .grid3.timing-basics, .grid3.timing-shishen{ align-items:start; } /* 当日气场主数字卡：大文本说明折叠为「⋯可点击展开」，默认只露主数字+2行提示 */ /* ① 引擎说明(当日气场/排行)完整显示 + 居中：取消折叠省字体，文案自然换行不截断 */ #dayScoreTip, .merge-timing .sub-card > .tip, .timing-basics .tip, .timing-shishen .tip{ max-height:none; overflow:visible; position:relative; font-size:.92em; line-height:1.7; text-align:center; color:var(--ink-soft); } /* ② 宜/忌/仓位/时机/方向(操作建议) 整块居中 */ #adviceBox, #adviceBox .field, #adviceBox .tip{ text-align:center; } /* ③ 当日气场主数字卡 内容居中 */ .timing-basics .stat{ text-align:center; } .timing-basics .sub-card .sub-label, .timing-shishen .sub-card .sub-label{ text-align:left; } /* ④ 板块热闻速览：日期(每条时间 tip)居中 + 取消折叠 */ #bd_news .fold-card .tip, #bd_news .tip, #bd_news li .tip{ text-align:center; color:var(--ink-soft); margin-top:2px; } #bd_news .fold-card, #bd_news details{ text-align:center; } #bd_news .fold-card summary{ text-align:center; justify-content:center; display:flex; align-items:center; gap:4px; }