mirror of
https://github.com/yaklang/yaklang-chrome-extension.git
synced 2026-09-22 03:10:43 +08:00
819 lines
77 KiB
CSS
819 lines
77 KiB
CSS
/* Options 工作台 —— 基于 src/styles/tokens.css 令牌,暗色由 html[data-theme='dark'] 自动切换 */
|
|
|
|
code, pre { font-family: var(--font-mono); }
|
|
pre { margin: 0; }
|
|
|
|
input[type='checkbox'] { width: 15px; height: 15px; flex: 0 0 auto; padding: 0; accent-color: var(--primary); }
|
|
|
|
/* ---------- 原生按钮(组件库之外的 <button>) ---------- */
|
|
.primary-button, .danger-button, .icon-button,
|
|
.page-heading > button:not(.ui-button),
|
|
.editor-actions > button:not(.ui-button),
|
|
.panel-title > button:not(.ui-button) {
|
|
min-height: 36px;
|
|
padding: 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--foreground);
|
|
font-size: var(--text-md);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
|
|
}
|
|
.page-heading > button:not(.ui-button):hover,
|
|
.editor-actions > button:not(.ui-button):hover,
|
|
.panel-title > button:not(.ui-button):hover { border-color: var(--muted); background: var(--surface-subtle); }
|
|
.primary-button { border-color: var(--primary-strong); background: var(--primary-strong); color: var(--primary-on-strong); }
|
|
.primary-button:hover { border-color: var(--primary-strong-hover); background: var(--primary-strong-hover); }
|
|
.danger-button { border-color: color-mix(in srgb, var(--danger) 35%, var(--surface)); color: var(--danger); }
|
|
.danger-button:hover { background: var(--danger-soft); }
|
|
.icon-button { width: 34px; height: 34px; min-height: 34px; padding: 0; }
|
|
.icon-button:hover { background: var(--surface-subtle); }
|
|
.icon-button.danger { color: var(--danger); }
|
|
.icon-button.danger:hover { background: var(--danger-soft); }
|
|
.primary-button:disabled, .danger-button:disabled, .icon-button:disabled,
|
|
.page-heading > button:not(.ui-button):disabled,
|
|
.editor-actions > button:not(.ui-button):disabled { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); cursor: not-allowed; }
|
|
.primary-button:focus-visible, .danger-button:focus-visible, .icon-button:focus-visible,
|
|
.page-heading > button:not(.ui-button):focus-visible,
|
|
.editor-actions > button:not(.ui-button):focus-visible,
|
|
.panel-title > button:not(.ui-button):focus-visible,
|
|
.data-row:focus-visible, .network-row:focus-visible, .recording-traces button:focus-visible,
|
|
.recording-pipeline-step > button:focus-visible,
|
|
.task-workflow-list button:focus-visible, .context-node-list button:focus-visible,
|
|
.sidebar nav button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--focus);
|
|
}
|
|
|
|
/* ---------- 布局骨架 ---------- */
|
|
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
|
|
/* 所有单列纵向 grid 容器必须显式 minmax(0,1fr),否则子元素 max-content 会撑破窄屏 */
|
|
.content-area, .section-view, .settings-form, .list-pane, .editor-pane, .rule-editor,
|
|
.pairing-workspace, .panel-policy-settings, .grant-editor, .protocol-panel,
|
|
.recording-section, .network-inspector, .context-primary, .context-inspector,
|
|
.context-inspector > section, .context-diff, .context-inventory, .context-node-browser,
|
|
.context-mode, .context-json, .context-utility-panel, .tab-picker, .tab-picker-group, .data-list,
|
|
.task-workflow-list, .cookie-transfer, .network-artifact { grid-template-columns: minmax(0, 1fr); }
|
|
.workspace { min-width: 0; position: relative; }
|
|
.content-area { max-width: 1440px; margin: 0 auto; padding: 22px 28px 36px; display: grid; gap: 16px; }
|
|
.workspace-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--text-md); }
|
|
.spin { animation: spin .8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@keyframes pulse { 50% { opacity: .35; } }
|
|
|
|
/* ---------- 侧栏(与全局表面一致,暗色主题随令牌切换) ---------- */
|
|
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
|
|
.sidebar-brand { height: 64px; padding: 0 14px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
|
|
.sidebar-brand .product-brand { width: 100%; color: var(--foreground); }
|
|
.sidebar nav { min-height: 0; padding: 10px 10px 16px; overflow-y: auto; display: grid; gap: 10px; scrollbar-width: thin; }
|
|
.sidebar-group { display: grid; gap: 2px; }
|
|
.sidebar-group__label { min-height: 24px; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; }
|
|
.sidebar-group__label svg { color: var(--primary); }
|
|
.sidebar nav button { width: 100%; height: 40px; padding: 0 10px; display: grid; grid-template-columns: 20px 1fr 14px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-strong); font-size: var(--text-md); font-weight: 500; text-align: left; cursor: pointer; transition: background-color .14s ease, color .14s ease; }
|
|
.sidebar nav button:hover { background: var(--surface-subtle); color: var(--foreground); }
|
|
.sidebar nav button.active { background: var(--surface-subtle); color: var(--foreground); box-shadow: inset 3px 0 0 var(--primary); }
|
|
.sidebar nav button.active svg:first-child { color: var(--primary); }
|
|
.sidebar nav button > svg:last-child { opacity: 0; }
|
|
.sidebar nav button.active > svg:last-child { opacity: 1; }
|
|
.sidebar-theme { margin-top: auto; padding: 12px 14px; display: grid; gap: 7px; border-top: 1px solid var(--border); }
|
|
.sidebar-theme > span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
|
|
.sidebar-theme select { height: 34px; }
|
|
.sidebar-status { min-height: 64px; padding: 12px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid var(--border); }
|
|
.sidebar-yakit-mark { position: relative; width: 28px; height: 28px; }
|
|
.sidebar-yakit-mark .yakit-mark { width: 28px; height: 28px; border-radius: 6px; }
|
|
.sidebar-status strong, .sidebar-status span { display: block; }
|
|
.sidebar-status strong { font-size: var(--text-sm); line-height: 17px; }
|
|
.sidebar-status div > span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.connection-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted); }
|
|
.connection-dot.connected { background: #45b981; }
|
|
.connection-dot.connecting, .connection-dot.negotiating { background: #e3a632; animation: pulse 1.3s infinite; }
|
|
.connection-dot.error { background: #e06e6e; }
|
|
|
|
/* ---------- 顶栏 ---------- */
|
|
.topbar { position: sticky; top: 0; z-index: 5; height: 60px; padding: 0 max(28px, (100% - 1440px) / 2 + 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: var(--background); }
|
|
.topbar-tab { min-width: 0; flex: 0 1 420px; height: 38px; padding: 0 6px 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.topbar-tab__favicon { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
|
|
.topbar-tab__favicon img { width: 16px; height: 16px; object-fit: contain; }
|
|
.topbar-workspace-context { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--muted-strong); }
|
|
.topbar-workspace-context > svg { color: var(--primary); }
|
|
.topbar-workspace-context strong, .topbar-workspace-context small { display: block; }
|
|
.topbar-workspace-context strong { color: var(--foreground); font-size: var(--text-sm); line-height: 16px; }
|
|
.topbar-workspace-context small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); line-height: 14px; }
|
|
.target-tab-select { min-width: 0; flex: 1; height: 36px; padding: 0 4px; border: 0; background: transparent; font-size: var(--text-md); }
|
|
.target-tab-select:focus-visible { box-shadow: none; }
|
|
.topbar-actions { display: flex; align-items: center; gap: 8px; }
|
|
|
|
/* ---------- 状态徽章 ---------- */
|
|
.permission-state, .large-status, .agent-runtime-state, .capture-state {
|
|
min-height: 30px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 3px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--muted-strong);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.permission-state.enabled, .large-status.connected, .agent-runtime-state.running {
|
|
border-color: color-mix(in srgb, var(--success) 38%, var(--surface));
|
|
background: var(--success-soft);
|
|
color: var(--success);
|
|
}
|
|
.large-status.connecting, .large-status.negotiating, .agent-runtime-state.paused, .agent-runtime-state.waiting_for_human {
|
|
border-color: color-mix(in srgb, var(--warning) 42%, var(--surface));
|
|
background: var(--warning-soft);
|
|
color: var(--warning);
|
|
}
|
|
.large-status.error, .agent-runtime-state.revoked, .agent-runtime-state.expired {
|
|
border-color: color-mix(in srgb, var(--danger) 38%, var(--surface));
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
.capture-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
|
|
.capture-state.active { border-color: color-mix(in srgb, var(--success) 38%, var(--surface)); background: var(--success-soft); color: var(--success); }
|
|
.capture-state.active i { background: var(--success); animation: pulse 1.4s infinite; }
|
|
|
|
/* ---------- 页面通用 ---------- */
|
|
.section-view { display: grid; gap: 16px; align-content: start; }
|
|
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
|
|
.page-heading h1 { margin: 0; font-size: var(--text-2xl); font-weight: 700; line-height: 28px; }
|
|
.page-heading p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 17px; }
|
|
.section-view h2 { margin: 0; font-size: var(--text-lg); font-weight: 650; }
|
|
.page-eyebrow { display: block; margin-bottom: 4px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
|
|
|
|
/* User-Agent 常用工具 */
|
|
.ua-current-site { min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: minmax(210px, .9fr) minmax(260px, 1fr) auto; align-items: center; gap: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
|
.ua-current-site > div:first-child { min-width: 0; }
|
|
.ua-current-site > div:first-child span, .ua-current-site > div:first-child strong, .ua-current-site > div:first-child small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.ua-current-site > div:first-child span { color: var(--muted); font-size: var(--text-xs); }
|
|
.ua-current-site > div:first-child strong { margin-top: 3px; font-size: var(--text-lg); }
|
|
.ua-current-site > div:first-child small { margin-top: 3px; color: var(--muted-strong); font-size: var(--text-sm); }
|
|
.ua-management { min-height: 420px; display: grid; grid-template-columns: minmax(420px, 1.35fr) minmax(320px, .8fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
|
.ua-assignments { min-width: 0; padding: 16px; border-right: 1px solid var(--border); }
|
|
.ua-profile-editor { min-width: 0; padding: 16px; display: grid; gap: 12px; align-content: start; }
|
|
.ua-assignment-list { margin-top: 12px; display: grid; }
|
|
.ua-assignment-list > div { min-height: 58px; display: grid; grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) 34px; align-items: center; gap: 12px; border-top: 1px solid var(--border); }
|
|
.ua-assignment-list > div:last-child { border-bottom: 1px solid var(--border); }
|
|
.ua-assignment-list strong, .ua-assignment-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.ua-assignment-list strong { font-size: var(--text-sm); }
|
|
.ua-assignment-list small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
|
|
.ua-assignment-list code { overflow: hidden; color: var(--muted-strong); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.custom-ua-list { display: grid; }
|
|
.custom-ua-list > div { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; border-top: 1px solid var(--border); }
|
|
.custom-ua-list > div:last-child { border-bottom: 1px solid var(--border); }
|
|
.custom-ua-list > div > button:first-child { min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
|
|
.custom-ua-list strong, .custom-ua-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.custom-ua-list strong { font-size: var(--text-sm); }
|
|
.custom-ua-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
|
|
.empty-state { min-height: 130px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius-md); color: var(--muted); font-size: var(--text-md); text-align: center; }
|
|
.status-good { color: var(--success); font-weight: 600; }
|
|
.status-error { color: var(--danger); font-weight: 600; }
|
|
.status-muted { color: var(--muted); }
|
|
.active-label { padding: 2px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
|
|
|
|
/* 代码/报文块 —— 浅色主题用浅灰嵌底,暗色主题用深面板 */
|
|
.network-packet, .invoke-result, .network-artifact pre, .context-json pre,
|
|
.proxy-tools pre, .recording-values pre, .recording-evidence pre, .recording-recipe-result pre {
|
|
margin: 0;
|
|
padding: 12px 13px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-subtle);
|
|
color: var(--foreground);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.55;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
[data-theme='dark'] .network-packet, [data-theme='dark'] .invoke-result, [data-theme='dark'] .network-artifact pre,
|
|
[data-theme='dark'] .context-json pre, [data-theme='dark'] .proxy-tools pre,
|
|
[data-theme='dark'] .recording-values pre, [data-theme='dark'] .recording-evidence pre,
|
|
[data-theme='dark'] .recording-recipe-result pre {
|
|
border-color: #262c33;
|
|
background: #12161b;
|
|
color: #d6dde4;
|
|
}
|
|
|
|
/* Toast */
|
|
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-md); font-weight: 500; }
|
|
.toast.ok { border: 1px solid color-mix(in srgb, var(--success) 38%, var(--surface)); background: var(--success-soft); color: var(--success); }
|
|
.toast.error { border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--surface)); background: var(--danger-soft); color: var(--danger); }
|
|
|
|
/* 人工接管横幅 */
|
|
.handoff-banner { padding: 14px 18px; display: flex; align-items: center; gap: 13px; border-left: 3px solid var(--warning); border-radius: var(--radius-lg); background: var(--warning-soft); box-shadow: var(--shadow-sm); }
|
|
.handoff-banner > svg { flex: 0 0 auto; color: var(--warning); }
|
|
.handoff-banner__copy { min-width: 0; flex: 1; }
|
|
.handoff-banner__copy span, .handoff-banner__copy strong, .handoff-banner__copy small { display: block; }
|
|
.handoff-banner__copy span { color: var(--warning); font-size: var(--text-sm); font-weight: 650; }
|
|
.handoff-banner__copy strong { margin-top: 2px; font-size: var(--text-md); line-height: 18px; overflow-wrap: anywhere; }
|
|
.handoff-banner__copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.handoff-banner__actions { display: flex; gap: 8px; }
|
|
|
|
/* ---------- 运行概览 ---------- */
|
|
.task-command-bar { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.task-site-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
|
|
.task-site-identity > svg { flex: 0 0 auto; color: var(--primary); }
|
|
.task-site-identity strong, .task-site-identity small { display: block; }
|
|
.task-site-identity strong { font-size: var(--text-md); font-weight: 650; line-height: 18px; }
|
|
.task-site-identity small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
|
|
.task-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.task-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
|
|
.task-status-grid section { min-width: 0; padding: 15px 16px 12px; display: grid; gap: 3px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.task-status-grid section.needs-attention { box-shadow: inset 3px 0 0 var(--warning), var(--shadow-sm); }
|
|
.task-status-grid span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.task-status-grid strong { margin-top: 4px; overflow: hidden; font-size: var(--text-lg); font-weight: 650; line-height: 19px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.task-status-grid small { min-height: 32px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; }
|
|
.task-status-grid button { margin: 8px -6px 0; padding: 4px 6px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--primary-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
|
|
.task-status-grid button:hover { background: var(--primary-soft); }
|
|
.task-workflow-list { display: grid; gap: 10px; }
|
|
.task-workflow-list button { min-height: 62px; padding: 10px 16px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 13px; align-items: center; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--foreground); text-align: left; cursor: pointer; transition: background-color .14s ease; }
|
|
.task-workflow-list button:hover { background: var(--surface-subtle); }
|
|
.task-workflow-list button > svg:first-child { color: var(--muted-strong); }
|
|
.task-workflow-list button:hover > svg:first-child { color: var(--primary); }
|
|
.task-workflow-list button > svg:last-child { color: var(--muted); }
|
|
.task-workflow-list strong, .task-workflow-list small { display: block; }
|
|
.task-workflow-list strong { font-size: var(--text-md); font-weight: 650; line-height: 18px; }
|
|
.task-workflow-list small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; }
|
|
|
|
/* ---------- 操作记录 ---------- */
|
|
.activity-view .activity-heading-actions, .network-heading-actions { display: flex; align-items: center; gap: 8px; }
|
|
.agent-runtime-band { padding: 15px 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.agent-runtime-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; }
|
|
.agent-runtime-summary span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.agent-runtime-summary strong, .agent-runtime-summary small { display: block; }
|
|
.agent-runtime-summary strong { margin-top: 4px; overflow: hidden; font-size: var(--text-lg); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
|
|
.agent-runtime-summary small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
|
|
.agent-runtime-controls { display: flex; gap: 8px; }
|
|
.agent-action-list { margin-top: 14px; display: grid; border-top: 1px solid var(--border); }
|
|
.agent-action-row { padding: 8px 2px; display: grid; grid-template-columns: 12px 84px minmax(160px, 1.4fr) minmax(80px, .6fr) 110px 76px; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
|
|
.agent-action-row code { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.agent-action-row strong { font-size: var(--text-sm); }
|
|
.agent-action-row strong.success { color: var(--success); }
|
|
.agent-action-row strong.error { color: var(--danger); }
|
|
.agent-actions-empty { margin-top: 14px; padding: 14px 4px 2px; color: var(--muted); font-size: var(--text-sm); }
|
|
.action-state { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
|
|
.action-state.success { background: var(--success); }
|
|
.action-state.error { background: var(--danger); }
|
|
.action-state.running { background: var(--primary); animation: pulse 1.2s infinite; }
|
|
.activity-subheading { margin-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
|
|
.activity-subheading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
|
|
.activity-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: var(--text-md); }
|
|
.activity-loading.error { color: var(--danger); }
|
|
.activity-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
|
|
.activity-table__head, .activity-table__row { padding: 0 16px; display: grid; grid-template-columns: 150px 86px minmax(150px, 1.1fr) minmax(150px, 1.2fr) 88px 72px; gap: 12px; align-items: center; }
|
|
.activity-table__head { min-height: 38px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.activity-table__row { min-height: 42px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
|
|
.activity-table__row:last-child { border-bottom: 0; }
|
|
.activity-table__row > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.activity-table__row code { font-size: var(--text-sm); }
|
|
.audit-outcome.success { color: var(--success); font-weight: 600; }
|
|
.audit-outcome.error { color: var(--danger); font-weight: 600; }
|
|
|
|
/* ---------- 分栏编辑页(代理配置 / 代理规则 / UA / Cookie) ---------- */
|
|
.split-view { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
|
|
.split-view, .rule-layout { display: grid; }
|
|
.rule-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
|
|
.list-pane, .editor-pane { min-width: 0; display: grid; gap: 14px; align-content: start; }
|
|
.editor-pane { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.editor-heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); word-break: break-all; }
|
|
.data-list { display: grid; gap: 8px; }
|
|
.data-row { min-height: 58px; padding: 8px 12px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 15px; gap: 10px; align-items: center; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--foreground); text-align: left; cursor: pointer; }
|
|
.data-row:hover { background: var(--surface-subtle); }
|
|
.data-row.selected { box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm); }
|
|
.data-row > svg:last-child { color: var(--muted); }
|
|
.data-row strong, .data-row small { display: block; }
|
|
.data-row strong { font-size: var(--text-md); font-weight: 600; }
|
|
.data-row small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.row-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted-strong); }
|
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.form-grid .ui-field:has(textarea), .form-grid .check-row { grid-column: 1 / -1; }
|
|
.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); }
|
|
.editor-actions { display: flex; gap: 8px; }
|
|
.rule-editor { min-width: 0; padding: 18px; display: grid; gap: 13px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.rule-editor > h2 { margin-bottom: 2px; }
|
|
.rule-editor > p { margin: -4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
|
|
.rule-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
|
|
.table-head, .table-row { padding: 0 16px; display: grid; gap: 12px; align-items: center; }
|
|
.table-head { min-height: 38px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.table-row { min-height: 46px; border-bottom: 1px solid var(--border); font-size: var(--text-md); }
|
|
.table-row:last-child { border-bottom: 0; }
|
|
.table-row > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.table-row code { font-size: var(--text-sm); }
|
|
.rule-table .table-head, .rule-table .table-row { grid-template-columns: minmax(110px, 1fr) minmax(180px, 2fr) minmax(110px, 1fr) 64px 34px; }
|
|
|
|
/* Cookie Editor */
|
|
.url-bar { display: flex; align-items: center; gap: 12px; }
|
|
.url-bar input { flex: 1; }
|
|
.url-bar > span { flex: 0 0 auto; color: var(--muted); font-size: var(--text-sm); }
|
|
.cookie-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
.cookie-toolbar select { width: auto; min-width: 108px; }
|
|
.cookie-toolbar .ui-button { margin-left: auto; }
|
|
.network-search { position: relative; min-width: 200px; flex: 1; }
|
|
.network-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
|
|
.network-search input { padding-left: 31px; }
|
|
.cookie-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
|
|
.cookie-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
|
|
.cookie-columns { padding: 0 14px; display: grid; grid-template-columns: 24px minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(120px, .9fr) minmax(110px, .8fr) 34px; gap: 10px; align-items: center; }
|
|
.cookie-group__heading { padding: 8px 14px 5px; display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
|
|
.cookie-group__heading span { font-weight: 500; text-transform: none; }
|
|
.cookie-name-button { padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
|
|
.cookie-name-button strong { display: block; overflow: hidden; font-size: var(--text-md); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
|
|
.cookie-name-button:hover strong { color: var(--primary-text); }
|
|
.cookie-value { min-width: 0; padding: 3px 6px; overflow: hidden; color: var(--muted-strong); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.cookie-columns > span > small { display: block; overflow: hidden; color: var(--muted); font-size: var(--text-sm); line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.tag-list i { padding: 1px 6px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-style: normal; font-weight: 600; }
|
|
.cookie-editor-pane { position: sticky; top: 76px; }
|
|
.cookie-transfer { display: grid; gap: 10px; }
|
|
.cookie-transfer .segmented { justify-self: start; }
|
|
.transfer-status { color: var(--muted); font-size: var(--text-sm); }
|
|
|
|
/* 分段选择器 */
|
|
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
|
|
.segmented button { min-width: 72px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
|
|
.segmented button.active { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }
|
|
.segmented button:disabled { opacity: .45; cursor: not-allowed; }
|
|
|
|
/* ---------- 网络活动 ---------- */
|
|
.network-control-bar { padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.network-control-bar > label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
|
|
.network-control-bar > label > span { display: block; }
|
|
.network-control-bar strong { font-size: var(--text-md); font-weight: 600; line-height: 17px; }
|
|
.network-control-bar small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--text-sm); }
|
|
.network-control-bar .network-search { flex: 1; min-width: 180px; }
|
|
.network-error { padding: 12px 16px; display: flex; align-items: center; gap: 9px; border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger); font-size: var(--text-md); }
|
|
.network-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 16px; align-items: start; }
|
|
.network-timeline { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
|
|
.network-table-head { padding: 0 16px; min-height: 38px; display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 88px 72px; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.network-row { width: 100%; padding: 9px 16px; display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 88px 72px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); font-size: var(--text-sm); text-align: left; cursor: pointer; }
|
|
.network-row:last-child { border-bottom: 0; }
|
|
.network-row:hover { background: var(--surface-subtle); }
|
|
.network-row.selected { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
|
|
.network-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.method { font-size: var(--text-sm); font-weight: 700; }
|
|
.method-get { color: var(--success); }
|
|
.method-post { color: var(--primary-text); }
|
|
.method-put, .method-patch { color: var(--warning); }
|
|
.method-delete { color: var(--danger); }
|
|
.network-target strong, .network-target small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.network-target strong { font-size: var(--text-md); font-weight: 600; }
|
|
.network-target small { margin-top: 1px; color: var(--muted); font-size: var(--text-sm); }
|
|
.network-inspector { min-width: 0; padding: 16px; display: grid; gap: 14px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 76px; }
|
|
.network-inspector__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.network-inspector__heading > div { min-width: 0; }
|
|
.network-inspector__heading > div > span { color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
|
|
.network-inspector__heading strong, .network-inspector__heading small { display: block; overflow: hidden; text-overflow: ellipsis; }
|
|
.network-inspector__heading strong { margin-top: 3px; font-size: var(--text-lg); font-weight: 650; word-break: break-all; }
|
|
.network-inspector__heading small { margin-top: 3px; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
|
|
.network-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
|
|
.network-meta > div { min-width: 0; }
|
|
.network-meta dt { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.network-meta dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
|
|
.network-packet-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.network-packet-heading > strong { font-size: var(--text-md); font-weight: 650; }
|
|
.network-packet-heading > div { display: flex; gap: 6px; align-items: center; }
|
|
.network-packet { max-height: 320px; white-space: pre; }
|
|
.network-limitations { padding: 9px 12px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning); font-size: var(--text-sm); line-height: 1.5; }
|
|
.network-preview-empty { padding: 18px 14px; display: flex; align-items: flex-start; gap: 9px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
|
|
.network-preview-empty svg { flex: 0 0 auto; margin-top: 1px; }
|
|
.network-artifact { display: grid; gap: 8px; }
|
|
.network-artifact > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.network-artifact strong { font-size: var(--text-md); font-weight: 650; }
|
|
.network-artifact pre { max-height: 260px; }
|
|
|
|
/* 浏览器现场录制：Trace -> Pipeline -> 证据与页面函数 */
|
|
.recording-section { display: grid; gap: 12px; }
|
|
.recording-heading { min-height: 54px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(230px, 1fr); align-items: end; gap: 16px; }
|
|
.recording-heading__identity > span { display: block; margin-bottom: 3px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
|
|
.recording-heading__actions { min-width: 230px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
|
|
.recording-heading__actions.is-inactive { visibility: hidden; pointer-events: none; }
|
|
.recording-mode-switch { height: 34px; padding: 3px; display: grid; grid-template-columns: repeat(3, auto); gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); }
|
|
.recording-mode-switch button { height: 28px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-strong); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
|
|
.recording-mode-switch button:disabled { cursor: not-allowed; opacity: .48; }
|
|
.recording-mode-switch button.is-selected { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }
|
|
.recording-mode-switch button.is-selected svg { color: var(--primary); }
|
|
.recording-mode-panel[hidden] { display: none; }
|
|
.recording-state { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
|
|
.recording-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
|
|
.recording-state.is-active { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); background: var(--danger-soft); color: var(--danger); }
|
|
.recording-state.is-active i { background: var(--danger); animation: pulse 1.2s infinite; }
|
|
.recording-controls { min-height: 52px; padding: 8px 10px 8px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
|
|
.recording-controls > label { min-width: 220px; display: flex; align-items: center; gap: 9px; }
|
|
.recording-controls > label span { min-width: 0; }
|
|
.recording-controls > label strong, .recording-controls > label small { display: block; }
|
|
.recording-controls > label strong { font-size: var(--text-sm); font-weight: 650; }
|
|
.recording-controls > label small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); }
|
|
.recording-summary { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-navigation { min-height: 58px; padding: 9px 13px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border)); border-radius: var(--radius-md); background: var(--warning-soft); }
|
|
.recording-navigation > svg { color: var(--warning); }
|
|
.recording-navigation.is-restored { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: var(--success-soft); }
|
|
.recording-navigation.is-restored > svg { color: var(--success); }
|
|
.recording-navigation.is-failed { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); background: var(--danger-soft); }
|
|
.recording-navigation.is-failed > svg { color: var(--danger); }
|
|
.recording-navigation > div { min-width: 0; }
|
|
.recording-navigation strong,
|
|
.recording-navigation span,
|
|
.recording-navigation code { display: block; }
|
|
.recording-navigation strong { font-size: var(--text-sm); }
|
|
.recording-navigation span { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.45; }
|
|
.recording-navigation code { margin-top: 3px; overflow: hidden; color: var(--muted-strong); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-error { min-height: 46px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
|
|
.recording-error .ui-button { margin-left: auto; }
|
|
.recording-empty { min-height: 230px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
|
|
.recording-empty svg { color: var(--border-strong); }
|
|
.recording-empty strong { font-size: var(--text-lg); }
|
|
.recording-empty span { max-width: 520px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
|
|
.recording-workbench { min-height: 560px; display: grid; grid-template-columns: minmax(210px, 240px) minmax(340px, 1fr) minmax(310px, 380px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
|
|
.recording-traces, .recording-pipeline, .recording-inspector { min-width: 0; min-height: 0; }
|
|
.recording-traces { border-right: 1px solid var(--border); background: var(--surface-subtle); }
|
|
.recording-traces > header, .recording-pipeline > header { min-height: 45px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
|
|
.recording-traces > header strong, .recording-pipeline > header strong { font-size: var(--text-sm); font-weight: 700; }
|
|
.recording-traces > header > div strong, .recording-traces > header > div small { display: block; }
|
|
.recording-traces > header > div small { margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 500; }
|
|
.recording-traces > header > span { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--text-xs); }
|
|
.recording-traces > div { max-height: 700px; overflow: auto; }
|
|
.recording-traces button { position: relative; width: 100%; min-height: 72px; padding: 10px 11px; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 0 9px; align-items: start; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
|
|
.recording-traces button:hover { background: var(--surface); }
|
|
.recording-traces button.is-selected { background: var(--surface); box-shadow: inset 3px 0 0 var(--primary); }
|
|
.recording-trace-index { width: 31px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-strong); font: 700 10px/1 var(--font-mono); letter-spacing: .03em; }
|
|
.recording-traces button.is-selected .recording-trace-index { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--primary-soft); color: var(--primary-text); }
|
|
.recording-traces button > span:nth-child(2) { min-width: 0; }
|
|
.recording-traces button strong, .recording-traces button small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-traces button strong { font-size: var(--text-sm); font-weight: 650; }
|
|
.recording-traces button small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
|
|
.recording-traces button time { grid-column: 2; margin-top: 5px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
|
|
.recording-traces button time i { padding-left: 7px; border-left: 1px solid var(--border); color: var(--muted-strong); font-style: normal; }
|
|
.recording-pipeline { border-right: 1px solid var(--border); }
|
|
.recording-pipeline > header > div { min-width: 0; }
|
|
.recording-pipeline > header > div strong, .recording-pipeline > header > div span { display: block; }
|
|
.recording-pipeline > header > div span { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); }
|
|
.recording-pipeline > header > i { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: var(--text-xs); font-style: normal; white-space: nowrap; }
|
|
.recording-pipeline__body { max-height: 700px; padding: 13px 13px 18px 10px; overflow: auto; }
|
|
.recording-pipeline-step { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: stretch; }
|
|
.recording-step-rail { min-height: 73px; display: grid; grid-template-rows: 30px minmax(0, 1fr); justify-items: center; color: var(--muted); }
|
|
.recording-step-rail > i { position: relative; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted-strong); font: 700 9px/1 var(--font-mono); font-style: normal; }
|
|
.recording-step-rail > span { width: 1px; min-height: 43px; display: grid; align-items: end; justify-items: center; background: var(--border); color: var(--muted); }
|
|
.recording-step-rail > span svg { width: 11px; margin: 0 0 -5px; padding: 1px 0; background: var(--background); }
|
|
.recording-pipeline-step.is-navigation .recording-step-rail > i { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: var(--warning-soft); color: var(--warning); }
|
|
.recording-pipeline-step > button { width: 100%; min-height: 73px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--foreground); text-align: left; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
|
|
.recording-pipeline-step > button:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
|
|
.recording-pipeline-step > button.is-linked { border-left: 3px solid var(--success); }
|
|
.recording-pipeline-step > button.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus); }
|
|
.recording-pipeline-step.is-navigation > button { margin: 4px 0 9px; border-style: dashed; border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); }
|
|
.recording-event-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted-strong); }
|
|
.recording-event-icon.kind-crypto { background: var(--warning-soft); color: var(--warning); }
|
|
.recording-event-icon.kind-fetch, .recording-event-icon.kind-xhr, .recording-event-icon.kind-form { background: var(--primary-soft); color: var(--primary-text); }
|
|
.recording-event-icon.kind-websocket { background: var(--success-soft); color: var(--success); }
|
|
.recording-event-icon.kind-navigation { background: var(--warning-soft); color: var(--warning); }
|
|
.recording-pipeline-step button > span:nth-child(2) { min-width: 0; }
|
|
.recording-pipeline-step small, .recording-pipeline-step strong, .recording-pipeline-step em, .recording-pipeline-step b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-pipeline-step small { color: var(--muted); font-size: 10px; font-weight: 650; }
|
|
.recording-pipeline-step strong { margin-top: 2px; font-size: var(--text-sm); font-weight: 650; }
|
|
.recording-pipeline-step em { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); font-style: normal; }
|
|
.recording-pipeline-step b { margin-top: 4px; color: var(--warning); font-size: 10px; font-weight: 650; }
|
|
.recording-event-meta { display: grid; justify-items: end; gap: 5px; }
|
|
.recording-event-meta i { padding: 2px 6px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-style: normal; white-space: nowrap; }
|
|
.recording-event-meta i.is-history { background: var(--surface-strong); color: var(--muted); }
|
|
.recording-event-meta time { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
|
|
.recording-event-meta small { color: var(--muted); font-size: 10px; font-weight: 500; white-space: nowrap; }
|
|
.recording-inspector > dl.recording-navigation-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.recording-inspector > dl.recording-navigation-detail div:nth-child(odd) { border-left: 0; }
|
|
.recording-inspector > dl.recording-navigation-detail div:nth-child(n + 3) { border-top: 1px solid var(--border); }
|
|
.recording-navigation-detail dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-column-empty { min-height: 180px; padding: 24px; display: grid; place-items: center; color: var(--muted); font-size: var(--text-sm); text-align: center; }
|
|
.recording-inspector { max-height: 746px; padding: 14px; overflow: auto; display: grid; gap: 14px; align-content: start; }
|
|
.recording-inspector > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
|
.recording-inspector > header > div { min-width: 0; }
|
|
.recording-inspector > header span, .recording-inspector > header strong, .recording-inspector > header small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-inspector > header span { color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
|
|
.recording-inspector > header strong { margin-top: 3px; font-size: var(--text-lg); }
|
|
.recording-inspector > header small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
|
|
.recording-inspector > header > i { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); font-style: normal; }
|
|
.recording-inspector > header > i.is-error { color: var(--danger); font-weight: 700; }
|
|
.recording-inspector > dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|
.recording-inspector > dl div { min-width: 0; padding: 9px 5px; text-align: center; }
|
|
.recording-inspector > dl div + div { border-left: 1px solid var(--border); }
|
|
.recording-inspector dt { color: var(--muted); font-size: 10px; }
|
|
.recording-inspector dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-values { display: grid; gap: 6px; }
|
|
.recording-values > strong { font-size: var(--text-sm); }
|
|
.recording-values pre, .recording-evidence pre { max-height: 160px; }
|
|
.recording-evidence { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|
.recording-evidence summary { padding: 9px 0; color: var(--muted-strong); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
|
|
.recording-evidence[open] { padding-bottom: 10px; }
|
|
.profile-inference { padding: 11px 0 0; display: grid; gap: 10px; border-top: 2px solid var(--primary); }
|
|
.profile-inference.is-medium { border-top-color: var(--warning); }
|
|
.profile-inference.is-low { border-top-color: var(--border-strong); }
|
|
.profile-inference__heading { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
|
|
.profile-inference__mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
|
|
.profile-inference__heading > span:nth-child(2) { min-width: 0; }
|
|
.profile-inference__heading small, .profile-inference__heading strong { display: block; }
|
|
.profile-inference__heading small { color: var(--primary-text); font-size: var(--text-xs); font-weight: 700; }
|
|
.profile-inference__heading strong { margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; }
|
|
.profile-inference__heading > i { min-height: 23px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--success) 34%, var(--border)); border-radius: 999px; color: var(--success); font-size: 10px; font-style: normal; font-weight: 650; white-space: nowrap; }
|
|
.profile-inference.is-medium .profile-inference__heading > i { border-color: color-mix(in srgb, var(--warning) 34%, var(--border)); color: var(--warning); }
|
|
.profile-inference.is-low .profile-inference__heading > i { border-color: var(--border); color: var(--muted-strong); }
|
|
.profile-inference__flow { min-width: 0; padding: 8px 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
|
|
.profile-inference__flow > span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
|
|
.profile-inference__flow code { max-width: 210px; overflow: hidden; color: var(--foreground); font-size: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
|
|
.profile-inference__sources { display: grid; gap: 5px; }
|
|
.profile-inference__sources > div { min-width: 0; padding: 7px 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
|
|
.profile-inference__sources span { grid-row: span 2; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--warning-soft); color: var(--warning); font-size: 9px; font-weight: 700; }
|
|
.profile-inference__sources strong, .profile-inference__sources small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.profile-inference__sources strong { font-size: var(--text-xs); }
|
|
.profile-inference__sources small { color: var(--muted); font-size: 10px; }
|
|
.profile-inference__arguments { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
|
|
.profile-inference__arguments > div { min-width: 0; }
|
|
.profile-inference__arguments dt { color: var(--muted); font-size: 10px; }
|
|
.profile-inference__arguments dd { margin: 2px 0 0; overflow: hidden; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
|
|
.profile-inference__evidence { border-top: 1px solid var(--border); }
|
|
.profile-inference__evidence summary { padding-top: 8px; color: var(--muted-strong); font-size: var(--text-xs); font-weight: 650; cursor: pointer; }
|
|
.profile-inference__evidence ol { margin: 8px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
|
|
.profile-inference__evidence li { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 7px; color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.45; }
|
|
.profile-inference__evidence li > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--border-strong); }
|
|
.profile-inference__evidence li[data-strength='proven'] > i { background: var(--success); }
|
|
.profile-inference__evidence li[data-strength='supported'] > i { background: var(--primary); }
|
|
.profile-inference__next { padding: 9px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--border); }
|
|
.profile-inference__next > span { color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.5; }
|
|
.profile-inference__next .ui-button { justify-self: stretch; }
|
|
.recording-deep-action { padding: 11px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: var(--radius-md); background: var(--primary-soft); }
|
|
.recording-deep-action > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--primary); }
|
|
.recording-deep-action > div:first-child span { min-width: 0; }
|
|
.recording-deep-action strong, .recording-deep-action small { display: block; }
|
|
.recording-deep-action strong { color: var(--foreground); font-size: var(--text-sm); }
|
|
.recording-deep-action small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); }
|
|
.recording-recipe-action { padding: 11px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border)); border-radius: var(--radius-md); background: var(--warning-soft); }
|
|
.recording-recipe-action > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--warning); }
|
|
.recording-recipe-action > div:first-child span { min-width: 0; }
|
|
.recording-recipe-action strong, .recording-recipe-action small { display: block; }
|
|
.recording-recipe-action strong { color: var(--foreground); font-size: var(--text-sm); }
|
|
.recording-recipe-action small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); }
|
|
.recording-recipe-editor { display: grid; gap: 9px; }
|
|
.recording-recipe-editor > label, .recording-recipe-editor > div:not(.recording-recipe-editor__actions) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.recording-recipe-editor > label { grid-template-columns: minmax(0, 1fr); }
|
|
.recording-recipe-editor label { min-width: 0; display: grid; gap: 4px; }
|
|
.recording-recipe-editor label > span { color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
|
|
.recording-recipe-editor__actions, .recording-recipe-buttons { display: flex; justify-content: flex-end; gap: 7px; }
|
|
.recording-recipes { padding-top: 13px; display: grid; gap: 9px; border-top: 1px solid var(--border); }
|
|
.recording-recipes__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.recording-recipes__heading strong { font-size: var(--text-sm); }
|
|
.recording-recipes__heading select { width: min(190px, 58%); }
|
|
.recording-recipe-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: var(--text-xs); }
|
|
.recording-recipe-meta i { color: var(--primary-text); font-style: normal; }
|
|
.recording-recipes textarea { min-height: 82px; resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
.recording-recipe-result { display: grid; gap: 6px; }
|
|
.recording-recipe-result > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 7px; }
|
|
.recording-recipe-result strong { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.recording-recipe-result span { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
|
|
.recording-recipe-result pre { max-height: 190px; }
|
|
|
|
/* ---------- 登录态工作区 ---------- */
|
|
.context-options { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
|
|
.context-options select { width: auto; min-width: 240px; }
|
|
.context-options > span { overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-mode { display: grid; gap: 16px; }
|
|
.context-mode-tabs { justify-self: start; }
|
|
.context-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); }
|
|
.context-empty svg { color: var(--border-strong); }
|
|
.context-empty strong { color: var(--muted-strong); font-size: var(--text-lg); }
|
|
.context-empty span { font-size: var(--text-sm); }
|
|
.context-session-strip { padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.context-session-strip > div { min-width: 0; padding: 10px 12px; display: grid; gap: 2px; align-content: start; border-radius: var(--radius-md); background: var(--surface-subtle); }
|
|
.context-session-strip small { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.context-session-strip strong { overflow: hidden; font-size: var(--text-lg); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-session-strip span { overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-session-strip .auth-state { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
|
|
.context-session-strip .auth-state > span { min-width: 0; display: grid; gap: 2px; }
|
|
.context-session-strip .auth-state > svg { color: var(--muted); }
|
|
.context-session-strip .auth-state.authenticated > svg, .context-session-strip .auth-state.authenticated strong { color: var(--success); }
|
|
.context-session-strip .auth-state.unauthenticated strong { color: var(--danger); }
|
|
.context-session-strip .auth-state > i { color: var(--muted); font-size: var(--text-sm); font-style: normal; }
|
|
.context-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
|
|
.context-primary { min-width: 0; display: grid; gap: 16px; }
|
|
.context-diff, .context-inventory, .context-node-browser { padding: 16px 18px; display: grid; gap: 13px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.context-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.context-section-heading span { color: var(--muted); font-size: var(--text-sm); }
|
|
.diff-state { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 650; }
|
|
.diff-state.changed, .diff-state.document_changed { background: var(--warning-soft); color: var(--warning); }
|
|
.diff-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
|
|
.diff-summary > span { padding: 10px 12px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); }
|
|
.diff-summary strong { color: var(--foreground); font-size: var(--text-xl); font-weight: 700; }
|
|
.diff-events { display: grid; gap: 5px; }
|
|
.diff-events span { display: flex; gap: 7px; align-items: baseline; font-size: var(--text-sm); }
|
|
.diff-events i { color: var(--success); font-style: normal; font-weight: 700; }
|
|
.diff-events .removed i { color: var(--danger); }
|
|
.diff-events .removed { color: var(--muted); text-decoration: line-through; }
|
|
.context-inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
|
.context-inventory-grid > div { min-width: 0; padding: 12px 13px; display: grid; gap: 8px; align-content: start; border-radius: var(--radius-md); background: var(--surface-subtle); }
|
|
.context-inventory-grid > div > strong { font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
|
|
.context-inventory-grid > div > span { font-size: var(--text-xl); font-weight: 700; }
|
|
.context-inventory-grid ul { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
|
|
.context-inventory-grid li { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); }
|
|
.context-inventory-grid li b { font-weight: 600; }
|
|
.context-inventory-grid li span, .context-inventory-grid li small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-inventory-grid li i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
|
|
.context-inventory-grid li i.ready, .context-inventory-grid li i.document { background: var(--success); }
|
|
.context-inventory-grid li i.history { background: var(--primary); }
|
|
.context-inventory-grid p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
.context-node-search { position: relative; width: 240px; }
|
|
.context-node-search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
|
|
.context-node-search input { height: 32px; padding-left: 29px; font-size: var(--text-sm); }
|
|
.context-node-head { padding: 0 12px 6px; display: grid; grid-template-columns: minmax(0, 1.6fr) 92px 62px 64px; gap: 10px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.context-node-list { max-height: 320px; overflow-y: auto; display: grid; }
|
|
.context-node-list > button { width: 100%; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1.6fr) 92px 62px 64px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); font-size: var(--text-sm); text-align: left; cursor: pointer; }
|
|
.context-node-list > button:last-child { border-bottom: 0; }
|
|
.context-node-list > button:hover { background: var(--surface-subtle); }
|
|
.context-node-list > button.active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
|
|
.context-node-list strong, .context-node-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-node-list strong { font-size: var(--text-md); font-weight: 600; }
|
|
.context-node-list small { margin-top: 1px; color: var(--muted); }
|
|
.context-node-list code { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.context-node-list i { padding: 1px 6px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: var(--text-xs); font-style: normal; font-weight: 600; text-align: center; }
|
|
.context-node-list i.ready { background: var(--success-soft); color: var(--success); }
|
|
.context-inspector { min-width: 0; display: grid; gap: 16px; position: sticky; top: 76px; }
|
|
.context-inspector > section { padding: 16px; display: grid; gap: 13px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.context-inspector-empty { padding: 14px 12px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
.context-node-error { padding: 9px 12px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
|
|
.node-identity { display: grid; gap: 3px; }
|
|
.node-identity code { color: var(--muted); font-size: var(--text-sm); }
|
|
.node-identity strong { font-size: var(--text-lg); font-weight: 650; overflow-wrap: anywhere; }
|
|
.node-identity span { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
|
|
.node-properties { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
|
|
.node-properties dt { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.node-properties dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
|
|
.node-actions { display: flex; gap: 8px; }
|
|
.node-value-editor { display: flex; gap: 8px; align-items: flex-end; }
|
|
.node-value-editor .ui-field { flex: 1; }
|
|
.auth-evidence ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm); line-height: 1.5; }
|
|
.signal-names { display: grid; gap: 4px; font-size: var(--text-sm); }
|
|
.signal-names strong { font-weight: 650; }
|
|
.signal-names span { color: var(--muted); overflow-wrap: anywhere; }
|
|
.context-utility-panel { max-width: 760px; display: grid; gap: 13px; align-content: start; }
|
|
.context-utility-panel > p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
|
|
.eval-mode { justify-self: start; }
|
|
.eval-warning { padding: 10px 13px; display: flex; gap: 9px; align-items: flex-start; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); font-size: var(--text-sm); line-height: 1.5; }
|
|
.eval-warning svg { flex: 0 0 auto; margin-top: 1px; }
|
|
.code-editor { font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
.eval-result-meta { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
.eval-result-meta span { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
|
|
.invoke-result { max-height: 320px; }
|
|
.context-json { display: grid; gap: 10px; }
|
|
.context-json pre { max-height: 560px; }
|
|
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.panel-title > span { font-size: var(--text-lg); font-weight: 650; }
|
|
|
|
/* ---------- 引擎连接 ---------- */
|
|
.managed-policy-banner { padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-lg); background: var(--warning-soft); box-shadow: var(--shadow-sm); }
|
|
.managed-policy-banner > svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }
|
|
.managed-policy-banner strong, .managed-policy-banner small { display: block; }
|
|
.managed-policy-banner strong { font-size: var(--text-md); font-weight: 650; }
|
|
.managed-policy-banner small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-sm); }
|
|
.managed-policy-banner i { display: block; margin-top: 3px; color: var(--warning); font-size: var(--text-sm); font-style: normal; }
|
|
.bridge-identity-strip { padding: 13px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.bridge-identity-strip > div { min-width: 0; }
|
|
.bridge-identity-strip span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.bridge-identity-strip code, .bridge-identity-strip strong { display: block; margin-top: 4px; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
|
|
.engine-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
|
|
.settings-form { min-width: 0; display: grid; gap: 16px; }
|
|
.pairing-workspace { padding: 18px; display: grid; gap: 15px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.pairing-workspace.pending { box-shadow: inset 3px 0 0 var(--warning), var(--shadow-sm); }
|
|
.pairing-workspace.paired { box-shadow: inset 3px 0 0 var(--success), var(--shadow-sm); }
|
|
.pairing-workspace.error { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-sm); }
|
|
.pairing-workspace__heading { display: flex; gap: 13px; align-items: flex-start; }
|
|
.pairing-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); }
|
|
.pairing-workspace__heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
/* 未配对 idle 态:居中 hero,配对是该页此时的主任务 */
|
|
.pairing-workspace.idle { padding: 30px 22px 22px; justify-items: center; text-align: center; }
|
|
.pairing-workspace.idle .pairing-workspace__heading { flex-direction: column; align-items: center; gap: 12px; }
|
|
.pairing-workspace.idle .pairing-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); }
|
|
.pairing-workspace.idle .pairing-icon svg { width: 24px; height: 24px; }
|
|
.pairing-workspace.idle .editor-actions { justify-content: center; }
|
|
.pairing-code { padding: 16px; display: grid; gap: 4px; justify-items: center; border-radius: var(--radius-md); background: var(--surface-subtle); text-align: center; }
|
|
.pairing-code span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
|
|
.pairing-code strong { font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: .12em; }
|
|
.pairing-code small { color: var(--muted); font-size: var(--text-sm); }
|
|
.paired-engine-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.paired-engine-meta > div { min-width: 0; }
|
|
.paired-engine-meta span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
|
|
.paired-engine-meta code { display: block; margin-top: 3px; overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.advanced-connection { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.advanced-connection > summary { padding: 15px 18px; font-size: var(--text-md); font-weight: 650; cursor: pointer; list-style-position: inside; }
|
|
.advanced-connection__body { padding: 2px 18px 16px; display: grid; gap: 13px; }
|
|
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
|
|
.toggle-row > span { min-width: 0; }
|
|
.toggle-row strong { font-size: var(--text-md); font-weight: 600; }
|
|
.toggle-row small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
|
|
.panel-policy-settings { padding: 18px; display: grid; gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.panel-policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.grant-editor { padding: 18px; display: grid; gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
|
|
.grant-editor > p { margin: -6px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
.tab-picker { display: grid; gap: 10px; }
|
|
.tab-picker-group { padding: 6px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); }
|
|
.tab-picker-group label { padding: 7px 9px; display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-sm); cursor: pointer; }
|
|
.tab-picker-group label:hover { background: var(--surface); }
|
|
.tab-picker-group label > input { margin-top: 2px; }
|
|
.tab-picker-group label > span { min-width: 0; }
|
|
.tab-picker-group label strong, .tab-picker-group label small { display: block; }
|
|
.tab-picker-group label strong { font-size: var(--text-md); font-weight: 600; }
|
|
.tab-picker-group label small { margin-top: 1px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
|
|
.tab-picker-group .frame-target { margin-left: 25px; }
|
|
.grant-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.grant-risk-toggle { padding: 10px 13px; border-radius: var(--radius-md); background: var(--warning-soft); }
|
|
.grant-scope-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.grant-scope-list span { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
|
|
.grant-status { padding: 11px 14px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--success-soft); }
|
|
.grant-status strong { color: var(--success); font-size: var(--text-md); font-weight: 650; }
|
|
.grant-status span { color: var(--muted-strong); font-size: var(--text-sm); }
|
|
.protocol-panel { padding: 18px; display: grid; gap: 4px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 76px; }
|
|
.protocol-panel h2 { margin-bottom: 10px; }
|
|
.protocol-panel > div { padding: 9px 0; display: grid; gap: 3px; border-bottom: 1px solid var(--border); }
|
|
.protocol-panel > div:last-child { border-bottom: 0; }
|
|
.protocol-panel code { color: var(--primary-text); font-size: var(--text-sm); font-weight: 600; }
|
|
.protocol-panel span { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
|
|
|
|
/* ---------- 窄屏适配 ---------- */
|
|
@media (max-width: 1080px) {
|
|
.task-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.network-layout, .context-workspace, .engine-layout, .rule-layout, .cookie-layout, .split-view { grid-template-columns: minmax(0, 1fr); }
|
|
.network-inspector, .context-inspector, .cookie-editor-pane, .protocol-panel { position: static; }
|
|
.recording-workbench { grid-template-columns: 220px minmax(0, 1fr); }
|
|
.recording-inspector { grid-column: 1 / -1; max-height: none; border-top: 1px solid var(--border); }
|
|
.recording-pipeline { border-right: 0; }
|
|
.proxy-tools { grid-template-columns: minmax(0, 1fr); }
|
|
.bridge-identity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.ua-management { grid-template-columns: minmax(0, 1fr); }
|
|
.ua-assignments { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.ua-current-site { grid-template-columns: minmax(200px, .8fr) minmax(240px, 1fr); }
|
|
.ua-current-site > .editor-actions { grid-column: 1 / 3; justify-content: flex-end; }
|
|
.recording-heading { grid-template-columns: minmax(0, 1fr) auto; }
|
|
.recording-heading__actions { grid-column: 1 / -1; min-width: 0; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.app-shell { grid-template-columns: minmax(0, 1fr); }
|
|
.sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.sidebar-brand { height: 56px; }
|
|
.sidebar nav { display: flex; overflow-x: auto; overflow-y: hidden; padding: 10px; }
|
|
.sidebar-group { display: contents; }
|
|
.sidebar-group__label { display: none; }
|
|
.sidebar nav button { width: auto; flex: 0 0 auto; grid-template-columns: 18px max-content; white-space: nowrap; }
|
|
.sidebar nav button > svg:last-child { display: none; }
|
|
.sidebar-theme { margin-top: 0; grid-auto-flow: column; align-items: center; justify-content: space-between; }
|
|
.sidebar-theme select { width: 150px; }
|
|
.sidebar-status { min-height: 54px; }
|
|
.topbar { padding: 0 16px; }
|
|
.content-area { padding: 16px; }
|
|
.page-heading { flex-direction: column; align-items: flex-start; }
|
|
.ua-current-site { grid-template-columns: minmax(0, 1fr); }
|
|
.ua-current-site > .editor-actions { grid-column: auto; justify-content: stretch; }
|
|
.ua-current-site > .editor-actions .ui-button { flex: 1; }
|
|
.ua-assignment-list > div { grid-template-columns: minmax(0, 1fr) 34px; }
|
|
.ua-assignment-list code { display: none; }
|
|
.task-command-bar, .agent-runtime-summary { flex-direction: column; display: flex; align-items: stretch; }
|
|
.task-status-grid, .context-session-strip, .diff-summary, .context-inventory-grid, .grant-options, .panel-policy-grid, .form-grid, .paired-engine-meta { grid-template-columns: minmax(0, 1fr); }
|
|
.agent-action-row { grid-template-columns: 12px 76px minmax(0, 1fr) 76px; }
|
|
.agent-action-row span:nth-child(4), .agent-action-row span:last-child { display: none; }
|
|
.activity-table__head, .activity-table__row { grid-template-columns: 120px minmax(0, 1fr) 80px; }
|
|
.activity-table__head span:nth-child(2), .activity-table__head span:nth-child(4), .activity-table__head span:last-child,
|
|
.activity-table__row > span:nth-child(2), .activity-table__row > span:nth-child(4), .activity-table__row > span:last-child { display: none; }
|
|
.network-table-head, .network-row { grid-template-columns: 56px 50px minmax(0, 1fr) 66px; }
|
|
.network-table-head span:nth-child(4), .network-row > span:nth-child(4) { display: none; }
|
|
.recording-heading { grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
|
|
.recording-mode-switch { justify-self: start; }
|
|
.recording-heading__actions { grid-column: auto; justify-self: stretch; justify-content: flex-start; }
|
|
.recording-controls { flex-wrap: wrap; }
|
|
.recording-summary { width: 100%; order: 3; margin-left: 0; }
|
|
.recording-navigation { grid-template-columns: 22px minmax(0, 1fr); }
|
|
.recording-navigation > .ui-button { grid-column: 1 / -1; justify-self: stretch; }
|
|
.recording-workbench { grid-template-columns: minmax(0, 1fr); }
|
|
.recording-traces, .recording-pipeline { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.recording-traces > div, .recording-pipeline__body { max-height: 420px; }
|
|
.recording-inspector { grid-column: auto; border-top: 0; }
|
|
.recording-event-meta i { display: none; }
|
|
.cookie-columns { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 34px; }
|
|
.cookie-columns > span:nth-child(4), .cookie-columns > span:nth-child(5) { display: none; }
|
|
.cookie-toolbar select { min-width: 0; flex: 1; }
|
|
.context-node-head { display: none; }
|
|
.context-node-list > button { grid-template-columns: minmax(0, 1fr) 64px; }
|
|
.context-node-list code, .context-node-list i { display: none; }
|
|
.rule-table .table-head, .rule-table .table-row { grid-template-columns: minmax(0, 1fr) 34px; }
|
|
.rule-table .table-row > span, .rule-table .table-head > span { display: none; }
|
|
.proxy-rule-table .table-head, .proxy-rule-table .table-row { grid-template-columns: minmax(0, 1fr) 34px; }
|
|
.proxy-rule-table .table-row > span, .proxy-rule-table .table-row > svg, .proxy-rule-table .table-head > span { display: none; }
|
|
}
|