Hermes Agent
4a1d949e41
完整 Web 管理平台,涵盖: P0 生产加固: - 会话超时(空闲+绝对) + CSRF 防护 + 登录失败限流 - HTTPS/TLS 证书管理(自签生成/上传/删除/过期提醒) - SSL Bump (HTTPS 透明代理) 可视化配置 - 配置文件 diff 预览 + 二次确认才写入 - 服务控制二次确认 + 操作期间按钮锁定 P1 运维能力: - 日志轮转管理(logrotate) + 日志状态监控 - 告警规则(5xx/命中率/磁盘/客户端流量) - 多 Squid 实例管理 + 一键切换 - squidclient mgr 实时性能指标 - 流量异常检测(突增/大文件/高频小包/新客户端) P2 日志分析增强: - 日志持久化到 SQLite + 历史时间范围查询 - 导出 CSV/JSON(日志/KPI/异常/审计) - GeoIP 地图(Leaflet + ip-api.com 离线可选 GeoLite2) - 每客户端 24h 趋势图 - 自定义 Squid logformat 解析器 P3 体验锦上添花: - 暗/亮主题切换(cookie 持久化) - WebSSH 终端(xterm.js + paramiko) - 完整审计日志 + 用户管理 技术栈: Flask 3.0 + SQLAlchemy 2.0 + SQLite + Chart.js + Leaflet 总代码量: ~16500 行 (15 Python 模块 + 34 模板 + CSS) 路由数: 73
1035 lines
29 KiB
CSS
1035 lines
29 KiB
CSS
/* Squid Web Manager - Stylesheet
|
|
Dark theme, modern admin layout
|
|
*/
|
|
:root {
|
|
--bg: #0f172a;
|
|
--bg-elevated: #1e293b;
|
|
--bg-card: #1e293b;
|
|
--bg-card-hover: #243044;
|
|
--border: #334155;
|
|
--border-light: #475569;
|
|
--text: #e2e8f0;
|
|
--text-muted: #94a3b8;
|
|
--text-dim: #64748b;
|
|
--accent: #3b82f6;
|
|
--accent-hover: #2563eb;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
--purple: #8b5cf6;
|
|
--cyan: #06b6d4;
|
|
--pink: #ec4899;
|
|
--orange: #f97316;
|
|
--yellow: #eab308;
|
|
--sidebar-w: 240px;
|
|
--radius: 8px;
|
|
--radius-sm: 4px;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
|
|
Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
code, .monospace {
|
|
font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas,
|
|
"Liberation Mono", Menlo, monospace;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
/* ---- Sidebar ---- */
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0; top: 0;
|
|
width: var(--sidebar-w);
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, #0b1224 0%, #0f172a 100%);
|
|
border-right: 1px solid var(--border);
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
}
|
|
.sidebar .brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 20px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.brand-logo {
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
}
|
|
.brand-name {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: var(--text);
|
|
}
|
|
.sidebar nav {
|
|
padding: 8px 0;
|
|
}
|
|
.sidebar nav a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 9px 20px;
|
|
color: var(--text-muted);
|
|
font-size: 13.5px;
|
|
transition: all 0.15s;
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.sidebar nav a:hover {
|
|
background: rgba(59, 130, 246, 0.08);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.sidebar nav a.active {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: var(--accent);
|
|
border-left-color: var(--accent);
|
|
}
|
|
.sidebar nav a .nav-section-title,
|
|
.sidebar nav .nav-section {
|
|
padding: 16px 20px 6px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-dim);
|
|
font-weight: 600;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.sidebar nav .nav-section { display: block; }
|
|
.sidebar nav a.nav-danger:hover { color: var(--danger); }
|
|
|
|
/* ---- Content ---- */
|
|
.content {
|
|
margin-left: var(--sidebar-w);
|
|
padding: 24px 28px;
|
|
min-height: 100vh;
|
|
}
|
|
.content-full {
|
|
margin-left: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.page-header h1, .page-header h2 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
.page-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ---- Cards ---- */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 18px 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.card-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 14px;
|
|
color: var(--text);
|
|
}
|
|
.card-desc {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.card-empty {
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.meta-text {
|
|
color: var(--text-muted);
|
|
font-size: 12.5px;
|
|
}
|
|
.hint {
|
|
color: var(--text-dim);
|
|
font-size: 11px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* ---- KPI Cards ---- */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.kpi-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 16px;
|
|
border-left: 4px solid var(--accent);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.kpi-card.kpi-blue { border-left-color: var(--accent); }
|
|
.kpi-card.kpi-green { border-left-color: var(--success); }
|
|
.kpi-card.kpi-purple { border-left-color: var(--purple); }
|
|
.kpi-card.kpi-orange { border-left-color: var(--orange); }
|
|
.kpi-card.kpi-red { border-left-color: var(--danger); }
|
|
.kpi-card.kpi-yellow { border-left-color: var(--yellow); }
|
|
.kpi-card.kpi-cyan { border-left-color: var(--cyan); }
|
|
.kpi-card.kpi-pink { border-left-color: var(--pink); }
|
|
.kpi-label {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 6px;
|
|
}
|
|
.kpi-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
margin-bottom: 6px;
|
|
}
|
|
.kpi-meta {
|
|
color: var(--text-dim);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
/* ---- Grids ---- */
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
margin-bottom: 18px;
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.grid-2 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ---- Forms ---- */
|
|
.form-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 8px 11px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
font-size: 13.5px;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
}
|
|
textarea.form-input {
|
|
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
textarea.raw-editor {
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
select.form-input {
|
|
cursor: pointer;
|
|
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
|
|
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
|
|
background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
|
|
background-size: 5px 5px, 5px 5px;
|
|
background-repeat: no-repeat;
|
|
padding-right: 28px;
|
|
appearance: none;
|
|
}
|
|
.filter-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
.filter-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.range-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.range-input span { color: var(--text-dim); }
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.form-narrow {
|
|
max-width: 460px;
|
|
}
|
|
|
|
/* ---- Buttons ---- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
background: var(--bg-elevated);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
}
|
|
.btn:hover {
|
|
background: var(--bg-card-hover);
|
|
border-color: var(--border-light);
|
|
text-decoration: none;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
}
|
|
.btn-secondary { background: var(--bg-elevated); }
|
|
.btn-danger {
|
|
background: var(--danger);
|
|
border-color: var(--danger);
|
|
color: white;
|
|
}
|
|
.btn-danger:hover { background: #dc2626; }
|
|
.btn-warning {
|
|
background: var(--warning);
|
|
border-color: var(--warning);
|
|
color: #1f1300;
|
|
}
|
|
.btn-warning:hover { background: #d97706; }
|
|
.btn-small {
|
|
padding: 5px 11px;
|
|
font-size: 12px;
|
|
}
|
|
.btn-tiny {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
}
|
|
.btn-block {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
.btn-group-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: 200px;
|
|
}
|
|
.btn-group-vertical .btn { justify-content: center; }
|
|
|
|
/* ---- Tables ---- */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: top;
|
|
}
|
|
.data-table th {
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
background: rgba(0,0,0,0.15);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.data-table tbody tr:hover {
|
|
background: rgba(59, 130, 246, 0.05);
|
|
}
|
|
.data-table.small th,
|
|
.data-table.small td { padding: 6px 8px; font-size: 12px; }
|
|
.data-table .empty-row {
|
|
text-align: center;
|
|
padding: 30px 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
max-height: 700px;
|
|
overflow-y: auto;
|
|
}
|
|
.log-table {
|
|
font-size: 12px;
|
|
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
|
|
}
|
|
.log-table th,
|
|
.log-table td {
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
}
|
|
.time-cell { white-space: nowrap; color: var(--text-muted); }
|
|
.url-cell {
|
|
max-width: 320px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.url-cell a { color: var(--text); }
|
|
.url-cell a:hover { color: var(--accent); }
|
|
.detail-cell {
|
|
word-break: break-all;
|
|
color: var(--text-muted);
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ---- Badges ---- */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
font-family: monospace;
|
|
white-space: nowrap;
|
|
}
|
|
.badge-green { background: rgba(16, 185, 129, 0.18); color: #34d399; }
|
|
.badge-blue { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
|
|
.badge-red { background: rgba(239, 68, 68, 0.18); color: #f87171; }
|
|
.badge-orange { background: rgba(249, 115, 22, 0.18); color: #fb923c; }
|
|
.badge-yellow { background: rgba(234, 179, 8, 0.18); color: #facc15; }
|
|
.badge-purple { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
|
|
.badge-cyan { background: rgba(6, 182, 212, 0.18); color: #22d3ee; }
|
|
.badge-pink { background: rgba(236, 72, 153, 0.18); color: #f472b6; }
|
|
.badge-gray { background: rgba(100, 116, 139, 0.18); color: #94a3b8; }
|
|
|
|
/* ---- Flash messages ---- */
|
|
.flash-container {
|
|
margin-bottom: 18px;
|
|
}
|
|
.flash {
|
|
padding: 10px 14px;
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 8px;
|
|
border-left: 3px solid;
|
|
font-size: 13px;
|
|
}
|
|
.flash-ok { background: rgba(16, 185, 129, 0.12); border-color: var(--success); color: #34d399; }
|
|
.flash-error { background: rgba(239, 68, 68, 0.12); border-color: var(--danger); color: #f87171; }
|
|
.flash-warning { background: rgba(245, 158, 11, 0.12); border-color: var(--warning); color: #fbbf24; }
|
|
.flash-info { background: rgba(59, 130, 246, 0.12); border-color: var(--accent); color: #60a5fa; }
|
|
|
|
/* ---- Charts ---- */
|
|
.chart-card {
|
|
padding-bottom: 12px;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 240px;
|
|
width: 100%;
|
|
}
|
|
.chart-container canvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-height: 280px !important;
|
|
}
|
|
.legend-details {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
.legend-details summary {
|
|
cursor: pointer;
|
|
color: var(--accent);
|
|
}
|
|
.legend-table {
|
|
font-size: 11.5px;
|
|
margin-top: 8px;
|
|
}
|
|
.legend-table th, .legend-table td {
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* ---- Pagination ---- */
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
.page-info {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ---- Login ---- */
|
|
.login-wrap {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
|
padding: 20px;
|
|
}
|
|
.login-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 40px 32px;
|
|
width: 100%;
|
|
max-width: 380px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
}
|
|
.login-logo {
|
|
font-size: 56px;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.login-card h1 {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.login-sub {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.login-card .form-group { margin-bottom: 16px; }
|
|
.login-hint {
|
|
text-align: center;
|
|
color: var(--text-dim);
|
|
font-size: 11.5px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* ---- Service result ---- */
|
|
.svc-result {
|
|
margin-top: 14px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-sm);
|
|
border-left: 3px solid;
|
|
font-size: 13px;
|
|
}
|
|
.svc-loading { background: rgba(59, 130, 246, 0.1); border-color: var(--accent); color: #60a5fa; }
|
|
.svc-ok { background: rgba(16, 185, 129, 0.1); border-color: var(--success); color: #34d399; }
|
|
.svc-err { background: rgba(239, 68, 68, 0.1); border-color: var(--danger); color: #f87171; }
|
|
.svc-result pre {
|
|
margin-top: 6px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* ---- Config sections ---- */
|
|
.config-section {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.config-section:last-of-type { border-bottom: none; }
|
|
.config-section-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 6px;
|
|
color: var(--text);
|
|
}
|
|
.inline-form .filter-grid {
|
|
margin-bottom: 12px;
|
|
}
|
|
.checkbox-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
.checkbox-label input { cursor: pointer; }
|
|
|
|
/* ---- Responsive ---- */
|
|
@media (max-width: 768px) {
|
|
:root { --sidebar-w: 0; }
|
|
.sidebar { transform: translateX(-100%); }
|
|
.sidebar.open { transform: translateX(0); width: 240px; }
|
|
.content { padding: 16px; }
|
|
.kpi-grid { grid-template-columns: 1fr 1fr; }
|
|
.filter-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ---- Scrollbar ---- */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
|
|
|
|
|
|
/* ---- P0-1: Session idle warning ---- */
|
|
.session-warn {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--orange, #f59e0b);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
|
|
animation: session-warn-in 0.3s ease-out;
|
|
}
|
|
.session-warn-inner {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
}
|
|
.session-warn button { white-space: nowrap; }
|
|
@keyframes session-warn-in {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
/* ---- P0-1: Login throttle banner ---- */
|
|
.login-throttle {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 1px solid var(--orange, #f59e0b);
|
|
color: var(--orange, #f59e0b);
|
|
padding: 10px 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
.login-throttle strong { color: #fbbf24; }
|
|
|
|
/* ---- P0-4: Diff preview ---- */
|
|
.diff-container {
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: var(--font-mono, monospace);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.diff-line { padding: 2px 8px; white-space: pre-wrap; word-break: break-all; }
|
|
.diff-add { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
|
|
.diff-del { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
|
|
.diff-ctx { color: var(--text-muted); }
|
|
.diff-hunk { background: rgba(59, 130, 246, 0.1); color: #93c5fd; font-weight: bold; padding: 4px 8px; }
|
|
.diff-summary {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 12px;
|
|
background: var(--bg-card);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
}
|
|
.diff-stat-add { color: #6ee7b7; }
|
|
.diff-stat-del { color: #fca5a5; }
|
|
|
|
/* ---- P0-5: Service action lock ---- */
|
|
.svc-locked {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
.svc-locked::after {
|
|
content: '🔒 操作已锁定,请等待...';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--bg-card);
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ---- P3-1: Theme toggle ---- */
|
|
.theme-toggle {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.theme-toggle:hover { color: var(--text); border-color: var(--border-light); }
|
|
|
|
/* Light theme overrides */
|
|
body.theme-light {
|
|
--bg: #f1f5f9;
|
|
--bg-card: #ffffff;
|
|
--bg-card-hover: #f8fafc;
|
|
--border: #e2e8f0;
|
|
--border-light: #cbd5e1;
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--sidebar-bg: #ffffff;
|
|
}
|
|
body.theme-light { background: var(--bg); color: var(--text); }
|
|
body.theme-light .sidebar { background: var(--sidebar-bg); }
|
|
body.theme-light .card { background: var(--bg-card); }
|
|
body.theme-light .kpi-card { background: var(--bg-card); }
|
|
body.theme-light input.form-input, body.theme-light textarea.form-input, body.theme-light select.form-input {
|
|
background: #ffffff; color: var(--text); border-color: var(--border);
|
|
}
|
|
body.theme-light .data-table { background: var(--bg-card); }
|
|
body.theme-light .data-table th { background: #f1f5f9; color: var(--text); }
|
|
body.theme-light .data-table tr:hover { background: #f8fafc; }
|
|
body.theme-light .log-table tr:hover { background: #fef3c7; }
|
|
body.theme-light pre { background: #f8fafc; color: var(--text); }
|
|
|
|
/* ---- P1-4: Performance page cards ---- */
|
|
.metric-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.metric-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.metric-value { font-size: 24px; font-weight: 700; color: var(--text); }
|
|
.metric-sub { color: var(--text-muted); font-size: 11px; }
|
|
|
|
/* ---- P2-3: GeoIP map ---- */
|
|
.geo-map { width: 100%; height: 400px; background: var(--bg-card); border-radius: 8px; }
|
|
|
|
/* ---- P3-2: User management table ---- */
|
|
.user-actions { display: flex; gap: 4px; }
|
|
.role-admin { color: #f59e0b; }
|
|
.role-viewer { color: #6ee7b7; }
|
|
|
|
/* ---- P0-5: Service control confirm modal ---- */
|
|
.modal { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; }
|
|
.modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; max-width: 420px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
|
|
.modal-card h3 { margin-top: 0; }
|
|
.modal-card code { background: var(--bg); padding: 2px 8px; border-radius: 4px; font-weight: bold; }
|
|
.modal-card .form-actions { margin-top: 16px; display: flex; gap: 8px; }
|
|
|
|
/* ---- P1-3: Instance switcher (sidebar) ---- */
|
|
.instance-switcher {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: rgba(59, 130, 246, 0.04);
|
|
}
|
|
.instance-switcher-label {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 6px;
|
|
}
|
|
.instance-switcher-select {
|
|
width: 100%;
|
|
background: var(--bg-elevated);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 5px 8px;
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.instance-switcher-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
.instance-switcher-quick {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
.instance-switcher-quick .btn-tiny {
|
|
color: var(--text-muted);
|
|
}
|
|
.instance-switcher-empty {
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ---- P3-1: brand actions (theme toggle row in sidebar header) ---- */
|
|
.brand-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* =======================================================================
|
|
P3-1: Light theme overrides (expanded)
|
|
-----------------------------------------------------------------------
|
|
The base :root variables describe the dark palette. body.theme-light
|
|
redefines them so every consumer that uses var(--bg) etc. automatically
|
|
flips. Below, we additionally override the surfaces that hard-code
|
|
semi-transparent dark-on-dark colours, plus the brand/sidebar/login
|
|
gradients that won't respond to variable overrides.
|
|
======================================================================= */
|
|
|
|
body.theme-light {
|
|
/* core palette overrides (Bootstrap 5 / GitHub-ish) */
|
|
--bg: #f1f5f9;
|
|
--bg-elevated: #ffffff;
|
|
--bg-card: #ffffff;
|
|
--bg-card-hover: #f8fafc;
|
|
--border: #e2e8f0;
|
|
--border-light: #cbd5e1;
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--text-dim: #94a3b8;
|
|
--accent: #2563eb;
|
|
--accent-hover: #1d4ed8;
|
|
--success: #059669;
|
|
--warning: #d97706;
|
|
--danger: #dc2626;
|
|
--purple: #7c3aed;
|
|
--cyan: #0891b2;
|
|
--pink: #db2777;
|
|
--orange: #ea580c;
|
|
--yellow: #ca8a04;
|
|
--sidebar-bg: #ffffff;
|
|
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* sidebar uses a hard-coded gradient — replace it cleanly in light mode */
|
|
body.theme-light .sidebar {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-right-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
body.theme-light .brand-name { color: var(--text); }
|
|
body.theme-light .sidebar nav a { color: var(--text-muted); }
|
|
body.theme-light .sidebar nav a:hover {
|
|
background: rgba(37, 99, 235, 0.06);
|
|
color: var(--text);
|
|
}
|
|
body.theme-light .sidebar nav a.active {
|
|
background: rgba(37, 99, 235, 0.12);
|
|
color: var(--accent);
|
|
border-left-color: var(--accent);
|
|
}
|
|
body.theme-light .sidebar nav .nav-section { color: var(--text-dim); }
|
|
body.theme-light .sidebar nav a.nav-danger:hover { color: var(--danger); }
|
|
|
|
/* cards + tables + forms */
|
|
body.theme-light .card,
|
|
body.theme-light .kpi-card,
|
|
body.theme-light .metric-card {
|
|
background: var(--bg-card);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
body.theme-light .card-title,
|
|
body.theme-light .kpi-value,
|
|
body.theme-light .metric-value { color: var(--text); }
|
|
body.theme-light .card-desc,
|
|
body.theme-light .kpi-label,
|
|
body.theme-light .kpi-meta,
|
|
body.theme-light .metric-label,
|
|
body.theme-light .metric-sub,
|
|
body.theme-light .meta-text { color: var(--text-muted); }
|
|
|
|
body.theme-light .data-table { background: var(--bg-card); color: var(--text); }
|
|
body.theme-light .data-table th { background: #f1f5f9; color: var(--text); }
|
|
body.theme-light .data-table tr:hover { background: #f8fafc; }
|
|
body.theme-light .log-table tr:hover { background: #fef3c7; }
|
|
body.theme-light .data-table tbody tr:hover { background: rgba(37, 99, 235, 0.05); }
|
|
body.theme-light .legend-table th,
|
|
body.theme-light .legend-table td { border-bottom-color: var(--border); }
|
|
|
|
body.theme-light input.form-input,
|
|
body.theme-light textarea.form-input,
|
|
body.theme-light select.form-input {
|
|
background: #ffffff;
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
body.theme-light input.form-input:focus,
|
|
body.theme-light textarea.form-input:focus,
|
|
body.theme-light select.form-input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
|
}
|
|
body.theme-light .form-group label { color: var(--text-muted); }
|
|
|
|
/* buttons — keep primary coloured but lift secondary surface */
|
|
body.theme-light .btn { background: var(--bg-elevated); color: var(--text); border-color: var(--border); }
|
|
body.theme-light .btn:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
|
|
body.theme-light .btn-secondary { background: var(--bg-elevated); }
|
|
body.theme-light .btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
|
|
body.theme-light .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
|
body.theme-light .btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
|
|
body.theme-light .btn-warning { background: var(--warning); border-color: var(--warning); color: #1f1300; }
|
|
|
|
/* code blocks / diffs */
|
|
body.theme-light pre,
|
|
body.theme-light code { background: #f1f5f9; color: #0f172a; }
|
|
body.theme-light pre { background: #f8fafc; color: var(--text); border: 1px solid var(--border); }
|
|
body.theme-light .diff-container { background: var(--bg-card); border-color: var(--border); }
|
|
body.theme-light .diff-add { background: rgba(16, 185, 129, 0.18); color: #047857; }
|
|
body.theme-light .diff-del { background: rgba(239, 68, 68, 0.18); color: #b91c1c; }
|
|
body.theme-light .diff-hunk { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; }
|
|
body.theme-light .diff-stat-add { color: #047857; }
|
|
body.theme-light .diff-stat-del { color: #b91c1c; }
|
|
|
|
/* modals + session warning */
|
|
body.theme-light .modal { background: rgba(15, 23, 42, 0.45); }
|
|
body.theme-light .modal-card {
|
|
background: var(--bg-card);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
|
|
}
|
|
body.theme-light .modal-card code { background: #f1f5f9; }
|
|
body.theme-light .session-warn {
|
|
background: var(--bg-card);
|
|
border-color: var(--warning);
|
|
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* login page gradient + card */
|
|
body.theme-light .login-wrap {
|
|
background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
|
|
}
|
|
body.theme-light .login-card {
|
|
background: var(--bg-card);
|
|
border-color: var(--border);
|
|
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
|
|
color: var(--text);
|
|
}
|
|
body.theme-light .login-sub { color: var(--text-muted); }
|
|
body.theme-light .login-hint { color: var(--text-dim); }
|
|
|
|
/* instance switcher in sidebar */
|
|
body.theme-light .instance-switcher {
|
|
background: rgba(37, 99, 235, 0.04);
|
|
border-bottom-color: var(--border);
|
|
}
|
|
body.theme-light .instance-switcher-select {
|
|
background: #ffffff;
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
body.theme-light .instance-switcher-select:focus { border-color: var(--accent); }
|
|
body.theme-light .instance-switcher-empty { color: var(--text-dim); }
|
|
|
|
/* theme toggle button */
|
|
body.theme-light .theme-toggle {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
body.theme-light .theme-toggle:hover {
|
|
color: var(--text);
|
|
border-color: var(--border-light);
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
/* flash messages — keep semantic colours but tone down alpha for light bg */
|
|
body.theme-light .flash-ok { background: rgba(5, 150, 105, 0.10); color: #047857; border-color: var(--success); }
|
|
body.theme-light .flash-error { background: rgba(220, 38, 38, 0.10); color: #b91c1c; border-color: var(--danger); }
|
|
body.theme-light .flash-warning { background: rgba(217, 119, 6, 0.12); color: #b45309; border-color: var(--warning); }
|
|
body.theme-light .flash-info { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; border-color: var(--accent); }
|
|
|
|
/* badges — keep saturated foregrounds; only soften the alpha background */
|
|
body.theme-light .badge-green { background: rgba(5, 150, 105, 0.14); color: #047857; }
|
|
body.theme-light .badge-blue { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
|
|
body.theme-light .badge-red { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
|
|
body.theme-light .badge-orange { background: rgba(234, 88, 12, 0.14); color: #c2410c; }
|
|
body.theme-light .badge-yellow { background: rgba(202, 138, 4, 0.18); color: #a16207; }
|
|
body.theme-light .badge-purple { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
|
|
body.theme-light .badge-cyan { background: rgba(8, 145, 178, 0.14); color: #0e7490; }
|
|
body.theme-light .badge-pink { background: rgba(219, 39, 119, 0.14); color: #be185d; }
|
|
body.theme-light .badge-gray { background: rgba(100, 116, 139, 0.16); color: #475569; }
|
|
|
|
/* service result banners */
|
|
body.theme-light .svc-loading { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; border-color: var(--accent); }
|
|
body.theme-light .svc-ok { background: rgba(5, 150, 105, 0.10); color: #047857; border-color: var(--success); }
|
|
body.theme-light .svc-err { background: rgba(220, 38, 38, 0.10); color: #b91c1c; border-color: var(--danger); }
|
|
|
|
/* scrollbar — slightly darker on light bg so it's still visible */
|
|
body.theme-light ::-webkit-scrollbar-track { background: #e2e8f0; }
|
|
body.theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
|
|
body.theme-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
|
|
/* geoip map container */
|
|
body.theme-light .geo-map { background: var(--bg-card); border: 1px solid var(--border); }
|
|
|
|
/* href / link colour */
|
|
body.theme-light a { color: var(--accent); }
|
|
body.theme-light a:hover { color: var(--accent-hover); }
|
|
|
|
/* config-section divider */
|
|
body.theme-light .config-section { border-bottom-color: var(--border); }
|