105b50a277
* feat(api): implement Google OAuth login and user management - Added Google OpenID Connect login functionality, allowing users to authenticate using their Google accounts. - Created new endpoints for Google login, including user registration and linking existing accounts. - Introduced Google token verification logic and error handling for authentication failures. - Updated environment configuration to include Google OAuth client IDs and verification settings. - Enhanced user model to support OpenID and linked Google accounts. This feature improves user experience by enabling seamless sign-in with Google, while maintaining security and integrity of user data. * fix(auth): wire staging Google token verifier * chore(deps): update expo to version 55.0.6 and adjust @expo/env dependency in pnpm-lock.yaml * chore(deps): update Babel dependencies to version 7.29.7 in package-lock.json * feat(auth): enhance phone login for China users - Updated phone login functionality to support only mainland China (+86) mobile numbers. - Added user prompts and descriptions for phone login, including confirmation and cancellation options. - Adjusted translations for both English and Chinese to reflect the new phone login requirements. - Updated Google OAuth client IDs in configuration files for production and staging environments. * chore(deps): add peer flag to use-sync-external-store in package-lock.json * chore(deps): add @emnapi/core and @emnapi/runtime to package-lock.json * fix(app-expo): align Android native dependencies * fix(app-expo): normalize lockfile for npm 10 * fix(config): update environment variable handling to use static access - Introduced a static mapping for public environment variables to ensure proper access during the release bundle. - Updated the `requirePublicEnv` and `optionalPublicEnv` functions to reference the new `PUBLIC_ENV` object instead of directly accessing `process.env`. - Added comments to clarify the necessity of static access for certain environment variables. * feat(app-expo): dark mode, FAQ i18n, eval ASR, and theme cleanup (#34) * feat(app-expo): dark mode, FAQ i18n, version CI, and theme cleanup Implement light/dark scene colors across chat, reading, and headers; remove default/brand theme picker and ThemeVariablesProvider. Localize FAQ in-app, fix dark-mode text visibility, and remove the unused /api/faqs endpoint. Align About/version with Expo config and inject APP_VERSION in CI builds. Also includes phone E164 auth/SMS updates, eval ASR page, and related API work. * revert: remove phone E.164 changes from dark-mode branch These auth/SMS internationalization updates were accidentally bundled into the dark-mode commit; restore 11-digit CN phone flow and drop related API, migration, and Expo UI work from this branch. * fix: address PR review issues for dark mode and eval ASR Use light foreground colors for sepia reading in dark mode, fix chat send button contrast, stream-limit eval ASR uploads, restore LiveTester phone validation, and remove unused AudioSegmenter code. * fix(app-expo): improve chat send button contrast in light and dark mode Add dedicated send button colors (accent fill in dark, primary fill in light), use RNText to avoid NativeWind overrides, and restore dark labels in light mode for readable composer actions. --------- Co-authored-by: Kevin <kevin@brighteng.org> --------- Co-authored-by: penghanyuan <penghanyuan@gmail.com> Co-authored-by: Kevin <kevin@brighteng.org>
2446 lines
44 KiB
CSS
2446 lines
44 KiB
CSS
/* Life Echo — 回归评测台：paper studio tokens + layout */
|
||
|
||
:root {
|
||
--bg: oklch(0.97 0.014 88);
|
||
--bg-elevated: oklch(0.99 0.008 88);
|
||
--bg-muted: oklch(0.935 0.022 86);
|
||
--border: oklch(0.88 0.018 86);
|
||
--border-strong: oklch(0.78 0.022 86);
|
||
--text: oklch(0.27 0.028 264);
|
||
--text-muted: oklch(0.46 0.03 264);
|
||
--text-faint: oklch(0.58 0.022 95);
|
||
--baseline-bg: oklch(0.965 0.035 78);
|
||
--baseline-border: oklch(0.62 0.1 72);
|
||
--baseline-label: oklch(0.44 0.1 68);
|
||
--accent: oklch(0.4 0.085 195);
|
||
--accent-hover: oklch(0.35 0.092 195);
|
||
--accent-muted: oklch(0.93 0.035 195);
|
||
--link: oklch(0.4 0.11 255);
|
||
--danger-bg: oklch(0.965 0.028 18);
|
||
--danger-text: oklch(0.43 0.17 22);
|
||
--danger-border: oklch(0.82 0.06 22);
|
||
--success-bg: oklch(0.955 0.032 158);
|
||
--success-text: oklch(0.38 0.12 158);
|
||
--success-border: oklch(0.78 0.08 158);
|
||
--info-bg: oklch(0.965 0.02 250);
|
||
--focus: oklch(0.46 0.14 255);
|
||
--btn-primary-text: oklch(0.99 0.006 95);
|
||
--score-warm: oklch(0.52 0.13 72);
|
||
--turn-user-bg: oklch(0.93 0.028 245);
|
||
--turn-ai-bg: oklch(0.96 0.014 88);
|
||
--baseline-turn-user-bg: oklch(0.94 0.048 72);
|
||
--baseline-turn-user-border: oklch(0.72 0.085 70);
|
||
--baseline-turn-ai-bg: oklch(0.93 0.04 78);
|
||
--baseline-turn-ai-border: oklch(0.72 0.085 70);
|
||
--overlay-scrim: oklch(0.35 0.04 264 / 0.38);
|
||
--shadow-modal: oklch(0.35 0.03 264 / 0.12);
|
||
|
||
--font-sans: "Noto Serif SC", "Noto Serif", ui-serif, serif;
|
||
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
||
|
||
--text-xs: 0.75rem;
|
||
--text-sm: 0.8125rem;
|
||
--text-body: 0.9375rem;
|
||
--text-md: 1rem;
|
||
--text-lg: clamp(1.05rem, 1vw + 0.9rem, 1.125rem);
|
||
--text-xl: clamp(1.2rem, 1.35vw + 1rem, 1.45rem);
|
||
|
||
--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 {
|
||
color-scheme: light;
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
line-height: 1.55;
|
||
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);
|
||
animation: eval-notice-in 0.2s ease-out;
|
||
}
|
||
|
||
@keyframes eval-notice-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-4px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.eval-notice {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.eval-notice--error {
|
||
background: var(--danger-bg);
|
||
color: var(--danger-text);
|
||
border-color: var(--danger-border);
|
||
}
|
||
|
||
.eval-notice--success {
|
||
background: var(--success-bg);
|
||
color: var(--success-text);
|
||
border-color: var(--success-border);
|
||
}
|
||
|
||
.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: var(--btn-primary-text);
|
||
}
|
||
|
||
.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-main--memoir {
|
||
max-width: min(1480px, 100%);
|
||
margin: 0 auto;
|
||
padding: var(--s-5) var(--s-4);
|
||
}
|
||
|
||
.eval-page-intro--memoir {
|
||
max-width: 68ch;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Memoir compare: baseline vs DB snapshot */
|
||
|
||
.eval-memoir-panel--compare-wrap {
|
||
margin-bottom: var(--s-4);
|
||
}
|
||
|
||
/* 工具栏：两行避免控件挤成一团；用户 ID 与按钮分离 */
|
||
.eval-memoir-toolbar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-3);
|
||
margin-bottom: var(--s-4);
|
||
padding: var(--s-3) var(--s-4);
|
||
border-radius: var(--r-lg);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-memoir-toolbar__primary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
gap: var(--s-4);
|
||
}
|
||
|
||
.eval-memoir-toolbar__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
padding-top: var(--s-2);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
min-width: min(100%, 360px);
|
||
flex: 1 1 280px;
|
||
}
|
||
|
||
.eval-memoir-field__control {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-memoir-field__control .eval-input {
|
||
flex: 1 1 200px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.eval-memoir-meta-bar {
|
||
margin: calc(-1 * var(--s-2)) 0 var(--s-4);
|
||
padding: var(--s-2) var(--s-3);
|
||
font-size: var(--text-sm);
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg-muted);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-meta-bar strong {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Phase tag (inline badge in meta bar) ── */
|
||
.eval-memoir-phase-tag {
|
||
display: inline-block;
|
||
margin-left: var(--s-3);
|
||
padding: 0.15em 0.55em;
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
border-radius: var(--r-sm);
|
||
vertical-align: middle;
|
||
}
|
||
.eval-memoir-phase-tag--active {
|
||
background: var(--accent-muted);
|
||
color: var(--accent);
|
||
animation: eval-memoir-pulse 1.4s ease-in-out infinite;
|
||
}
|
||
.eval-memoir-phase-tag--done {
|
||
background: var(--success-bg);
|
||
color: var(--success-text);
|
||
}
|
||
.eval-memoir-phase-tag--error {
|
||
background: var(--danger-bg);
|
||
color: var(--danger-text);
|
||
}
|
||
@keyframes eval-memoir-pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: .55; }
|
||
}
|
||
|
||
/* ── Progress bar ── */
|
||
.eval-memoir-progress {
|
||
height: 4px;
|
||
margin: 0 0 var(--s-3);
|
||
border-radius: 2px;
|
||
background: var(--bg-muted);
|
||
overflow: hidden;
|
||
}
|
||
.eval-memoir-progress__bar {
|
||
height: 100%;
|
||
background: var(--accent);
|
||
border-radius: 2px;
|
||
transition: width 0.35s ease;
|
||
}
|
||
|
||
/* ── Danger button ── */
|
||
.eval-btn--danger {
|
||
background: var(--danger-bg);
|
||
border-color: var(--danger-border);
|
||
color: var(--danger-text);
|
||
font-weight: 600;
|
||
}
|
||
.eval-btn--danger:hover:not(:disabled) {
|
||
background: oklch(0.94 0.04 18);
|
||
}
|
||
|
||
/* ── Raw JSON details toggle ── */
|
||
.eval-memoir-raw-detail summary {
|
||
font-size: var(--text-sm);
|
||
user-select: none;
|
||
}
|
||
|
||
.eval-memoir-compare {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--s-4);
|
||
align-items: stretch;
|
||
margin-bottom: var(--s-4);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-memoir-compare {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-memoir-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
max-height: min(78vh, 920px);
|
||
padding: var(--s-4);
|
||
border-radius: var(--r-lg);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
box-shadow: 0 1px 0 oklch(0.35 0.02 264 / 0.04);
|
||
}
|
||
|
||
/* 须写在基类之后，否则 max-height 仍会裁切整页对照 */
|
||
.eval-memoir-panel.eval-memoir-panel--full {
|
||
max-height: none;
|
||
overflow: visible;
|
||
}
|
||
|
||
.eval-memoir-panel--baseline {
|
||
background: var(--baseline-bg);
|
||
border-color: color-mix(in oklab, var(--baseline-border) 35%, var(--border));
|
||
}
|
||
|
||
.eval-memoir-panel--snapshot {
|
||
border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
|
||
}
|
||
|
||
.eval-memoir-panel__header {
|
||
flex-shrink: 0;
|
||
margin-bottom: var(--s-3);
|
||
padding-bottom: var(--s-3);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-panel__title {
|
||
margin: 0 0 var(--s-1);
|
||
font-size: var(--text-md);
|
||
font-weight: 650;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-memoir-panel__sub {
|
||
margin: 0;
|
||
font-size: var(--text-sm);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.eval-memoir-panel .eval-memoir-card-list {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding-right: var(--s-2);
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
/* 章节对照主面板内的 orphan 列表勿抢 flex 高度 */
|
||
.eval-memoir-panel--compare-wrap .eval-memoir-orphan .eval-memoir-card-list {
|
||
flex: 0 1 auto;
|
||
max-height: min(48vh, 560px);
|
||
}
|
||
|
||
.eval-memoir-snapshot {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.eval-memoir-snapshot__stats {
|
||
flex-shrink: 0;
|
||
font-size: var(--text-sm);
|
||
margin-bottom: var(--s-3);
|
||
}
|
||
|
||
.eval-memoir-snapshot__stats strong {
|
||
color: var(--text);
|
||
font-weight: 650;
|
||
}
|
||
|
||
.eval-memoir-snapshot__block {
|
||
flex-shrink: 0;
|
||
margin-bottom: var(--s-4);
|
||
}
|
||
|
||
.eval-memoir-snapshot__heading {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.eval-memoir-snapshot .eval-memoir-card-list {
|
||
max-height: min(52vh, 640px);
|
||
overflow-y: auto;
|
||
padding-right: var(--s-2);
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.eval-memoir-card-list--open {
|
||
max-height: min(70vh, 900px);
|
||
}
|
||
|
||
/* 章节逐条对照（单行行内两列） */
|
||
|
||
.eval-memoir-compare-flow {
|
||
min-height: 0;
|
||
}
|
||
|
||
.eval-memoir-compare-hint {
|
||
margin: 0 0 var(--s-4);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eval-memoir-compare-hint strong {
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-memoir-compare-empty {
|
||
margin: 0 0 var(--s-4);
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-md);
|
||
border: 1px dashed var(--border-strong);
|
||
background: var(--bg-muted);
|
||
}
|
||
|
||
.eval-memoir-diff-rows {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-4);
|
||
}
|
||
|
||
.eval-memoir-diff-row {
|
||
border-radius: var(--r-lg);
|
||
border: 1px solid var(--border);
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.eval-memoir-diff-row__bar {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-diff-row__bar-left {
|
||
padding: var(--s-2) var(--s-3);
|
||
background: var(--baseline-bg);
|
||
color: var(--baseline-label);
|
||
}
|
||
|
||
.eval-memoir-diff-row__bar-right {
|
||
padding: var(--s-2) var(--s-3);
|
||
background: color-mix(in oklab, var(--accent-muted) 55%, var(--bg-elevated));
|
||
color: var(--accent-hover);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-memoir-diff-row__score {
|
||
font-weight: 500;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-memoir-diff-row__nomatch {
|
||
font-weight: 600;
|
||
color: var(--danger-text);
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.eval-memoir-diff-row__grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-memoir-diff-row__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.eval-memoir-diff-row__bar {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-memoir-diff-row__cell {
|
||
padding: var(--s-3);
|
||
min-height: 4rem;
|
||
max-height: min(62vh, 640px);
|
||
overflow-y: auto;
|
||
user-select: text;
|
||
cursor: auto;
|
||
}
|
||
|
||
.eval-memoir-diff-row__cell--baseline {
|
||
border-right: 1px solid var(--border);
|
||
background: oklch(0.99 0.012 78);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-memoir-diff-row__cell--baseline {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
}
|
||
|
||
.eval-memoir-diff-row__cell--draft {
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-memoir-diff-row__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-body);
|
||
font-weight: 650;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.eval-memoir-diff-row__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-memoir-diff-row__empty {
|
||
margin: 0;
|
||
}
|
||
|
||
.eval-memoir-orphan {
|
||
margin-top: var(--s-5);
|
||
padding-top: var(--s-4);
|
||
border-top: 1px dashed var(--border-strong);
|
||
}
|
||
|
||
.eval-memoir-orphan__title {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-memoir-card-list {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.eval-memoir-card {
|
||
margin-bottom: var(--s-3);
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-md);
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-panel--baseline .eval-memoir-card {
|
||
background: oklch(0.99 0.012 78);
|
||
}
|
||
|
||
.eval-memoir-card--story {
|
||
border-left: 3px solid color-mix(in oklab, var(--accent) 55%, var(--border));
|
||
}
|
||
|
||
.eval-memoir-card__head {
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-memoir-card__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-body);
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-memoir-card__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-memoir-card__id {
|
||
font-size: 0.75rem;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.eval-memoir-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--r-sm);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
background: var(--bg-muted);
|
||
color: var(--text-muted);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-memoir-badge--accent {
|
||
background: var(--accent-muted);
|
||
color: var(--accent-hover);
|
||
border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
|
||
}
|
||
|
||
.eval-memoir-raw-json {
|
||
margin-top: var(--s-3);
|
||
}
|
||
|
||
.eval-memoir-raw-json .eval-json {
|
||
max-height: min(50vh, 520px);
|
||
}
|
||
|
||
.eval-memoir-json-dump {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Markdown body (回忆录正文) */
|
||
|
||
.eval-md-wrap {
|
||
min-width: 0;
|
||
}
|
||
|
||
.eval-md-toolbar {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-json-preview-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-copy-btn {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.eval-md {
|
||
font-size: var(--text-sm);
|
||
line-height: 1.65;
|
||
color: var(--text);
|
||
overflow-wrap: anywhere;
|
||
user-select: text;
|
||
cursor: text;
|
||
}
|
||
|
||
.eval-md > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.eval-md > *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.eval-md p {
|
||
margin: 0.65em 0;
|
||
}
|
||
|
||
.eval-md h1,
|
||
.eval-md h2,
|
||
.eval-md h3,
|
||
.eval-md h4 {
|
||
margin: 1em 0 0.45em;
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-md h1 {
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
.eval-md h2 {
|
||
font-size: var(--text-md);
|
||
}
|
||
|
||
.eval-md h3,
|
||
.eval-md h4 {
|
||
font-size: var(--text-body);
|
||
}
|
||
|
||
.eval-md ul,
|
||
.eval-md ol {
|
||
margin: 0.5em 0;
|
||
padding-left: 1.25rem;
|
||
}
|
||
|
||
.eval-md li {
|
||
margin: 0.25em 0;
|
||
}
|
||
|
||
.eval-md blockquote {
|
||
margin: 0.65em 0;
|
||
padding: var(--s-2) var(--s-3);
|
||
border-left: 3px solid var(--accent-muted);
|
||
background: var(--bg-muted);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-md hr {
|
||
border: none;
|
||
border-top: 1px solid var(--border);
|
||
margin: var(--s-4) 0;
|
||
}
|
||
|
||
.eval-md a {
|
||
word-break: break-word;
|
||
}
|
||
|
||
.eval-md code {
|
||
font-size: 0.9em;
|
||
padding: 0.1em 0.35em;
|
||
border-radius: 4px;
|
||
background: var(--bg-muted);
|
||
}
|
||
|
||
.eval-md pre {
|
||
margin: 0.65em 0;
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-md);
|
||
background: oklch(0.22 0.02 264);
|
||
color: oklch(0.93 0.01 95);
|
||
overflow-x: auto;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-md pre code {
|
||
background: none;
|
||
padding: 0;
|
||
color: inherit;
|
||
}
|
||
|
||
.eval-md strong {
|
||
font-weight: 650;
|
||
}
|
||
|
||
.eval-md-empty {
|
||
margin: 0;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.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-wizard {
|
||
margin: var(--s-4) 0;
|
||
}
|
||
|
||
.eval-wizard__steps {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-wizard__step {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
padding: var(--s-2) var(--s-3);
|
||
border-radius: var(--r-lg);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-wizard__step--current {
|
||
border-color: var(--link);
|
||
color: var(--text);
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 35%, transparent);
|
||
}
|
||
|
||
.eval-wizard__step--done {
|
||
border-color: color-mix(in srgb, var(--baseline-label) 50%, var(--border));
|
||
color: var(--baseline-label);
|
||
}
|
||
|
||
.eval-wizard__num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
border-radius: 999px;
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
background: var(--border);
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-wizard__step--current .eval-wizard__num {
|
||
background: var(--link);
|
||
color: var(--bg);
|
||
}
|
||
|
||
.eval-wizard__step--done .eval-wizard__num {
|
||
background: color-mix(in srgb, var(--baseline-label) 25%, var(--border));
|
||
}
|
||
|
||
.eval-wizard-panel {
|
||
margin: var(--s-4) 0 var(--s-3);
|
||
padding: var(--s-3) var(--s-4);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
background: color-mix(in srgb, var(--bg-elevated) 88%, var(--border));
|
||
}
|
||
|
||
.eval-wizard-panel__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-md);
|
||
font-weight: 600;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-wizard-panel__kicker {
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--link);
|
||
}
|
||
|
||
.eval-wizard-panel__lede {
|
||
margin: 0;
|
||
font-size: var(--text-sm);
|
||
line-height: 1.55;
|
||
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;
|
||
}
|
||
}
|
||
|
||
/* Playground: 按轮对齐的基线 | 实际 条带 */
|
||
|
||
.eval-compare-turns {
|
||
flex: 1;
|
||
min-height: 240px;
|
||
}
|
||
|
||
.eval-compare-turns__intro {
|
||
font-size: var(--text-sm);
|
||
margin: 0 0 var(--s-3);
|
||
}
|
||
|
||
.eval-turn-row-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-4);
|
||
}
|
||
|
||
.eval-turn-row {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
background: var(--bg-elevated);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.eval-turn-row__head {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--s-2);
|
||
padding: var(--s-2) var(--s-3);
|
||
background: color-mix(in oklab, var(--bg-elevated) 88%, var(--border));
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-turn-row__title {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-turn-row__chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-turn-chip {
|
||
padding: 2px var(--s-2);
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--border);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.eval-turn-chip--baseline {
|
||
border-color: var(--baseline-border);
|
||
color: var(--baseline-label);
|
||
background: var(--baseline-bg);
|
||
}
|
||
|
||
.eval-turn-chip--actual {
|
||
border-color: color-mix(in oklab, var(--link) 35%, var(--border));
|
||
color: var(--link);
|
||
}
|
||
|
||
.eval-turn-row__cells {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: 0;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-turn-row__cells {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-turn-row__cell {
|
||
min-width: 0;
|
||
padding: var(--s-3);
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-turn-row__cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.eval-turn-row__cell {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.eval-turn-row__cell:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.eval-turn-row__cell--baseline {
|
||
background: var(--baseline-bg);
|
||
}
|
||
|
||
.eval-turn-row__cell--baseline .eval-turn-user--in-row {
|
||
background: var(--baseline-turn-user-bg);
|
||
border-color: var(--baseline-turn-user-border);
|
||
}
|
||
|
||
.eval-turn-row__cell--baseline .eval-turn-ai--in-row {
|
||
background: var(--baseline-turn-ai-bg);
|
||
border-color: var(--baseline-turn-ai-border);
|
||
}
|
||
|
||
.eval-checkbox-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--s-1);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.eval-checkbox-label input[disabled] {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.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: var(--turn-user-bg);
|
||
border-color: color-mix(in oklab, var(--border-strong) 70%, var(--link));
|
||
}
|
||
|
||
.eval-turn-ai {
|
||
background: var(--turn-ai-bg);
|
||
}
|
||
|
||
.eval-panel--baseline .eval-turn-user {
|
||
background: var(--baseline-turn-user-bg);
|
||
border-color: var(--baseline-turn-user-border);
|
||
}
|
||
|
||
.eval-panel--baseline .eval-turn-ai {
|
||
background: var(--baseline-turn-ai-bg);
|
||
border-color: var(--baseline-turn-ai-border);
|
||
}
|
||
|
||
.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-msg-meta--baseline {
|
||
color: var(--baseline-label);
|
||
}
|
||
|
||
.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--memoir {
|
||
margin-top: var(--s-5);
|
||
border-color: color-mix(in oklab, var(--border) 55%, var(--accent));
|
||
background: color-mix(in oklab, var(--bg-elevated) 88%, 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) 55%, var(--text));
|
||
}
|
||
|
||
.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: var(--score-warm);
|
||
}
|
||
|
||
.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;
|
||
user-select: text;
|
||
cursor: text;
|
||
}
|
||
|
||
/* 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-error-banner {
|
||
margin-bottom: var(--s-4);
|
||
padding: var(--s-3) var(--s-4);
|
||
border-radius: var(--r-md);
|
||
border: 1px solid var(--danger-border);
|
||
background: var(--danger-bg);
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
.eval-error-banner__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--s-3);
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.eval-error-banner__title {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-error-banner__dismiss {
|
||
flex-shrink: 0;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-error-banner__list {
|
||
margin: 0;
|
||
padding-left: var(--s-4);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eval-error-banner__item {
|
||
margin-bottom: var(--s-2);
|
||
word-break: break-word;
|
||
}
|
||
|
||
.eval-error-banner__item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.eval-saved-replays {
|
||
margin-bottom: var(--s-5);
|
||
padding: var(--s-3) var(--s-4);
|
||
border-radius: var(--r-md);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-saved-replays__title {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-md);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eval-saved-replays__hint {
|
||
margin: 0 0 var(--s-3);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eval-saved-replays__list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-saved-replays__row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--s-3);
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
}
|
||
|
||
.eval-saved-replays__main {
|
||
flex: 1;
|
||
min-width: min(100%, 280px);
|
||
}
|
||
|
||
.eval-saved-replays__line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: var(--s-2);
|
||
margin-bottom: var(--s-1);
|
||
}
|
||
|
||
.eval-saved-replays__meta {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-saved-replays__ids {
|
||
font-size: var(--text-xs);
|
||
line-height: 1.45;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.eval-saved-replays__actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.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: none;
|
||
box-shadow: 1px 0 0 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: var(--overlay-scrim);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--s-4);
|
||
animation: eval-backdrop-in 0.2s ease-out;
|
||
}
|
||
|
||
.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 1px 0 color-mix(in oklab, var(--text) 6%, transparent),
|
||
0 24px 48px var(--shadow-modal);
|
||
animation: eval-modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
@keyframes eval-backdrop-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes eval-modal-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(6px) scale(0.99);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.eval-help-backdrop,
|
||
.eval-help-modal {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.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: var(--score-warm);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.eval-memoir-chapter-block {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: var(--s-4);
|
||
margin-bottom: var(--s-4);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.eval-memoir-compare-section {
|
||
margin-top: var(--s-3);
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* Live tester (main API + WS) */
|
||
|
||
.eval-live-page {
|
||
padding-bottom: var(--s-6);
|
||
}
|
||
|
||
.eval-live-login,
|
||
.eval-live-session {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.eval-live-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-live-check {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.eval-live-error {
|
||
margin: 0;
|
||
color: var(--danger-text);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-live-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-live-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(220px, 320px);
|
||
gap: var(--s-4);
|
||
padding: 0 var(--s-4) var(--s-5);
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.eval-live-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.eval-live-col {
|
||
min-height: 0;
|
||
}
|
||
|
||
.eval-live-new {
|
||
width: 100%;
|
||
}
|
||
|
||
.eval-live-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: 52vh;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-1);
|
||
}
|
||
|
||
.eval-live-list__btn {
|
||
width: 100%;
|
||
text-align: left;
|
||
padding: var(--s-2) var(--s-3);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg-elevated);
|
||
font: inherit;
|
||
cursor: pointer;
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-live-list__btn:hover {
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
.eval-live-list__btn.is-active {
|
||
border-color: var(--accent);
|
||
background: var(--accent-muted);
|
||
}
|
||
|
||
.eval-live-list__title {
|
||
display: block;
|
||
font-weight: 600;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-live-list__sub {
|
||
display: block;
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.eval-live-messages {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
max-height: 36vh;
|
||
overflow: auto;
|
||
padding: var(--s-2);
|
||
background: var(--bg-muted);
|
||
border-radius: var(--r-md);
|
||
}
|
||
|
||
.eval-live-system-msg {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
align-items: baseline;
|
||
font-size: var(--text-xs);
|
||
color: var(--text-muted);
|
||
padding: var(--s-1) var(--s-2);
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg-elevated);
|
||
border: 1px dashed var(--border);
|
||
}
|
||
|
||
.eval-live-system-msg__k {
|
||
font-family: var(--font-mono);
|
||
color: var(--text-faint);
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.eval-live-system-msg__t {
|
||
word-break: break-word;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.eval-live-system-msg--error .eval-live-system-msg__k {
|
||
color: var(--danger-text);
|
||
}
|
||
|
||
.eval-live-compose {
|
||
margin-top: var(--s-3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.eval-live-compose .eval-textarea {
|
||
width: 100%;
|
||
resize: vertical;
|
||
min-height: 4.5rem;
|
||
padding: var(--s-2) var(--s-3);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-sm);
|
||
font: inherit;
|
||
background: var(--bg-elevated);
|
||
color: var(--text);
|
||
}
|
||
|
||
.eval-live-chapter-detail {
|
||
margin-top: var(--s-3);
|
||
}
|
||
|
||
.eval-live-chapter-detail h4 {
|
||
margin: 0 0 var(--s-2);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-live-chapter-meta {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: var(--s-1) var(--s-3);
|
||
margin: 0 0 var(--s-3);
|
||
padding: var(--s-2) var(--s-3);
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-sm);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.eval-live-chapter-meta dt {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.eval-live-chapter-meta dd {
|
||
margin: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.eval-live-chapter-body {
|
||
max-height: min(52vh, 28rem);
|
||
overflow: auto;
|
||
padding: var(--s-3);
|
||
background: var(--bg-muted);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
}
|
||
|
||
.eval-live-chapter-body .eval-md {
|
||
background: transparent;
|
||
}
|
||
|
||
.eval-live-chapter-raw {
|
||
margin-top: var(--s-3);
|
||
border-top: 1px solid var(--border);
|
||
padding-top: var(--s-2);
|
||
}
|
||
|
||
.eval-live-chapter-raw summary {
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
color: var(--text-muted);
|
||
user-select: none;
|
||
list-style: none;
|
||
}
|
||
|
||
.eval-live-chapter-raw summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.eval-live-chapter-raw summary::before {
|
||
content: "▸ ";
|
||
display: inline-block;
|
||
margin-right: var(--s-1);
|
||
transform: rotate(0deg);
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.eval-live-chapter-raw[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.eval-live-chapter-raw .eval-live-pre {
|
||
margin-top: var(--s-2);
|
||
}
|
||
|
||
.eval-live-pre {
|
||
margin: 0;
|
||
padding: var(--s-3);
|
||
background: var(--bg-muted);
|
||
border-radius: var(--r-sm);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
overflow: auto;
|
||
max-height: 40vh;
|
||
}
|
||
|
||
/* ASR transcribe page */
|
||
|
||
.eval-asr-page .eval-asr-file {
|
||
min-width: min(100%, 320px);
|
||
}
|
||
|
||
.eval-asr-record-field {
|
||
min-width: min(100%, 280px);
|
||
}
|
||
|
||
.eval-asr-record-controls {
|
||
min-height: 2.25rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.eval-asr-recording-dot {
|
||
width: 0.55rem;
|
||
height: 0.55rem;
|
||
border-radius: 999px;
|
||
background: var(--danger-text);
|
||
animation: eval-asr-pulse 1.1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes eval-asr-pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.35;
|
||
}
|
||
}
|
||
|
||
.eval-asr-recording-time {
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.eval-asr-preview {
|
||
max-height: none;
|
||
}
|
||
|
||
.eval-asr-audio {
|
||
width: 100%;
|
||
}
|
||
|
||
.eval-asr-result {
|
||
min-height: 12rem;
|
||
}
|
||
|
||
.eval-asr-result__header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.eval-asr-transcript {
|
||
white-space: pre-wrap;
|
||
line-height: 1.65;
|
||
font-size: var(--text-body);
|
||
padding: var(--s-3);
|
||
border-radius: var(--r-md);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
min-height: 6rem;
|
||
overflow-wrap: anywhere;
|
||
user-select: text;
|
||
}
|
||
|
||
.eval-asr-transcript-empty {
|
||
margin: 0;
|
||
padding: var(--s-3);
|
||
}
|