/* ===================================================================== theme.css — 冰山 Iceberg 全局设计层 (Design Tokens + 组件润色) --------------------------------------------------------------------- 目的: 在不改动页面结构的前提下，统一全站视觉 (配色/间距/圆角/阴影/字体)， 参考主流数据 SaaS (Linear / Stripe) 提升专业度与可读性。 用法: 作为 中"最后"引入的样式表，叠加在 Bootstrap 与各页自定义 CSS 之上。 原则: 仅覆盖视觉属性，不改布局；保持现有冰山蓝色系，只做润色提质。 ===================================================================== */ :root { /* —— 冰山蓝主色阶 (deep navy → ice accent) —— */ --ice-900: #03045E; /* 最深 navy (品牌主色) */ --ice-800: #023072; --ice-700: #023E8A; --ice-600: #0077B6; /* 中蓝 (原主用色) */ --ice-500: #0096C7; --ice-400: #00B4D8; /* 青色点缀 (accent) */ --ice-300: #48CAE4; --ice-200: #90E0EF; --ice-100: #CAF0F8; --ice-50: #EBF7FB; /* 极浅冰蓝 (表头/hover 底) */ /* —— 中性色 (文本与分隔) —— */ --ink: #0B1B2B; /* 主文本 (高对比) */ --ink-2: #3D5066; /* 次级文本 */ --muted: #61748A; /* 弱化文本 (仍满足对比度) */ --line: #E2E9F0; /* 边框/分隔线 */ --line-2: #EEF3F8; /* 更浅分隔 */ --surface: #FFFFFF; /* 卡片表面 */ --bg: #F4F8FB; /* 页面底色 */ /* —— 语义色 —— */ --success: #16A34A; --success-bg: #E8F6EE; --warning: #C2700B; --warning-bg: #FCF1DF; --danger: #D92D20; --danger-bg: #FBE9E7; /* —— 圆角 —— */ --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px; /* —— 阴影 (低透明度、navy 着色、层次柔和) —— */ --sh-1: 0 1px 2px rgba(3, 4, 94, .04), 0 1px 3px rgba(3, 4, 94, .06); --sh-2: 0 2px 4px rgba(3, 4, 94, .05), 0 6px 16px rgba(3, 4, 94, .08); --sh-3: 0 8px 24px rgba(3, 4, 94, .10), 0 16px 48px rgba(3, 4, 94, .10); --ring: 0 0 0 3px rgba(0, 180, 216, .25); /* 聚焦光环 (accent) */ /* —— 字体 (中文优先 Noto Sans SC，英文走系统精炼栈) —— */ --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif; /* —— 渐变 —— */ --grad-brand: linear-gradient(135deg, var(--ice-900) 0%, var(--ice-600) 55%, var(--ice-400) 100%); --grad-cta: linear-gradient(135deg, var(--ice-600) 0%, var(--ice-400) 100%); } /* ========================================================= 1) 基础排版与可读性 ========================================================= */ body { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 链接统一 */ a { color: var(--ice-600); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--ice-500); } /* 文本选中色 */ ::selection { background: var(--ice-200); color: var(--ice-900); } /* 弱化文本对比度修正 (Bootstrap .text-muted 默认偏灰) */ .text-muted { color: var(--muted) !important; } /* ========================================================= 2) 卡片 ========================================================= */ .card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--surface); } .card .card-header { border-bottom: 1px solid var(--line); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); font-weight: 600; } /* 深色(品牌)卡头：用品牌渐变替代纯蓝，质感更高级 */ .card .card-header.bg-primary { background: var(--grad-brand) !important; border-bottom: none; } /* 修复：让卡片首/末子区块(卡头/卡体/卡脚)的圆角跟随卡片本身， 避免自带背景色(渐变/bg-*)的直角区块在圆角处"冒出"边框。 仅圆角化首末元素自身、不裁剪后代，安全无副作用。 */ .card > .card-header:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .card > .card-body:last-child, .card > .card-footer:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .card > .card-body:first-child:last-child { border-radius: inherit; } /* ========================================================= 3) 按钮 ========================================================= */ .btn { border-radius: var(--r-sm); font-weight: 600; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad-cta); border: none; box-shadow: 0 2px 8px rgba(0, 119, 182, .28); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--ice-700) 0%, var(--ice-500) 100%); box-shadow: 0 6px 18px rgba(0, 119, 182, .38); transform: translateY(-1px); } .btn-outline-primary { color: var(--ice-600); border: 1.5px solid var(--ice-400); } .btn-outline-primary:hover { background: var(--ice-50); color: var(--ice-700); border-color: var(--ice-500); } .btn-light { background: #fff; border: 1px solid var(--line); color: var(--ice-700); } .btn-light:hover { background: var(--ice-50); border-color: var(--ice-300); } /* ========================================================= 4) 表单控件 (统一聚焦光环) ========================================================= */ .form-control, .form-select { border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus, .form-select:focus { border-color: var(--ice-400); box-shadow: var(--ring); } .form-control::placeholder { color: #9AA9B8; } /* ========================================================= 5) 表格 (数据可读性：表头分区、行 hover、斑马纹) ========================================================= */ .table { color: var(--ink); } .table > thead th { background: var(--ice-50); color: var(--ice-700); font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; } .table > tbody td { border-bottom: 1px solid var(--line-2); vertical-align: middle; } .table-hover > tbody > tr:hover > * { background: var(--ice-50); } .table-striped > tbody > tr:nth-of-type(odd) > * { background: #FAFCFE; } /* ========================================================= 6) 标签页 (下划线式 active，更接近现代 SaaS) ========================================================= */ .nav-tabs { border-bottom: 1px solid var(--line); } .nav-tabs .nav-link { border: none; color: var(--muted); font-weight: 600; padding: 10px 16px; border-bottom: 2px solid transparent; } .nav-tabs .nav-link:hover { color: var(--ice-600); border-bottom-color: var(--ice-200); } .nav-tabs .nav-link.active { color: var(--ice-700); background: transparent; border-bottom: 2px solid var(--ice-500); } /* ========================================================= 7) 徽章 / 标签 ========================================================= */ .badge.bg-primary { background: var(--ice-600) !important; } .badge.bg-success { background: var(--success) !important; } .badge.bg-warning { background: var(--warning) !important; color: #fff !important; } .badge.bg-danger { background: var(--danger) !important; } /* ========================================================= 8) 滚动条 (细、冰蓝、统一) ========================================================= */ * { scrollbar-width: thin; scrollbar-color: var(--ice-300) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--ice-300); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ice-400); background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* ========================================================= 9) 细节：分隔线、alert 圆角、focus 可见性 (无障碍) ========================================================= */ /* 语言切换按钮：加 🌐 图标兜底，避免 i18n 未就绪时按钮显示为空 */ .lang-switch::before { content: "🌐 "; } .lang-switch:empty::after { content: "中 / EN"; } /* 文字被清空时的最终兜底 */ hr { border-color: var(--line); opacity: 1; } .alert { border-radius: var(--r); border: 1px solid var(--line); } :focus-visible { outline: 2px solid var(--ice-400); outline-offset: 2px; }