diff --git a/static/web_panel/css/style.css b/static/web_panel/css/style.css index eb1484d..2865df3 100644 --- a/static/web_panel/css/style.css +++ b/static/web_panel/css/style.css @@ -1,159 +1,333 @@ +/* ═══════════════════════════════════════════ + SenSu Web Panel — Material Design 3 2026 + ═══════════════════════════════════════════ */ + +/* ── MD3 Color Tokens (Dark Theme) ── */ :root { - --bg-dark: #121218; --bg-panel: #1e1e24; --bg-card: #252530; - --bg-hover: #2a2a35; --text-main: #e0e0e0; --text-dim: #888890; - --accent: #7aa2f7; --accent-glow: rgba(122, 162, 247, 0.3); - --success: #9ece6a; --warn: #e0af68; --error: #f7768e; - --border: #363642; --sidebar-w: 240px; --sidebar-collapsed: 64px; -} -* { box-sizing: border-box; margin: 0; padding: 0; } -body { background: var(--bg-dark); color: var(--text-main); font-family: system-ui, -apple-system, sans-serif; height: 100vh; overflow: hidden; } + --md-sys-color-primary: #D0BCFF; + --md-sys-color-on-primary: #381E72; + --md-sys-color-primary-container: #4F378B; + --md-sys-color-on-primary-container: #EADDFF; + --md-sys-color-secondary: #CCC2DC; + --md-sys-color-on-secondary: #332D41; + --md-sys-color-secondary-container: #4A4458; + --md-sys-color-on-secondary-container: #E8DEF8; + --md-sys-color-tertiary: #EFB8C8; + --md-sys-color-on-tertiary: #492532; + --md-sys-color-tertiary-container: #633B48; + --md-sys-color-on-tertiary-container: #FFD8E4; + --md-sys-color-error: #F2B8B5; + --md-sys-color-on-error: #601410; + --md-sys-color-error-container: #8C1D18; + --md-sys-color-on-error-container: #F9DEDC; -/* 登录页 */ -.login-wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(circle at center, var(--bg-panel) 0%, var(--bg-dark) 100%); } -.login-card { background: var(--bg-card); padding: 2.5rem; border-radius: 16px; width: 340px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 1px solid var(--border); } -.login-card h2 { color: var(--accent); margin-bottom: 1.5rem; font-size: 1.8rem; } -.input-group { margin-bottom: 1rem; text-align: left; } -.input-group label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 4px; } -.input-group input { width: 100%; padding: 12px; background: var(--bg-dark); border: 1px solid var(--border); color: white; border-radius: 8px; font-size: 1rem; } -.input-group input:focus { border-color: var(--accent); outline: none; } -.btn-primary { width: 100%; padding: 12px; background: var(--accent); color: #000; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; margin-top: 10px; } -.btn-primary:hover { background: var(--accent-glow); color: white; } -.err-msg { color: var(--error); font-size: 0.8rem; margin-top: 10px; min-height: 1rem; } + --md-sys-color-surface: #141218; + --md-sys-color-on-surface: #E6E1E5; + --md-sys-color-surface-variant: #49454F; + --md-sys-color-on-surface-variant: #CAC4D0; + --md-sys-color-outline: #938F99; + --md-sys-color-outline-variant: #49454F; -/* 主框架布局 */ -.app-frame { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 60px 1fr; height: 100vh; transition: 0.3s ease; } -.app-frame.collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; } + --md-sys-color-surface-container-lowest: #0F0D13; + --md-sys-color-surface-container-low: #1D1B20; + --md-sys-color-surface-container: #211F26; + --md-sys-color-surface-container-high: #2B2930; + --md-sys-color-surface-container-highest: #36343B; -header.top-bar { grid-column: 1 / -1; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; } -.top-bar .title { font-weight: bold; font-size: 1.1rem; color: var(--accent); } -.top-bar .user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--text-dim); } -.logout-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 4px 10px; border-radius: 4px; cursor: pointer; } -.logout-btn:hover { border-color: var(--error); color: var(--error); } + /* Aliases for quick refactoring */ + --bg: var(--md-sys-color-surface); + --bg-card: var(--md-sys-color-surface-container); + --bg-elevated: var(--md-sys-color-surface-container-high); + --bg-hover: var(--md-sys-color-surface-container-highest); + --text: var(--md-sys-color-on-surface); + --text-dim: var(--md-sys-color-on-surface-variant); + --primary: var(--md-sys-color-primary); + --on-primary: var(--md-sys-color-on-primary); + --primary-container: var(--md-sys-color-primary-container); + --outline: var(--md-sys-color-outline-variant); + --error: var(--md-sys-color-error); -aside.sidebar { background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1rem 0; overflow: hidden; transition: 0.3s; } -.nav-item { display: flex; align-items: center; padding: 12px 16px; color: var(--text-dim); text-decoration: none; cursor: pointer; transition: 0.2s; white-space: nowrap; gap: 12px; margin: 2px 8px; border-radius: 8px; } -.nav-item:hover, .nav-item.active { background: var(--bg-hover); color: var(--accent); } -.nav-item svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } -.toggle-sidebar { margin-top: auto; padding: 12px; text-align: center; cursor: pointer; color: var(--text-dim); border-top: 1px solid var(--border); } -.toggle-sidebar:hover { color: var(--accent); } + /* MD3 Elevation */ + --md-sys-elevation-0: none; + --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); + --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15); + --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.3); + --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.3); + --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.3); -main.content-area { position: relative; overflow: hidden; background: var(--bg-dark); display: flex; flex-direction: column; } -.progress-bar { position: absolute; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; transition: width 0.3s, opacity 0.3s; opacity: 0; z-index: 100; } -.progress-bar.active { opacity: 1; } -.page-container { flex: 1; padding: 1.5rem; overflow-y: auto; } + /* MD3 Shape */ + --shape-xs: 8px; --shape-sm: 12px; --shape-md: 16px; --shape-lg: 24px; --shape-xl: 28px; --shape-full: 9999px; -/* 仪表盘网格 */ -.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } -.stat-card { background: var(--bg-card); border-radius: 12px; padding: 1.2rem; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; } -.stat-card h3 { font-size: 0.85rem; color: var(--text-dim); display: flex; justify-content: space-between; } -.stat-value { font-size: 2rem; font-weight: bold; color: var(--text-main); } -.stat-sub { font-size: 0.8rem; color: var(--text-dim); } -.mini-chart { width: 100%; height: 60px; background: rgba(0,0,0,0.2); border-radius: 6px; margin-top: 8px; } - -/* 终端/日志样式 */ -.terminal { background: #0a0a0f; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 75vh; display: flex; flex-direction: column; } -.term-header { background: var(--bg-card); padding: 8px 12px; font-family: monospace; font-size: 0.8rem; color: var(--text-dim); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; } -.term-body { flex: 1; padding: 10px; overflow-y: auto; font-family: monospace; font-size: 0.85rem; color: #ccc; line-height: 1.5; } -.term-input-area { display: flex; border-top: 1px solid var(--border); } -.term-input { flex: 1; background: var(--bg-panel); border: none; padding: 12px; color: white; font-family: monospace; outline: none; } -.log-entry { margin-bottom: 2px; border-bottom: 1px solid #1a1a24; padding: 2px 0; } -.log-INFO { color: var(--accent); } .log-WARNING { color: var(--warn); } .log-ERROR { color: var(--error); } - -/* 插件列表 */ -.plugin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } -.plugin-card { background: var(--bg-card); padding: 1rem; border-radius: 8px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } -.plugin-info h4 { color: var(--accent); margin-bottom: 4px; } -.plugin-info p { font-size: 0.8rem; color: var(--text-dim); } -.badge { padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: bold; } -.badge-run { background: rgba(158, 206, 106, 0.2); color: var(--success); } -.badge-stop { background: rgba(247, 118, 142, 0.2); color: var(--error); } -.plugin-act { display: flex; gap: 8px; } -.btn-sm { padding: 4px 10px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; cursor: pointer; font-size: 0.75rem; } -.btn-sm:hover { color: var(--accent); border-color: var(--accent); } - -/* 响应式 */ -@media (max-width: 768px) { - .app-frame { grid-template-columns: var(--sidebar-collapsed) 1fr; } - .nav-item span { display: none; } - .toggle-sidebar { display: none; } + /* Layout */ + --sidebar-w: 260px; --sidebar-collapsed: 64px; --topbar-h: 64px; } -/* ========================================= - 仪表盘右侧栏布局扩展 - ========================================= */ -.dash-layout { - display: flex; - gap: 1.5rem; - height: calc(100vh - 140px); /* 减去 Header 和 Padding */ - overflow: hidden; +/* ── Reset ── */ +*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} +body{ + background:var(--bg);color:var(--text); + font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; + font-size:14px;line-height:1.5;height:100vh;overflow:hidden; + -webkit-font-smoothing:antialiased; } -.dash-main { - flex: 1; - overflow-y: auto; - padding-right: 5px; - /* 自定义滚动条 */ - scrollbar-width: thin; - scrollbar-color: var(--border) transparent; +/* ── Typography Scale ── */ +h2{font-size:1.5rem;font-weight:500;letter-spacing:0;color:var(--text)} +h3{font-size:1rem;font-weight:500;letter-spacing:.15px} +.display{font-size:2.25rem;font-weight:400;line-height:1.1} +.headline{font-size:1.75rem;font-weight:400} +.title{font-size:1.25rem;font-weight:500} +.label{font-size:.75rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase} +.mono{font-family:"JetBrains Mono","Fira Code","Cascadia Code",monospace} + +/* ── MD3 Surface Tint ── */ +.surface{background:var(--bg-card);border-radius:var(--shape-md)} +.surface-high{background:var(--bg-elevated);border-radius:var(--shape-md)} +.surface-highest{background:var(--bg-hover);border-radius:var(--shape-md)} + +/* ── MD3 Card ── */ +.card{ + background:var(--bg-card);border-radius:var(--shape-sm); + padding:16px;box-shadow:var(--md-sys-elevation-1); + transition:box-shadow .2s,background .2s; +} +.card:hover{box-shadow:var(--md-sys-elevation-2);background:var(--bg-elevated)} +.card.outlined{box-shadow:none;border:1px solid var(--outline)} +.card.outlined:hover{border-color:var(--primary);box-shadow:none} + +/* ── MD3 Button Variants ── */ +.btn{ + display:inline-flex;align-items:center;justify-content:center;gap:8px; + padding:10px 24px;border:none;border-radius:var(--shape-full);font-size:14px; + font-weight:500;letter-spacing:.1px;cursor:pointer;transition:.2s;text-decoration:none; + line-height:1.25;white-space:nowrap;position:relative;overflow:hidden; +} +.btn-filled{background:var(--primary);color:var(--on-primary)} +.btn-filled:hover{box-shadow:var(--md-sys-elevation-1);filter:brightness(1.08)} +.btn-tonal{background:var(--primary-container);color:var(--md-sys-color-on-primary-container)} +.btn-tonal:hover{filter:brightness(1.1)} +.btn-outlined{border:1px solid var(--outline);background:transparent;color:var(--primary)} +.btn-outlined:hover{border-color:var(--primary);background:rgba(208,188,255,.08)} +.btn-text{background:transparent;color:var(--primary)} +.btn-text:hover{background:rgba(208,188,255,.08)} +.btn-danger{color:var(--error)} +.btn-danger:hover{background:rgba(242,184,181,.08)} +.btn-sm{padding:6px 16px;font-size:12px} +.btn-lg{padding:14px 32px;font-size:16px} +.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--shape-full)} +.btn:disabled{opacity:.38;pointer-events:none} + +/* ── MD3 Input ── */ +.input-group{margin-bottom:16px} +.input-group .label{display:block;margin-bottom:6px;color:var(--text-dim)} +.input{ + width:100%;padding:12px 16px;background:var(--md-sys-color-surface-container-lowest); + border:1px solid var(--outline);border-radius:var(--shape-xs);color:var(--text); + font-size:14px;transition:border-color .2s,box-shadow .2s;outline:none; +} +.input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(208,188,255,.2)} +.input::placeholder{color:var(--text-dim);opacity:.6} + +/* ── MD3 FAB ── */ +.fab{ + width:56px;height:56px;border-radius:var(--shape-md);background:var(--primary-container); + color:var(--md-sys-color-on-primary-container);border:none;cursor:pointer; + display:flex;align-items:center;justify-content:center;box-shadow:var(--md-sys-elevation-3); + position:fixed;bottom:24px;right:24px;font-size:24px;transition:.2s;z-index:100; +} +.fab:hover{box-shadow:var(--md-sys-elevation-4);filter:brightness(1.1)} + +/* ── MD3 Chip ── */ +.chip{ + display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--shape-xs); + border:1px solid var(--outline);font-size:12px;color:var(--text-dim);gap:6px; + background:transparent;transition:.2s; +} +.chip.active{background:var(--primary-container);color:var(--md-sys-color-on-primary-container);border-color:transparent} + +/* ── Login Page ── */ +.login-wrapper{ + display:flex;align-items:center;justify-content:center;height:100vh; + background:radial-gradient(circle at 50% 0%,var(--md-sys-color-primary-container) 0%,var(--bg) 70%); +} +.login-card{ + background:var(--md-sys-color-surface-container-high);border-radius:var(--shape-xl); + padding:40px 32px;width:360px;text-align:center;box-shadow:var(--md-sys-elevation-4); +} +.login-card h2{color:var(--primary);margin-bottom:24px} +.err-msg{color:var(--error);font-size:.8rem;margin-top:12px;min-height:1.2rem} + +/* ── App Shell ── */ +.app-frame{ + display:grid;grid-template-columns:var(--sidebar-w) 1fr; + grid-template-rows:var(--topbar-h) 1fr;height:100vh;transition:grid-template-columns .3s cubic-bezier(.4,0,.2,1); +} +.app-frame.collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr} + +/* ── Top Bar ── */ +.top-bar{ + grid-column:1/-1;display:flex;align-items:center;justify-content:space-between; + padding:0 24px;background:var(--md-sys-color-surface-container);z-index:10; + border-bottom:1px solid var(--outline); +} +.top-bar .title{font-size:1.15rem;font-weight:500;color:var(--primary);display:flex;align-items:center;gap:8px} +.top-bar .user-info{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:.85rem} +.top-bar .logout-btn{background:transparent;border:1px solid var(--outline);color:var(--text-dim);padding:6px 14px;border-radius:var(--shape-full);cursor:pointer;transition:.2s} +.top-bar .logout-btn:hover{border-color:var(--error);color:var(--error)} + +/* ── Navigation Rail / Sidebar ── */ +.sidebar{ + background:var(--md-sys-color-surface-container-low);display:flex;flex-direction:column; + padding:8px 0;overflow:hidden;transition:.3s;gap:2px; +} +.nav-item{ + display:flex;align-items:center;padding:14px 16px;color:var(--text-dim); + text-decoration:none;cursor:pointer;transition:.15s;white-space:nowrap; + gap:12px;margin:0 8px;border-radius:var(--shape-full);font-weight:500;font-size:14px; + position:relative; +} +.nav-item:hover{background:rgba(208,188,255,.08);color:var(--text)} +.nav-item.active{background:var(--primary-container);color:var(--md-sys-color-on-primary-container)} +.nav-item .nav-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center} +.nav-item .nav-label{overflow:hidden;text-overflow:ellipsis} +.toggle-sidebar{ + margin-top:auto;padding:16px;text-align:center;cursor:pointer; + color:var(--text-dim);border-top:1px solid var(--outline); + transition:.2s;font-size:12px; +} +.toggle-sidebar:hover{color:var(--primary)} + +/* ── Main Content ── */ +.content-area{overflow:hidden;display:flex;flex-direction:column;background:var(--bg)} +.progress-bar{ + position:absolute;top:0;left:0;height:3px;background:var(--primary); + width:0;transition:width .3s,opacity .3s;opacity:0;z-index:100;border-radius:0 2px 2px 0; +} +.progress-bar.active{opacity:1} +.page-container{flex:1;padding:24px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent} + +/* ── Dashboard ── */ +.dash-layout{display:flex;gap:24px;height:calc(100vh - var(--topbar-h) - 48px);overflow:hidden} +.dash-main{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent} +.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} +.stat-card{background:var(--bg-card);border-radius:var(--shape-sm);padding:20px;box-shadow:var(--md-sys-elevation-1);display:flex;flex-direction:column;gap:8px;transition:.2s} +.stat-card:hover{box-shadow:var(--md-sys-elevation-2)} +.stat-card h3{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-weight:500} +.stat-value{font-size:2rem;font-weight:400;color:var(--text)} +.stat-sub{font-size:.75rem;color:var(--text-dim)} +.mini-chart{width:100%;height:64px;background:rgba(208,188,255,.05);border-radius:var(--shape-xs);margin-top:8px} +.dash-sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto} +.side-card{background:var(--bg-card);border-radius:var(--shape-sm);padding:20px;box-shadow:var(--md-sys-elevation-1)} +.side-card h3{font-size:.85rem;color:var(--primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--outline)} +.info-row{display:flex;justify-content:space-between;font-size:.82rem;padding:6px 0;color:var(--text-dim)} +.info-value{color:var(--text);font-family:monospace;font-weight:500;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + +/* ── Terminal / Log ── */ +.terminal{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--shape-sm);overflow:hidden;height:75vh;display:flex;flex-direction:column;box-shadow:var(--md-sys-elevation-1)} +.term-header{background:var(--bg-card);padding:8px 16px;font-size:.8rem;color:var(--text-dim);display:flex;justify-content:space-between;align-items:center} +.term-body{flex:1;padding:12px;overflow-y:auto;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:#ccc;line-height:1.6;scrollbar-width:thin} +.term-input-area{display:flex;border-top:1px solid var(--outline)} +.term-input{flex:1;background:transparent;border:none;padding:12px 16px;color:var(--text);font-family:monospace;outline:none;font-size:.85rem} + +/* ── Log entries ── */ +.log-entry{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.8rem} +.log-INFO{color:var(--primary)}.log-WARNING{color:#E0AF68}.log-ERROR{color:var(--error)} + +/* ── Plugin Cards ── */ +.plugin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} +.plugin-card{background:var(--bg-card);border-radius:var(--shape-sm);padding:20px;box-shadow:var(--md-sys-elevation-1);display:flex;justify-content:space-between;align-items:center;transition:.2s} +.plugin-card:hover{box-shadow:var(--md-sys-elevation-2)} +.plugin-info h4{color:var(--primary);font-weight:500;margin-bottom:4px} +.plugin-info p{font-size:.8rem;color:var(--text-dim)} +.badge{padding:4px 12px;border-radius:var(--shape-full);font-size:.7rem;font-weight:600;letter-spacing:.3px} +.badge-run{background:rgba(158,206,106,.15);color:#9ece6a} +.badge-stop{background:rgba(242,184,181,.15);color:var(--error)} +.plugin-act{display:flex;gap:8px} + +/* ── Project / Proxy page cards (shared) ── */ +.mgmt-card{background:var(--bg-card);border-radius:var(--shape-sm);padding:16px;box-shadow:var(--md-sys-elevation-1);margin-bottom:12px;display:flex;align-items:center;gap:16px;transition:.2s} +.mgmt-card:hover{box-shadow:var(--md-sys-elevation-2)} +.mgmt-card .info{flex:1} +.mgmt-card .info b{color:var(--primary);font-weight:500} +.mgmt-card .info small{color:var(--text-dim);font-size:.8rem} +.mgmt-card .actions{display:flex;gap:8px;flex-shrink:0} +.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} +.status-running{background:#9ece6a;box-shadow:0 0 8px rgba(158,206,106,.4)} +.status-stopped{background:var(--error);box-shadow:0 0 8px rgba(242,184,181,.4)} +.status-error{background:#E0AF68;box-shadow:0 0 8px rgba(224,175,104,.4)} +.log-box{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--shape-xs);padding:8px 12px;max-height:300px;overflow-y:auto;font-family:monospace;font-size:11px;color:#0f0;margin-top:8px;display:none} + +/* ── Tabs ── */ +.tabs{display:flex;gap:0;margin-bottom:20px;background:var(--bg-card);border-radius:var(--shape-full);padding:4px;width:fit-content} +.tab{padding:8px 20px;border-radius:var(--shape-full);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-dim);transition:.2s} +.tab.active{background:var(--primary-container);color:var(--md-sys-color-on-primary-container)} +.tab:hover:not(.active){color:var(--text)} + +/* ── Responsive ── */ +@media(max-width:1100px){.dash-layout{flex-direction:column;height:auto;overflow:visible}.dash-sidebar{width:100%}} +@media(max-width:768px){.app-frame{grid-template-columns:var(--sidebar-collapsed) 1fr}.nav-label{display:none}.toggle-sidebar{display:none}} + +/* ═══════════════════════════════════════════ + MD3 Light Theme + ═══════════════════════════════════════════ */ +[data-theme="light"] { + --md-sys-color-primary: #6750A4; + --md-sys-color-on-primary: #FFFFFF; + --md-sys-color-primary-container: #EADDFF; + --md-sys-color-on-primary-container: #21005D; + + --md-sys-color-secondary: #625B71; + --md-sys-color-on-secondary: #FFFFFF; + --md-sys-color-secondary-container: #E8DEF8; + --md-sys-color-on-secondary-container: #1D192B; + + --md-sys-color-tertiary: #7D5260; + --md-sys-color-on-tertiary: #FFFFFF; + --md-sys-color-tertiary-container: #FFD8E4; + --md-sys-color-on-tertiary-container: #31111D; + + --md-sys-color-error: #B3261E; + --md-sys-color-on-error: #FFFFFF; + --md-sys-color-error-container: #F9DEDC; + --md-sys-color-on-error-container: #410E0B; + + --md-sys-color-surface: #FFFBFE; + --md-sys-color-on-surface: #1C1B1F; + --md-sys-color-surface-variant: #E7E0EC; + --md-sys-color-on-surface-variant: #49454F; + --md-sys-color-outline: #79747E; + --md-sys-color-outline-variant: #CAC4D0; + + --md-sys-color-surface-container-lowest: #FFFFFF; + --md-sys-color-surface-container-low: #F7F2FA; + --md-sys-color-surface-container: #F3EDF7; + --md-sys-color-surface-container-high: #ECE6F0; + --md-sys-color-surface-container-highest: #E6E0E9; + + --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.05), 0 1px 3px 1px rgba(0,0,0,.08); + --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.08), 0 2px 6px 2px rgba(0,0,0,.06); + --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.06), 0 1px 3px 0 rgba(0,0,0,.08); + --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.05), 0 2px 3px 0 rgba(0,0,0,.08); + --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.04), 0 4px 4px 0 rgba(0,0,0,.08); + + --bg: var(--md-sys-color-surface); + --bg-card: var(--md-sys-color-surface-container); + --bg-elevated: var(--md-sys-color-surface-container-high); + --bg-hover: var(--md-sys-color-surface-container-highest); + --text: var(--md-sys-color-on-surface); + --text-dim: var(--md-sys-color-on-surface-variant); + --primary: var(--md-sys-color-primary); + --on-primary: var(--md-sys-color-on-primary); + --primary-container: var(--md-sys-color-primary-container); + --outline: var(--md-sys-color-outline-variant); + --error: var(--md-sys-color-error); } -/* 右侧固定侧边栏 */ -.dash-sidebar { - width: 320px; - flex-shrink: 0; - display: flex; - flex-direction: column; - gap: 1rem; - overflow-y: auto; - padding-right: 5px; -} - -/* 侧边卡片样式 */ -.side-card { - background: var(--bg-card); - border-radius: 12px; - padding: 1.2rem; - border: 1px solid var(--border); - display: flex; - flex-direction: column; - gap: 0.8rem; - transition: 0.3s; -} -.side-card:hover { border-color: var(--accent); } - -.side-card h3 { - font-size: 0.9rem; - color: var(--accent); - margin: 0; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border); - display: flex; - align-items: center; - gap: 6px; -} - -.info-row { - display: flex; - justify-content: space-between; - font-size: 0.85rem; - padding: 4px 0; - color: var(--text-dim); -} - -.info-value { - color: var(--text-main); - font-family: 'Consolas', monospace; - font-weight: 600; - text-align: right; - max-width: 60%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* 响应式适配：平板/手机自动切换为上下布局 */ -@media (max-width: 1100px) { - .dash-layout { flex-direction: column; height: auto; overflow: visible; } - .dash-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; } - .side-card { flex: 1; min-width: 280px; } +/* ── Theme Toggle Button ── */ +.theme-toggle{ + display:flex;align-items:center;justify-content:center; + width:40px;height:40px;border-radius:var(--shape-full); + background:transparent;border:none;color:var(--text-dim);cursor:pointer; + font-size:20px;transition:.2s; } +.theme-toggle:hover{background:rgba(208,188,255,.08)} diff --git a/static/web_panel/home.html b/static/web_panel/home.html index b6538a1..e020abd 100644 --- a/static/web_panel/home.html +++ b/static/web_panel/home.html @@ -12,6 +12,7 @@
🐱 SenSu Alpha
Loading... +
@@ -49,3 +50,18 @@ + +