Style compare column groups as bordered merged headers and simplify verdict text.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-21 16:15:33 +08:00
parent 7f453ac2b9
commit dfcdeccaa6
2 changed files with 146 additions and 87 deletions

View file

@ -12213,7 +12213,11 @@ body:has(.bs-cmp-board:fullscreen) {
.bs-cmp-diff-table {
border-collapse: separate;
border-spacing: 0;
--bs-cmp-group-h: 28px;
--bs-cmp-group-h: 30px;
--bs-cmp-zone-line: rgba(148, 163, 184, 0.42);
--bs-cmp-zone-key: #3b82f6;
--bs-cmp-zone-compare: #f59e0b;
--bs-cmp-zone-display: #94a3b8;
}
.bs-cmp-diff-table thead th {
@ -12221,7 +12225,6 @@ body:has(.bs-cmp-board:fullscreen) {
z-index: 2;
background: rgba(15, 23, 42, 0.98);
color: #94a3b8;
box-shadow: 0 1px 0 rgba(148, 163, 184, 0.22);
font-size: 12px;
white-space: nowrap;
vertical-align: middle;
@ -12234,40 +12237,76 @@ body:has(.bs-cmp-board:fullscreen) {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 5px 10px;
letter-spacing: 0.06em;
padding: 6px 12px;
height: var(--bs-cmp-group-h);
box-shadow:
0 1px 0 rgba(148, 163, 184, 0.18),
inset 0 -1px 0 rgba(148, 163, 184, 0.08);
}
/* Merged-cell style group headers */
.bs-cmp-group {
border-top: 1px solid var(--bs-cmp-zone-line) !important;
border-bottom: 1px solid var(--bs-cmp-zone-line) !important;
border-right: 1px solid var(--bs-cmp-zone-line) !important;
}
.bs-cmp-group--key {
background: rgba(37, 99, 235, 0.16) !important;
color: #93c5fd !important;
border-left: 2px solid var(--bs-cmp-zone-key) !important;
}
.bs-cmp-group--compare {
background: rgba(245, 158, 11, 0.12) !important;
color: #fbbf24 !important;
border-left: 2px solid var(--bs-cmp-zone-compare) !important;
}
.bs-cmp-group--display {
background: rgba(148, 163, 184, 0.1) !important;
color: #e2e8f0 !important;
border-left: 2px solid var(--bs-cmp-zone-display) !important;
}
.bs-cmp-diff-table thead tr.bs-cmp-field-row th {
top: var(--bs-cmp-group-h);
z-index: 2;
vertical-align: bottom;
vertical-align: middle;
padding-top: 6px;
padding-bottom: 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--bs-cmp-zone-line);
background: rgba(15, 23, 42, 0.98);
color: #e2e8f0;
}
.bs-cmp-group--key {
background: rgba(15, 23, 42, 0.98) !important;
color: #93c5fd !important;
border-bottom: 1px solid rgba(59, 130, 246, 0.45);
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-key {
background: rgba(30, 41, 70, 0.92);
}
.bs-cmp-group--compare {
background: rgba(15, 23, 42, 0.98) !important;
color: #fbbf24 !important;
border-bottom: 1px solid rgba(245, 158, 11, 0.45);
box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.35);
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-compare {
background: rgba(42, 34, 18, 0.92);
}
.bs-cmp-group--display {
background: rgba(15, 23, 42, 0.98) !important;
color: #cbd5e1 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.35);
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-display {
background: rgba(30, 36, 48, 0.95);
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-key,
.bs-cmp-diff-table tbody td.bs-cmp-zone-start--key {
border-left: 2px solid var(--bs-cmp-zone-key);
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-compare,
.bs-cmp-diff-table tbody td.bs-cmp-zone-start--compare {
border-left: 2px solid var(--bs-cmp-zone-compare);
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-display,
.bs-cmp-diff-table tbody td.bs-cmp-zone-start--display {
border-left: 2px solid var(--bs-cmp-zone-display);
}
.bs-cmp-diff-table thead th.bs-cmp-zone-end {
border-right: 1px solid var(--bs-cmp-zone-line);
}
.bs-cmp-diff-table tbody td {
@ -12283,12 +12322,13 @@ body:has(.bs-cmp-board:fullscreen) {
background: rgba(37, 99, 235, 0.1);
}
/* 结论 column */
.bs-cmp-sticky-kind {
position: sticky;
left: 0;
z-index: 1;
background: rgba(15, 23, 42, 0.96);
box-shadow: 1px 0 0 rgba(148, 163, 184, 0.16);
border-right: 1px solid var(--bs-cmp-zone-line, rgba(148, 163, 184, 0.42));
}
.bs-cmp-diff-table thead th.bs-cmp-sticky-kind {
@ -12296,12 +12336,19 @@ body:has(.bs-cmp-board:fullscreen) {
background: rgba(15, 23, 42, 0.98);
vertical-align: middle;
text-align: center;
font-weight: 700;
color: #cbd5e1;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--bs-cmp-zone-line);
box-shadow: 1px 0 0 rgba(148, 163, 184, 0.16);
}
.bs-cmp-diff-table thead th.bs-cmp-col-fail {
z-index: 3;
text-align: center;
vertical-align: middle;
border-right: 1px solid var(--bs-cmp-zone-line);
border-bottom: 1px solid var(--bs-cmp-zone-line);
}
.bs-cmp-diff-table tbody tr:nth-child(even) td.bs-cmp-sticky-kind {
@ -12317,69 +12364,45 @@ body:has(.bs-cmp-board:fullscreen) {
font-weight: 600;
}
/* Header-only zone dividers (body cells stay neutral) */
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-key,
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-compare,
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-display {
background: rgba(15, 23, 42, 0.98);
color: #e2e8f0;
.bs-cmp-col-kind {
width: 3.5rem;
min-width: 3.5rem;
max-width: 4.5rem;
text-align: center;
white-space: nowrap;
padding-left: 8px !important;
padding-right: 8px !important;
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-key {
box-shadow: inset 2px 0 0 #3b82f6;
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-compare {
box-shadow: inset 2px 0 0 #f59e0b;
}
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-display {
box-shadow: inset 2px 0 0 #94a3b8;
}
.bs-cmp-col-key,
.bs-cmp-col-compare,
.bs-cmp-col-display {
background: transparent;
}
.bs-cmp-overview__verdict {
font-size: 1.05rem;
font-weight: 700;
.bs-cmp-verdict {
display: block;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
}
.bs-cmp-overview.is-ok .bs-cmp-overview__verdict {
.bs-cmp-verdict--pass {
color: #4ade80;
}
.bs-cmp-overview.is-warn .bs-cmp-overview__verdict {
.bs-cmp-verdict--fail {
color: #f87171;
}
.bs-cmp-nav__fail {
color: #f87171 !important;
font-style: normal;
.bs-cmp-verdict--added {
color: #86efac;
}
.bs-cmp-nav__pass {
color: #4ade80 !important;
font-style: normal;
}
.bs-cmp-badge--fail {
background: rgba(248, 113, 113, 0.2);
color: #fecaca;
}
.bs-cmp-badge--pass {
background: rgba(74, 222, 128, 0.15);
color: #bbf7d0;
}
.bs-cmp-col-kind {
width: auto;
min-width: 4.5rem;
white-space: nowrap;
}
.bs-cmp-col-kind .bs-cmp-badge {
display: inline-block;
margin: 0;
white-space: nowrap;
.bs-cmp-verdict__sub {
display: block;
margin-top: 2px;
font-size: 10px;
font-weight: 500;
color: #94a3b8;
line-height: 1.2;
}
.bs-cmp-col-fail,
.bs-cmp-fail-cell {
max-width: 11rem;