263 lines
8.5 KiB
CSS
263 lines
8.5 KiB
CSS
:root {
|
|
--bg: #0e1116;
|
|
--bg-panel: #161b23;
|
|
--bg-card: #1c2330;
|
|
--border: #2a3342;
|
|
--text: #dbe2ea;
|
|
--muted: #7d8a9c;
|
|
--accent: #4fc3f7;
|
|
--ok: #66bb6a;
|
|
--warn: #ffb74d;
|
|
--err: #ef5350;
|
|
--busy: #fff176;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1 { font-size: 18px; margin: 0; }
|
|
h2 { font-size: 15px; margin: 18px 0 8px; }
|
|
h3 { font-size: 14px; margin: 0 0 8px; }
|
|
h4 { font-size: 13px; margin: 14px 0 6px; }
|
|
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: 12px; }
|
|
.num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 10px 16px;
|
|
background: var(--bg-panel);
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#tabs { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
|
|
.tab-btn {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
border: 1px solid transparent;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13.5px;
|
|
}
|
|
.tab-btn:hover { color: var(--text); background: var(--bg-card); }
|
|
.tab-btn.active {
|
|
color: var(--text);
|
|
background: var(--bg-card);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
main { padding: 14px 16px 40px; max-width: 1500px; margin: 0 auto; }
|
|
.hidden { display: none !important; }
|
|
|
|
.panel {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
min-height: 84px;
|
|
}
|
|
.card-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
|
|
.card-value { font-size: 20px; font-weight: 600; margin: 4px 0; }
|
|
.card-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
|
|
|
|
.bar { height: 6px; background: #0b0e13; border-radius: 3px; overflow: hidden; }
|
|
.bar.small-bar { width: 120px; margin-top: 4px; }
|
|
.bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .6s; }
|
|
.bar-fill.gpu { background: #ba68c8; }
|
|
.bar-fill.warm { background: var(--warn); }
|
|
.bar-fill.hot { background: var(--err); }
|
|
.bar-fill.low { background: var(--err); }
|
|
.barrow { display: flex; align-items: center; gap: 6px; }
|
|
.barrow + .barrow { margin-top: 4px; }
|
|
.barrow-label { flex: 0 0 30px; font-size: 11px; color: var(--muted); }
|
|
.barrow .bar { flex: 1 1 auto; }
|
|
.memrow { margin-top: 6px; }
|
|
.memrow .bar { margin-top: 3px; }
|
|
.memrow-text { font-size: 12px; }
|
|
|
|
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
|
|
.chart-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
height: 240px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.chart-card h3 { flex: 0 0 auto; }
|
|
.chart-card canvas { flex: 1 1 auto; min-height: 0; }
|
|
|
|
.inline-form { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
|
|
input, select, button {
|
|
background: var(--bg-card);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 6px 9px;
|
|
font-size: 13px;
|
|
}
|
|
input::placeholder { color: var(--muted); }
|
|
.chk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; color: var(--muted); user-select: none; }
|
|
.chk input { padding: 0; border: none; background: none; }
|
|
button { cursor: pointer; }
|
|
button:hover { border-color: var(--accent); }
|
|
|
|
.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
|
|
.table th, .table td {
|
|
text-align: left;
|
|
padding: 5px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.table th { color: var(--muted); font-size: 12px; font-weight: 500; }
|
|
.table td.j-msg { white-space: normal; word-break: break-word; }
|
|
.table tbody tr:hover { background: var(--bg-card); }
|
|
.table-wrap { overflow-x: auto; }
|
|
.pname { overflow: hidden; text-overflow: ellipsis; }
|
|
.cell-clip { overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.sortlink { color: inherit; text-decoration: none; cursor: pointer; }
|
|
.sortlink.active { color: var(--accent); }
|
|
|
|
.alert {
|
|
background: rgba(239, 83, 80, .12);
|
|
border: 1px solid rgba(239, 83, 80, .5);
|
|
color: #ffcdd2;
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.notice {
|
|
background: rgba(79, 195, 247, .1);
|
|
border: 1px solid rgba(79, 195, 247, .4);
|
|
color: #b3e5fc;
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.part-list { display: flex; flex-direction: column; gap: 8px; }
|
|
.part { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
|
|
.part-head { display: flex; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; align-items: baseline; }
|
|
|
|
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
|
|
.dot-run { background: var(--ok); }
|
|
.dot-dead { background: #555f6e; }
|
|
.dot-failed { background: var(--err); }
|
|
.dot-busy { background: var(--busy); }
|
|
.dot-sleep { background: var(--accent); }
|
|
|
|
.svc-name { cursor: pointer; color: var(--accent); }
|
|
.svc-name:hover { text-decoration: underline; }
|
|
|
|
.detail-pane { margin-top: 4px; }
|
|
.detail-pane:empty { display: none; }
|
|
.detail-inner {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
}
|
|
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; margin-bottom: 8px; }
|
|
|
|
.jbox, #journal-logwrap {
|
|
background: #0b0e13;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
#journal-logwrap { max-height: 65vh; overflow-y: auto; padding: 6px 8px; }
|
|
.jbox { max-height: 260px; overflow-y: auto; padding: 6px 8px; }
|
|
.jline { display: flex; gap: 8px; padding: 1px 0; }
|
|
.jline .j-time { color: var(--muted); flex: 0 0 auto; }
|
|
.jline .j-ident { color: #90a4ae; flex: 0 0 200px; overflow: hidden; text-overflow: ellipsis; }
|
|
.jline .j-msg { white-space: pre-wrap; word-break: break-word; }
|
|
.j-err { background: rgba(239, 83, 80, .13); }
|
|
.j-err .j-msg { color: #ffcdd2; }
|
|
.j-warn { background: rgba(255, 183, 77, .09); }
|
|
.j-warn .j-msg { color: #ffe0b2; }
|
|
|
|
.actions { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
.btn { padding: 3px 9px; font-size: 12px; }
|
|
|
|
.plugin-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
padding: 1px 9px;
|
|
font-size: 11.5px;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
}
|
|
.badge-loaded { color: #c8e6c9; border-color: rgba(102, 187, 106, .6); background: rgba(102, 187, 106, .12); }
|
|
.badge-loading { color: #fff9c4; border-color: rgba(255, 241, 118, .6); background: rgba(255, 241, 118, .1); }
|
|
.badge-unloaded { color: var(--muted); }
|
|
.badge-sleeping { color: #b3e5fc; border-color: rgba(79, 195, 247, .5); background: rgba(79, 195, 247, .1); }
|
|
.badge-failed { color: #ffcdd2; border-color: rgba(239, 83, 80, .6); background: rgba(239, 83, 80, .12); }
|
|
.badge-downloading { color: #b3e5fc; border-color: rgba(79, 195, 247, .5); background: rgba(79, 195, 247, .1); }
|
|
.llama-id { overflow: hidden; text-overflow: ellipsis; }
|
|
.llama-health {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
margin-bottom: 10px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
.llama-health .dot { width: 12px; height: 12px; }
|
|
.llama-health-text { font-weight: 600; font-size: 15px; }
|
|
.llama-models { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
|
|
.llama-model {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 7px 10px;
|
|
min-width: 0;
|
|
}
|
|
.llama-model .llama-id { flex: 1 1 auto; min-width: 80px; }
|
|
.llama-model-actions { display: flex; gap: 6px; margin-left: auto; }
|
|
.llama-load { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
|
|
.llama-load select { max-width: 420px; }
|
|
.part-mounts { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
|
|
.part-usage { margin-left: auto; }
|