/* ===== 邮件跟进 CRM · 浅色主题 ===== */ :root{ --bg:#f5f6f8; --panel:#ffffff; --panel-2:#fafbfc; --text:#1f2329; --muted:#6b7280; --faint:#9aa3af; --border:#e5e7eb; --border-strong:#d5d9e0; --accent:#3c6ef2; --accent-soft:#e8f0fe; --green:#16a34a; --amber:#d97706; --red:#dc2626; --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06); --radius:10px; } *{box-sizing:border-box} [hidden]{display:none !important} html,body{margin:0;height:100%} body{ background:var(--bg); color:var(--text); font-size:13.5px; line-height:1.55; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; } button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit} h1{font-size:16px;margin:0;font-weight:650} code{background:#eef1f5;padding:1px 5px;border-radius:4px;font-size:12px} /* ---------- 顶栏 ---------- 0.75.51：顶栏连同下面那条导航一起改成深蓝 #33475f —— 这一身原本只给企业邮箱页 （见 trade.css 的 ML:SKIN 段），这版起全站所有标签页统一，点标签页不会跳色。 ★ padding:12px 20px 一个数都别动：.modnav / .toolbar 的吸顶位置都按它算过。 */ .topbar{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:12px 20px;background:#33475f;border-bottom:0; position:sticky;top:0;z-index:20; } .topbar h1{color:#fff} .brand{display:flex;align-items:center;gap:10px} .logo{ width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#3c6ef2,#7ea4ff); color:#fff;display:grid;place-items:center;font-size:16px; } /* 深蓝底上 #3c6ef2 那颗会溶进背景，这里提一档亮度。 ★ 权重跟 .logo.teal / .logo.violet（trade.css 里那两个有意的页面识别色）同级， 所以那两条变体必须排在它**后面**才不会被压掉。 */ .topbar .logo{background:linear-gradient(135deg,#4d7dfd,#7ea4ff)} .sub{color:var(--faint);font-size:12px} .topbar .sub{color:rgba(255,255,255,.62)} .top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* 顶栏中间那句话（每小时换一条，见 motto.js）。 它不是按钮、不是链接，别做成看着能点的样子—— 改资料走右上角自己的名字（账号菜单 → 个人资料）。 */ .motto{ flex:1 1 auto;min-width:0;text-align:center;color:var(--muted);font-size:12.5px; padding:4px 12px;cursor:default; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 顶栏轮播正播着「客户生日 / 节日问候」提醒：换个颜色， 让人一眼看出这不是平时那句励志话，点它是去发问候的 */ .motto.greet{color:#b45309;font-weight:600} /* 深蓝顶栏上要翻白（0.75.51）。 ★ joke.js 会注入一条 `.motto:hover{color:#374151}`（权重 0,2,0，跟 .topbar .motto 同级但注入更晚），所以这里必须再补一条 `:hover`（0,3,0）压住， 不然鼠标一划，深蓝底上的那句话就变成一块深灰。 */ .topbar .motto{color:rgba(255,255,255,.65)} .topbar .motto:hover{color:rgba(255,255,255,.9)} .topbar .motto.greet{color:#ffd9a0} .topbar .motto.greet:hover{color:#ffe3b8} /* 窄屏上左右两头的标题和按钮都放不下，中间这句先让位 */ @media (max-width:900px){.motto{display:none}} .btn{ border:1px solid var(--border-strong);background:var(--panel);border-radius:8px; padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap; } .btn:hover{background:var(--panel-2);border-color:#c3c9d4} /* 0.75.54：工具栏里那个「网页版邮箱」是 （外链，0.75.52）。 a 默认是行内蓝字带下划线，光套 .btn 会下划线穿字、高度跟旁边的 button 对不齐 —— 让它按按钮的长相渲染，颜色跟正文一致。 */ .toolbar a.btn{ display:inline-flex;align-items:center;color:inherit;text-decoration:none; line-height:1.4; } .toolbar a.btn:hover{background:var(--panel-2);border-color:#c3c9d4} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{background:#2f55c9} .btn-ghost{border-color:transparent;background:transparent} .btn-ghost:hover{background:#eef1f5} .src-pill{ font-size:12px;padding:3px 10px;border-radius:999px;background:#eef1f5;color:var(--muted); border:1px solid var(--border); } .src-pill.live{background:#ecfdf3;color:#067647;border-color:#abefc6} .src-pill.demo{background:#fffaeb;color:#b54708;border-color:#fedf89} /* 顶栏深蓝以后，浅灰底 / 绿底 / 黄底的 pill 压在 navy 上都很跳 —— 进到顶栏里一律翻成半透明白；出顶栏该给的实时状态还是保留原色。 */ .topbar .src-pill, .topbar .src-pill.live, .topbar .src-pill.demo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)} /* ---------- 应用导航（老页面用的 .modnav，新页面用 trade.css 里的 .appnav）---------- 这套原本只写在 index.html 的行内样式里。inbox.html 照抄了