feat: improve met project tree details
This commit is contained in:
Codex
@@ -195,6 +195,19 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
}
|
||||
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
|
||||
.ghost-btn.danger:hover { border-color: var(--danger); color: #ffd7cf; }
|
||||
.primary-btn, .danger-btn {
|
||||
min-height: 28px;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid rgba(78, 183, 168, 0.62);
|
||||
background: linear-gradient(180deg, rgba(78, 183, 168, 0.22), rgba(78, 183, 168, 0.08));
|
||||
color: var(--text);
|
||||
}
|
||||
.danger-btn {
|
||||
border-color: rgba(207, 106, 84, 0.62);
|
||||
background: linear-gradient(180deg, rgba(207, 106, 84, 0.2), rgba(207, 106, 84, 0.08));
|
||||
color: #ffd7cf;
|
||||
}
|
||||
.ghost-btn.compact, .primary-btn.compact, .danger-btn.compact { width: max-content; }
|
||||
|
||||
.page-grid {
|
||||
display: grid;
|
||||
@@ -1125,7 +1138,189 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line-soft);
|
||||
}
|
||||
.met-project-table { max-height: 520px; overflow: auto; }
|
||||
.met-project-table {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
.met-tree-header, .met-tree-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) 90px 72px 90px 116px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.met-tree-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
background: var(--panel);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.met-tree-row {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.045);
|
||||
}
|
||||
.met-tree-row.project {
|
||||
cursor: pointer;
|
||||
}
|
||||
.met-tree-row.project:hover, .met-tree-row.project.active, .met-click-row:hover, .met-click-row.active {
|
||||
background: rgba(78, 183, 168, 0.08);
|
||||
}
|
||||
.met-tree-row.project.selected {
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
.met-tree-row.folder {
|
||||
grid-template-columns: auto auto 1fr;
|
||||
color: var(--text);
|
||||
background: rgba(255,255,255,0.025);
|
||||
}
|
||||
.met-tree-name {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.met-tree-name input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.met-tree-toggle {
|
||||
width: 20px;
|
||||
min-height: 20px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: var(--panel-3);
|
||||
color: var(--text);
|
||||
}
|
||||
.met-tree-count {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.met-inline-link {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.met-inline-link:hover {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
.met-inline-link.project-path {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.met-detail-panel {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line-soft);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(78, 183, 168, 0.07), transparent 38%),
|
||||
var(--panel-2);
|
||||
}
|
||||
.met-detail-panel.muted {
|
||||
background: var(--panel-3);
|
||||
}
|
||||
.met-detail-panel .panel-head {
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
.met-detail-panel code {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
.met-detail-section {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.met-detail-section h3 {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.met-detail-kv {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(130px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.met-detail-kv-item {
|
||||
min-width: 0;
|
||||
padding: 7px;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: rgba(255,255,255,0.025);
|
||||
}
|
||||
.met-detail-kv-item span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.met-detail-kv-item strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.met-detail-kv-item small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.met-layer-table {
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
}
|
||||
.met-file-chip-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
.met-file-chip-grid span {
|
||||
padding: 3px 7px;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: var(--panel-3);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.met-log-lines {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
.met-log-lines div {
|
||||
padding: 5px 7px;
|
||||
border-left: 2px solid var(--accent-2);
|
||||
background: rgba(0,0,0,0.18);
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.ghost-btn.mini {
|
||||
min-height: 22px;
|
||||
padding: 2px 6px;
|
||||
@@ -1143,6 +1338,12 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.pipeline-control-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(620px, 1fr) minmax(320px, 0.38fr);
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.pipeline-flow-frame {
|
||||
height: min(68vh, 720px);
|
||||
min-height: 520px;
|
||||
@@ -1236,6 +1437,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
.pipeline-flow-node.failed { border-color: rgba(207, 106, 84, 0.78); }
|
||||
.pipeline-flow-node.quality-gate { background: linear-gradient(180deg, rgba(22, 38, 34, 0.98), rgba(10, 19, 17, 0.98)); }
|
||||
.pipeline-flow-node.control-block { background: linear-gradient(180deg, rgba(36, 31, 20, 0.98), rgba(17, 15, 11, 0.98)); }
|
||||
.pipeline-flow-node.selected-control-node {
|
||||
outline: 2px solid rgba(215, 161, 58, 0.78);
|
||||
box-shadow: 0 0 0 4px rgba(215, 161, 58, 0.16), 0 20px 38px rgba(0,0,0,0.42);
|
||||
}
|
||||
.flow-node-label {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -1273,6 +1478,95 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
border: 1px solid var(--line-soft);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.pipeline-node-control {
|
||||
min-width: 0;
|
||||
max-height: min(68vh, 720px);
|
||||
min-height: 520px;
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(215, 161, 58, 0.28);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(215, 161, 58, 0.11), transparent 36%),
|
||||
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.014)),
|
||||
#0a1218;
|
||||
box-shadow: inset 3px 0 0 rgba(215, 161, 58, 0.28);
|
||||
padding: 10px;
|
||||
}
|
||||
.pipeline-node-control-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
.pipeline-node-control-head h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.04em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.pipeline-control-runbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 6px;
|
||||
align-items: end;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.pipeline-control-runbar label,
|
||||
.pipeline-control-actions label {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.pipeline-control-runbar select,
|
||||
.pipeline-control-actions textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(4, 9, 13, 0.64);
|
||||
color: var(--text);
|
||||
}
|
||||
.pipeline-control-runbar select { min-height: 28px; padding: 4px 7px; }
|
||||
.pipeline-control-actions textarea {
|
||||
resize: vertical;
|
||||
padding: 7px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.pipeline-control-meta,
|
||||
.pipeline-control-evidence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pipeline-control-meta span,
|
||||
.pipeline-control-evidence-grid span {
|
||||
min-width: 0;
|
||||
padding: 6px 7px;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: rgba(255,255,255,0.03);
|
||||
color: var(--muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.pipeline-control-meta b {
|
||||
display: block;
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-control-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.pipeline-control-evidence {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
.compact-log code { font-size: 11px; }
|
||||
.component-strata {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
|
||||
@@ -1384,6 +1678,12 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
color: #ffd7cf;
|
||||
background: rgba(207,106,84,0.1);
|
||||
}
|
||||
.form-success {
|
||||
padding: 7px 8px;
|
||||
border: 1px solid rgba(78,183,168,0.5);
|
||||
color: #d8fff6;
|
||||
background: rgba(78,183,168,0.1);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
@@ -1423,14 +1723,24 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
.metric-grid, .policy-grid, .security-board, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.dispatch-form { grid-template-columns: 1fr 1fr; }
|
||||
.dispatch-actions { align-items: center; }
|
||||
.page-grid, .docker-layout, .monitor-layout, .findjob-grid, .findjob-hero, .pipeline-grid, .pipeline-hero { grid-template-columns: 1fr; }
|
||||
.findjob-grid .panel:nth-child(3), .pipeline-grid .panel:nth-child(3), .pipeline-grid .panel:nth-child(5) { grid-column: 1; }
|
||||
.page-grid, .docker-layout, .monitor-layout, .findjob-grid, .findjob-hero, .pipeline-grid, .pipeline-hero, .met-grid, .met-form-grid { grid-template-columns: 1fr; }
|
||||
.pipeline-control-shell { grid-template-columns: 1fr; }
|
||||
.pipeline-node-control { max-height: none; min-height: 0; }
|
||||
.findjob-grid .panel:nth-child(3), .pipeline-grid .panel:nth-child(3), .pipeline-grid .panel:nth-child(5), .met-grid .panel:nth-child(3), .met-grid .panel:nth-child(5), .met-detail-panel { grid-column: 1; }
|
||||
.gateway-record-grid { grid-template-columns: 1fr; }
|
||||
.overview-grid .panel:nth-child(n+3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1; }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
body { font-size: 12px; }
|
||||
.pipeline-control-runbar,
|
||||
.pipeline-control-meta,
|
||||
.pipeline-control-evidence-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.pipeline-flow-frame {
|
||||
min-height: 430px;
|
||||
}
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
@@ -1521,8 +1831,13 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
padding: 4px 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid, .gateway-record-grid { grid-template-columns: 1fr; }
|
||||
.metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid, .gateway-record-grid, .met-detail-kv { grid-template-columns: 1fr; }
|
||||
.compact-row, .heartbeat-row, .log-row, .endpoint-list article, .volume-route, .findjob-hero, .pipeline-hero { grid-template-columns: 1fr; align-items: start; }
|
||||
.met-tree-header, .met-tree-row {
|
||||
grid-template-columns: minmax(220px, 1fr) 72px 62px 76px 96px;
|
||||
min-width: 560px;
|
||||
}
|
||||
.met-project-table { overflow-x: auto; }
|
||||
.docker-hero, .monitor-hero { flex-direction: column; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user