姚章浩
2001 lines
42 KiB
CSS
2001 lines
42 KiB
CSS
/* ============================================================
|
||
知识治理平台 · 方向 A · Data-console
|
||
冷灰白底、1px 细边、零阴影、等宽数字
|
||
彩色仅用于语义（红=失败、橙=停滞、蓝=处理中、绿=完成、灰=死信）
|
||
============================================================ */
|
||
|
||
:root {
|
||
/* 基础色板（A 风格） */
|
||
--bg-page: #fafbfc;
|
||
--bg-panel: #ffffff;
|
||
--bg-soft: #f8fafc;
|
||
--bg-softer: #f3f6f9;
|
||
--bg-hover: #f3f7fa;
|
||
--bg-active: #eff4fd;
|
||
|
||
--border-strong: #d3dce3;
|
||
--border-base: #e3e8ec;
|
||
--border-soft: #eef2f6;
|
||
|
||
--ink-strong: #0f1720;
|
||
--ink-base: #16324f;
|
||
--ink-mute: #57687a;
|
||
--ink-faint: #8a98a4;
|
||
|
||
/* 语义色 */
|
||
--c-fail: #b91c1c;
|
||
--c-fail-bg: #fdecec;
|
||
--c-fail-border: #f2baba;
|
||
|
||
--c-warn: #d97706;
|
||
--c-warn-bg: #fef3e2;
|
||
--c-warn-border: #f3d9a8;
|
||
|
||
--c-run: #2563eb;
|
||
--c-run-bg: #eff4fd;
|
||
--c-run-border: #c7d7f2;
|
||
|
||
--c-done: #059669;
|
||
--c-done-bg: #eefaf4;
|
||
--c-done-border: #bfe3d4;
|
||
|
||
--c-dead: #6b7280;
|
||
--c-dead-bg: #f3f4f6;
|
||
|
||
--c-cyan: #0891b2;
|
||
--c-cyan-bg: #ddf7fb;
|
||
|
||
/* 深侧栏（A 风格） */
|
||
--side-bg: #0e1c2b;
|
||
--side-bg-active: #16324a;
|
||
--side-bg-hover: #152a3d;
|
||
--side-border: #1a2f44;
|
||
--side-accent: #2dd4bf;
|
||
--side-ink: #9fb6c6;
|
||
--side-ink-strong: #e8f2f8;
|
||
--side-ink-faint: #5b7789;
|
||
|
||
/* 字体 */
|
||
--font-base: Inter, "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
|
||
--font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
|
||
|
||
/* 圆角（A 风格：小圆角） */
|
||
--r-sm: 3px;
|
||
--r-md: 4px;
|
||
--r-lg: 6px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-base);
|
||
background: var(--bg-page);
|
||
color: var(--ink-strong);
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
font-synthesis: none;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
#root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ========== 通用按钮（A：小圆角 + 细边 + 无阴影） ========== */
|
||
button {
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--r-md);
|
||
padding: 5px 11px;
|
||
color: var(--ink-strong);
|
||
background: var(--bg-panel);
|
||
font: inherit;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
box-shadow: none;
|
||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
||
}
|
||
|
||
button:hover:not(:disabled) {
|
||
background: var(--bg-soft);
|
||
border-color: #94a3b8;
|
||
}
|
||
|
||
button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
button.primary,
|
||
button[type="submit"],
|
||
.primary-link {
|
||
background: var(--side-bg);
|
||
border-color: var(--side-bg);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
button.primary:hover:not(:disabled),
|
||
.primary-link:hover {
|
||
background: #1a2f44;
|
||
border-color: #1a2f44;
|
||
}
|
||
|
||
/* ========== 代码与等宽 ========== */
|
||
code {
|
||
font-family: var(--font-mono);
|
||
font-size: 11.5px;
|
||
color: var(--c-run);
|
||
background: var(--bg-soft);
|
||
padding: 1px 5px;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
|
||
.mono {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ========== 应用外壳 ========== */
|
||
.app-workspace {
|
||
min-height: 100vh;
|
||
background: var(--bg-page);
|
||
}
|
||
|
||
/* ---- 侧边栏（A：深色 + 细边 + 左侧 accent） ---- */
|
||
.sidebar {
|
||
position: fixed;
|
||
z-index: 40;
|
||
inset: 0 auto 0 0;
|
||
display: flex;
|
||
width: 212px;
|
||
flex-direction: column;
|
||
padding: 18px 0;
|
||
color: var(--side-ink);
|
||
background: var(--side-bg);
|
||
border-right: 1px solid #0a141f;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 0 18px 16px;
|
||
border-bottom: 1px solid var(--side-border);
|
||
min-height: auto;
|
||
}
|
||
|
||
.brand-mark {
|
||
display: grid;
|
||
width: 26px;
|
||
height: 26px;
|
||
flex: none;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
color: #04211d;
|
||
background: var(--side-accent);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.brand strong {
|
||
color: var(--side-ink-strong);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
display: block;
|
||
}
|
||
|
||
.brand div > span {
|
||
display: block;
|
||
margin-top: 1px;
|
||
color: var(--side-ink-faint);
|
||
font-size: 11px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.sidebar-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
margin-top: 14px;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-md);
|
||
padding: 7px 10px;
|
||
color: #8aa2b3;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
font-weight: 500;
|
||
font-size: 12.5px;
|
||
text-align: left;
|
||
transition: background 120ms ease, color 120ms ease;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
color: #d9e8f1;
|
||
background: var(--side-bg-hover);
|
||
}
|
||
|
||
.nav-item.active {
|
||
border-color: transparent;
|
||
color: #fff;
|
||
background: var(--side-bg-active);
|
||
border-left: 2px solid var(--side-accent);
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.nav-icon {
|
||
display: grid;
|
||
width: 18px;
|
||
height: 18px;
|
||
flex: none;
|
||
place-items: center;
|
||
color: var(--side-accent);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.sidebar-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin-top: auto;
|
||
padding: 14px 18px 0;
|
||
border-top: 1px solid var(--side-border);
|
||
color: #46647a;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #34d399;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ---- 主区 ---- */
|
||
.workspace-main {
|
||
width: calc(100% - 212px);
|
||
min-width: 0;
|
||
min-height: 100vh;
|
||
margin-left: 212px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.workspace-topbar {
|
||
position: sticky;
|
||
z-index: 25;
|
||
top: 0;
|
||
display: flex;
|
||
min-height: 44px;
|
||
align-items: flex-end;
|
||
border-bottom: 1px solid var(--border-base);
|
||
background: var(--bg-panel);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.workspace-topbar-crumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: none;
|
||
padding: 0 12px 10px 16px;
|
||
font-size: 11px;
|
||
color: var(--ink-faint);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.workspace-topbar-crumb .crumb-root {
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
.workspace-topbar-crumb .crumb-sep {
|
||
color: var(--border-strong);
|
||
}
|
||
|
||
.workspace-topbar-crumb b {
|
||
color: var(--ink-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab-list {
|
||
display: flex;
|
||
min-width: 0;
|
||
gap: 2px;
|
||
overflow-x: auto;
|
||
padding: 8px 16px 0;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.workspace-context-tabs {
|
||
display: flex;
|
||
min-width: 0;
|
||
max-width: 48%;
|
||
margin-left: auto;
|
||
align-items: center;
|
||
gap: 4px;
|
||
overflow-x: auto;
|
||
padding: 0 16px 10px 8px;
|
||
color: var(--ink-faint);
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.workspace-context-tabs span { display: flex; align-items: center; gap: 4px; }
|
||
.workspace-context-tabs i { color: var(--ink-faint); font-style: normal; }
|
||
.workspace-context-tabs button {
|
||
max-width: 180px;
|
||
overflow: hidden;
|
||
border: 0;
|
||
padding: 3px 7px;
|
||
background: var(--bg-soft);
|
||
box-shadow: none;
|
||
color: var(--ink-mute);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border-radius: var(--r-sm);
|
||
font-size: 11px;
|
||
}
|
||
.workspace-context-tabs span:last-child button {
|
||
background: var(--bg-active);
|
||
color: var(--c-run);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.workspace-tab {
|
||
display: flex;
|
||
height: 36px;
|
||
flex: none;
|
||
align-items: center;
|
||
border: 1px solid transparent;
|
||
border-bottom: 0;
|
||
border-radius: var(--r-md) var(--r-md) 0 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.workspace-tab.active {
|
||
border-color: var(--border-base);
|
||
background: var(--bg-page);
|
||
box-shadow: inset 0 2px var(--c-run);
|
||
}
|
||
|
||
.tab-activate,
|
||
.tab-close,
|
||
.mobile-nav-toggle,
|
||
.sidebar-backdrop {
|
||
border-radius: 0;
|
||
padding: 0;
|
||
color: inherit;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
border: 0;
|
||
}
|
||
|
||
.tab-activate {
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 0 11px;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.workspace-tab.active .tab-activate {
|
||
color: var(--ink-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab-activate span {
|
||
color: var(--c-cyan);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tab-close {
|
||
display: grid;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 6px;
|
||
place-items: center;
|
||
border-radius: var(--r-sm);
|
||
color: var(--ink-faint);
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.tab-close:hover {
|
||
color: var(--c-fail);
|
||
background: var(--c-fail-bg);
|
||
}
|
||
|
||
.workspace-content {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.mobile-nav-toggle,
|
||
.sidebar-backdrop {
|
||
display: none;
|
||
}
|
||
|
||
/* ========== 页面外壳 ========== */
|
||
.page-shell {
|
||
width: min(1240px, calc(100% - 48px));
|
||
margin: 0 auto;
|
||
padding: 22px 0 40px;
|
||
}
|
||
|
||
.hero {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0 0 6px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
h1, h2, p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
h1 {
|
||
margin-bottom: 4px;
|
||
color: var(--ink-strong);
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.subtitle,
|
||
.panel-heading p {
|
||
margin-bottom: 0;
|
||
color: var(--ink-mute);
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
/* ========== Summary 卡片（A：1px 网格、无阴影、顶 2px 色条、mono 数字） ========== */
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 1px;
|
||
background: var(--border-base);
|
||
border: 1px solid var(--border-base);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.summary-card {
|
||
min-height: 0;
|
||
padding: 12px 14px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: var(--bg-panel);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.summary-card span {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.summary-card strong {
|
||
color: var(--ink-strong);
|
||
font-family: var(--font-mono);
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.tone-blue { border-top: 2px solid var(--c-run); }
|
||
.tone-cyan { border-top: 2px solid var(--c-cyan); }
|
||
.tone-amber { border-top: 2px solid var(--c-warn); }
|
||
.tone-red { border-top: 2px solid var(--c-fail); }
|
||
.tone-green { border-top: 2px solid var(--c-done); }
|
||
|
||
/* ========== Panel（A：细边 + 6px 圆角 + 无阴影） ========== */
|
||
.panel {
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-lg);
|
||
background: var(--bg-panel);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.panel-heading h2 {
|
||
margin-bottom: 2px;
|
||
color: var(--ink-strong);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.panel-heading p {
|
||
font-size: 11.5px;
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
.safe-badge {
|
||
flex: none;
|
||
border-radius: var(--r-sm);
|
||
padding: 2px 8px;
|
||
color: var(--c-done);
|
||
background: var(--c-done-bg);
|
||
border: 1px solid var(--c-done-border);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* ========== 表格（A：细边、无 zebra、mono 数字） ========== */
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
th, td {
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
th {
|
||
color: var(--ink-mute);
|
||
background: var(--bg-soft);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
/* ========== 来源连接表 ========== */
|
||
.source-connections-table { table-layout: fixed; }
|
||
.source-connections-table th,
|
||
.source-connections-table td {
|
||
padding: 10px 8px;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.source-connections-table th:nth-child(1) { width: 22%; }
|
||
.source-connections-table th:nth-child(2) { width: 7%; }
|
||
.source-connections-table th:nth-child(3) { width: 8%; }
|
||
.source-connections-table th:nth-child(4) { width: 8%; }
|
||
.source-connections-table th:nth-child(5) { width: 8%; }
|
||
.source-connections-table th:nth-child(6) { width: 7%; }
|
||
.source-connections-table th:nth-child(7) { width: 30%; }
|
||
.source-connections-table th:nth-child(8) { width: 10%; }
|
||
|
||
.source-connection-name,
|
||
.source-scan-summary {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
.source-connection-name strong {
|
||
color: var(--ink-strong);
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
.source-connection-name code,
|
||
.source-scan-summary span,
|
||
.source-scan-summary code {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.source-scan-summary span {
|
||
color: var(--ink-mute);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.scan-audit-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
|
||
gap: 14px;
|
||
padding: 14px 16px 16px;
|
||
}
|
||
|
||
.scan-audit-grid > * { min-width: 0; }
|
||
|
||
.source-scan-history-table { table-layout: fixed; }
|
||
.source-scan-history-table th,
|
||
.source-scan-history-table td {
|
||
padding: 9px 8px;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.source-scan-history-table th:nth-child(1) { width: 25%; }
|
||
.source-scan-history-table th:nth-child(2) { width: 12%; }
|
||
.source-scan-history-table th:nth-child(3) { width: 9%; }
|
||
.source-scan-history-table th:nth-child(4) { width: 27%; }
|
||
.source-scan-history-table th:nth-child(5) { width: 12%; }
|
||
.source-scan-history-table th:nth-child(6) { width: 15%; }
|
||
|
||
.source-scan-history-table code,
|
||
.source-scan-history-table time {
|
||
display: block;
|
||
}
|
||
|
||
.source-scan-history-table time {
|
||
margin-top: 3px;
|
||
color: var(--ink-faint);
|
||
font-size: 11px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.selected-row {
|
||
background: var(--bg-active);
|
||
}
|
||
|
||
.source-scan-detail {
|
||
min-height: 180px;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-lg);
|
||
background: var(--bg-panel);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.source-scan-detail h3 {
|
||
margin: 0;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
padding: 10px 14px;
|
||
color: var(--ink-strong);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.source-scan-detail .empty-state {
|
||
margin: 12px;
|
||
}
|
||
|
||
.source-scan-detail th,
|
||
.source-scan-detail td {
|
||
padding: 9px 10px;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* ========== Release page ========== */
|
||
.release-page .panel { margin-top: 14px; }
|
||
|
||
.module-tabs {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 0;
|
||
overflow-x: auto;
|
||
margin: -4px 0 14px;
|
||
border-bottom: 1px solid var(--border-base);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.module-tabs a,
|
||
.module-tabs button {
|
||
display: block;
|
||
flex: none;
|
||
border: 0;
|
||
border-bottom: 2px solid transparent;
|
||
border-radius: 0;
|
||
padding: 8px 12px;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.module-tabs a:hover,
|
||
.module-tabs button:hover {
|
||
color: var(--ink-strong);
|
||
background: var(--bg-soft);
|
||
}
|
||
|
||
.module-tabs a.active,
|
||
.module-tabs button.active {
|
||
border-bottom-color: var(--c-run);
|
||
color: var(--ink-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.monitor-summary-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 1px;
|
||
}
|
||
.monitor-summary-grid .summary-card { padding: 10px 12px; }
|
||
.monitor-summary-grid .summary-card span { margin-bottom: 4px; font-size: 11px; }
|
||
.monitor-summary-grid .summary-card strong { font-size: 20px; }
|
||
|
||
.parsing-monitor-panel { margin-top: 0; }
|
||
.parsing-monitor-panel .panel-heading { padding: 10px 14px; }
|
||
|
||
.release-snapshot-callout {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
border: 1px solid var(--c-run-border);
|
||
border-radius: var(--r-md);
|
||
padding: 10px 12px;
|
||
background: var(--c-run-bg);
|
||
color: var(--ink-base);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.release-snapshot-callout > span { font-size: 14px; line-height: 1.25; }
|
||
.release-snapshot-callout div { display: grid; gap: 2px; }
|
||
.release-snapshot-callout strong { font-size: 12px; color: var(--ink-strong); }
|
||
.release-snapshot-callout small { color: var(--ink-mute); font-size: 11px; line-height: 1.4; }
|
||
|
||
.release-page .hero + .module-tabs { margin-top: -4px; }
|
||
.release-page .summary-grid { margin-top: 14px; }
|
||
.release-page .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
|
||
.release-page button:disabled {
|
||
border-color: var(--border-base);
|
||
color: var(--ink-faint);
|
||
background: var(--bg-soft);
|
||
box-shadow: none;
|
||
cursor: not-allowed;
|
||
opacity: 1;
|
||
}
|
||
|
||
#review-actions,
|
||
#batch-actions,
|
||
#production-status,
|
||
#release-plan,
|
||
#release-execution,
|
||
#settings-sources,
|
||
#settings-services,
|
||
#settings-storage,
|
||
#settings-refresh {
|
||
scroll-margin-top: 60px;
|
||
}
|
||
|
||
/* ---- Journey ---- */
|
||
.release-journey {
|
||
margin-bottom: 16px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-lg);
|
||
background: var(--bg-panel);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.journey-heading {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
padding: 14px 16px 12px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.journey-heading span {
|
||
color: var(--c-run);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.journey-heading h2 {
|
||
margin: 4px 0 0;
|
||
color: var(--ink-strong);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.journey-heading p {
|
||
max-width: 450px;
|
||
margin: 0;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
text-align: right;
|
||
}
|
||
|
||
.journey-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin: 0;
|
||
padding: 14px 16px 16px;
|
||
list-style: none;
|
||
}
|
||
|
||
.journey-step {
|
||
display: grid;
|
||
min-height: 0;
|
||
grid-template-columns: 28px minmax(0, 1fr);
|
||
align-content: center;
|
||
align-items: center;
|
||
gap: 2px 8px;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-md);
|
||
padding: 10px;
|
||
color: var(--ink-mute);
|
||
background: var(--bg-soft);
|
||
}
|
||
|
||
.journey-step .step-number {
|
||
display: grid;
|
||
width: 22px;
|
||
height: 22px;
|
||
grid-row: 1 / 3;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
color: var(--ink-faint);
|
||
background: var(--bg-softer);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.journey-step strong {
|
||
color: var(--ink-strong);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.journey-step small {
|
||
color: var(--ink-faint);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.journey-step.done {
|
||
border-color: var(--c-done-border);
|
||
background: var(--c-done-bg);
|
||
}
|
||
|
||
.journey-step.done .step-number {
|
||
color: #fff;
|
||
background: var(--c-done);
|
||
}
|
||
|
||
.journey-step.current {
|
||
border: 1px solid var(--c-run);
|
||
color: var(--c-run);
|
||
background: var(--c-run-bg);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.journey-step.current .step-number {
|
||
color: #fff;
|
||
background: var(--c-run);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.journey-step.danger {
|
||
border-color: var(--c-fail-border);
|
||
background: var(--c-fail-bg);
|
||
}
|
||
|
||
.journey-step.danger small {
|
||
color: var(--c-fail);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.journey-step.danger.current {
|
||
border-color: var(--c-fail);
|
||
background: var(--c-fail-bg);
|
||
}
|
||
|
||
.journey-step.danger.current .step-number {
|
||
background: var(--c-fail);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ---- Current guidance ---- */
|
||
.current-guidance {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 14px;
|
||
border: 1px solid var(--c-run-border);
|
||
border-radius: var(--r-lg);
|
||
padding: 14px 16px;
|
||
background: var(--c-run-bg);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.guidance-step {
|
||
max-width: 110px;
|
||
border-radius: var(--r-md);
|
||
padding: 6px 10px;
|
||
color: #fff;
|
||
background: var(--c-run);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
|
||
.guidance-copy h2 {
|
||
margin: 0 0 4px;
|
||
color: var(--ink-strong);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.guidance-copy > strong {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
color: var(--c-warn);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.guidance-copy p {
|
||
margin: 0 0 4px;
|
||
color: var(--ink-base);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.current-checklist {
|
||
margin: 8px 0;
|
||
border-radius: var(--r-md);
|
||
padding: 8px 10px;
|
||
color: var(--ink-base);
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border: 1px solid var(--border-soft);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.current-checklist > b {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
color: var(--ink-strong);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.current-checklist ol {
|
||
display: grid;
|
||
gap: 3px;
|
||
margin: 0;
|
||
padding-left: 16px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.review-decision-guide {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 10px 16px 12px;
|
||
}
|
||
|
||
.review-decision-guide h3 {
|
||
margin: 0;
|
||
color: var(--ink-strong);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.review-decision-guide p {
|
||
min-height: 0;
|
||
margin: 0;
|
||
border-radius: var(--r-md);
|
||
padding: 7px 10px;
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.approve-guide {
|
||
color: var(--c-done);
|
||
background: var(--c-done-bg);
|
||
}
|
||
|
||
.reject-guide {
|
||
color: var(--c-fail);
|
||
background: var(--c-fail-bg);
|
||
}
|
||
|
||
.batch-requirements {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-top: 1px solid var(--border-soft);
|
||
padding: 10px 16px 0;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.batch-requirements strong {
|
||
margin-right: 4px;
|
||
color: var(--ink-strong);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.batch-requirements span {
|
||
border-radius: var(--r-sm);
|
||
padding: 2px 7px;
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.batch-requirements .met::before,
|
||
.batch-requirements .unmet::before {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.batch-requirements .met {
|
||
color: var(--c-done);
|
||
background: var(--c-done-bg);
|
||
}
|
||
|
||
.batch-requirements .met::before { content: '✓'; }
|
||
|
||
.batch-requirements .unmet {
|
||
color: var(--c-warn);
|
||
background: var(--c-warn-bg);
|
||
}
|
||
|
||
.batch-requirements .unmet::before { content: '○'; }
|
||
|
||
.acceptance-summary > strong,
|
||
.acceptance-summary > span {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.acceptance-summary > strong {
|
||
color: var(--c-done);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.acceptance-summary details {
|
||
margin-top: 4px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.acceptance-summary summary {
|
||
cursor: pointer;
|
||
color: var(--c-run);
|
||
}
|
||
|
||
.guidance-copy > span {
|
||
color: var(--c-done);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.primary-link {
|
||
flex: none;
|
||
border-radius: var(--r-md);
|
||
padding: 5px 11px;
|
||
color: #fff;
|
||
background: var(--side-bg);
|
||
box-shadow: none;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.technical-status {
|
||
flex: none;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.technical-status summary {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.technical-status p {
|
||
max-width: 260px;
|
||
margin: 6px 0 0;
|
||
}
|
||
|
||
.button-reason {
|
||
margin: 10px 16px 0;
|
||
border: 1px solid var(--c-warn-border);
|
||
border-radius: var(--r-md);
|
||
padding: 8px 10px;
|
||
color: var(--c-warn);
|
||
background: var(--c-warn-bg);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.button-reason strong { margin-right: 4px; }
|
||
|
||
.release-actions,
|
||
.row-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.release-actions button,
|
||
.row-actions button {
|
||
padding: 4px 9px;
|
||
font-size: 11px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.secondary-action {
|
||
border: 1px solid var(--border-strong);
|
||
color: var(--c-run);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.release-toolbar label,
|
||
.batch-create-bar label {
|
||
display: grid;
|
||
gap: 4px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.release-toolbar input,
|
||
.batch-create-bar input,
|
||
.review-table select {
|
||
min-width: 140px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--r-md);
|
||
padding: 5px 8px;
|
||
color: var(--ink-strong);
|
||
background: var(--bg-panel);
|
||
font: inherit;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.review-table { table-layout: fixed; }
|
||
.review-table th,
|
||
.review-table td {
|
||
padding: 8px 8px;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
vertical-align: top;
|
||
}
|
||
.review-table th:nth-child(1) { width: 5%; }
|
||
.review-table th:nth-child(2) { width: 20%; }
|
||
.review-table th:nth-child(3) { width: 19%; }
|
||
.review-table th:nth-child(4) { width: 10%; }
|
||
.review-table th:nth-child(5) { width: 13%; }
|
||
.review-table th:nth-child(6) { width: 13%; }
|
||
.review-table th:nth-child(7) { width: 20%; }
|
||
|
||
.review-table td > strong,
|
||
.review-table td > code,
|
||
.review-table td > span,
|
||
.review-table td > small {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.review-table td > span,
|
||
.review-table td > small {
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.review-table select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.batch-create-bar {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
border-top: 1px solid var(--border-soft);
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.batch-create-bar label { margin-right: auto; }
|
||
|
||
.batch-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
|
||
gap: 12px;
|
||
padding: 12px 16px 16px;
|
||
}
|
||
|
||
.batch-grid > * { min-width: 0; }
|
||
|
||
.batch-grid th,
|
||
.batch-grid td {
|
||
padding: 8px 8px;
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.batch-grid td strong,
|
||
.batch-grid td code,
|
||
.batch-detail-row strong,
|
||
.batch-detail-row code {
|
||
display: block;
|
||
}
|
||
|
||
.batch-detail {
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-lg);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.batch-detail h3 {
|
||
margin: 0;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
padding: 10px 14px;
|
||
color: var(--ink-strong);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.batch-detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
padding: 9px 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.batch-detail-row b {
|
||
flex: none;
|
||
color: var(--c-done);
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* ========== Status badge（A：小圆角 + 细边 + mono） ========== */
|
||
.status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border-radius: var(--r-sm);
|
||
padding: 1px 7px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
border: 1px solid transparent;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.status-pending { color: var(--ink-mute); background: var(--bg-softer); border-color: var(--border-base); }
|
||
.status-running { color: var(--c-cyan); background: var(--c-cyan-bg); border-color: #b5e5ee; }
|
||
.status-retry { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-border); }
|
||
.status-completed { color: var(--c-done); background: var(--c-done-bg); border-color: var(--c-done-border); }
|
||
.status-failed { color: var(--c-fail); background: var(--c-fail-bg); border-color: var(--c-fail-border); }
|
||
.status-over_limit { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-border); }
|
||
.status-content_alias { color: var(--c-cyan); background: var(--c-cyan-bg); border-color: #b5e5ee; }
|
||
|
||
/* ========== Error / Empty / Banner ========== */
|
||
.error-cell {
|
||
max-width: 300px;
|
||
overflow: hidden;
|
||
color: var(--c-fail);
|
||
text-overflow: ellipsis;
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.error-banner,
|
||
.empty-state {
|
||
margin: 12px 16px;
|
||
border-radius: var(--r-md);
|
||
padding: 10px 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.error-banner {
|
||
color: var(--c-fail);
|
||
background: var(--c-fail-bg);
|
||
border: 1px solid var(--c-fail-border);
|
||
}
|
||
|
||
.empty-state {
|
||
color: var(--ink-mute);
|
||
background: var(--bg-soft);
|
||
text-align: center;
|
||
}
|
||
|
||
.safety-strip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 14px;
|
||
border: 1px solid var(--c-done-border);
|
||
border-radius: var(--r-lg);
|
||
padding: 10px 14px;
|
||
background: var(--c-done-bg);
|
||
}
|
||
|
||
.safety-strip strong,
|
||
.safety-strip span {
|
||
display: block;
|
||
}
|
||
|
||
.safety-strip div > span {
|
||
margin-top: 2px;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ========== Release Plan ========== */
|
||
.release-plan-panel { margin-bottom: 14px; }
|
||
|
||
.release-plan-filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding: 0 16px 8px;
|
||
font-size: 11px;
|
||
color: var(--ink-mute);
|
||
}
|
||
|
||
.release-plan-filters label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.release-plan-filters select {
|
||
font: inherit;
|
||
padding: 3px 5px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg-panel);
|
||
}
|
||
|
||
.release-plan-filters .filter-check { cursor: pointer; }
|
||
.release-plan-filters .filter-count { margin-left: auto; color: var(--ink-faint); }
|
||
|
||
.release-plan-pager {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 8px 16px 2px;
|
||
font-size: 11px;
|
||
color: var(--ink-mute);
|
||
}
|
||
|
||
.release-plan-summary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
padding: 0 16px 10px;
|
||
}
|
||
|
||
.release-plan-summary span {
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--r-sm);
|
||
padding: 3px 8px;
|
||
background: var(--bg-soft);
|
||
color: var(--ink-base);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.release-plan-table {
|
||
min-width: 820px;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.release-plan-table th,
|
||
.release-plan-table td {
|
||
white-space: normal;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.release-plan-table .plan-blocked {
|
||
background: var(--c-fail-bg);
|
||
color: var(--c-fail);
|
||
}
|
||
|
||
.release-plan-table .plan-delete {
|
||
background: var(--c-fail-bg);
|
||
color: var(--c-fail);
|
||
}
|
||
|
||
.release-plan-table .plan-delete input {
|
||
accent-color: var(--c-fail);
|
||
}
|
||
|
||
.delete-confirmation {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
border: 1px solid var(--c-fail-border);
|
||
border-radius: var(--r-md);
|
||
padding: 10px;
|
||
background: var(--c-fail-bg);
|
||
color: var(--c-fail);
|
||
}
|
||
|
||
.delete-confirmation input {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: 1px;
|
||
accent-color: var(--c-fail);
|
||
}
|
||
|
||
.delete-confirmation span {
|
||
display: grid;
|
||
gap: 2px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.delete-confirmation small {
|
||
color: var(--c-fail);
|
||
opacity: 0.75;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* ========== Settings ========== */
|
||
.server-settings-banner {
|
||
border-left: 2px solid var(--c-done);
|
||
background: var(--c-done-bg);
|
||
}
|
||
|
||
.settings-operator {
|
||
display: grid;
|
||
gap: 4px;
|
||
max-width: 360px;
|
||
margin: 10px 0 8px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.settings-operator input {
|
||
min-height: 32px;
|
||
}
|
||
|
||
.success-message {
|
||
margin: 8px 0;
|
||
border-left: 2px solid var(--c-done);
|
||
padding: 6px 10px;
|
||
background: var(--c-done-bg);
|
||
color: var(--c-done);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ========== Dashboard ========== */
|
||
.dashboard-recent { margin-top: 0; }
|
||
|
||
.recent-list { display: grid; }
|
||
|
||
.recent-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto 150px;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.recent-row:last-child { border-bottom: 0; }
|
||
.recent-row div { min-width: 0; }
|
||
|
||
.recent-row strong,
|
||
.recent-row code {
|
||
display: block;
|
||
}
|
||
|
||
.recent-row code {
|
||
overflow: hidden;
|
||
margin-top: 2px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
background: transparent;
|
||
padding: 0;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.recent-row time {
|
||
color: var(--ink-faint);
|
||
font-size: 11px;
|
||
text-align: right;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.placeholder-panel {
|
||
display: flex;
|
||
min-height: 200px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
border: 1px dashed var(--border-strong);
|
||
border-radius: var(--r-lg);
|
||
padding: 24px;
|
||
background: var(--bg-soft);
|
||
text-align: left;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
display: grid;
|
||
width: 40px;
|
||
height: 40px;
|
||
flex: none;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
color: var(--c-cyan);
|
||
background: var(--c-cyan-bg);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.placeholder-panel h2 {
|
||
margin-bottom: 6px;
|
||
color: var(--ink-strong);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.placeholder-panel p {
|
||
max-width: 560px;
|
||
margin-bottom: 0;
|
||
color: var(--ink-mute);
|
||
line-height: 1.6;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ========== Asset ========== */
|
||
.asset-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
|
||
.asset-toolbar label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.asset-toolbar select {
|
||
min-width: 160px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--r-md);
|
||
padding: 5px 8px;
|
||
color: var(--ink-strong);
|
||
background: var(--bg-panel);
|
||
font: inherit;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ========== Pagination ========== */
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
padding: 10px 14px;
|
||
color: var(--ink-mute);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.pagination div {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.pagination button {
|
||
border: 1px solid var(--border-strong);
|
||
padding: 4px 10px;
|
||
color: var(--c-run);
|
||
background: var(--bg-panel);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ========== Changeset / Audit chain ========== */
|
||
.release-changeset-panel {
|
||
margin: 4px 16px 10px;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-md);
|
||
background: var(--bg-soft);
|
||
}
|
||
|
||
.release-changeset-heading {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
|
||
.release-changeset-heading h3 {
|
||
margin: 0 0 2px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--ink-strong);
|
||
}
|
||
|
||
.release-changeset-heading p {
|
||
margin: 0;
|
||
color: var(--ink-faint);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.release-changeset-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 8px 0 4px;
|
||
color: var(--ink-mute);
|
||
font-size: 11px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.release-changeset-items { margin: 4px 0; }
|
||
|
||
.release-changeset-items summary {
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
color: var(--c-run);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.release-changeset-items ul {
|
||
max-height: 200px;
|
||
overflow: auto;
|
||
margin: 4px 0;
|
||
padding-left: 16px;
|
||
font-size: 11px;
|
||
color: var(--ink-mute);
|
||
}
|
||
|
||
.release-changeset-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.release-changeset-actions small {
|
||
color: var(--ink-faint);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.release-audit-chain {
|
||
margin-top: 12px;
|
||
border-top: 1px dashed var(--border-strong);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.release-audit-chain h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--ink-strong);
|
||
}
|
||
|
||
.audit-chain-line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
color: var(--ink-mute);
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.audit-chain-line span {
|
||
color: var(--ink-faint);
|
||
min-width: 70px;
|
||
}
|
||
|
||
.audit-chain-line b {
|
||
color: var(--ink-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.audit-chain-line small {
|
||
color: var(--ink-faint);
|
||
}
|
||
|
||
/* ========== Task / chain 通用样式（A 风格任务卡） ========== */
|
||
.task-chain {
|
||
display: flex;
|
||
gap: 3px;
|
||
margin-top: 6px;
|
||
flex-wrap: wrap;
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px;
|
||
}
|
||
|
||
.chain-step {
|
||
padding: 2px 8px;
|
||
border: 1px solid var(--border-base);
|
||
background: var(--bg-soft);
|
||
color: var(--ink-faint);
|
||
border-radius: var(--r-sm);
|
||
}
|
||
|
||
.chain-step.done {
|
||
background: var(--c-done-bg);
|
||
border-color: var(--c-done-border);
|
||
color: var(--c-done);
|
||
}
|
||
|
||
.chain-step.bad,
|
||
.chain-step.failed {
|
||
background: var(--c-fail-bg);
|
||
border-color: var(--c-fail-border);
|
||
color: var(--c-fail);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chain-step.act,
|
||
.chain-step.current {
|
||
background: var(--c-run-bg);
|
||
border-color: var(--c-run-border);
|
||
color: var(--c-run);
|
||
}
|
||
|
||
.why {
|
||
font-size: 11.5px;
|
||
color: var(--c-fail);
|
||
margin-top: 4px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.why code {
|
||
background: var(--c-fail-bg);
|
||
padding: 0 5px;
|
||
border-radius: var(--r-sm);
|
||
color: var(--c-fail);
|
||
}
|
||
|
||
/* ========== Modal（A：细边、无阴影） ========== */
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
z-index: 60;
|
||
inset: 0;
|
||
background: rgba(15, 23, 32, 0.4);
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
.modal-card {
|
||
background: var(--bg-panel);
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--r-lg);
|
||
max-width: 720px;
|
||
width: 100%;
|
||
max-height: calc(100vh - 48px);
|
||
overflow: auto;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
border-top: 1px solid var(--border-soft);
|
||
}
|
||
|
||
/* ========== Responsive ========== */
|
||
@media (max-width: 860px) {
|
||
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.asset-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.scan-audit-grid { grid-template-columns: 1fr; }
|
||
.batch-grid { grid-template-columns: 1fr; }
|
||
.journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.review-decision-guide { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.sidebar {
|
||
width: 212px;
|
||
transform: translateX(-105%);
|
||
transition: transform 180ms ease;
|
||
}
|
||
.sidebar.open { transform: translateX(0); }
|
||
.sidebar-backdrop {
|
||
position: fixed;
|
||
z-index: 35;
|
||
inset: 0;
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(15, 23, 32, 0.4);
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
.workspace-main {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
.workspace-topbar { align-items: center; }
|
||
.workspace-context-tabs { display: none; }
|
||
.workspace-tab:not(.active) { display: none; }
|
||
.workspace-tab.active { min-width: 0; max-width: 100%; }
|
||
.workspace-tab.active .tab-activate {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.workspace-tab.active .tab-close { width: 32px; height: 32px; flex: none; }
|
||
.mobile-nav-toggle {
|
||
display: grid;
|
||
width: 32px;
|
||
height: 32px;
|
||
flex: none;
|
||
margin: 6px 0 0 8px;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
color: var(--ink-mute);
|
||
background: var(--bg-soft);
|
||
font-size: 16px;
|
||
border: 1px solid var(--border-base);
|
||
}
|
||
.tab-list { flex: 1; overflow: hidden; padding-left: 6px; }
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.page-shell {
|
||
width: min(100% - 20px, 1240px);
|
||
padding-top: 16px;
|
||
}
|
||
.hero,
|
||
.panel-heading {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
.summary-grid { grid-template-columns: 1fr; }
|
||
.asset-summary { grid-template-columns: 1fr; }
|
||
.asset-toolbar label,
|
||
.pagination,
|
||
.batch-create-bar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
.safety-strip,
|
||
.placeholder-panel,
|
||
.journey-heading,
|
||
.current-guidance {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
.journey-heading { display: flex; }
|
||
.journey-heading p { text-align: left; }
|
||
.journey-steps { grid-template-columns: 1fr; }
|
||
.current-guidance { display: flex; }
|
||
.guidance-step { max-width: none; }
|
||
.recent-row { grid-template-columns: minmax(0, 1fr) auto; }
|
||
.recent-row time { grid-column: 1 / -1; text-align: left; }
|
||
}
|
||
|
||
/* ── 登录 / 强制改密 / 顶栏身份（A · Data-console） ─────────────── */
|
||
.login-shell {
|
||
min-height: 100vh;
|
||
display: grid;
|
||
place-items: center;
|
||
background:
|
||
radial-gradient(1100px 500px at 15% -10%, var(--c-run-bg), transparent 60%),
|
||
linear-gradient(180deg, var(--bg-page), var(--bg-softer));
|
||
padding: 24px;
|
||
}
|
||
.login-card {
|
||
width: min(400px, 100%);
|
||
background: var(--bg-panel);
|
||
border: 1px solid var(--border-base);
|
||
border-radius: 10px;
|
||
padding: 28px 26px 24px;
|
||
box-shadow: 0 18px 46px rgba(15, 23, 32, 0.10);
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.login-card h1 { margin: 0; font-size: 20px; color: var(--ink-strong); letter-spacing: 0.01em; }
|
||
.login-subtitle { margin: 0; color: var(--ink-mute); font-size: 13px; }
|
||
.login-card label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-base); font-weight: 600; }
|
||
.login-card input {
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 6px;
|
||
font: inherit;
|
||
background: var(--bg-panel);
|
||
color: var(--ink-strong);
|
||
}
|
||
.login-card input:focus { outline: 2px solid var(--c-run); outline-offset: 1px; border-color: transparent; }
|
||
.login-card button[type="submit"] { width: 100%; margin-top: 4px; }
|
||
|
||
/* Password visibility toggle: button sits inside the field's right edge. */
|
||
.password-field { position: relative; display: block; }
|
||
.password-field input { width: 100%; padding-right: 56px; }
|
||
.password-toggle {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 6px;
|
||
transform: translateY(-50%);
|
||
padding: 2px 8px;
|
||
border: 1px solid var(--line-base, #d7dbe0);
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
color: var(--ink-base, #333);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.password-toggle:hover { border-color: var(--c-run, #2f6feb); color: var(--c-run, #2f6feb); }
|
||
.login-error { margin: 0; font-size: 13px; color: var(--c-fail); background: var(--c-fail-bg); border: 1px solid var(--c-fail-border); border-radius: 6px; padding: 8px 10px; }
|
||
.login-secondary { background: transparent; border: none; color: var(--ink-mute); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
|
||
|
||
.topbar-user { position: relative; margin-left: auto; }
|
||
.topbar-user-button {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: var(--bg-soft); border: 1px solid var(--border-base); border-radius: 999px;
|
||
padding: 4px 12px 4px 4px; cursor: pointer; color: var(--ink-base); font: inherit;
|
||
}
|
||
.topbar-user-button:hover { background: var(--bg-hover); }
|
||
.topbar-user-avatar {
|
||
width: 26px; height: 26px; border-radius: 50%;
|
||
background: var(--side-bg); color: var(--side-accent);
|
||
display: grid; place-items: center; font-size: 13px; font-weight: 700;
|
||
}
|
||
.topbar-user-name { font-size: 13px; font-weight: 600; }
|
||
.role-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-base); background: var(--bg-panel); color: var(--ink-mute); }
|
||
.role-badge.role-admin { color: var(--c-run); border-color: var(--c-run-border); background: var(--c-run-bg); }
|
||
.role-badge.role-engineer { color: var(--c-done); border-color: var(--c-done-border); background: var(--c-done-bg); }
|
||
.topbar-user-menu {
|
||
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
|
||
background: var(--bg-panel); border: 1px solid var(--border-base); border-radius: 8px;
|
||
box-shadow: 0 12px 30px rgba(15, 23, 32, 0.12); min-width: 140px; padding: 4px;
|
||
}
|
||
.topbar-user-menu button { width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink-base); }
|
||
.topbar-user-menu button:hover { background: var(--bg-hover); }
|
||
|
||
.member-create-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
|
||
.member-create-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-base); font-weight: 600; }
|
||
.member-create-form input, .member-create-form select { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; background: var(--bg-panel); }
|