mirror of
https://github.com/hansjone/netx.git
synced 2026-10-09 06:40:45 +08:00
Move port traffic to device-centric monitoring with a dedicated wall and collect logs.
Split the ops wall to its own route with fullscreen charts, persist collect errors as device events, and polish wall legend layout. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
5079343b2a
commit
214bc56774
24 changed files with 3309 additions and 1357 deletions
|
|
@ -3695,7 +3695,8 @@ pre {
|
|||
}
|
||||
|
||||
.network-main:has(.topo-page),
|
||||
.network-main:has(.webcrt-shell) {
|
||||
.network-main:has(.webcrt-shell),
|
||||
.network-main:has(.pt-wall-shell) {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -3714,6 +3715,12 @@ pre {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.network-main .pt-wall-shell {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.network-placeholder h2 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
|
@ -3763,58 +3770,578 @@ pre {
|
|||
color: #334155;
|
||||
}
|
||||
|
||||
.pt-wall-page__filters {
|
||||
margin-bottom: 12px;
|
||||
gap: 12px 18px;
|
||||
align-items: flex-end;
|
||||
.pt-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.pt-wall-page__filters label {
|
||||
display: inline-flex;
|
||||
.pt-list-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pt-list-kpi {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pt-list-kpi--live {
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.pt-list-kpi__label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pt-list-kpi__value {
|
||||
font-size: 22px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #0f172a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pt-list-kpi--live .pt-list-kpi__value {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.pt-list-table-wrap {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pt-list-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pt-list-table thead th {
|
||||
background: #f8fafc;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pt-list-table tbody td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pt-list-table tbody tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pt-list-task-name {
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pt-list-task-err {
|
||||
margin-top: 2px;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.pt-list-task-err-btn {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #b91c1c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.pt-list-task-err-btn:hover {
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.pt-log-modal__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pt-log-modal__head h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pt-log-modal__sub {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pt-log-modal__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 10px;
|
||||
max-height: min(60vh, 520px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pt-log-item {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pt-log-item--error {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.pt-log-item--warn {
|
||||
border-color: #fde68a;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.pt-log-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 12px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pt-wall-page__filters select {
|
||||
min-width: 160px;
|
||||
.pt-log-item__level {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 700;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.pt-log-item--warn .pt-log-item__level {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.pt-log-item--info .pt-log-item__level {
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.pt-log-item__if {
|
||||
font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pt-log-item__msg {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #1e293b;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.pt-list-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pt-list-status + .pt-list-status {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.pt-list-status--running {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.pt-list-status--running::before,
|
||||
.pt-list-status--collect::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.pt-list-status--paused {
|
||||
background: #fef9c3;
|
||||
color: #854d0e;
|
||||
}
|
||||
|
||||
.pt-list-status--stopped,
|
||||
.pt-list-status--other {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.pt-list-status--collect {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.pt-list-num,
|
||||
.pt-list-time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.pt-list-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pt-list-actions .btn-primary,
|
||||
.pt-list-actions .btn--danger,
|
||||
.pt-list-actions button {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.pt-list-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-height: 200px;
|
||||
padding: 32px 16px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pt-list-empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pt-list-pager {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.pt-list-kpis {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.pt-wall-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
color: #e2e8f0;
|
||||
background:
|
||||
radial-gradient(1200px 480px at 12% -10%, rgba(45, 212, 191, 0.08), transparent 55%),
|
||||
radial-gradient(900px 420px at 88% 0%, rgba(56, 189, 248, 0.06), transparent 50%),
|
||||
linear-gradient(180deg, #0a1220 0%, #070d18 100%);
|
||||
}
|
||||
|
||||
.pt-wall-shell__empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pt-wall-page {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 14px 12px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__hint {
|
||||
margin: 0 0 8px;
|
||||
flex: 0 0 auto;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pt-wall-page__stage {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pt-wall-page__stage:fullscreen,
|
||||
.pt-wall-page__stage.is-fullscreen:fullscreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(1200px 480px at 12% -10%, rgba(45, 212, 191, 0.08), transparent 55%),
|
||||
linear-gradient(180deg, #0a1220 0%, #070d18 100%);
|
||||
}
|
||||
|
||||
.pt-wall-page__stage .pt-wall {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pt-wall-page__fs-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 30px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pt-wall-page__fs-btn--toolbar {
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.pt-wall-page__fs-btn:hover {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
border-color: rgba(148, 163, 184, 0.45);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.app-main .pt-wall-page__fs-btn {
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.app-main .pt-wall-page__fs-btn:hover {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.pt-wall-page__toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 0 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 8px 10px;
|
||||
}
|
||||
|
||||
.pt-wall-page__row--primary {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__row--secondary {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.pt-wall-page__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__field select,
|
||||
.pt-wall-page__field input {
|
||||
height: 30px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 6px;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
color: #e2e8f0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pt-wall-page__field select:hover,
|
||||
.pt-wall-page__field input:hover,
|
||||
.pt-wall-page__field select:focus,
|
||||
.pt-wall-page__field input:focus {
|
||||
border-color: rgba(45, 212, 191, 0.45);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.app-main .pt-wall-page__field select,
|
||||
.app-main .pt-wall-page__field input {
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
color: #e2e8f0;
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
}
|
||||
|
||||
.pt-wall-page__field--task {
|
||||
flex: 0 1 160px;
|
||||
min-width: 128px;
|
||||
}
|
||||
|
||||
.pt-wall-page__field--port {
|
||||
flex: 1 1 220px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.pt-wall-page__field--sm {
|
||||
flex: 0 0 78px;
|
||||
}
|
||||
|
||||
.pt-wall-page__field--md {
|
||||
flex: 0 1 148px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.pt-wall-page__field--port select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pt-wall-page__collect {
|
||||
flex: 0 0 auto;
|
||||
height: 30px;
|
||||
margin-left: auto;
|
||||
align-self: flex-end;
|
||||
white-space: nowrap;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(45, 212, 191, 0.35);
|
||||
background: rgba(45, 212, 191, 0.16);
|
||||
color: #99f6e4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-main .pt-wall-page__collect.btn-primary {
|
||||
background: rgba(45, 212, 191, 0.16);
|
||||
border-color: rgba(45, 212, 191, 0.35);
|
||||
color: #99f6e4;
|
||||
}
|
||||
|
||||
.app-main .pt-wall-page__collect.btn-primary:hover:not(:disabled) {
|
||||
background: rgba(45, 212, 191, 0.28);
|
||||
color: #ecfdf5;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 8px 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster--map {
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster-label {
|
||||
flex: 0 0 auto;
|
||||
padding-bottom: 7px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #475569;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 8px 10px;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster-sep {
|
||||
width: 1px;
|
||||
align-self: stretch;
|
||||
margin: 4px 6px 0;
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
flex: 0 0 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.pt-wall-page__cluster {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster-label {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__cluster-sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pt-wall-page__collect {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pt-wall-page__field--port {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pt-wall {
|
||||
--pt-bg: #0b1220;
|
||||
--pt-panel: #111827;
|
||||
--pt-line: rgba(148, 163, 184, 0.22);
|
||||
--pt-bg: #0a1220;
|
||||
--pt-panel: transparent;
|
||||
--pt-line: rgba(148, 163, 184, 0.16);
|
||||
--pt-text: #e2e8f0;
|
||||
--pt-muted: #94a3b8;
|
||||
--pt-muted: #8b9bb0;
|
||||
--pt-in: #2dd4bf;
|
||||
--pt-out: #f59e0b;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 18, 32, 0.98)),
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 23px,
|
||||
rgba(148, 163, 184, 0.05) 24px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 23px,
|
||||
rgba(148, 163, 184, 0.05) 24px
|
||||
);
|
||||
border: 1px solid #1f2937;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px 12px;
|
||||
--pt-out: #fbbf24;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 4px 2px 0;
|
||||
color: var(--pt-text);
|
||||
}
|
||||
|
||||
.pt-wall__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
align-items: flex-end;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pt-wall__head-title {
|
||||
|
|
@ -3832,51 +4359,71 @@ pre {
|
|||
}
|
||||
|
||||
.pt-wall__ne {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--pt-muted);
|
||||
}
|
||||
|
||||
.pt-wall__if {
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
|
||||
color: #f8fafc;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: min(720px, 72vw);
|
||||
}
|
||||
|
||||
.pt-wall__range {
|
||||
font-size: 12px;
|
||||
color: var(--pt-muted);
|
||||
white-space: nowrap;
|
||||
padding-bottom: 3px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pt-wall__kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 0;
|
||||
margin-bottom: 14px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pt-wall__kpi {
|
||||
background: rgba(17, 24, 39, 0.72);
|
||||
border: 1px solid var(--pt-line);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid rgba(148, 163, 184, 0.1);
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.pt-wall__kpi:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.pt-wall__kpi-label {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--pt-muted);
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 0.08em;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pt-wall__kpi-value {
|
||||
font-size: 22px;
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
|
||||
line-height: 1.2;
|
||||
line-height: 1.15;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.pt-wall__kpi--in .pt-wall__kpi-value {
|
||||
|
|
@ -3887,16 +4434,33 @@ pre {
|
|||
color: var(--pt-out);
|
||||
}
|
||||
|
||||
.pt-wall__kpi--util .pt-wall__kpi-value {
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.pt-wall__kpi-unit,
|
||||
.pt-wall__kpi-sep {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--pt-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pt-wall__chart-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 180px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 14, 26, 0.45);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
padding: 8px 8px 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pt-wall__chart {
|
||||
min-height: 260px;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -3905,12 +4469,6 @@ pre {
|
|||
font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
|
||||
}
|
||||
|
||||
.pt-wall__chart-wrap {
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pt-wall__tip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -3919,13 +4477,14 @@ pre {
|
|||
min-width: 150px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.94);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
background: rgba(8, 14, 26, 0.94);
|
||||
color: #e2e8f0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.pt-wall__tip-time {
|
||||
|
|
@ -3946,45 +4505,99 @@ pre {
|
|||
}
|
||||
|
||||
.pt-wall__tip-row--out strong {
|
||||
color: #f59e0b;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.pt-wall__chart .u-axis {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.pt-wall__chart .u-legend {
|
||||
color: var(--pt-muted);
|
||||
}
|
||||
|
||||
.pt-wall__chart .u-legend .u-value {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pt-wall__foot {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 28px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.18);
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px 20px;
|
||||
margin-top: 8px;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
flex: 0 0 auto;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.pt-wall__legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 16px;
|
||||
color: var(--pt-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pt-wall__legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pt-wall__legend-swatch {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
flex: 0 0 10px;
|
||||
}
|
||||
|
||||
.pt-wall__legend-item--in .pt-wall__legend-swatch {
|
||||
background: #2dd4bf;
|
||||
}
|
||||
|
||||
.pt-wall__legend-item--out .pt-wall__legend-swatch {
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
.pt-wall__legend-item--base-in .pt-wall__legend-swatch {
|
||||
background: rgba(45, 212, 191, 0.45);
|
||||
box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.7);
|
||||
}
|
||||
|
||||
.pt-wall__legend-item--base-out .pt-wall__legend-swatch {
|
||||
background: rgba(251, 191, 36, 0.4);
|
||||
box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.65);
|
||||
}
|
||||
|
||||
.pt-wall__foot-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.pt-wall__foot-ne,
|
||||
.pt-wall__foot-if {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
gap: 6px 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pt-wall__foot-label {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--pt-muted);
|
||||
letter-spacing: 0.08em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pt-wall__foot-value {
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
|
@ -4002,7 +4615,7 @@ pre {
|
|||
|
||||
.pt-wall__empty {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -4010,9 +4623,9 @@ pre {
|
|||
text-align: center;
|
||||
line-height: 1.5;
|
||||
color: var(--pt-muted);
|
||||
background: rgba(11, 18, 32, 0.72);
|
||||
border: 1px dashed rgba(148, 163, 184, 0.28);
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 14, 26, 0.55);
|
||||
border: 1px dashed rgba(148, 163, 184, 0.22);
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -4020,4 +4633,12 @@ pre {
|
|||
.pt-wall__kpis {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.pt-wall__kpi:nth-child(2n) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.pt-wall__kpi:nth-child(-n + 2) {
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue