Show compare sides on the board and fix missing/extra row cells.

Enrich run detail with before/after NE labels, and keep present-side values readable for added/removed rows instead of striking them out.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-18 09:50:44 +08:00
parent bf35c0594e
commit 194a4592c1
5 changed files with 329 additions and 35 deletions

View file

@ -10103,6 +10103,107 @@ html.login-page--paused .login-page__flare {
flex: 0 0 auto;
}
.bs-cmp-sides {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 8px 12px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--bs-cmp-border, rgba(148, 163, 184, 0.22));
background: rgba(15, 23, 42, 0.55);
flex: 0 0 auto;
}
.bs-cmp-sides__side {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 6px 10px;
border-radius: 8px;
}
.bs-cmp-sides__side.is-before {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(248, 113, 113, 0.28);
}
.bs-cmp-sides__side.is-after {
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(74, 222, 128, 0.28);
}
.bs-cmp-sides__tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #94a3b8;
}
.bs-cmp-sides__side.is-before .bs-cmp-sides__tag {
color: #fca5a5;
}
.bs-cmp-sides__side.is-after .bs-cmp-sides__tag {
color: #86efac;
}
.bs-cmp-sides__name {
font-size: 15px;
font-weight: 700;
color: #f1f5f9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.bs-cmp-sides__meta {
font-size: 11px;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bs-cmp-sides__vs {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: rgba(59, 130, 246, 0.18);
border: 1px solid rgba(96, 165, 250, 0.4);
color: #93c5fd;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
}
.bs-cmp-sides__context {
grid-column: 1 / -1;
font-size: 11px;
padding-top: 2px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
}
@media (max-width: 720px) {
.bs-cmp-sides {
grid-template-columns: 1fr;
}
.bs-cmp-sides__vs {
justify-self: center;
width: auto;
height: auto;
padding: 2px 10px;
border-radius: 6px;
}
}
.bs-cmp-board__body {
display: grid;
grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
@ -10841,6 +10942,25 @@ html.login-page--paused .login-page__flare {
font-weight: 600;
}
/* Whole-row 缺失/多余: keep the present side readable (no strikethrough) */
.bs-cmp-val--present-pre {
color: #fecaca;
font-weight: 600;
}
.bs-cmp-val--present-post {
color: #86efac;
font-weight: 600;
}
.bs-cmp-val-cell--pair.is-removed {
background: rgba(239, 68, 68, 0.08);
}
.bs-cmp-val-cell--pair.is-added {
background: rgba(34, 197, 94, 0.08);
}
.bs-cmp-val-arrow {
margin: 0 6px;
opacity: 0.45;