/* ========================================================= * tuokele 后台 · 全局主题样式（完整设计系统 v15） * * 用法：nav.php 在顶部注入本文件，并用 JS 给设 * data-theme="blue|green|purple|orange|pink|dark"。 * * 关键：本文件在中加载，晚于各页面里的同名 class 定义， * 因此「同优先级、后加载者生效」——无需 !important 即可整站统一换色。 * 页面内遗留的硬编码颜色会被这里基于 CSS 变量的规则覆盖。 * 语义化状态色（如导入预览的红/黄/绿徽标）使用内联 style，保留原义。 * ========================================================= */ /* ---------- 主题变量 ---------- */ :root{ --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eff6ff; --accent:#7c3aed; --ink:#1f2937; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb; --bg:#f7f8fa; --card:#ffffff; --danger:#dc2626; --danger-soft:#fef2f2; --danger-fg:#b91c1c; --warn:#ea580c; --warn-soft:#fff7ed; --warn-fg:#c2410c; --ok:#16a34a; --ok-soft:#f0fdf4; --ok-fg:#15803d; --chip-bg:#eef2ff; --chip-fg:#3730a3; --chip-border:#e0e7ff; --table-head:#f9fafb; --toolbar-bg:#eef2ff; --toolbar-border:#e0e7ff; --input-bg:#ffffff; --input-fg:#1f2937; --shadow:rgba(37,99,235,.20); --radius:12px; } /* ---------- 基础 ---------- */ *{box-sizing:border-box} body{font-family:-apple-system,"Segoe UI","PingFang SC",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--text);margin:0;font-size:14px;line-height:1.6; transition:background .25s ease,color .25s ease} /* ---------- 导航（图标 + 文字；顶栏横向 / 侧栏竖向可收起，无翻滚动效） ---------- */ .topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;flex-wrap:wrap; height:56px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--border); transition:background .25s ease,border-color .25s ease} .topnav .nav-head{display:flex;align-items:center;gap:10px} .topnav .brand{display:flex;align-items:center;height:100%;margin-right:12px} .topnav .brand-logo{height:30px;width:auto;display:block;cursor:pointer;transition:transform .2s ease} .topnav .brand-logo:hover{animation:tklBounce .6s ease} .topnav .brand-logo.bounce{animation:tklBounce .6s ease} .topnav .brand-text{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap} .logo-preview{margin:10px 0;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--card);display:inline-block} .logo-preview img{max-height:48px;width:auto;display:block} .topnav .nav-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:7px; width:30px;height:30px;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;flex:0 0 auto} .topnav .nav-scroll{display:flex;align-items:center;gap:4px;flex:1 1 auto;flex-wrap:wrap} .topnav .nav-grp{display:none} .topnav .nav-item{position:relative;display:inline-flex;align-items:center;gap:7px;color:var(--muted); text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;white-space:nowrap; transition:color .2s ease,background .2s ease} .topnav .nav-item .nav-ico{display:inline-flex;width:18px;height:18px;flex:0 0 auto} .topnav .nav-item .nav-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8} .topnav .nav-item .tip{display:none} .topnav .nav-item:hover{color:var(--primary);background:var(--primary-soft)} .topnav .nav-item.active{color:var(--primary);font-weight:700} .topnav .nav-item.active::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px; border-radius:2px;background:var(--primary)} .topnav .stat{color:var(--muted);font-size:12px;margin-right:6px} .topnav .sync{padding:6px 14px;border:1px solid var(--border);border-radius:8px;background:transparent; color:var(--muted);cursor:pointer;font-size:13px;font-weight:600;transition:all .2s ease;margin-left:6px} .topnav .sync:hover{border-color:var(--primary);color:var(--primary)} .topnav .nav-item.logout{color:var(--muted);font-weight:600} .topnav .nav-item.logout:hover{color:var(--primary)} @keyframes tklBounce{0%,100%{transform:translateY(0)}15%{transform:translateY(-8px)}30%{transform:translateY(0)}45%{transform:translateY(-6px)}60%{transform:translateY(0)}75%{transform:translateY(-3px)}} /* ---------- 卡片 / 容器 ---------- */ .wrap{max-width:1080px;margin:20px auto;background:var(--card);border:0;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)} /* 宽度修饰类：各页面按内容选择，统一收口到一套系统（替代各页