/* ============================================================ StockLab 全站主题 —— 深夜玻璃拟态 (Dark Glassmorphism) 深紫蓝渐变底 + 毛玻璃半透明卡片 + 紫/青光晕 + 涨跌辉光 类名/变量名沿用旧版以兼容现有页面标记 ============================================================ */ /* ============================================================ 三套主题令牌(由 切换) glass=深夜玻璃(默认) / light=浅色精致 / terminal=专业终端 所有组件均引用 var(),换 data-theme 即全站换肤 ============================================================ */ :root,[data-theme="glass"]{ --bg-1:#0a0e20; --card:rgba(28,34,64,.55); --card-2:rgba(38,44,80,.5); --card-solid:#171c34; --glass-border:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.20); --ink:#eaeefb; --ink-2:#c4cbe6; --muted:#8b95bb; --line:rgba(255,255,255,.08); --brand:#8a6bff; --brand-2:#22d3ee; --gold:#f5c66b; --grad:linear-gradient(120deg,#8a6bff,#22d3ee); --up:#ff4d6a; --down:#2ee6a8; --up-glow:0 0 12px rgba(255,77,106,.45); --down-glow:0 0 12px rgba(46,230,168,.4); --radius:18px; --radius-sm:12px; --shadow:0 10px 36px rgba(0,0,0,.42); --glow-brand:0 0 30px rgba(138,107,255,.30); --blur:saturate(160%) blur(16px); --nav-bg:rgba(12,15,38,.55); --nav-ink:#aab4d8; --nav-ink-hi:#fff; --scroll:rgba(255,255,255,.14); --page-bg: radial-gradient(1100px 700px at 12% -8%, rgba(138,107,255,.22), transparent 60%), radial-gradient(1000px 800px at 110% 8%, rgba(34,211,238,.16), transparent 55%), radial-gradient(900px 900px at 85% 110%, rgba(138,107,255,.14), transparent 60%), linear-gradient(165deg,#0a0e20,#120f30 55%,#0d1130); } [data-theme="light"]{ --bg-1:#eef1f7; --card:rgba(255,255,255,.74); --card-2:rgba(255,255,255,.62); --card-solid:#ffffff; --glass-border:rgba(22,32,72,.10); --glass-hi:rgba(255,255,255,.85); --ink:#1a2336; --ink-2:#3c465e; --muted:#79839a; --line:rgba(22,32,72,.09); --brand:#6d5cff; --brand-2:#0ea5b7; --gold:#c0962c; --grad:linear-gradient(120deg,#6d5cff,#0ea5b7); --up:#e0334b; --down:#16a36a; --up-glow:none; --down-glow:none; --radius:18px; --radius-sm:12px; --shadow:0 10px 30px rgba(40,55,95,.10); --glow-brand:0 8px 24px rgba(109,92,255,.20); --blur:saturate(150%) blur(14px); --nav-bg:rgba(255,255,255,.72); --nav-ink:#586079; --nav-ink-hi:#16203a; --scroll:rgba(40,55,95,.22); --page-bg: radial-gradient(1000px 700px at 10% -10%, rgba(109,92,255,.12), transparent 60%), radial-gradient(900px 700px at 112% 6%, rgba(14,165,183,.10), transparent 55%), linear-gradient(165deg,#f5f7fc,#eef1f8); } [data-theme="terminal"]{ --bg-1:#070a12; --card:rgba(16,21,33,.92); --card-2:rgba(22,28,42,.9); --card-solid:#0f1421; --glass-border:rgba(255,255,255,.07); --glass-hi:rgba(255,255,255,.06); --ink:#dbe2ee; --ink-2:#aab3c5; --muted:#6b7689; --line:rgba(255,255,255,.06); --brand:#38bdf8; --brand-2:#22d3ee; --gold:#f0b429; --grad:linear-gradient(120deg,#38bdf8,#22d3ee); --up:#ff5252; --down:#00e08a; --up-glow:0 0 10px rgba(255,82,82,.5); --down-glow:0 0 10px rgba(0,224,138,.45); --radius:10px; --radius-sm:8px; --shadow:0 6px 24px rgba(0,0,0,.55); --glow-brand:0 0 18px rgba(56,189,248,.25); --blur:saturate(120%) blur(3px); --nav-bg:rgba(8,11,18,.92); --nav-ink:#8b95a8; --nav-ink-hi:#fff; --scroll:rgba(255,255,255,.12); --page-bg:linear-gradient(180deg,#070a12,#0a0e18 60%,#090d16); } *{box-sizing:border-box} html{background:var(--bg-1)} body{ font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif; color:var(--ink); margin:0 auto; min-height:100vh; /* auto 左右:让"内容直接放 body"的页面也居中(max-width 由各页设) */ -webkit-font-smoothing:antialiased; line-height:1.55; background:var(--page-bg); background-attachment:fixed; transition:background .35s ease,color .25s ease; } .wrap,main,.page{max-width:none;margin:0 auto;padding:0 24px} /* 全屏铺满,两侧留 24px 透气 */ h1{font-size:22px;font-weight:750;letter-spacing:-.3px;color:#fff} h2{font-size:15px;font-weight:650;color:var(--ink)} a{color:var(--brand-2);text-decoration:none} a:hover{opacity:.85} ::selection{background:rgba(138,107,255,.35);color:#fff} /* 自定义滚动条(深色) */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px} ::-webkit-scrollbar-thumb:hover{filter:brightness(1.3)} ::-webkit-scrollbar-track{background:transparent} /* ---------- 顶部导航(玻璃) ---------- */ .nav{ background:var(--nav-bg); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-bottom:1px solid var(--glass-border); position:sticky; top:0; z-index:50; box-shadow:0 6px 30px rgba(0,0,0,.22); } .nav-in{max-width:none;margin:0 auto;display:flex;align-items:center;gap:2px;padding:0 24px;height:58px; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .nav-in::-webkit-scrollbar{display:none} .nav .logo{font-weight:800;font-size:17px;letter-spacing:.5px;padding-right:12px;display:flex;align-items:center;gap:7px;flex-shrink:0; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .nav .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand),0 0 4px var(--brand-2);-webkit-text-fill-color:initial} .nav a.item{color:var(--nav-ink);font-size:14px;padding:8px 11px;border-radius:10px;transition:.18s;font-weight:500;white-space:nowrap;flex-shrink:0} .nav a.item:hover{color:var(--nav-ink-hi);background:rgba(127,127,160,.12);opacity:1} .nav a.item.active{color:var(--nav-ink-hi);background:rgba(138,107,255,.22);box-shadow:inset 0 0 0 1px rgba(138,107,255,.4)} .nav .right{margin-left:auto;color:var(--nav-ink);font-size:13px;display:flex;align-items:center;gap:10px;flex-shrink:0} .nav .right a{color:var(--nav-ink-hi)} /* 主题切换器 */ .theme-switch{display:inline-flex;gap:1px;background:rgba(127,127,160,.14);border:1px solid var(--glass-border); border-radius:10px;padding:2px;flex-shrink:0} .theme-switch button{background:transparent;border:none;box-shadow:none;cursor:pointer;font-size:14px;line-height:1; padding:4px 7px;border-radius:8px;filter:grayscale(.4) opacity(.6);transition:.15s} .theme-switch button:hover{filter:none;transform:none;background:rgba(127,127,160,.18)} .theme-switch button.on{filter:none;background:rgba(138,107,255,.28);box-shadow:inset 0 0 0 1px rgba(138,107,255,.5)} /* ---------- 玻璃卡片 ---------- */ .card{ background:var(--card); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px; position:relative; transition:.22s; } .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 1px 0 var(--glass-hi)} /* 顶部高光线 */ .card:hover{transform:translateY(-2px);border-color:rgba(138,107,255,.28);box-shadow:var(--shadow),var(--glow-brand)} .card h2{margin:0 0 12px} .badge{font-size:11px;color:var(--muted);font-weight:400} /* ---------- 按钮 ---------- */ button,.btn{font-family:inherit;font-size:14px;padding:9px 18px;border-radius:11px;cursor:pointer;border:none; background:var(--grad);background-size:140% 140%;color:#fff;font-weight:650;transition:.2s; box-shadow:0 6px 18px rgba(138,107,255,.35)} button:hover,.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(138,107,255,.5)} button:active,.btn:active{transform:translateY(0)} button.ghost,.btn.ghost{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--glass-border);box-shadow:none;backdrop-filter:var(--blur)} button.ghost:hover,.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(138,107,255,.4)} button.sell{background:linear-gradient(120deg,#16a36a,#2ee6a8);box-shadow:0 6px 18px rgba(46,230,168,.35)} button.buy{background:linear-gradient(120deg,#ff4d6a,#ff7a90);box-shadow:0 6px 18px rgba(255,77,106,.35)} /* ---------- 输入 ---------- */ input,select,textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--glass-border); border-radius:11px;background:rgba(255,255,255,.05);color:var(--ink);transition:.16s} input::placeholder,textarea::placeholder{color:#6b76a0} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(138,107,255,.18)} select option{background:var(--card-solid);color:var(--ink)} /* ---------- 表格 ---------- */ table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink-2)} th,td{text-align:right;padding:10px 11px;border-bottom:1px solid var(--line)} th{background:rgba(255,255,255,.03);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.2px} th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left} tbody tr{transition:.14s} tr:hover td{background:rgba(138,107,255,.08)} .up{color:var(--up);text-shadow:var(--up-glow)} .down{color:var(--down);text-shadow:var(--down-glow)} /* ---------- 大盘指数条 ---------- */ .idxbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .idx{background:var(--card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-border);border-radius:14px;padding:11px 16px;min-width:122px;transition:.2s;position:relative} .idx:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.3);box-shadow:0 0 22px rgba(34,211,238,.18)} .idx .nm{font-size:12px;color:var(--muted)} .idx .vl{font-size:18px;font-weight:750;margin-top:2px;color:#fff;font-variant-numeric:tabular-nums} .idx .pc{font-size:12px;font-weight:600} /* ---------- 状态/呼吸灯 ---------- */ .dot{width:9px;height:9px;border-radius:50%;background:var(--down)} .dot.live{animation:breathe 1.3s infinite} .dot.closed{background:#6b76a0;animation:none} @keyframes breathe{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(46,230,168,.55)}50%{opacity:.45;box-shadow:0 0 0 6px rgba(46,230,168,0)}} /* ---------- 药丸切换按钮组 ---------- */ .pills{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:11px;padding:3px} .pills .pill{padding:5px 12px;border-radius:8px;font-size:12px;color:var(--muted);cursor:pointer;border:none;background:transparent;transition:.16s;font-weight:600;box-shadow:none} .pills .pill:hover{color:var(--ink)} .pills .pill.on{background:rgba(138,107,255,.25);color:#fff;box-shadow:inset 0 0 0 1px rgba(138,107,255,.5)} /* ---------- 股票名超链接(全站通用) ---------- */ .slink{color:var(--ink);cursor:pointer;font-weight:600;text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25)} .slink:hover{color:var(--brand-2);border-bottom-color:var(--brand-2);text-shadow:0 0 10px rgba(34,211,238,.4)} /* ---------- 容器 ---------- */ .cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .note{color:var(--muted);font-size:12px;line-height:1.7} .warn{background:rgba(245,198,107,.10);border:1px solid rgba(245,198,107,.32);color:#f3d28a; padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.7;backdrop-filter:var(--blur)} /* ---------- 移动端适配 ---------- */ @media(max-width:820px){ .wrap,main,.page{padding:0 12px} .nav a.item{padding:8px 9px;font-size:13px} .layout,.cols2{grid-template-columns:1fr !important} .layout>*,.cols2>*,.cards>*{min-width:0} .card{overflow-x:auto} .cards{grid-template-columns:repeat(2,1fr) !important} h1{font-size:18px} .price-lg{font-size:22px} table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:12px} th,td{padding:7px 8px} }