a50b72e7b5
- 采用 hash 路由与会话式壳层（Playground / Datasets / Experiments / Versions / Memoir） - 抽取 api、types、hooks（轮询、通知、实验 SSE）与 NoticeContext - Playground：基线/实际生成双栏、重放、流式自动评分与 ScoreCard - Datasets：回归集与用例列表、Markdown/JSON 导入、会话快照 - Experiments：创建实验、提交运行、SSE 进度、DiffTable 与门禁展示 - 样式与无障碍：DM Sans + JetBrains Mono、侧栏响应式、? 快捷键帮助
1063 lines
18 KiB
CSS
1063 lines
18 KiB
CSS
/* Life Echo — 回归评测台：tokens + layout (distill / arrange / typeset / harden) */
|
||
|
||
:root {
|
||
--bg: #121820;
|
||
--bg-elevated: #181f29;
|
||
--bg-muted: #1e2633;
|
||
--border: #2c3545;
|
||
--border-strong: #3d4759;
|
||
--text: #e9ecf1;
|
||
--text-muted: #97a3b5;
|
||
--text-faint: #6b7585;
|
||
--baseline-bg: #1f1a12;
|
||
--baseline-border: #6b5420;
|
||
--baseline-label: #c9a227;
|
||
--accent: #3d8f6e;
|
||
--accent-hover: #4fa382;
|
||
--accent-muted: #234536;
|
||
--link: #8ecae6;
|
||
--danger-bg: #2a1518;
|
||
--danger-text: #f0a8a8;
|
||
--success-bg: #13251c;
|
||
--success-text: #8fd4a8;
|
||
--info-bg: #151d28;
|
||
--focus: #7eb8ff;
|
||
|
||
--font-sans: "DM Sans", system-ui, sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||
|
||
--text-xs: 0.75rem;
|
||
--text-sm: 0.8125rem;
|
||
--text-body: 0.9375rem;
|
||
--text-md: 1rem;
|
||
--text-lg: 1.125rem;
|
||
--text-xl: 1.375rem;
|
||
|
||
--r-sm: 6px;
|
||
--r-md: 10px;
|
||
--r-lg: 14px;
|
||
|
||
--s-1: 4px;
|
||
--s-2: 8px;
|
||
--s-3: 12px;
|
||
--s-4: 16px;
|
||
--s-5: 24px;
|
||
--s-6: 40px;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: var(--bg);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
a {
|
||
color: var(--link);
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.88em;
|
||
}
|
||
|
||
/* Shell */
|
||
|
||
.eval-shell {
|
||
min-height: 100vh;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-4);
|
||
flex-wrap: wrap;
|
||
padding: var(--s-3) var(--s-4);
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-title {
|
||
margin: 0;
|
||
font-size: var(--text-lg);
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.eval-meta {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-muted);
|
||
line-height: 1.45;
|
||
max-width: 42rem;
|
||
}
|
||
|
||
.eval-meta code {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.eval-header-spacer {
|
||
flex: 1;
|
||
min-width: var(--s-2);
|
||
}
|
||
|
||
/* Notices */
|
||
|
||
.eval-notices {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
padding: var(--s-2) var(--s-4);
|
||
background: var(--bg-muted);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-notice {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--s-3);
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-md);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.45;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-notice--error {
|
||
background: var(--danger-bg);
|
||
color: var(--danger-text);
|
||
border-color: #5c2a32;
|
||
}
|
||
|
||
.eval-notice--success {
|
||
background: var(--success-bg);
|
||
color: var(--success-text);
|
||
border-color: #2d5a40;
|
||
}
|
||
|
||
.eval-notice--info {
|
||
background: var(--info-bg);
|
||
color: var(--text-muted);
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.eval-notice__text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.eval-notice__dismiss {
|
||
flex-shrink: 0;
|
||
width: 1.75rem;
|
||
height: 1.75rem;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: var(--r-sm);
|
||
background: transparent;
|
||
color: inherit;
|
||
opacity: 0.75;
|
||
cursor: pointer;
|
||
font-size: 1.1rem;
|
||
line-height: 1;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.eval-notice__dismiss:hover {
|
||
opacity: 1;
|
||
background: color-mix(in oklab, currentColor 12%, transparent);
|
||
}
|
||
|
||
.eval-notice__dismiss:focus-visible {
|
||
outline: 2px solid var(--focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Buttons */
|
||
|
||
.eval-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--s-2);
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-md);
|
||
font-family: inherit;
|
||
font-size: var(--text-body);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--bg-muted);
|
||
color: var(--text);
|
||
transition: background 0.12s ease, border-color 0.12s ease;
|
||
}
|
||
|
||
.eval-btn:hover:not(:disabled) {
|
||
background: color-mix(in oklab, var(--bg-muted) 70%, var(--text));
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
.eval-btn:disabled {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.eval-btn:focus-visible {
|
||
outline: 2px solid var(--focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.eval-btn--primary {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
color: #fff;
|
||
}
|
||
|
||
.eval-btn--primary:hover:not(:disabled) {
|
||
background: var(--accent-hover);
|
||
border-color: var(--accent-hover);
|
||
}
|
||
|
||
.eval-btn--ghost {
|
||
background: transparent;
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.eval-btn--ghost:hover:not(:disabled) {
|
||
background: color-mix(in oklab, var(--text) 6%, transparent);
|
||
}
|
||
|
||
.eval-btn.is-active {
|
||
font-weight: 700;
|
||
border-color: var(--focus);
|
||
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--focus) 35%, transparent);
|
||
}
|
||
|
||
.eval-btn--sm {
|
||
font-size: var(--text-xs);
|
||
padding: var(--s-1) var(--s-2);
|
||
}
|
||
|
||
.eval-ml-2 {
|
||
margin-left: var(--s-2);
|
||
}
|
||
|
||
.eval-mt-2 {
|
||
margin-top: var(--s-2);
|
||
}
|
||
|
||
/* Main regions */
|
||
|
||
.eval-main {
|
||
padding: var(--s-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-4);
|
||
min-height: calc(100vh - 52px);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.eval-main--narrow {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: var(--s-5) var(--s-4);
|
||
}
|
||
|
||
.eval-lede {
|
||
margin: 0;
|
||
font-size: var(--text-body);
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-details {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
padding: var(--s-2) var(--s-3);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-details summary {
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: var(--text-sm);
|
||
user-select: none;
|
||
list-style: none;
|
||
}
|
||
|
||
.eval-details summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.eval-details summary::before {
|
||
content: "▸ ";
|
||
display: inline-block;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.eval-details[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.eval-prose {
|
||
margin: var(--s-3) 0 0;
|
||
font-size: var(--text-sm);
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
max-width: 72ch;
|
||
}
|
||
|
||
.eval-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.eval-toolbar-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
padding-right: var(--s-4);
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-toolbar-group:last-child {
|
||
border-right: none;
|
||
padding-right: 0;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.eval-toolbar-group {
|
||
border-right: none;
|
||
padding-right: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.eval-label {
|
||
font-size: var(--text-sm);
|
||
color: var(--baseline-label);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-label--muted {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-select,
|
||
.eval-input {
|
||
font-family: inherit;
|
||
font-size: var(--text-sm);
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
max-width: 100%;
|
||
}
|
||
|
||
.eval-input--mono {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--link);
|
||
}
|
||
|
||
.eval-kicker {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.eval-compare-grid {
|
||
flex: 1;
|
||
min-height: 320px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-compare-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-inner-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.eval-inner-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-panel {
|
||
min-width: 0;
|
||
border-radius: var(--r-lg);
|
||
padding: var(--s-4);
|
||
overflow: auto;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-panel--baseline {
|
||
border-color: var(--baseline-border);
|
||
background: var(--baseline-bg);
|
||
}
|
||
|
||
.eval-panel h2,
|
||
.eval-panel h3 {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-md);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-panel--baseline h2,
|
||
.eval-panel--baseline h3 {
|
||
color: var(--baseline-label);
|
||
}
|
||
|
||
.eval-muted {
|
||
color: var(--text-muted);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-mono-inline {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--link);
|
||
}
|
||
|
||
/* Message bubbles */
|
||
|
||
.eval-turn-user,
|
||
.eval-turn-ai {
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-md);
|
||
font-size: var(--text-sm);
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-turn-user {
|
||
background: #1a2d44;
|
||
}
|
||
|
||
.eval-turn-ai {
|
||
background: var(--bg-muted);
|
||
}
|
||
|
||
.eval-msg-row {
|
||
align-self: stretch;
|
||
max-width: 92%;
|
||
}
|
||
|
||
.eval-msg-row--human {
|
||
align-self: flex-end;
|
||
}
|
||
|
||
.eval-msg-meta {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-faint);
|
||
margin-bottom: var(--s-1);
|
||
}
|
||
|
||
.eval-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-4);
|
||
}
|
||
|
||
/* Judge section */
|
||
|
||
.eval-judge {
|
||
border: 1px solid var(--accent);
|
||
border-radius: var(--r-lg);
|
||
padding: var(--s-4);
|
||
background: var(--accent-muted);
|
||
}
|
||
|
||
.eval-judge h3 {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-md);
|
||
font-weight: 600;
|
||
color: color-mix(in oklab, var(--accent) 80%, white);
|
||
}
|
||
|
||
.eval-judge-note {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-faint);
|
||
line-height: 1.55;
|
||
max-width: 75ch;
|
||
}
|
||
|
||
.eval-score {
|
||
font-size: 1.35rem;
|
||
font-weight: 600;
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-score--warm {
|
||
color: #e6a84e;
|
||
}
|
||
|
||
.eval-score--cool {
|
||
color: var(--link);
|
||
}
|
||
|
||
/* JSON preview */
|
||
|
||
.eval-json {
|
||
margin: var(--s-2) 0 0;
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-md);
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.45;
|
||
overflow: auto;
|
||
max-height: 220px;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* Session list */
|
||
|
||
.eval-session-list {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: var(--s-3);
|
||
background: var(--bg-elevated);
|
||
max-height: 220px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.eval-list-plain {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.eval-list-plain li {
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-page-title {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-xl);
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.eval-page-intro {
|
||
margin: 0 0 var(--s-4);
|
||
color: var(--text-muted);
|
||
font-size: var(--text-sm);
|
||
max-width: 65ch;
|
||
}
|
||
|
||
.eval-admin-tabs {
|
||
display: flex;
|
||
gap: var(--s-2);
|
||
margin-bottom: var(--s-5);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.eval-form-block textarea {
|
||
width: 100%;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
padding: var(--s-3);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-stream {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
padding: var(--s-3);
|
||
background: var(--bg);
|
||
min-height: 120px;
|
||
max-height: 360px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.eval-stream-body {
|
||
white-space: pre-wrap;
|
||
font-size: var(--text-sm);
|
||
line-height: 1.55;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.eval-error-list {
|
||
margin: 0 0 var(--s-3);
|
||
padding-left: var(--s-4);
|
||
color: var(--danger-text);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-phase {
|
||
margin: 0 0 var(--s-2);
|
||
color: var(--baseline-label);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-ping-ok {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.eval-ping-bad {
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
/* App shell + sidebar */
|
||
|
||
.eval-shell--app {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.eval-sidebar {
|
||
width: 230px;
|
||
flex-shrink: 0;
|
||
background: var(--bg-elevated);
|
||
border-right: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: var(--s-4) var(--s-3);
|
||
}
|
||
|
||
.eval-sidebar__brand {
|
||
margin-bottom: var(--s-5);
|
||
}
|
||
|
||
.eval-sidebar__title {
|
||
font-weight: 700;
|
||
font-size: var(--text-md);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.eval-sidebar__subtitle {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-faint);
|
||
margin-top: var(--s-1);
|
||
}
|
||
|
||
.eval-sidebar__nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-1);
|
||
flex: 1;
|
||
}
|
||
|
||
.eval-sidebar__link {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
width: 100%;
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-md);
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.eval-sidebar__link:hover {
|
||
background: color-mix(in oklab, var(--text) 6%, transparent);
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-sidebar__link:focus-visible {
|
||
outline: 2px solid var(--focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.eval-sidebar__link.is-active {
|
||
background: color-mix(in oklab, var(--focus) 12%, transparent);
|
||
border-color: color-mix(in oklab, var(--focus) 35%, transparent);
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-sidebar__link-main {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-sidebar__link-sub {
|
||
font-size: var(--text-xs);
|
||
opacity: 0.85;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.eval-sidebar__footer {
|
||
margin-top: auto;
|
||
padding-top: var(--s-4);
|
||
border-top: 1px solid var(--border);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.eval-sidebar__meta {
|
||
margin-bottom: var(--s-2);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.eval-sidebar__ping {
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-sidebar__ping--ok {
|
||
color: var(--success-text);
|
||
}
|
||
|
||
.eval-sidebar__ping--bad {
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
.eval-sidebar__hint {
|
||
margin: 0;
|
||
}
|
||
|
||
.eval-app-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.eval-app-content {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
}
|
||
|
||
.eval-kbd {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-muted);
|
||
font-size: 0.8em;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.eval-shell--app {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.eval-sidebar {
|
||
width: 100%;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-sidebar__nav {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.eval-sidebar__link {
|
||
width: auto;
|
||
}
|
||
|
||
.eval-sidebar__footer {
|
||
width: 100%;
|
||
border-top: 1px solid var(--border);
|
||
padding-top: var(--s-2);
|
||
margin-top: var(--s-2);
|
||
}
|
||
}
|
||
|
||
/* Help overlay */
|
||
|
||
.eval-help-backdrop {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: color-mix(in oklab, var(--bg) 70%, black);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--s-4);
|
||
}
|
||
|
||
.eval-help-modal {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: var(--s-4);
|
||
max-width: 420px;
|
||
width: 100%;
|
||
box-shadow: 0 16px 48px color-mix(in oklab, black 45%, transparent);
|
||
}
|
||
|
||
.eval-help-modal h2 {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-md);
|
||
}
|
||
|
||
.eval-help-modal kbd {
|
||
margin-right: var(--s-2);
|
||
}
|
||
|
||
/* Score card */
|
||
|
||
.eval-scorecard {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
padding: var(--s-3);
|
||
background: var(--bg);
|
||
}
|
||
|
||
.eval-scorecard--baseline {
|
||
border-color: var(--baseline-border);
|
||
background: color-mix(in oklab, var(--baseline-bg) 80%, var(--bg));
|
||
}
|
||
|
||
.eval-scorecard__total {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--s-2);
|
||
margin-bottom: var(--s-3);
|
||
}
|
||
|
||
.eval-scorecard__total-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-scorecard__total-value {
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--link);
|
||
}
|
||
|
||
.eval-scorecard--baseline .eval-scorecard__total-value {
|
||
color: #e6a84e;
|
||
}
|
||
|
||
.eval-scorecard__total-max {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.eval-scorecard__breakdown {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-scorecard__breakdown li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: var(--s-1) 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-scorecard__dim {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-scorecard__rationale {
|
||
margin-bottom: var(--s-3);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-scorecard__rationale summary {
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-scorecard__rationale-body {
|
||
margin: var(--s-2) 0 0;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.eval-memoir-chapter-row {
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
/* Diff table */
|
||
|
||
.eval-diff-wrap {
|
||
margin-top: var(--s-3);
|
||
}
|
||
|
||
.eval-diff-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-diff-table th,
|
||
.eval-diff-table td {
|
||
border: 1px solid var(--border);
|
||
padding: var(--s-2) var(--s-3);
|
||
text-align: left;
|
||
}
|
||
|
||
.eval-diff-table th {
|
||
background: var(--bg-muted);
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-diff-table tr.is-selected td {
|
||
background: color-mix(in oklab, var(--focus) 8%, transparent);
|
||
}
|
||
|
||
.eval-diff__case-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--link);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
text-decoration: underline;
|
||
padding: 0;
|
||
}
|
||
|
||
.eval-diff__cell--up {
|
||
color: var(--success-text);
|
||
}
|
||
|
||
.eval-diff__cell--down {
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
.eval-diff__cell--flat,
|
||
.eval-diff__cell--na {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-diff-drawer {
|
||
margin-top: var(--s-3);
|
||
padding: var(--s-3);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-diff-drawer__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-diff-drawer__cols {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.eval-diff-drawer__cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Badges */
|
||
|
||
.eval-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.eval-badge--ok {
|
||
background: var(--success-bg);
|
||
color: var(--success-text);
|
||
}
|
||
|
||
.eval-badge--bad {
|
||
background: var(--danger-bg);
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
.eval-badge--run {
|
||
background: color-mix(in oklab, var(--focus) 20%, var(--bg));
|
||
color: var(--focus);
|
||
}
|
||
|
||
.eval-badge--neutral {
|
||
background: var(--bg-muted);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Empty state */
|
||
|
||
.eval-empty {
|
||
padding: var(--s-6) var(--s-4);
|
||
text-align: center;
|
||
max-width: 400px;
|
||
margin: var(--s-5) auto;
|
||
}
|
||
|
||
.eval-empty__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-md);
|
||
}
|
||
|
||
.eval-empty__desc {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eval-empty__action {
|
||
margin-top: var(--s-4);
|
||
}
|
||
|
||
/* Page section */
|
||
|
||
.eval-section {
|
||
margin-bottom: var(--s-5);
|
||
}
|
||
|
||
.eval-section h2 {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-md);
|
||
}
|