/* ============================================================ * 门户样式 —— 首页、控制台、隐私政策共用 * * 从 index.html 里抽出来的：两个页面要用同一份样式， * 留在 HTML 里就得复制一遍，改一处忘一处是迟早的事。 * * 隐私政策页有意保留自己的一小份样式 —— 那是个内容页， * 排版诉求和门户不一样，硬合并反而互相牵制。 * ============================================================ */ /* * 主题色 #66CCFF（天蓝）。 * * 注意：#66CCFF 很浅，**直接当文字用对比度只有 1.7:1，基本看不清**。 * 所以拆成一个色阶，而不是到处硬套同一个值： * --accent 原色，用在底色、边框、进度条这些"面积大不靠它读字"的地方 * --accent-deep 稍深一档，给按钮底 + 深色文字，比纯浅蓝有重量感 * --accent-ink 深蓝，**当文字用**（标签、链接、小字） * --accent-soft 极浅底，给标签和提示条的背景 */ :root { --bg: #f7f7f5; --card: #ffffff; --line: rgba(0,0,0,.10); --line-strong: rgba(0,0,0,.22); --text: #1c1c1a; --muted: #6b6b66; --accent: #66ccff; --accent-deep: #2fa9e0; --accent-ink: #0b5f92; --accent-soft: #e8f7ff; --accent-rgb: 102, 204, 255; --good: #0f6e56; --good-soft: #e1f5ee; --warn: #854f0b; --warn-soft: #faeeda; --radius: 12px; /* * 控制台视图区之外、从视口高度里吃掉的那一截： * 导航 59 + wrap 上留白 28 + 页脚 22+19 + wrap 下留白 24 ≈ 152 * 视图区要靠它算"最多能长到多高"，窄屏下导航矮一点、这个数也跟着变。 * 做成变量是因为两处要用同一个数（.console-main 和 640px 那条媒体查询）， * 各写各的迟早改一处忘一处。 * * **注意它必须和下面 `body.console` 那两条留白改写保持一致** —— * 控制台页的上下留白比别的页收了一档（见 .console .wrap / .console footer）， * 这里就是按收窄后的值算的。改一处不改另一处，页面就会多出滚动条。 */ --console-chrome: 156px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-text-size-adjust: 100%; } .wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; } header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } h1 { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: .2px; } .sub { color: var(--muted); font-size: 13px; } .topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } section { margin-top: 30px; } h2 { font-size: 14px; font-weight: 500; margin: 0 0 4px; } .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } a.card, .card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; transition: border-color .15s, transform .15s; } a.card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .card .title { font-weight: 500; display: flex; align-items: center; gap: 8px; } .card .desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; } .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 400; } .tag.direct { background: var(--good-soft); color: var(--good); } .tag.muted { background: #f1efe8; color: #5f5e5a; } .icon { width: 18px; height: 18px; flex: 0 0 18px; } #login { max-width: 360px; margin: 60px auto; } #login .card { padding: 22px; } label { display: block; font-size: 12.5px; color: var(--muted); margin: 14px 0 5px; } input { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); } input:focus { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: -1px; border-color: var(--accent-deep); } /* * 主按钮：浅蓝底 + 深蓝字。 * 用 #66CCFF 配白字对比度只有 1.9:1，所以这里反过来配深色字 —— * 既保住了主题色，也读得清。 */ button { width: 100%; margin-top: 18px; padding: 10px; font: inherit; font-weight: 500; background: var(--accent); color: #073a58; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; cursor: pointer; transition: background .15s; } button:hover:not(:disabled) { background: var(--accent-deep); color: #062c42; } button:disabled { opacity: .55; cursor: default; } .err { color: #a32d2d; font-size: 12.5px; margin-top: 12px; min-height: 18px; } .hidden { display: none !important; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1efe8; padding: 1px 5px; border-radius: 5px; font-size: 12.5px; } footer { margin-top: 40px; color: var(--muted); font-size: 12px; } /* ---- 动态验证码 ---- */ .otp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .otp-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; position: relative; } .otp-name { font-weight: 500; font-size: 13.5px; padding-right: 20px; } .otp-issuer { color: var(--muted); font-size: 12px; min-height: 18px; } .otp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 25px; letter-spacing: 2px; font-weight: 500; margin: 8px 0 6px; color: var(--accent-ink); cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -6px; user-select: none; } .otp-code.expiring { color: #a32d2d; } .otp-bar { height: 3px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; } .otp-bar i { display: block; height: 100%; background: var(--accent); } .otp-item .del { position: absolute; top: 8px; right: 8px; width: auto; margin: 0; padding: 2px 7px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .otp-item .del:hover { color: #a32d2d; } .otp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .otp-actions button { width: auto; margin: 0; padding: 7px 14px; font-size: 12.5px; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); } .lockbox { max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } dialog { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 20px; max-width: 430px; width: calc(100% - 40px); background: var(--card); color: var(--text); } dialog::backdrop { background: rgba(0,0,0,.38); } dialog h3 { margin: 0 0 2px; font-size: 14px; font-weight: 500; } dialog .row { display: flex; gap: 10px; } dialog .row > div { flex: 1; } /* ---- 云盘 ---- */ .quota { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .quota b { color: var(--text); font-weight: 500; } .quota .bar { flex: 1; min-width: 120px; max-width: 320px; height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; } .quota .bar i { display: block; height: 100%; background: var(--accent); } .quota .bar i.full { background: #a32d2d; } .drop { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); font-size: 13px; background: var(--card); cursor: pointer; } .drop.over { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); } .drop b { color: var(--text); font-weight: 500; } .drop.over b { color: inherit; } ul.files { list-style: none; margin: 14px 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } ul.files li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; } ul.files li:last-child { border-bottom: 0; } ul.files .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ul.files .fmeta { color: var(--muted); font-size: 12px; white-space: nowrap; } ul.files button.act { width: auto; margin: 0; padding: 4px 10px; font-size: 12px; line-height: 1.4; background: transparent; color: var(--accent-ink); border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; } ul.files button.act.danger:hover { color: #a32d2d; border-color: #a32d2d; } .prog { margin-top: 12px; font-size: 12.5px; color: var(--muted); } .prog .bar { height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; margin-top: 5px; } .prog .bar i { display: block; height: 100%; width: 0; background: var(--accent); } /* ============================================================ 顶部通栏导航 未登录也显示 —— 这是门面，不是控制台的一部分 ============================================================ */ .nav { position: sticky; top: 0; z-index: 20; background: rgba(247,247,245,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 58px; display: flex; align-items: center; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; font-weight: 500; font-size: 15px; flex: 0 0 auto; } .brand-icon { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; /* 浅蓝底配深蓝字，别用白字（对比度不够） */ background: var(--accent); color: #073a58; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: -.3px; } .nav-center { flex: 1; text-align: center; } .nav-center a { color: var(--muted); text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 6px; } .nav-center a:hover { color: var(--text); background: rgba(0,0,0,.04); } .nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } /* 语言切换：地球图标 + 目标语言 */ .lang { width: auto; margin: 0; padding: 5px 10px; font-size: 12.5px; font-weight: 400; background: transparent; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .lang:hover { color: var(--text); } .lang svg { width: 14px; height: 14px; } /* * 主题切换（右上角）：太阳 = 现在是浅色，月亮 = 现在是深色 —— * 图标说的是"当前状态"，title 说的是"点了会发生什么"（见 app.js 的 applyTheme）。 * 两个图标都放在按钮里，靠 html[data-theme] 显示其中一个，切换时不用换 DOM。 * 不带边框 —— 一圈线在导航里太抢，图标本身够清楚了。 */ .theme { width: auto; margin: 0; padding: 6px 9px; background: transparent; color: var(--muted); border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .theme:hover { color: var(--text); background: rgba(0,0,0,.05); } .theme svg { width: 15px; height: 15px; display: block; } .theme .ic-moon { display: none; } html[data-theme="dark"] .theme .ic-sun { display: none; } html[data-theme="dark"] .theme .ic-moon { display: block; } html[data-theme="dark"] .theme:hover { background: rgba(255,255,255,.08); } /* 未登录时的登录按钮 */ .nav-login { width: auto; margin: 0; padding: 6px 15px; font-size: 13px; border-radius: 999px; } /* 已登录时的头像 + 名字 */ .who { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; color: inherit; font: inherit; width: auto; margin: 0; } .who:hover { border-color: var(--line-strong); } .who img, .who .fallback { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; object-fit: cover; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; } .who .nm { font-size: 13px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who .role { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); } /* ============================================================ Hero —— 线稿里的那个大圆角卡片 ============================================================ */ .hero-wrap { max-width: 1100px; margin: 0 auto; padding: 34px 20px 0; } .hero { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 62px 40px 54px; text-align: center; } .hero-title { font-size: clamp(26px, 5.2vw, 44px); font-weight: 500; line-height: 1.25; margin: 0; letter-spacing: -.5px; min-height: 1.3em; } /* 打字机光标 */ .caret { display: inline-block; width: 2px; height: .95em; background: var(--accent); margin-left: 4px; vertical-align: -.1em; animation: blink 1.05s steps(2, start) infinite; } @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; } } .hero-rule { width: 54px; height: 2px; background: var(--line-strong); margin: 30px auto; border-radius: 1px; } /* 介绍固定英文，行高放松一点，别挤成一坨 */ .hero-intro { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.85; } .hero-cta { margin-top: 30px; } .hero-cta button { width: auto; margin: 0; padding: 12px 40px; font-size: 15px; border-radius: 999px; } .hero-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; justify-content: center; } .hero-note svg { width: 14px; height: 14px; } /* 未登录时提示一下下面还有东西 */ .hero-note.warn { color: var(--warn); } /* 普通人看到的提示条 */ .notice { margin-top: 18px; padding: 11px 14px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid rgba(133,79,11,.18); font-size: 12.5px; color: var(--warn); } /* 功能分区的角色标签 */ .tag.admin { background: #fbeaf0; color: #993556; } /* 移动端：Hero 收窄，导航简化 */ @media (max-width: 640px) { .hero { padding: 40px 22px 38px; border-radius: 16px; } .hero-rule { margin: 22px auto; } .nav-center { display: none; } /* 手机上隐私政策挪到底部 */ .who .nm { display: none; } .nav-inner { height: 52px; gap: 10px; } /* 导航矮了 7px，视图区的上限跟着放宽一点 */ :root { --console-chrome: 150px; } } /* 轻提示 */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; padding: 9px 18px; border-radius: 999px; background: #2c2c2a; color: #fff; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.18); } /* ---- 远程连接列表 ---- */ select { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); } select:focus { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: -1px; border-color: var(--accent-ink); } ul.files .kind { flex: 0 0 auto; font-size: 10.5px; font-weight: 500; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); } /* ---- 设备类型选择 ---- */ .device-opts { display: grid; gap: 10px; margin: 16px 0 4px; } .device-opt { width: 100%; margin: 0; padding: 14px 16px; text-align: left; background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; } .device-opt:hover { border-color: var(--accent-ink); background: var(--accent-soft); } .device-opt .dev-name { font-weight: 500; font-size: 14px; } .device-opt .dev-desc { color: var(--muted); font-size: 12.5px; line-height: 1.55; } .device-opt:hover .dev-desc { color: var(--accent-ink); } /* 临时设备标记 —— 要显眼，用户得知道关浏览器会掉登录 */ .tag.temp { background: var(--warn-soft); color: var(--warn); } .tag { white-space: nowrap; } /* ---- 账号安全面板 ---- */ .acct-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .acct-row span { color: var(--muted); } .login-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 4px; max-height: 190px; overflow-y: auto; } .login-list .fmeta { padding: 10px 12px; color: var(--muted); font-size: 12.5px; } .login-item { display: flex; gap: 10px; align-items: baseline; padding: 7px 12px; font-size: 12px; border-bottom: 1px solid var(--line); } .login-item:last-child { border-bottom: 0; } .login-item .when { color: var(--muted); flex: 0 0 auto; } .login-item .ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex: 0 0 auto; min-width: 92px; } .login-item .dev { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .danger-ghost { color: #a32d2d; border-color: rgba(163,45,45,.35); } .danger-ghost:hover { background: rgba(163,45,45,.06); } /* 弹框里元素多，给它一点滚动余量 */ dialog { max-height: 88vh; overflow-y: auto; } /* ---- 云盘未开通：一行小字 + 开通按钮，尽量不占地方 ---- */ .upsell { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 16px; background: #fbfaf7; } .upsell-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; } .upsell-text { color: var(--muted); font-size: 13px; } .upsell-btn { margin: 0; padding: 7px 14px; font-size: 13px; background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; cursor: pointer; } .upsell-btn:hover { background: var(--accent-soft); } /* ---- 开通说明 ---- */ .plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; background: #fbfaf7; } .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; } .plan-price b { font-size: 26px; font-weight: 500; letter-spacing: -.5px; } .plan-price span { color: var(--muted); font-size: 13px; } .plan-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; } .plan-list li { margin-bottom: 5px; } /* ---- 管理设置 ---- */ .admin-grid { display: grid; gap: 16px; } .admin-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--card); } .admin-block h3 { font-size: 14px; font-weight: 500; margin: 0 0 12px; } .switch { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; cursor: pointer; } .switch input { width: auto; margin: 0; } .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } /* ---- 云盘多选与分享 ---- */ ul.files li input.pick { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent-ink); cursor: pointer; } .share-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); } .share-all { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; cursor: pointer; } .share-all input { width: auto; margin: 0; accent-color: var(--accent-ink); } .share-count { font-size: 13px; color: var(--accent-ink); } .share-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .share-actions button { margin: 0; padding: 6px 12px; font-size: 12.5px; } .share-picked { margin: 0 0 14px; padding-left: 18px; max-height: 130px; overflow-y: auto; color: var(--muted); font-size: 12.5px; } .share-picked li { margin-bottom: 3px; word-break: break-all; } .share-list { max-height: 300px; overflow-y: auto; } /* 分享页上每行左边那格显示的是文件大小，窄一点 */ .share-list .fname { min-width: 0; } /* ============================================================ 控制台：左栏 + 视图区 布局是「左栏 + 一个视图区」两列。左栏是**原来那些功能区**的入口， 右面一次只显示一个视图，打开时默认是 AI 对话。 视图区自己带滚动，整页不滚 —— 聊天界面滚整页很别扭： 输入框会被推走，滚到底还要先滚过整个历史。 ============================================================ */ /* * 控制台页的上下留白比别的页收一档。 * * 视图区的高度是「视口剩下的那点地方」，所以留白少一寸、对话区就多一寸。 * 收窄之前，页脚上面 40 + 下面 60 一共吃掉 100px，而这 100px 全是对话区 * 本可以占的高度；现在压到 22 + 24，空对话时视图区能高出一截。 * * 只动控制台这一页（body.console）—— 首页、隐私政策、分享页是内容页， * 它们需要那点呼吸感，没必要跟着改。 * * 改了这里要同步改 :root 里的 --console-chrome，两个数是一套的。 */ body.console .wrap { padding-bottom: 24px; } body.console footer { margin-top: 22px; } .console-shell { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 18px; align-items: start; } /* ---- 左栏 ---- */ .side { position: sticky; top: 74px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px; } .side-title { font-size: 11.5px; color: var(--muted); margin: 0 0 8px 4px; } .side-nav { display: flex; flex-direction: column; gap: 2px; } /* * 里面有两种东西：切换视图的