/* ================================================================ Agent 角色平台 - 基础样式 多主题变量系统 / 重置 / 布局 / 侧边栏 / 按钮 / 滚动条 ================================================================ */ /* ================================================================ 6 套主题变量（通过 切换） ================================================================ */ /* 深色（默认） */ :root, [data-theme="dark"] { --bg-primary: #0f1117; --bg-secondary: #1a1d27; --bg-card: #1e2130; --bg-input: #252836; --bg-hover: #2a2d3a; --bg-subtle: #222536; --border: #2e3140; --border-light: #3a3d4e; --text-primary: #e4e6f0; --text-secondary: #8b8fa3; --text-muted: #5c6072; --accent: #4f8cff; --accent-hover: #6ba0ff; --accent-rgb: 79, 140, 255; --accent-bg: rgba(79, 140, 255, 0.1); --accent-20: rgba(79, 140, 255, 0.2); --accent-25: rgba(79, 140, 255, 0.25); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.1); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.1); --danger: #f87171; --danger-rgb: 248, 113, 113; --danger-bg: rgba(248, 113, 113, 0.1); --danger-hover-bg: rgba(248, 113, 113, 0.2); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 8px rgba(0,0,0,0.3); --transition: 0.2s ease; } /* 浅色 */ [data-theme="light"] { --bg-primary: #f5f6fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #f0f1f5; --bg-hover: #e8e9ef; --bg-subtle: #f8f9fc; --border: #e0e2e8; --border-light: #d0d3dc; --text-primary: #1a1d2e; --text-secondary: #5a5f72; --text-muted: #8b8fa3; --accent: #2563eb; --accent-hover: #3b82f6; --accent-rgb: 37, 99, 235; --accent-bg: rgba(37, 99, 235, 0.08); --accent-20: rgba(37, 99, 235, 0.15); --accent-25: rgba(37, 99, 235, 0.2); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #dc2626; --danger-rgb: 220, 38, 38; --danger-bg: rgba(220, 38, 38, 0.08); --danger-hover-bg: rgba(220, 38, 38, 0.15); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --transition: 0.2s ease; } /* 海洋蓝 */ [data-theme="ocean"] { --bg-primary: #0c1929; --bg-secondary: #112240; --bg-card: #1a2d4a; --bg-input: #1e3458; --bg-hover: #243b5e; --bg-subtle: #162845; --border: #1e3a5f; --border-light: #2a4a7f; --text-primary: #ccddf7; --text-secondary: #8899b4; --text-muted: #5a6e8a; --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-rgb: 56, 189, 248; --accent-bg: rgba(56, 189, 248, 0.1); --accent-20: rgba(56, 189, 248, 0.2); --accent-25: rgba(56, 189, 248, 0.25); --success: #2dd4bf; --success-bg: rgba(45, 212, 191, 0.1); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.1); --danger: #fb7185; --danger-rgb: 251, 113, 133; --danger-bg: rgba(251, 113, 133, 0.1); --danger-hover-bg: rgba(251, 113, 133, 0.2); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 8px rgba(0,0,0,0.3); --transition: 0.2s ease; } /* 森林绿 */ [data-theme="forest"] { --bg-primary: #0d1f17; --bg-secondary: #132a1f; --bg-card: #1a3327; --bg-input: #1e3d2e; --bg-hover: #244535; --bg-subtle: #16291f; --border: #1e3d2e; --border-light: #2a4d3a; --text-primary: #d4e8dc; --text-secondary: #8aaa98; --text-muted: #5a7a68; --accent: #4ade80; --accent-hover: #86efac; --accent-rgb: 74, 222, 128; --accent-bg: rgba(74, 222, 128, 0.1); --accent-20: rgba(74, 222, 128, 0.2); --accent-25: rgba(74, 222, 128, 0.25); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.1); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.1); --danger: #f87171; --danger-rgb: 248, 113, 113; --danger-bg: rgba(248, 113, 113, 0.1); --danger-hover-bg: rgba(248, 113, 113, 0.2); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 8px rgba(0,0,0,0.3); --transition: 0.2s ease; } /* 薰衣草（亮紫） */ [data-theme="purple"] { --bg-primary: #f8f6fc; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #f0edf7; --bg-hover: #e8e3f3; --bg-subtle: #faf9fd; --border: #e0d8f0; --border-light: #d0c8e0; --text-primary: #2d2040; --text-secondary: #6a5a88; --text-muted: #9b8ab8; --accent: #8b5cf6; --accent-hover: #a78bfa; --accent-rgb: 139, 92, 246; --accent-bg: rgba(139, 92, 246, 0.08); --accent-20: rgba(139, 92, 246, 0.15); --accent-25: rgba(139, 92, 246, 0.2); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #dc2626; --danger-rgb: 220, 38, 38; --danger-bg: rgba(220, 38, 38, 0.08); --danger-hover-bg: rgba(220, 38, 38, 0.15); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 12px rgba(0,0,0,0.06); --transition: 0.2s ease; } /* 奶油暖（亮橙） */ [data-theme="sunset"] { --bg-primary: #fef9f0; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #faf3e6; --bg-hover: #f5ead6; --bg-subtle: #fdf8f2; --border: #e8dcc8; --border-light: #d8ccb8; --text-primary: #3d2e1a; --text-secondary: #7a6a4a; --text-muted: #a89878; --accent: #f59e0b; --accent-hover: #fbbf24; --accent-rgb: 245, 158, 11; --accent-bg: rgba(245, 158, 11, 0.08); --accent-20: rgba(245, 158, 11, 0.15); --accent-25: rgba(245, 158, 11, 0.2); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #dc2626; --danger-rgb: 220, 38, 38; --danger-bg: rgba(220, 38, 38, 0.08); --danger-hover-bg: rgba(220, 38, 38, 0.15); --radius: 8px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow: 0 2px 12px rgba(0,0,0,0.06); --transition: 0.2s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); display: flex; overflow: hidden; } /* ---- Sidebar ---- */ .sidebar { width: 220px; min-width: 220px; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-header { padding: 20px 16px; border-bottom: 1px solid var(--border); } .sidebar-header h1 { font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; } .sidebar-header .subtitle { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: all var(--transition); margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .nav-item .nav-icon { font-size: 18px; width: 24px; text-align: center; } /* ---- Theme Switcher ---- */ .theme-switcher { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .theme-switcher-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); text-align: center; } .theme-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--transition); position: relative; outline: none; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--accent); } /* color fills - half bg color, half accent color */ .theme-dot[data-theme="dark"] { background: linear-gradient(135deg, #1a1d27 50%, #4f8cff 50%); } .theme-dot[data-theme="ocean"] { background: linear-gradient(135deg, #112240 50%, #38bdf8 50%); } .theme-dot[data-theme="forest"]{ background: linear-gradient(135deg, #132a1f 50%, #4ade80 50%); } .theme-dot[data-theme="light"] { background: linear-gradient(135deg, #f5f6fa 50%, #2563eb 50%); border: 2px solid #d0d3dc; } .theme-dot[data-theme="purple"]{ background: linear-gradient(135deg, #f8f6fc 50%, #8b5cf6 50%); border: 2px solid #d0c8e0; } .theme-dot[data-theme="sunset"]{ background: linear-gradient(135deg, #fef9f0 50%, #f59e0b 50%); border: 2px solid #d8ccb8; } /* ---- Sidebar Footer ---- */ .sidebar-footer { padding: 8px 8px 12px; font-size: 11px; color: var(--text-muted); text-align: center; } /* ---- Main Content ---- */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .top-bar { padding: 14px 24px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .top-bar h2 { font-size: 18px; font-weight: 600; } .view { display: none; flex: 1; overflow-y: auto; padding: 24px; } .view.active { display: flex; flex-direction: column; } /* ---- Buttons ---- */ .btn { padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border-light); background: var(--bg-input); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:hover { background: var(--bg-hover); border-color: var(--accent); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); } .btn-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .btn-danger:hover { background: var(--danger-hover-bg); } .btn-success { background: var(--success-bg); border-color: var(--success); color: var(--success); } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-lg { padding: 12px 24px; font-size: 15px; } /* ---- Scrollbar ---- */ :::-webkit-scrollbar { width: 6px; } :::-webkit-scrollbar-track { background: transparent; } :::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } :::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }