Add green state colors to new version rows
This commit is contained in:
parent
778ac54bfa
commit
120e701443
@ -24,3 +24,43 @@ body {
|
||||
color: #1f1f1f; /* Ant Design on-surface / colorText */
|
||||
background-color: #f5f5f5; /* Ant Design bg-layout */
|
||||
}
|
||||
|
||||
/* ── PublishModal 第一页:新增版本行配色 ──────────────
|
||||
变量由组件注入:--row-new-bg / --row-new-text /
|
||||
--row-new-text-active 直接取 antd theme token;
|
||||
--row-new-bg-hover / --row-new-bg-active /
|
||||
--row-new-bg-active-hover 是 green-1 与 green-2 之间的
|
||||
color-mix 半步过渡色(25% / 50% / 75%) */
|
||||
|
||||
/* 基础:浅绿底 + 深绿字 */
|
||||
.publish-version-tables .ant-table-tbody > tr.row-new > td {
|
||||
background: var(--row-new-bg);
|
||||
color: var(--row-new-text);
|
||||
}
|
||||
|
||||
/* 悬停:比背景深一点的绿 */
|
||||
.publish-version-tables .ant-table-tbody > tr.row-new:hover > td {
|
||||
background: var(--row-new-bg-hover);
|
||||
}
|
||||
|
||||
/* 勾选:背景再深半度、文字最深绿(覆盖默认蓝色选中态)
|
||||
注意:antd 的选中样式作用在 td.ant-table-cell(而非 td 本身),
|
||||
且 hover 不是 :hover 伪类而是 JS 注入的 .ant-table-cell-row-hover class,
|
||||
两条规则都必须针对它们书写才能生效 */
|
||||
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
|
||||
> td.ant-table-cell {
|
||||
background: var(--row-new-bg-active);
|
||||
color: var(--row-new-text-active);
|
||||
}
|
||||
|
||||
.publish-version-tables .ant-table-tbody > tr.row-new
|
||||
> td.ant-table-cell-row-hover {
|
||||
background: var(--row-new-bg-hover);
|
||||
}
|
||||
|
||||
/* 选中 + 悬停:背景再深半度 */
|
||||
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
|
||||
> td.ant-table-cell-row-hover {
|
||||
background: var(--row-new-bg-active-hover);
|
||||
color: var(--row-new-text-active);
|
||||
}
|
||||
|
||||
@ -348,17 +348,25 @@ export function PublishModal({
|
||||
return [...pending, ...existing];
|
||||
}, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]);
|
||||
|
||||
/** 行底色:待发布且未存在 = 绿色;其余(已存在/已有版本)= 灰色 */
|
||||
const rowStyle = useCallback(
|
||||
(kind: "pending" | "existing", exists: boolean): React.CSSProperties => ({
|
||||
background:
|
||||
kind === "pending" && !exists
|
||||
? token.colorSuccessBg
|
||||
: token.colorFillQuaternary,
|
||||
}),
|
||||
[token],
|
||||
/** 新增版本行 className;已有版本行用默认样式 */
|
||||
const rowClassName = useCallback(
|
||||
(kind: "pending" | "existing", exists: boolean) =>
|
||||
kind === "pending" && !exists ? "row-new" : "",
|
||||
[],
|
||||
);
|
||||
|
||||
// 注入 antd 绿色系 token 作为 CSS 变量(供 globals.css 的 .row-new 规则使用)。
|
||||
// 三个过渡色用 color-mix 在 green-1 / green-2 之间混出半步色阶:
|
||||
// hover = 25%,选中 = 50%,选中+hover = 75%
|
||||
const newRowCssVars = {
|
||||
"--row-new-bg": token.colorSuccessBg,
|
||||
"--row-new-text": token.colorSuccessText,
|
||||
"--row-new-bg-hover": `color-mix(in srgb, ${token.colorSuccessBg} 75%, ${token.colorSuccessBgHover} 25%)`,
|
||||
"--row-new-bg-active": `color-mix(in srgb, ${token.colorSuccessBg} 50%, ${token.colorSuccessBgHover} 50%)`,
|
||||
"--row-new-bg-active-hover": `color-mix(in srgb, ${token.colorSuccessBg} 25%, ${token.colorSuccessBgHover} 75%)`,
|
||||
"--row-new-text-active": token.colorSuccessTextActive,
|
||||
} as React.CSSProperties;
|
||||
|
||||
// Auto-select all non-existing versions when data first loads
|
||||
const initRef = useRef(false);
|
||||
useEffect(() => {
|
||||
@ -556,7 +564,7 @@ export function PublishModal({
|
||||
{loadingExisting ? (
|
||||
<div style={{ textAlign: "center", padding: 40 }}>加载中…</div>
|
||||
) : (
|
||||
<Row gutter={token.margin}>
|
||||
<Row gutter={token.margin} className="publish-version-tables" style={newRowCssVars}>
|
||||
<Col span={14}>
|
||||
<Text strong style={{ display: "block", marginBottom: token.marginXS }}>
|
||||
Modrinth
|
||||
@ -566,14 +574,14 @@ export function PublishModal({
|
||||
dataSource={modrinthRows}
|
||||
columns={modrinthColumns}
|
||||
rowKey="key"
|
||||
onRow={(r) => ({
|
||||
style: rowStyle(
|
||||
rowClassName={(r) =>
|
||||
rowClassName(
|
||||
r.kind,
|
||||
r.kind === "pending"
|
||||
? (r.pending?.existsModrinth ?? false)
|
||||
: true,
|
||||
),
|
||||
})}
|
||||
)
|
||||
}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedModrinth,
|
||||
onChange: (keys) => setSelectedModrinth(keys as string[]),
|
||||
@ -601,14 +609,14 @@ export function PublishModal({
|
||||
dataSource={curseforgeRows}
|
||||
columns={curseforgeColumns}
|
||||
rowKey="key"
|
||||
onRow={(r) => ({
|
||||
style: rowStyle(
|
||||
rowClassName={(r) =>
|
||||
rowClassName(
|
||||
r.kind,
|
||||
r.kind === "pending"
|
||||
? (r.pending?.existsCurseforge ?? false)
|
||||
: true,
|
||||
),
|
||||
})}
|
||||
)
|
||||
}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedCurseforge,
|
||||
onChange: (keys) => setSelectedCurseforge(keys as string[]),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user