/* =================================================================== * Let'sCode Google UI 仪表盘设计系统 * 设计原则：扁平 + 薄边框 + 单一主色强调 + 0 阴影 * 字体：DM Sans（正文）/ JetBrains Mono（数据与代码） * =================================================================== */ /* 字体引入（Google Fonts CDN） */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* =================================================================== * CSS 变量 —— 亮色模式（默认） * =================================================================== */ :root { /* 主色 */ --color-primary: #4285f4; /* Google 蓝，主操作/焦点 */ --color-primary-light: #dbeafe; /* 辅助蓝，次级表面 */ /* 背景 */ --color-bg: #ffffff; /* 页面/卡片背景 */ --color-bg-muted: #f9f9fa; /* 弹出层/次级背景 */ --color-bg-fill: #eff1f4; /* 填充色 */ /* 边框与文字 */ --color-border: #ebebeb; /* 边框 */ --color-text: #0e1115; /* 主文字 */ --color-text-secondary: #5f6368; /* 次级文字 */ /* 语义色 */ --color-danger: #ea4335; /* 红色（错误/删除） */ --color-success: #34a853; /* 绿色 */ --color-warning: #fbbc05; /* 黄色 */ /* 图表色板（亮色） */ --chart-1: #4285f4; --chart-2: #ea4335; --chart-3: #fbbc05; --chart-4: #0043ad; --chart-5: #34a853; /* 字体 */ --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* 圆角 */ --radius: 0.5rem; /* 8px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.75rem; /* 12px */ /* 间距基准：3.84px */ --spacing: 0.24rem; /* 阴影：扁平设计，全部为 0 */ --shadow: 0 0 transparent; --ring: 0 0 0 3px var(--color-primary-light); /* 过渡 */ --transition: 0.15s ease; } /* =================================================================== * CSS 变量 —— 暗色模式 * 通过 启用 * =================================================================== */ [data-theme="dark"] { --color-primary: #fc2c50; /* 红粉色 */ --color-primary-light: #2a1a1f; /* 辅助深红 */ --color-bg: #161616; --color-bg-muted: #1d1d1c; --color-bg-fill: #2a2a28; --color-border: #333331; --color-text: #f0f0f0; --color-text-secondary: #a0a0a0; /* 图表色板（暗色） */ --chart-1: #2dccd3; --chart-2: #f1204a; --chart-3: #edbbe8; --chart-4: #fbeb35; --chart-5: #baf6f0; --ring: 0 0 0 3px var(--color-primary-light); } /* =================================================================== * 基础样式 * =================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background-color: var(--color-bg-muted); color: var(--color-text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition), color var(--transition); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-text); } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } /* 标题 */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--color-text); } h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } /* 段落 */ p { margin-bottom: calc(var(--spacing) * 4); } p:last-child { margin-bottom: 0; } /* 等宽文本（数据/代码） */ code, pre, .mono { font-family: var(--font-mono); } code { background-color: var(--color-bg-fill); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 0.9em; } pre { background-color: var(--color-bg-fill); padding: calc(var(--spacing) * 4); border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--color-border); } pre code { background: none; padding: 0; } /* =================================================================== * 文本工具类 * =================================================================== */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-text-secondary); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.5rem; } .text-2xl { font-size: 2rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-mono { font-family: var(--font-mono); } /* 间距工具类 */ .mt-1 { margin-top: var(--spacing); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mb-1 { margin-bottom: var(--spacing); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .p-1 { padding: var(--spacing); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .hidden { display: none !important; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: var(--spacing); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .w-full { width: 100%; } .cursor-pointer { cursor: pointer; } .rounded { border-radius: var(--radius); } /* =================================================================== * 网格布局 * =================================================================== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--spacing) * 4); } .grid { display: grid; gap: calc(var(--spacing) * 4); } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .grid-cols-12 { grid-template-columns: repeat(12, 1fr); } /* 列（12 栅格） */ .col { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } /* =================================================================== * Button 按钮 * 扁平无阴影，圆角，padding 用 --spacing 衍生 * =================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); font-family: var(--font-sans); font-weight: 500; font-size: 1rem; line-height: 1; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-bg); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); white-space: nowrap; user-select: none; text-decoration: none; } .btn:hover { background-color: var(--color-bg-fill); border-color: var(--color-text-secondary); color: var(--color-text); } .btn:active { background-color: var(--color-bg-muted); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* 主按钮：主色背景白字 */ .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .btn-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; filter: brightness(0.92); } .btn-primary:active { filter: brightness(0.85); } /* 次级按钮：透明背景 + 边框 */ .btn-secondary { background-color: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background-color: var(--color-bg-fill); border-color: var(--color-text-secondary); color: var(--color-text); } /* 危险按钮：红色 */ .btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); color: #ffffff; } .btn-danger:hover { background-color: var(--color-danger); border-color: var(--color-danger); color: #ffffff; filter: brightness(0.92); } /* 尺寸 */ .btn-sm { font-size: 0.875rem; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); border-radius: var(--radius-sm); } .btn-lg { font-size: 1.125rem; padding: calc(var(--spacing) * 4) calc(var(--spacing) * 7); border-radius: var(--radius-md); } /* 文本按钮（无边框，仅文字） */ .btn-text { background-color: transparent; border-color: transparent; color: var(--color-primary); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); } .btn-text:hover { background-color: var(--color-primary-light); border-color: transparent; color: var(--color-primary); } /* =================================================================== * Card 卡片 * 薄边框，圆角，无阴影，padding 用 --spacing 衍生 * =================================================================== */ .card { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: calc(var(--spacing) * 5); box-shadow: var(--shadow); transition: border-color var(--transition); } .card-header { padding-bottom: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); border-bottom: 1px solid var(--color-border); } .card-title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); } .card-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: var(--spacing); } .card-body { color: var(--color-text); } .card-footer { padding-top: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: calc(var(--spacing) * 3); } .card-hover:hover { border-color: var(--color-text-secondary); } /* 无内边距卡片（用于内部放置表格等） */ .card-flush { padding: 0; overflow: hidden; } /* =================================================================== * Table 表格 * 密集信息布局，行间 border-bottom 分隔 * =================================================================== */ .table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background-color: var(--color-bg); } .table th, .table td { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); text-align: left; vertical-align: middle; } .table thead th { background-color: var(--color-bg-muted); color: var(--color-text-secondary); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .table tbody td { border-bottom: 1px solid var(--color-border); color: var(--color-text); } .table tbody tr:last-child td { border-bottom: none; } /* 行 hover 高亮 */ .table tbody tr { transition: background-color var(--transition); } .table tbody tr:hover { background-color: var(--color-bg-muted); } .table-striped tbody tr:nth-child(even) { background-color: var(--color-bg-muted); } .table-striped tbody tr:nth-child(even):hover { background-color: var(--color-bg-fill); } /* 紧凑表格 */ .table-compact th, .table-compact td { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); } /* =================================================================== * Navigation 导航 * 简约，active 用主色文字 + 下划线 * =================================================================== */ .nav { display: flex; align-items: center; gap: calc(var(--spacing) * 5); list-style: none; } .nav-item { display: flex; align-items: center; } .nav-link { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 3) 0; color: var(--color-text-secondary); font-weight: 500; font-size: 0.9375rem; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-border); } .nav-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* 垂直导航 */ .nav-vertical { flex-direction: column; align-items: stretch; gap: var(--spacing); } .nav-vertical .nav-link { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); border-radius: var(--radius-sm); border-bottom: none; border-left: 3px solid transparent; } .nav-vertical .nav-link:hover { background-color: var(--color-bg-fill); border-bottom-color: transparent; } .nav-vertical .nav-link.active { background-color: var(--color-primary-light); color: var(--color-primary); border-left-color: var(--color-primary); border-bottom-color: transparent; } /* =================================================================== * Sidebar 侧边栏 * 亮色用 --color-primary-light，active 用主色左边框 * =================================================================== */ .sidebar { background-color: var(--color-bg-muted); border-right: 1px solid var(--color-border); padding: calc(var(--spacing) * 4); min-height: 100vh; display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); } [data-theme="dark"] .sidebar { background-color: var(--color-primary-light); } .sidebar-item { display: flex; align-items: center; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-weight: 500; font-size: 0.9375rem; border-left: 3px solid transparent; cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition); text-decoration: none; } .sidebar-item:hover { background-color: var(--color-bg-fill); color: var(--color-text); border-left-color: var(--color-border); } .sidebar-item.active { background-color: var(--color-primary); color: #ffffff; border-left-color: transparent; } .sidebar-item.active:hover { background-color: var(--color-primary); color: #ffffff; filter: brightness(0.92); } /* 侧边栏标题/品牌 */ .sidebar-brand { display: flex; align-items: center; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 4); font-size: 1.25rem; font-weight: 700; color: var(--color-text); border-bottom: 1px solid var(--color-border); margin-bottom: calc(var(--spacing) * 2); } .sidebar-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 3); } .sidebar-footer { margin-top: auto; padding-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-border); } /* =================================================================== * Form 表单 * 输入框 1px border，focus 时主色 ring * =================================================================== */ .form-group { margin-bottom: calc(var(--spacing) * 5); } .form-group:last-child { margin-bottom: 0; } .form-label { display: block; margin-bottom: calc(var(--spacing) * 2); font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .form-label .required { color: var(--color-danger); margin-left: 2px; } .form-input, .form-textarea, .form-select { display: block; width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); box-shadow: var(--shadow); transition: border-color var(--transition), box-shadow var(--transition); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-secondary); opacity: 0.7; } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); } .form-input:disabled, .form-textarea:disabled, .form-select:disabled { background-color: var(--color-bg-fill); color: var(--color-text-secondary); cursor: not-allowed; } .form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .form-select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(var(--spacing) * 4) center; padding-right: calc(var(--spacing) * 10); cursor: pointer; } /* 表单提示/错误文本 */ .form-text { display: block; margin-top: calc(var(--spacing) * 2); font-size: 0.8125rem; color: var(--color-text-secondary); } .form-error { color: var(--color-danger); } /* 输入框组（前缀/后缀） */ .form-input-group { display: flex; align-items: stretch; } .form-input-group .form-input { border-radius: 0; } .form-input-group .form-input:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .form-input-group .form-input:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .form-input-group .form-input + .form-input { border-left: none; } .form-input-group .form-input:focus { border-color: var(--color-primary); position: relative; z-index: 1; } /* 复选框/单选框 */ .form-check { display: flex; align-items: center; gap: calc(var(--spacing) * 2); cursor: pointer; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); cursor: pointer; } .form-check-label { font-size: 0.9375rem; color: var(--color-text); cursor: pointer; } /* =================================================================== * Badge 徽章 * =================================================================== */ .badge { display: inline-flex; align-items: center; padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3); font-size: 0.75rem; font-weight: 500; line-height: 1.4; border-radius: var(--radius-md); background-color: var(--color-bg-fill); color: var(--color-text-secondary); border: 1px solid transparent; white-space: nowrap; } .badge-primary { background-color: var(--color-primary-light); color: var(--color-primary); } .badge-success { background-color: rgba(52, 168, 83, 0.12); color: var(--color-success); } .badge-danger { background-color: rgba(234, 67, 53, 0.12); color: var(--color-danger); } .badge-warning { background-color: rgba(251, 188, 5, 0.18); color: var(--color-warning); } [data-theme="dark"] .badge-success, [data-theme="dark"] .badge-danger, [data-theme="dark"] .badge-warning { background-color: rgba(255, 255, 255, 0.08); } /* =================================================================== * 分割线 * =================================================================== */ .divider { height: 1px; background-color: var(--color-border); border: none; margin: calc(var(--spacing) * 4) 0; } /* =================================================================== * 头像 * =================================================================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--color-primary-light); color: var(--color-primary); font-weight: 700; font-size: 1rem; overflow: hidden; flex-shrink: 0; } .avatar-sm { width: 2rem; height: 2rem; font-size: 0.875rem; } .avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; } /* =================================================================== * 响应式：手机/平板/桌面 * =================================================================== */ /* 平板（≤ 768px） */ @media (max-width: 768px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } .container { padding: 0 calc(var(--spacing) * 3); } .grid { gap: calc(var(--spacing) * 3); } /* 栅格在平板上降为 2 列 */ .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .col-md-6 { grid-column: span 6; } .col-md-12 { grid-column: span 12; } /* 卡片内边距缩小 */ .card { padding: calc(var(--spacing) * 4); } /* 表格横向滚动 */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 水平导航可滚动 */ .nav { gap: calc(var(--spacing) * 4); overflow-x: auto; } .hide-md { display: none !important; } } /* 手机（≤ 480px） */ @media (max-width: 480px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } .container { padding: 0 calc(var(--spacing) * 2); } /* 栅格在手机上单列堆叠 */ .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-12 { grid-template-columns: 1fr; } .col, .col-2, .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 1; } /* 卡片内边距进一步缩小 */ .card { padding: calc(var(--spacing) * 3); } /* 按钮 full width */ .btn { width: 100%; } .btn-sm { width: auto; } /* 导航项堆叠 */ .nav { flex-direction: column; align-items: stretch; gap: var(--spacing); } .hide-sm { display: none !important; } } /* 大屏桌面（≥ 1200px） */ @media (min-width: 1200px) { .container { padding: 0; } }