3025 lines
133 KiB
CSS
3025 lines
133 KiB
CSS
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 16px; }
|
||
.creation-parameter-section h3 {
|
||
margin: 0 0 8px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.creation-parameter-content { min-width: 0; }
|
||
.creation-choice-grid { gap: 3px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid button {
|
||
min-height: 46px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: #959ca5;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-choice-grid button:hover { background: rgba(255, 255, 255, .055); color: #edf0f2; }
|
||
.creation-choice-grid .creation-ratio-preview { width: 25px; height: 17px; }
|
||
.creation-choice-grid .creation-ratio-preview > span { border-width: 1px; }
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-count button { min-height: 32px; font-size: 11px; }
|
||
|
||
.creation-custom-trigger {
|
||
display: inline-flex;
|
||
height: 27px;
|
||
align-items: center;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #8bcfe0;
|
||
padding: 0 4px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-custom-trigger:hover { color: #c4edf6; }
|
||
.creation-custom-value {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 32px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin-top: 7px;
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, .055);
|
||
padding: 0 9px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-custom-value input {
|
||
min-width: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: #edf0f2;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.creation-duration-menu {
|
||
display: block;
|
||
width: 270px;
|
||
padding: 13px 14px 14px;
|
||
}
|
||
|
||
.creation-duration-heading {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-duration-heading strong { color: #f1f3f4; font-size: 13px; font-weight: 600; }
|
||
.creation-duration-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
|
||
.creation-duration-choices button {
|
||
height: 30px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: #969ca5;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .055); color: #eff1f2; }
|
||
.creation-custom-value.is-duration { width: 100%; grid-column: auto; margin-top: 7px; }
|
||
}
|
||
|
||
/* 解除旧版参数侧栏 Grid，Popover 必须是纵向信息分组。 */
|
||
.creation-parameter-section {
|
||
display: block !important;
|
||
grid-template-columns: none !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section h3 { margin: 0 0 8px !important; }
|
||
.creation-parameter-content { min-width: 0; }
|
||
.creation-choice-grid { gap: 3px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid button { min-height: 46px; }
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-count button { min-height: 32px; }
|
||
.creation-duration-menu { display: block !important; width: 270px !important; grid-template-columns: none !important; padding: 13px 14px 14px !important; }
|
||
.creation-duration-heading { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
|
||
.creation-duration-choices { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
|
||
.creation-duration-choices button { height: 30px; }
|
||
.creation-custom-value.is-duration { grid-column: auto !important; width: 100%; margin-top: 7px; }
|
||
|
||
/* 创作参数是即时选择，不使用后台式表单控件。 */
|
||
.creation-control-popover-surface {
|
||
border: 0 !important;
|
||
border-radius: 12px !important;
|
||
background: rgba(25, 27, 31, .96) !important;
|
||
box-shadow: 0 20px 48px rgba(0, 0, 0, .34) !important;
|
||
}
|
||
|
||
.creation-parameter-menu {
|
||
width: 288px !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.creation-parameter-section,
|
||
.creation-parameter-section + .creation-parameter-section {
|
||
display: block !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 14px !important; }
|
||
|
||
.creation-parameter-section > header,
|
||
.creation-duration-heading {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
justify-content: space-between;
|
||
min-height: 18px;
|
||
margin: 0 2px 7px !important;
|
||
}
|
||
|
||
.creation-parameter-section h3,
|
||
.creation-duration-heading > span {
|
||
margin: 0 !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500 !important;
|
||
letter-spacing: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section > header > span,
|
||
.creation-duration-heading strong {
|
||
color: var(--creation-text) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.creation-choice-grid { gap: 3px !important; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
|
||
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||
|
||
.creation-choice-grid.is-ratio button,
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-quality button,
|
||
.creation-choice-grid.is-count button {
|
||
display: flex !important;
|
||
min-height: 34px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
gap: 7px;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: transparent !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out), transform 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-choice-grid button:hover {
|
||
background: rgba(255, 255, 255, .055) !important;
|
||
color: var(--creation-text) !important;
|
||
}
|
||
|
||
.creation-choice-grid button.is-selected {
|
||
background: var(--control-selected-bg) !important;
|
||
color: var(--control-selected-fg) !important;
|
||
}
|
||
|
||
.creation-choice-grid .creation-ratio-preview {
|
||
display: grid;
|
||
width: 18px !important;
|
||
height: 14px !important;
|
||
flex: 0 0 18px;
|
||
place-items: center;
|
||
}
|
||
|
||
.creation-choice-grid .creation-ratio-preview > span {
|
||
max-width: 18px;
|
||
max-height: 14px;
|
||
border-width: 1px !important;
|
||
border-radius: 2px !important;
|
||
}
|
||
|
||
.creation-custom-trigger {
|
||
display: inline-flex !important;
|
||
height: 26px !important;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin: 3px 0 0 2px;
|
||
border: 0 !important;
|
||
border-radius: 4px;
|
||
background: transparent !important;
|
||
padding: 0 2px !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 10px !important;
|
||
transition: color 160ms var(--motion-ease-out), background-color 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-custom-trigger svg { width: 12px; height: 12px; }
|
||
.creation-custom-trigger:hover { background: rgba(255, 255, 255, .05) !important; color: var(--creation-text) !important; }
|
||
|
||
.creation-custom-value,
|
||
.creation-custom-value.is-duration {
|
||
display: flex !important;
|
||
width: 100% !important;
|
||
height: 32px !important;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 5px !important;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: rgba(255, 255, 255, .055) !important;
|
||
padding: 0 9px !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.creation-custom-value input {
|
||
min-width: 0;
|
||
flex: 1;
|
||
border: 0 !important;
|
||
outline: 0 !important;
|
||
background: transparent !important;
|
||
color: var(--creation-text) !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.creation-custom-value em { color: var(--creation-muted); font-size: 11px; font-style: normal; }
|
||
|
||
/* 首页图像参数保持紧凑，避免比例预设把弹层撑成整屏高度。 */
|
||
.creation-parameter-menu .image-size-picker {
|
||
gap: 7px;
|
||
}
|
||
|
||
.creation-parameter-menu .image-size-ratios {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 4px;
|
||
}
|
||
|
||
.creation-parameter-menu .image-size-ratios button {
|
||
min-height: 48px;
|
||
gap: 4px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.creation-duration-custom-field {
|
||
display: inline-flex;
|
||
min-width: 64px;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 3px;
|
||
margin-left: auto;
|
||
color: var(--creation-text);
|
||
font-size: 11px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.creation-custom-value .creation-duration-custom-field input {
|
||
width: 42px;
|
||
flex: 0 0 42px;
|
||
padding: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.creation-duration-custom-field em { color: currentColor; }
|
||
|
||
.creation-duration-menu {
|
||
display: block !important;
|
||
width: 262px !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.creation-duration-choices {
|
||
display: grid !important;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
||
gap: 3px !important;
|
||
}
|
||
|
||
.creation-duration-choices button {
|
||
height: 32px !important;
|
||
min-width: 0;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: transparent !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .055) !important; color: var(--creation-text) !important; }
|
||
.creation-duration-choices button.is-selected { background: var(--control-selected-bg) !important; color: var(--control-selected-fg) !important; }
|
||
|
||
html:not(.dark) .creation-control-popover-surface { background: rgba(255, 255, 255, .98) !important; box-shadow: 0 20px 48px rgba(25, 29, 35, .14) !important; }
|
||
html:not(.dark) .creation-choice-grid button:hover,
|
||
html:not(.dark) .creation-duration-choices button:hover,
|
||
html:not(.dark) .creation-custom-trigger:hover { background: rgba(28, 32, 37, .055) !important; }
|
||
html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055) !important; }
|
||
|
||
/* 历史对话是按更新时间倒序排列的普通记录列表，不使用时间轴视觉。 */
|
||
.creation-top-actions {
|
||
position: absolute;
|
||
z-index: 30;
|
||
top: 24px;
|
||
right: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.creation-top-action {
|
||
display: inline-flex;
|
||
min-height: var(--space-8);
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-md);
|
||
background: transparent;
|
||
color: var(--creation-muted);
|
||
padding: 0 var(--space-2);
|
||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||
}
|
||
|
||
.creation-top-action svg { width: var(--space-4); height: var(--space-4); }
|
||
.creation-top-action:hover,
|
||
.creation-top-action[aria-expanded="true"] { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||
.creation-top-action:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||
|
||
.creation-history-drawer,
|
||
.creation-history-drawer-root {
|
||
--creation-history-bg: #111316;
|
||
--creation-history-surface: #1a1d22;
|
||
--creation-history-hover: #20242a;
|
||
--creation-history-text: #f1f3f4;
|
||
--creation-history-muted: #858c96;
|
||
--creation-history-faint: #555c66;
|
||
--creation-history-line: rgba(255, 255, 255, .09);
|
||
--creation-history-accent: var(--workspace-accent);
|
||
}
|
||
|
||
html:not(.dark) .creation-history-drawer,
|
||
html:not(.dark) .creation-history-drawer-root {
|
||
--creation-history-bg: #f8f8f6;
|
||
--creation-history-surface: #ffffff;
|
||
--creation-history-hover: #f0f1ee;
|
||
--creation-history-text: #202328;
|
||
--creation-history-muted: #747c85;
|
||
--creation-history-faint: #b0b6bc;
|
||
--creation-history-line: rgba(28, 32, 37, .11);
|
||
--creation-history-accent: #1688a3;
|
||
}
|
||
|
||
.creation-history-drawer.ant-drawer-content,
|
||
.creation-history-drawer .ant-drawer-content,
|
||
.creation-history-drawer-root .ant-drawer-content { background: var(--creation-history-bg); color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-header { min-height: 68px; border-bottom: 0; padding: 16px 18px 14px 20px; }
|
||
.creation-history-drawer .ant-drawer-title { color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-close { display: grid; width: 32px; height: 32px; place-items: center; margin-inline-end: 10px; border-radius: var(--r-sm); color: var(--creation-history-muted); }
|
||
.creation-history-drawer .ant-drawer-close:hover { background: var(--creation-history-hover); color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-close:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 66%, transparent); outline-offset: 1px; }
|
||
.creation-history-drawer .ant-drawer-body { overscroll-behavior: contain; }
|
||
|
||
.creation-history-title { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
|
||
.creation-history-title > span { font-size: var(--fs-title); font-weight: 680; letter-spacing: 0; }
|
||
.creation-history-title small { color: var(--creation-history-muted); font-size: var(--fs-label); font-weight: 500; }
|
||
|
||
.creation-history-content { min-height: 100%; padding: 14px 14px 20px; }
|
||
.creation-history-search { display: flex; height: 38px; align-items: center; gap: 9px; margin: 0 2px 12px; border: 1px solid var(--creation-history-line); border-radius: var(--r-sm); background: var(--creation-history-surface); padding: 0 11px; color: var(--creation-history-muted); transition: border-color 150ms ease, background-color 150ms ease; }
|
||
.creation-history-search:focus-within { border-color: color-mix(in srgb, var(--creation-history-accent) 58%, var(--creation-history-line)); background: var(--creation-history-hover); }
|
||
.creation-history-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
|
||
.creation-history-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--creation-history-text); font: inherit; font-size: var(--fs-label); }
|
||
.creation-history-search input::placeholder { color: var(--creation-history-muted); }
|
||
|
||
.creation-history-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
|
||
.creation-history-list > li { position: relative; min-width: 0; }
|
||
.creation-history-row { position: relative; display: flex; min-width: 0; align-items: center; border-radius: var(--r-sm); transition: background-color 150ms ease; }
|
||
.creation-history-row:hover { background: var(--creation-history-hover); }
|
||
.creation-history-row .creation-history-item-main { display: flex; min-width: 0; flex: 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border: 0; border-radius: var(--r-sm); background: transparent; padding: 8px 62px 8px 12px; color: var(--creation-history-text); text-align: left; }
|
||
.creation-history-row .creation-history-item-main:hover { background: transparent; }
|
||
.creation-history-row .creation-history-item-main:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 68%, transparent); outline-offset: -2px; }
|
||
.creation-history-list > li.is-active .creation-history-row { background: color-mix(in srgb, var(--creation-history-accent) 9%, var(--creation-history-surface)); }
|
||
.creation-history-list > li.is-active .creation-history-row:hover { background: color-mix(in srgb, var(--creation-history-accent) 14%, var(--creation-history-surface)); }
|
||
.creation-history-item-heading { width: 100%; overflow: hidden; font-size: var(--fs-label); font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
||
.creation-history-item-text { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
|
||
.creation-history-item-icon {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border-radius: 99px;
|
||
background: color-mix(in srgb, var(--creation-history-accent) 16%, transparent);
|
||
color: var(--creation-history-accent);
|
||
transition: background-color 150ms ease, color 150ms ease;
|
||
}
|
||
.creation-history-item-icon svg { width: 16px; height: 16px; }
|
||
.creation-history-list > li.is-active .creation-history-item-icon { background: color-mix(in srgb, var(--creation-history-accent) 24%, transparent); color: var(--creation-history-accent); }
|
||
.creation-history-snippet { display: flex; width: 100%; min-width: 0; align-items: baseline; gap: 6px; overflow: hidden; color: color-mix(in srgb, var(--creation-history-muted) 88%, transparent); font-size: var(--fs-micro); line-height: 1.45; }
|
||
.creation-history-snippet em { flex: 0 0 auto; color: color-mix(in srgb, var(--creation-history-muted) 80%, transparent); font-size: var(--fs-micro); font-style: normal; font-weight: 600; }
|
||
.creation-history-snippet span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.creation-history-time-slot { position: absolute; z-index: 1; top: 50%; right: 8px; display: flex; height: 26px; align-items: center; color: var(--creation-history-muted); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; pointer-events: none; transform: translateY(-50%); transition: opacity 150ms ease; }
|
||
.creation-history-more { position: absolute; z-index: 2; top: 50%; right: 8px; display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--creation-history-muted); opacity: 0; transform: translateY(-50%); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease; }
|
||
.creation-history-row:hover .creation-history-time-slot { opacity: 0; }
|
||
.creation-history-row:hover .creation-history-more,
|
||
.creation-history-row:focus-within .creation-history-more,
|
||
.creation-history-more.is-open,
|
||
.creation-history-more:focus-visible { opacity: 1; }
|
||
.creation-history-more:hover,
|
||
.creation-history-more.is-open { background: var(--creation-history-hover); color: var(--creation-history-text); }
|
||
.creation-history-more:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 66%, transparent); outline-offset: 1px; }
|
||
.creation-history-more svg { width: 16px; height: 16px; }
|
||
.creation-history-rename { display: flex; min-height: 52px; align-items: center; border-radius: var(--r-sm); background: var(--creation-history-hover); padding: 0 8px; }
|
||
.creation-history-rename-input { width: 100%; border: 0; border-radius: var(--r-sm); background: transparent; padding: 7px 8px; color: var(--creation-history-text); font: inherit; font-size: var(--fs-label); font-weight: 600; }
|
||
.creation-history-rename-input::selection { background: color-mix(in srgb, var(--creation-history-accent) 32%, transparent); }
|
||
.creation-history-rename-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 60%, transparent); outline-offset: 0; }
|
||
.creation-history-empty { display: grid; min-height: 180px; place-items: center; color: var(--creation-history-muted); font-size: var(--fs-label); }
|
||
.creation-history-menu-overlay .ant-dropdown-menu { border-radius: var(--r-md); padding: 4px; min-width: 168px; }
|
||
.creation-history-menu-overlay .ant-dropdown-menu .ant-dropdown-menu-item { border-radius: 6px; }
|
||
.creation-history-menu-overlay .ant-dropdown-menu-item-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
|
||
.creation-history-menu-overlay .ant-dropdown-menu-item-icon svg { display: block; width: 14px; height: 14px; }
|
||
@media (pointer: coarse) {
|
||
.creation-history-more { opacity: 1; }
|
||
.creation-history-row:hover .creation-history-time-slot { opacity: 1; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-history-row,
|
||
.creation-history-more,
|
||
.creation-history-time-slot { transition: none; }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.creation-top-actions { top: 14px; right: 14px; }
|
||
.creation-top-action { width: 40px; height: 40px; }
|
||
.creation-history-drawer { width: 100vw !important; max-width: 100vw; }
|
||
.creation-history-drawer-root .ant-drawer-content-wrapper { width: 100vw !important; max-width: 100vw; }
|
||
.creation-history-drawer .ant-drawer-header { min-height: 62px; padding: 14px 14px 12px 16px; }
|
||
.creation-history-title > span { font-size: var(--fs-heading-lg); }
|
||
.creation-history-content { padding: 12px 12px 18px; }
|
||
}
|
||
|
||
/* -------------------------------------------------------------------------
|
||
Monochrome product surfaces
|
||
页面级黑白主题收口：焦点用边框表达，浮层使用单一表面，避免渐变、米色和蓝紫光圈在不同页面漂移。
|
||
------------------------------------------------------------------------- */
|
||
.creation-home {
|
||
--creation-accent: var(--workspace-accent);
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: var(--workspace-surface, color-mix(in srgb, var(--background) 96%, var(--foreground) 4%));
|
||
--creation-surface-muted: color-mix(in srgb, var(--creation-surface) 88%, var(--foreground) 12%);
|
||
--creation-surface-hover: color-mix(in srgb, var(--creation-surface) 78%, var(--foreground) 22%);
|
||
--creation-surface-selected: color-mix(in srgb, var(--creation-surface) 68%, var(--foreground) 32%);
|
||
--creation-border: var(--workspace-border, color-mix(in srgb, var(--foreground) 14%, transparent));
|
||
--creation-border-strong: var(--workspace-border-strong, color-mix(in srgb, var(--foreground) 24%, transparent));
|
||
--creation-shadow: var(--elevation-card);
|
||
}
|
||
|
||
:where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-selector, .ant-select-multiple .ant-select-selection-search-input) {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused, .ant-input-number-focused, .ant-select-focused .ant-select-selector) {
|
||
border-color: var(--control-focus-ring) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
:where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-input-number:hover, .ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
|
||
border-color: color-mix(in srgb, var(--foreground) 42%, var(--border)) !important;
|
||
}
|
||
|
||
:where(.ant-select-dropdown, .ant-dropdown-menu) {
|
||
border: 0 !important;
|
||
border-radius: var(--r-lg) !important;
|
||
background: var(--popover) !important;
|
||
background-image: none !important;
|
||
box-shadow: var(--elevation-overlay) !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
:where(.ant-popover-inner, .ant-picker-dropdown .ant-picker-panel-container) {
|
||
border: 1px solid var(--border) !important;
|
||
border-radius: var(--r-md) !important;
|
||
background: var(--popover) !important;
|
||
background-image: none !important;
|
||
box-shadow: var(--shadow-lg) !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
/* Tooltip 必须使用同一套浮层背景/前景语义色。Ant Design 会让它继承
|
||
colorTextLightSolid（实心按钮文字色），深色主题下会形成深底深字。 */
|
||
:where(.ant-tooltip) {
|
||
--ant-tooltip-arrow-background-color: var(--popover) !important;
|
||
--ant-tooltip-overlay-color: var(--popover-foreground) !important;
|
||
}
|
||
|
||
:where(.ant-tooltip-container, .ant-tooltip-inner) {
|
||
background: var(--popover) !important;
|
||
color: var(--popover-foreground) !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option, .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title, .ant-cascader-menu-item, .ant-mentions-dropdown-menu-item) {
|
||
min-height: 36px;
|
||
margin-block: 2px;
|
||
padding-block: 7px !important;
|
||
border-radius: var(--r-sm) !important;
|
||
color: var(--popover-foreground) !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option-active:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item:hover, .ant-cascader-menu-item-active) {
|
||
background: color-mix(in srgb, var(--popover-foreground) 6%, var(--popover)) !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option-selected:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item-selected) {
|
||
background: color-mix(in srgb, var(--popover-foreground) 12%, var(--popover)) !important;
|
||
color: var(--popover-foreground) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
:where(.ant-tag-success, .ant-tag-warning, .ant-tag-processing, .ant-tag-cyan, .ant-tag-blue, .ant-tag-green, .ant-tag-gold, .ant-tag-orange) {
|
||
border-color: color-mix(in srgb, var(--foreground) 18%, transparent) !important;
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent) !important;
|
||
color: color-mix(in srgb, var(--foreground) 76%, transparent) !important;
|
||
}
|
||
|
||
/* 图标 + 文字 Tag 对齐：AntD 6 的 icon 是 svg 直接子节点，需整体内联居中 */
|
||
.ant-tag:has(> svg) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.ant-tag > svg {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ant-tag > .ant-tag-content {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* 鼠标点击不留下“选中框”；键盘导航仍通过 :focus-visible 保留可发现的焦点提示。 */
|
||
:where(button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), label[for], input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), .ant-btn:not(:disabled), .ant-switch:not(.ant-switch-disabled), .ant-select:not(.ant-select-disabled), .ant-dropdown-trigger, .ant-tabs-tab, .ant-segmented-item, .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next, .ant-dropdown-menu-item, .ant-menu-item, .ant-select-item-option, .ant-checkbox-wrapper, .ant-radio-wrapper, .ant-upload, .ant-collapse-header, .ant-slider, .ant-rate-star, .ant-tag-checkable) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
:where(button:disabled, [role="button"][aria-disabled="true"], .ant-btn:disabled, .ant-switch-disabled, .ant-select-disabled, .ant-tabs-tab-disabled, .ant-segmented-item-disabled, .ant-pagination-disabled, .ant-dropdown-menu-item-disabled, .ant-menu-item-disabled, .ant-select-item-option-disabled, .ant-checkbox-wrapper-disabled, .ant-radio-wrapper-disabled, .ant-upload-disabled, .ant-collapse-header[aria-disabled="true"]) {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
:where(button, [role="button"], a, .ant-btn):focus:not(:focus-visible) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Modal 关闭后会把焦点还给触发按钮；收窄该按钮的键盘焦点环，避免出现持续的粗灰边。 */
|
||
.canvas-topbar-import-button:focus-visible {
|
||
outline: 1px solid color-mix(in srgb, var(--foreground) 55%, transparent) !important;
|
||
outline-offset: 1px !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:where([class*="card"], [class*="Card"]):focus:not(:focus-visible),
|
||
:where([class*="card"], [class*="Card"]):has(:focus:not(:focus-visible)) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
|
||
/* 显式兜底：Tailwind 生成的 hover 背景在部分层叠顺序下未生效，这里保持语义 token 一致。 */
|
||
.hover\:bg-surface-hover:hover {
|
||
background-color: var(--surface-hover);
|
||
}
|
||
|
||
/* 空态把视觉锚点放在输入框上方，保留足够留白让首个动作自然下沉。 */
|
||
.creation-empty-workspace {
|
||
justify-content: flex-start;
|
||
padding-top: clamp(28px, 7vh, 84px);
|
||
padding-bottom: clamp(28px, 6vh, 72px);
|
||
}
|
||
|
||
.creation-empty-art {
|
||
position: relative;
|
||
width: min(440px, 78vw);
|
||
height: 172px;
|
||
margin: 0 auto 18px;
|
||
isolation: isolate;
|
||
}
|
||
|
||
.creation-empty-art-frame {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
border: 1px solid color-mix(in srgb, var(--creation-text) 12%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: var(--creation-surface);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.creation-empty-art-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.96); }
|
||
.creation-empty-art-frame.is-back { top: 15px; left: 3%; width: 29%; height: 122px; transform: rotate(-8deg); opacity: .42; }
|
||
.creation-empty-art-frame.is-main { z-index: 2; top: 0; left: 25%; width: 50%; height: 156px; transform: rotate(1deg); }
|
||
.creation-empty-art-frame.is-front { top: 22px; right: 3%; width: 29%; height: 122px; transform: rotate(7deg); opacity: .48; }
|
||
.creation-empty-art-frame.is-main::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, #111 44%, transparent)); content: ""; }
|
||
.creation-empty-art-frame span { position: absolute; z-index: 1; right: 13px; bottom: 12px; color: #fff; font-size: var(--fs-micro); letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
|
||
.creation-empty-art-caption { position: absolute; right: 25%; bottom: -3px; display: flex; align-items: center; gap: 8px; color: var(--creation-faint); font-size: var(--fs-micro); letter-spacing: .12em; }
|
||
.creation-empty-art-caption span:first-child { color: var(--creation-text); font-variant-numeric: tabular-nums; }
|
||
.creation-empty-workspace .creation-chat-intro { margin-bottom: 24px; }
|
||
|
||
/* 素材选择器是创作页、自由画布和项目画布的唯一视觉入口。 */
|
||
.workspace-modal {
|
||
width: min(var(--modal-width-standard), calc(100vw - var(--space-6))) !important;
|
||
max-width: calc(100vw - var(--space-6)) !important;
|
||
}
|
||
.workspace-modal.workspace-modal-compact { width: min(var(--modal-width-compact), calc(100vw - var(--space-6))) !important; }
|
||
.workspace-modal.workspace-modal-wide { width: min(var(--modal-width-wide), calc(100vw - var(--space-6))) !important; }
|
||
:is(.workspace-modal, .library-modal) .ant-modal-container {
|
||
overflow: hidden;
|
||
border: 0 !important;
|
||
border-radius: var(--modal-radius) !important;
|
||
background: var(--popover) !important;
|
||
box-shadow: var(--elevation-overlay) !important;
|
||
}
|
||
.canvas-shortcuts-modal .ant-modal-close {
|
||
top: 16px;
|
||
right: 16px;
|
||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||
}
|
||
.canvas-shortcuts-modal .ant-modal-close:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--foreground);
|
||
}
|
||
.canvas-shortcuts-shell {
|
||
display: flex;
|
||
height: min(680px, 78dvh);
|
||
min-height: 500px;
|
||
flex-direction: column;
|
||
color: var(--foreground);
|
||
overscroll-behavior: contain;
|
||
}
|
||
.canvas-shortcuts-header {
|
||
display: grid;
|
||
flex-shrink: 0;
|
||
grid-template-columns: minmax(220px, 1fr) minmax(260px, 360px);
|
||
align-items: center;
|
||
gap: var(--space-6);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 18px 56px 18px 20px;
|
||
}
|
||
.canvas-shortcuts-heading {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.canvas-shortcuts-heading-icon {
|
||
display: grid;
|
||
width: 38px;
|
||
height: 38px;
|
||
flex-shrink: 0;
|
||
place-items: center;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 76%, transparent);
|
||
}
|
||
.canvas-shortcuts-heading-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
stroke-width: 1.7;
|
||
}
|
||
.canvas-shortcuts-heading > span:last-child {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
.canvas-shortcuts-heading strong {
|
||
font-size: var(--fs-body);
|
||
font-weight: 680;
|
||
line-height: 1.2;
|
||
}
|
||
.canvas-shortcuts-heading small {
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||
font-size: var(--fs-micro);
|
||
line-height: 1.35;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.canvas-shortcuts-search {
|
||
display: flex;
|
||
height: 38px;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 9px;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||
border-radius: var(--r-sm);
|
||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||
padding: 0 10px;
|
||
transition: border-color var(--motion-state) ease, background-color var(--motion-state) ease, box-shadow var(--motion-state) ease;
|
||
}
|
||
.canvas-shortcuts-search:focus-within {
|
||
border-color: color-mix(in srgb, var(--ring) 48%, transparent);
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
box-shadow: none;
|
||
}
|
||
.canvas-shortcuts-search > svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
flex-shrink: 0;
|
||
color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
||
stroke-width: 1.8;
|
||
}
|
||
.canvas-shortcuts-search input {
|
||
width: 100%;
|
||
min-width: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: var(--foreground);
|
||
font-size: var(--fs-label);
|
||
}
|
||
.canvas-shortcuts-search input::placeholder {
|
||
color: color-mix(in srgb, var(--foreground) 36%, transparent);
|
||
}
|
||
.canvas-shortcuts-search button {
|
||
flex-shrink: 0;
|
||
border: 0;
|
||
border-radius: var(--r-xs);
|
||
background: transparent;
|
||
padding: 3px 5px;
|
||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||
font-size: var(--fs-micro);
|
||
cursor: pointer;
|
||
}
|
||
.canvas-shortcuts-search button:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--foreground);
|
||
}
|
||
.canvas-shortcuts-search button:focus-visible,
|
||
.canvas-shortcuts-categories button:focus-visible {
|
||
outline: 2px solid var(--control-focus-ring);
|
||
outline-offset: -2px;
|
||
}
|
||
.canvas-shortcuts-close-hint kbd {
|
||
display: inline-flex;
|
||
min-width: 28px;
|
||
height: 22px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||
border-radius: var(--r-xs);
|
||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||
padding: 0 6px;
|
||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 600;
|
||
}
|
||
.canvas-shortcuts-body {
|
||
display: grid;
|
||
min-height: 0;
|
||
flex: 1;
|
||
grid-template-columns: 174px minmax(0, 1fr);
|
||
}
|
||
.canvas-shortcuts-categories {
|
||
display: flex;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
border-right: 1px solid var(--border);
|
||
padding: 14px 10px;
|
||
}
|
||
.canvas-shortcuts-categories button {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 36px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
border: 0;
|
||
border-radius: var(--r-sm);
|
||
background: transparent;
|
||
padding: 0 10px;
|
||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||
font-size: var(--fs-label);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||
}
|
||
.canvas-shortcuts-categories button:hover {
|
||
background: var(--surface-hover);
|
||
color: var(--foreground);
|
||
}
|
||
.canvas-shortcuts-categories button.is-active {
|
||
background: var(--control-selected-bg);
|
||
color: var(--control-selected-fg);
|
||
font-weight: 620;
|
||
}
|
||
.canvas-shortcuts-categories button small {
|
||
color: color-mix(in srgb, currentColor 52%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.canvas-shortcuts-results {
|
||
min-width: 0;
|
||
overflow-y: auto;
|
||
padding: 8px 18px 18px;
|
||
scrollbar-gutter: stable;
|
||
}
|
||
.canvas-shortcuts-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.canvas-shortcuts-row {
|
||
display: grid;
|
||
min-height: 66px;
|
||
grid-template-columns: minmax(180px, 1fr) minmax(220px, auto);
|
||
align-items: center;
|
||
gap: var(--space-5);
|
||
border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
|
||
padding: 11px 8px;
|
||
}
|
||
.canvas-shortcuts-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
.canvas-shortcuts-row:hover {
|
||
border-radius: var(--r-sm);
|
||
background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
|
||
}
|
||
.canvas-shortcuts-row-copy {
|
||
min-width: 0;
|
||
}
|
||
.canvas-shortcuts-row-title {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.canvas-shortcuts-row-title strong {
|
||
overflow: hidden;
|
||
font-size: var(--fs-label);
|
||
font-weight: 640;
|
||
line-height: 1.35;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.canvas-shortcuts-row-title small {
|
||
flex-shrink: 0;
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||
padding: 2px 6px;
|
||
color: color-mix(in srgb, var(--foreground) 44%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
line-height: 1.3;
|
||
}
|
||
.canvas-shortcuts-row-copy p {
|
||
margin: 4px 0 0;
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--foreground) 43%, transparent);
|
||
font-size: var(--fs-micro);
|
||
line-height: 1.4;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.canvas-shortcuts-keys {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 6px;
|
||
}
|
||
.canvas-shortcuts-combination,
|
||
.canvas-shortcuts-key-part {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.canvas-shortcuts-combination em,
|
||
.canvas-shortcuts-key-part i {
|
||
color: color-mix(in srgb, var(--foreground) 28%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-style: normal;
|
||
}
|
||
.canvas-shortcuts-combination em {
|
||
margin: 0 2px;
|
||
}
|
||
.canvas-shortcuts-key-part kbd {
|
||
display: inline-flex;
|
||
min-width: 28px;
|
||
min-height: 26px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 13%, transparent);
|
||
border-radius: 6px;
|
||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
padding: 4px 7px;
|
||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
.canvas-shortcuts-empty {
|
||
display: grid;
|
||
min-height: 300px;
|
||
place-items: center;
|
||
align-content: center;
|
||
gap: 8px;
|
||
text-align: center;
|
||
}
|
||
.canvas-shortcuts-empty svg {
|
||
width: 26px;
|
||
height: 26px;
|
||
margin-bottom: 3px;
|
||
color: color-mix(in srgb, var(--foreground) 28%, transparent);
|
||
stroke-width: 1.5;
|
||
}
|
||
.canvas-shortcuts-empty strong {
|
||
font-size: var(--fs-label);
|
||
font-weight: 620;
|
||
}
|
||
.canvas-shortcuts-empty span {
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
font-size: var(--fs-micro);
|
||
}
|
||
.canvas-shortcuts-footer {
|
||
display: flex;
|
||
min-height: 44px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-4);
|
||
border-top: 1px solid var(--border);
|
||
padding: 8px 18px;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
font-size: var(--fs-micro);
|
||
}
|
||
.canvas-shortcuts-close-hint {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
@media (max-width: 680px) {
|
||
.canvas-shortcuts-shell {
|
||
height: min(720px, 88dvh);
|
||
min-height: 440px;
|
||
}
|
||
.canvas-shortcuts-header {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
padding: 16px 48px 14px 14px;
|
||
}
|
||
.canvas-shortcuts-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.canvas-shortcuts-categories {
|
||
flex-shrink: 0;
|
||
flex-direction: row;
|
||
overflow-x: auto;
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 8px 10px;
|
||
}
|
||
.canvas-shortcuts-categories button {
|
||
width: auto;
|
||
min-width: max-content;
|
||
gap: 7px;
|
||
padding: 0 10px;
|
||
}
|
||
.canvas-shortcuts-results {
|
||
padding: 6px 10px 14px;
|
||
}
|
||
.canvas-shortcuts-row {
|
||
min-height: 0;
|
||
grid-template-columns: 1fr;
|
||
gap: 9px;
|
||
padding: 12px 6px;
|
||
}
|
||
.canvas-shortcuts-row-copy p {
|
||
white-space: normal;
|
||
}
|
||
.canvas-shortcuts-keys {
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
.asset-library-picker-modal { margin: 0 auto !important; }
|
||
.asset-library-picker-modal .ant-modal-container { padding: 0 !important; }
|
||
.asset-library-picker-modal .ant-modal-body { padding: 0 !important; }
|
||
.asset-library-picker-modal .ant-modal-close { top: 12px; right: 12px; }
|
||
.asset-picker-shell { display: flex; height: min(640px, calc(100vh - var(--space-12))); min-height: 460px; flex-direction: column; color: var(--foreground); overscroll-behavior: contain; }
|
||
.asset-picker-toolbar { display: grid; min-height: 64px; flex-shrink: 0; grid-template-columns: minmax(132px, 1fr) minmax(240px, 360px) minmax(132px, 1fr); align-items: center; gap: 16px; padding: 10px 52px 10px 18px; }
|
||
.asset-picker-heading { display: flex; min-width: 0; align-items: center; gap: 10px; overflow: hidden; }
|
||
.asset-picker-heading-copy { display: flex; min-width: 0; flex-shrink: 0; align-items: center; gap: 10px; }
|
||
.asset-picker-heading-copy > span { color: var(--foreground); font-size: var(--fs-label); font-weight: 650; line-height: 1.2; }
|
||
.asset-picker-title-trigger { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; border: 0; border-radius: var(--r-sm); background: transparent; padding: 0 6px; color: var(--foreground); cursor: pointer; transition: background-color var(--motion-state) ease, color var(--motion-state) ease; }
|
||
.asset-picker-title-trigger strong { color: color-mix(in srgb, var(--foreground) 40%, transparent); font-size: var(--fs-label); font-weight: 560; line-height: 1.2; }
|
||
.asset-picker-title-trigger:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); }
|
||
.asset-picker-title-trigger:hover strong { color: var(--foreground); }
|
||
.asset-picker-title-trigger:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: -2px; }
|
||
.asset-picker-title-trigger svg { width: 14px; height: 14px; color: color-mix(in srgb, var(--foreground) 48%, transparent); }
|
||
.asset-picker-source-dropdown .ant-dropdown-menu { width: 148px !important; min-width: 0 !important; padding: 3px !important; }
|
||
.asset-picker-source-dropdown .ant-dropdown-menu-item { min-height: 30px; padding: 4px 8px !important; border-radius: var(--r-sm) !important; font-size: var(--fs-micro); line-height: 20px; }
|
||
.asset-picker-source-dropdown .ant-dropdown-menu-item-icon { width: 15px; height: 15px; margin-inline-end: 6px !important; }
|
||
.asset-picker-source-menu-label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.asset-picker-source-menu-label em { color: color-mix(in srgb, currentColor 58%, transparent); font-size: var(--fs-micro); font-style: normal; }
|
||
.asset-picker-search { display: flex; height: 38px; min-width: 0; align-items: center; gap: 9px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--foreground) 6%, transparent); padding: 0 12px; transition: background-color var(--motion-state) ease, box-shadow var(--motion-state) ease; }
|
||
.asset-picker-search:focus-within { background: color-mix(in srgb, var(--foreground) 8%, transparent); box-shadow: none; }
|
||
.asset-picker-search svg { width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.asset-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: var(--fs-label); }
|
||
.asset-picker-count { justify-self: end; color: color-mix(in srgb, var(--foreground) 42%, transparent); font-size: var(--fs-micro); }
|
||
.asset-picker-body { display: grid; min-height: 0; flex: 1; grid-template-columns: 176px minmax(0, 1fr); gap: var(--space-4); padding: 0 18px; }
|
||
.asset-picker-categories { overflow-y: auto; padding: 10px 0; }
|
||
.asset-picker-nav-label { display: block; padding: 10px 10px 4px; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-micro); font-weight: 650; letter-spacing: .04em; }
|
||
.asset-picker-categories .assets-filter-item { width: 100%; height: 32px; }
|
||
.asset-picker-categories .assets-filter-item:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--foreground); }
|
||
.asset-picker-categories .assets-filter-item.is-active { background: var(--control-selected-bg); color: var(--control-selected-fg); font-weight: 560; }
|
||
.asset-picker-categories .assets-filter-item.is-active:hover { background: var(--control-selected-hover-bg); color: var(--control-selected-fg); }
|
||
.asset-picker-grid-wrap { min-width: 0; overflow-y: auto; padding: 8px 0 16px; }
|
||
.asset-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-content: start; }
|
||
.asset-picker-card { min-width: 0; overflow: hidden; }
|
||
.asset-picker-card-action { display: block; width: 100%; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; text-align: left; }
|
||
.asset-picker-card-action:disabled { cursor: not-allowed; }
|
||
.asset-library-picker-modal .asset-picker-card > .asset-picker-card-action { padding-inline: 0; }
|
||
.asset-picker-card:hover { background: var(--library-surface-hover); }
|
||
.asset-picker-card:active { transform: translateY(var(--library-active-offset)) scale(.995); }
|
||
.asset-picker-card-action:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: -2px; }
|
||
.asset-picker-card.is-selected { box-shadow: inset 0 0 0 1px var(--library-selected-stroke); }
|
||
.asset-picker-card.is-disabled { opacity: .46; }
|
||
.asset-picker-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--library-cover-surface); }
|
||
.cached-resource-image-shell { display: grid; width: 100%; height: 100%; place-items: center; }
|
||
.asset-picker-card-media > img, .asset-picker-card-media > video, .asset-picker-card-media > .cached-resource-image-shell > img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||
.asset-picker-card-media > img.is-contain, .asset-picker-card-media > .cached-resource-image-shell > img.is-contain { object-fit: contain; padding: 4px; }
|
||
.asset-picker-card-check { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; width: 22px; height: 22px; place-items: center; border: 1.5px solid rgba(255, 255, 255, .72); border-radius: 7px; background: rgba(10, 10, 10, .42); color: transparent; opacity: 0; backdrop-filter: blur(6px); transition: opacity 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out; }
|
||
.asset-picker-card-check svg { width: 13px; height: 13px; }
|
||
.asset-picker-card:hover .asset-picker-card-check, .asset-picker-card:focus-within .asset-picker-card-check, .asset-picker-card.is-selected .asset-picker-card-check { opacity: 1; }
|
||
.asset-picker-card.is-selected .asset-picker-card-check { border-color: var(--control-check-bg); background: var(--control-check-bg); color: var(--control-check-fg); }
|
||
|
||
.asset-picker-card-lock { position: absolute; right: 38px; bottom: 8px; max-width: 112px; color: rgba(255, 255, 255, .82); font-size: var(--fs-micro); text-align: right; }
|
||
.asset-picker-card-copy { display: flex; min-height: 64px; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 10px 12px; }
|
||
.asset-picker-card-copy strong, .asset-picker-card-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.asset-picker-card-copy strong { font-size: var(--fs-body); font-weight: 620; }
|
||
.asset-picker-card-copy span { color: color-mix(in srgb, var(--foreground) 42%, transparent); font-size: var(--fs-micro); }
|
||
.asset-picker-card-fallback, .asset-picker-empty { display: grid; place-items: center; color: color-mix(in srgb, var(--foreground) 36%, transparent); }
|
||
.asset-picker-card-fallback { height: 100%; }
|
||
.asset-picker-card-fallback svg { width: 27px; height: 27px; }
|
||
.asset-picker-empty { grid-column: 1 / -1; min-height: 260px; align-content: center; gap: 8px; text-align: center; }
|
||
.asset-picker-empty svg { width: 30px; height: 30px; color: color-mix(in srgb, var(--foreground) 48%, transparent); }
|
||
.asset-picker-empty strong { color: color-mix(in srgb, var(--foreground) 70%, transparent); font-size: var(--fs-label); }
|
||
.asset-picker-empty span { font-size: var(--fs-micro); }
|
||
.asset-picker-footer { display: flex; flex-shrink: 0; align-items: center; gap: 16px; padding: 12px 16px 14px; }
|
||
.asset-picker-footer.is-compact { min-height: 64px; justify-content: space-between; }
|
||
.asset-picker-upload { display: flex; min-height: 56px; flex: 1; align-items: center; gap: 12px; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 5%, transparent); padding: 0 16px; color: var(--foreground); text-align: left; transition: background-color var(--motion-state) ease; }
|
||
.asset-picker-upload:hover:not(:disabled) { background: var(--library-surface-hover); }
|
||
.asset-picker-upload:disabled { cursor: wait; opacity: .72; }
|
||
.asset-picker-upload > svg { width: 20px; height: 20px; color: color-mix(in srgb, var(--foreground) 58%, transparent); }
|
||
.asset-picker-upload span { display: flex; flex-direction: column; gap: 3px; }
|
||
.asset-picker-upload strong { font-size: var(--fs-label); font-weight: 650; }
|
||
.asset-picker-upload small, .asset-picker-footer-note { color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-micro); }
|
||
.asset-picker-footer-error { max-width: 240px; color: var(--destructive); font-size: var(--fs-micro); line-height: 1.45; }
|
||
.asset-picker-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
|
||
.asset-picker-categories button:focus-visible, .asset-picker-upload:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: -2px; }
|
||
.asset-picker-actions .ant-btn { box-shadow: none; }
|
||
.asset-picker-actions svg { width: 14px; height: 14px; }
|
||
|
||
@media (max-width: 680px) {
|
||
.creation-empty-workspace { width: calc(100% - 28px); padding-top: 28px; }
|
||
.creation-empty-art { width: min(390px, 90vw); height: 142px; }
|
||
.creation-empty-art-frame.is-main { height: 130px; }
|
||
.creation-empty-art-frame.is-back, .creation-empty-art-frame.is-front { height: 102px; }
|
||
.asset-picker-shell { min-height: 0; height: min(640px, calc(100vh - var(--space-8))); }
|
||
.asset-picker-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px 42px 10px 12px; }
|
||
.asset-picker-heading { gap: 6px; }
|
||
.asset-picker-heading-copy { gap: 6px; }
|
||
.asset-picker-title-trigger { padding-inline: 4px; }
|
||
.asset-picker-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
|
||
.asset-picker-count { grid-column: 2; grid-row: 1; }
|
||
.asset-picker-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
|
||
.asset-picker-categories { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
|
||
.asset-picker-nav-label { display: none; }
|
||
.asset-picker-categories button { width: auto; min-width: 96px; }
|
||
.asset-picker-grid-wrap { padding: 10px 4px; }
|
||
.asset-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
|
||
.asset-picker-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px 12px; }
|
||
.asset-picker-footer.is-compact { min-height: 0; }
|
||
.asset-picker-actions { justify-content: flex-end; }
|
||
}
|
||
|
||
/* 轮播承担首屏视觉主角，工作区只保留很窄的安全边距。 */
|
||
.creation-empty-workspace { width: min(1320px, calc(100% - 24px)); padding-top: clamp(18px, 3vh, 40px); }
|
||
.creation-empty-art { width: min(1060px, calc(100% - 72px)); height: 300px; margin-bottom: 22px; }
|
||
.creation-empty-art-frame.is-back { top: 28px; left: 2%; width: 23%; height: 220px; }
|
||
.creation-empty-art-frame.is-main { top: 0; left: 19%; width: 62%; height: 270px; }
|
||
.creation-empty-art-frame.is-front { top: 34px; right: 2%; width: 23%; height: 220px; }
|
||
.creation-empty-art-frame img { animation: creation-empty-art-image-in 500ms var(--motion-ease-out) both; }
|
||
.creation-empty-art-caption { right: 19%; bottom: -4px; }
|
||
.creation-empty-workspace .creation-chat-intro { margin-top: 42px; }
|
||
.creation-empty-composer { width: min(1120px, calc(100% - 48px)); }
|
||
|
||
@keyframes creation-empty-art-image-in {
|
||
from { opacity: .35; transform: scale(1.035); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-empty-art-frame img { animation: none; }
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.creation-empty-workspace { width: calc(100% - 16px); padding-top: 18px; }
|
||
.creation-empty-art { width: calc(100% - 10px); height: 210px; margin-bottom: 20px; }
|
||
.creation-empty-art-frame.is-back { top: 18px; height: 150px; }
|
||
.creation-empty-art-frame.is-main { left: 14%; width: 72%; height: 190px; }
|
||
.creation-empty-art-frame.is-front { top: 23px; height: 150px; }
|
||
.creation-empty-art-caption { right: 14%; }
|
||
.creation-empty-workspace .creation-chat-intro { margin-top: 28px; }
|
||
.creation-empty-composer { width: 100%; }
|
||
}
|
||
|
||
/* 用户端浮层：更像创作工作室的工作面，不保留默认后台表单的硬边和密集分隔。 */
|
||
.library-modal .ant-modal-container {
|
||
padding: 0 !important;
|
||
}
|
||
.library-modal .ant-modal-content { border: 0 !important; background: transparent !important; box-shadow: none !important; }
|
||
.library-modal .ant-modal-header { border-bottom: 0; background: transparent; padding: 28px 32px 8px; }
|
||
.library-modal .ant-modal-title { color: var(--foreground); font-size: var(--fs-title); font-weight: 620; line-height: 1.25; }
|
||
.library-modal .ant-modal-body { padding: 12px 32px 26px; }
|
||
.library-modal .ant-modal-footer { border-top: 0; background: transparent; padding: 14px 32px 18px; }
|
||
.library-modal .ant-modal-close { top: 23px; right: 24px; width: 34px; height: 34px; border-radius: var(--r-full); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.library-modal .ant-modal-close:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
|
||
.library-modal .ant-form-item-label > label { color: color-mix(in srgb, var(--foreground) 68%, transparent); font-size: var(--fs-caption); font-weight: 560; }
|
||
.library-modal :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-input-number, .ant-picker) { min-height: 42px; border-color: color-mix(in srgb, var(--foreground) 15%, transparent) !important; border-radius: var(--r-md) !important; background: color-mix(in srgb, var(--foreground) 3%, transparent) !important; box-shadow: none !important; }
|
||
.library-modal .ant-input-affix-wrapper .ant-input { min-height: 34px; background: transparent !important; }
|
||
.library-modal :where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-select-selector:hover) { border-color: color-mix(in srgb, var(--foreground) 26%, transparent) !important; }
|
||
/* 聚焦态：--workspace-accent 暗色下是 #f5f5f5，直接描边会形成刺眼白圈，降到半透明。 */
|
||
.library-modal :where(.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector) { border-color: var(--control-focus-ring) !important; box-shadow: none !important; }
|
||
.library-modal .ant-btn-primary { border-radius: var(--r-md); box-shadow: none; font-weight: 560; }
|
||
.library-modal .ant-btn-default { border-color: var(--btn-outline-border); border-radius: var(--r-md); background: transparent; }
|
||
|
||
/* 短剧创作：AI 创建入口面板与创建弹窗来源/画风选择 */
|
||
.app-story-create-panel {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid var(--user-border);
|
||
border-radius: var(--user-radius-card);
|
||
background: var(--user-surface);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.app-story-options {
|
||
border-top: 1px solid var(--user-border);
|
||
color: var(--user-ink-muted);
|
||
}
|
||
|
||
.app-story-options > summary {
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.app-story-options > summary:hover {
|
||
color: var(--user-ink);
|
||
background: var(--user-surface-hover);
|
||
}
|
||
|
||
.app-story-options > summary:focus-visible {
|
||
outline: 2px solid var(--user-accent);
|
||
outline-offset: -4px;
|
||
}
|
||
|
||
.app-story-create-head {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.app-story-create-title {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 11px;
|
||
}
|
||
|
||
.app-story-create-mark {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
background: var(--workspace-accent-soft);
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
.app-story-create-title h2 {
|
||
margin: 0;
|
||
font-size: var(--fs-body-lg);
|
||
font-weight: 620;
|
||
}
|
||
|
||
.app-story-create-title p {
|
||
margin: 3px 0 0;
|
||
color: color-mix(in srgb, var(--foreground) 46%, transparent);
|
||
font-size: var(--fs-caption);
|
||
}
|
||
|
||
.app-story-create-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.app-story-create-shortcut {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
border: 1px solid var(--btn-outline-border);
|
||
border-radius: var(--r-md);
|
||
background: transparent;
|
||
padding: 0 12px;
|
||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||
font-size: var(--fs-caption);
|
||
font-weight: 520;
|
||
transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
|
||
}
|
||
|
||
.app-story-create-shortcut:hover {
|
||
border-color: var(--btn-outline-hover-border);
|
||
background: var(--btn-outline-hover-bg);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-story-create-actions .ant-btn-default {
|
||
border: 1px solid var(--btn-outline-border);
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.app-story-create-main {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 16px 14px;
|
||
}
|
||
|
||
.app-story-create-input {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.app-story-create-input,
|
||
.app-story-create-input textarea {
|
||
resize: none !important;
|
||
border-color: transparent !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
padding: 2px 0 !important;
|
||
font-size: var(--fs-body) !important;
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
.app-story-create-input:focus,
|
||
.app-story-create-input textarea:focus {
|
||
border-color: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.app-story-create-input::placeholder,
|
||
.app-story-create-input textarea::placeholder {
|
||
color: color-mix(in srgb, var(--foreground) 38%, transparent) !important;
|
||
}
|
||
|
||
.app-story-create-style-chip {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
gap: 8px;
|
||
max-width: 220px;
|
||
border: 0;
|
||
border-radius: var(--r-full);
|
||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||
padding: 0 11px 0 4px;
|
||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||
font-size: var(--fs-caption);
|
||
transition: background-color 180ms ease-out, color 180ms ease-out;
|
||
}
|
||
|
||
.app-story-create-style-chip:hover {
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-story-create-style-chip img {
|
||
width: 26px;
|
||
height: 26px;
|
||
flex: 0 0 auto;
|
||
border-radius: var(--r-full);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.app-story-create-style-chip span {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-story-create-controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px 14px;
|
||
padding: 0 16px 16px;
|
||
}
|
||
|
||
.app-story-create-controls label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
}
|
||
|
||
.app-story-create-controls .ant-select {
|
||
min-width: 96px;
|
||
}
|
||
|
||
.app-story-create-controls .ant-select-selector {
|
||
border: 0 !important;
|
||
border-radius: var(--r-md) !important;
|
||
background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
|
||
box-shadow: none !important;
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
.app-story-generating-meta {
|
||
display: inline-flex;
|
||
margin-top: 6px;
|
||
border-radius: var(--r-xs);
|
||
background: color-mix(in srgb, var(--workspace-accent) 9%, transparent);
|
||
padding: 3px 7px;
|
||
color: var(--workspace-accent);
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 520;
|
||
}
|
||
|
||
.app-story-source {
|
||
display: flex;
|
||
min-width: 0;
|
||
min-height: 58px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 52%, transparent);
|
||
font-size: var(--fs-caption);
|
||
transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
|
||
}
|
||
|
||
.app-story-source:hover {
|
||
border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-story-source.is-active {
|
||
border-color: var(--control-selected-border);
|
||
background: var(--control-selected-bg);
|
||
color: var(--control-selected-fg);
|
||
font-weight: 560;
|
||
}
|
||
|
||
.app-story-modal-style {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 42px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--foreground) 2%, transparent);
|
||
padding: 5px 10px;
|
||
color: color-mix(in srgb, var(--foreground) 52%, transparent);
|
||
font-size: var(--fs-caption);
|
||
text-align: left;
|
||
transition: border-color 180ms ease-out, color 180ms ease-out;
|
||
}
|
||
|
||
.app-story-modal-style:hover {
|
||
border-color: color-mix(in srgb, var(--workspace-accent) 46%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-story-modal-style img {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex: 0 0 auto;
|
||
border-radius: var(--r-sm);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.app-story-modal-style span {
|
||
min-width: 0;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-story-modal-style em {
|
||
flex: 0 0 auto;
|
||
color: color-mix(in srgb, var(--workspace-accent) 70%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-style: normal;
|
||
}
|
||
|
||
.app-story-generating {
|
||
display: flex;
|
||
min-height: 120px;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
}
|
||
|
||
.app-story-generating-head {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.app-story-generating-model {
|
||
margin-left: auto;
|
||
flex: 0 0 auto;
|
||
max-width: 220px;
|
||
overflow: hidden;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||
border-radius: var(--r-full);
|
||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||
padding: 4px 10px;
|
||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-story-generating-mark {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
background: var(--workspace-accent-soft);
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
.app-story-generating-progress {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 3px;
|
||
overflow: hidden;
|
||
border-radius: var(--r-full);
|
||
background: color-mix(in srgb, var(--foreground) 8%, transparent);
|
||
}
|
||
|
||
.app-story-generating-progress::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0 auto 0 0;
|
||
width: 38%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(90deg, color-mix(in srgb, var(--workspace-accent) 55%, transparent), var(--workspace-accent));
|
||
animation: story-generating-slide 1.4s var(--motion-ease-out) infinite;
|
||
}
|
||
|
||
.app-story-generating-grid {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: minmax(0, 1fr) minmax(200px, 0.72fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.app-story-generating-story,
|
||
.app-story-generating-steps,
|
||
.app-story-generating-preview {
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--foreground) 2%, transparent);
|
||
}
|
||
|
||
.app-story-generating-story {
|
||
min-width: 0;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.app-story-generating-caption {
|
||
display: block;
|
||
color: color-mix(in srgb, var(--foreground) 38%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 560;
|
||
}
|
||
|
||
.app-story-generating-story p {
|
||
margin-top: 5px;
|
||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||
font-size: var(--fs-caption);
|
||
line-height: 1.6;
|
||
font-weight: 450;
|
||
}
|
||
|
||
.app-story-generating-style {
|
||
display: inline-flex;
|
||
max-width: 100%;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 7px;
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
}
|
||
|
||
.app-story-generating-style img {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex: 0 0 auto;
|
||
border-radius: var(--r-full);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.app-story-generating-style span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-story-generating-steps {
|
||
min-width: 0;
|
||
margin: 0;
|
||
padding: 8px 10px;
|
||
list-style: none;
|
||
}
|
||
|
||
.app-story-generating-steps li {
|
||
display: flex;
|
||
min-height: 30px;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
font-size: var(--fs-caption);
|
||
}
|
||
|
||
.app-story-generating-steps li em {
|
||
margin-left: auto;
|
||
color: color-mix(in srgb, var(--foreground) 28%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-style: normal;
|
||
}
|
||
|
||
.app-story-generating-steps li.is-done { color: color-mix(in srgb, var(--foreground) 62%, transparent); }
|
||
.app-story-generating-steps li.is-done em { color: var(--palette-status-success, var(--green, #22c55e)); }
|
||
.app-story-generating-steps li.is-active { color: var(--foreground); font-weight: 560; }
|
||
.app-story-generating-steps li.is-active em { color: var(--workspace-accent); }
|
||
|
||
.app-story-generating-step-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
flex: 0 0 auto;
|
||
border-radius: var(--r-full);
|
||
background: color-mix(in srgb, var(--foreground) 18%, transparent);
|
||
}
|
||
|
||
.app-story-generating-steps li.is-done .app-story-generating-step-dot { background: var(--palette-status-success, #22c55e); }
|
||
.app-story-generating-steps li.is-active .app-story-generating-step-dot { background: var(--workspace-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--workspace-accent) 14%, transparent); }
|
||
|
||
.app-story-generating-preview {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.app-story-generating-preview-head {
|
||
display: flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
padding: 0 12px;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 560;
|
||
}
|
||
|
||
.app-story-generating-preview-head em {
|
||
margin-left: auto;
|
||
color: color-mix(in srgb, var(--foreground) 28%, transparent);
|
||
font-size: var(--fs-tiny);
|
||
font-style: normal;
|
||
font-weight: 450;
|
||
}
|
||
|
||
.app-story-generating-live {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: var(--r-full);
|
||
background: var(--workspace-accent);
|
||
animation: story-generating-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes story-generating-pulse {
|
||
0%, 100% { opacity: 0.35; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.app-story-generating-preview pre {
|
||
max-height: 240px;
|
||
min-height: 96px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
@keyframes story-generating-slide {
|
||
0% { transform: translateX(-110%); }
|
||
100% { transform: translateX(320%); }
|
||
}
|
||
|
||
.app-story-generating p {
|
||
margin: 0;
|
||
color: var(--foreground);
|
||
font-size: var(--fs-caption);
|
||
font-weight: 560;
|
||
}
|
||
|
||
.app-story-generating pre {
|
||
max-height: 220px;
|
||
min-height: 72px;
|
||
width: 100%;
|
||
overflow: auto;
|
||
margin: 0;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||
border-radius: var(--r-md);
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--foreground) 3%, transparent), color-mix(in srgb, var(--foreground) 1.5%, transparent));
|
||
padding: 10px 12px;
|
||
color: color-mix(in srgb, var(--foreground) 56%, transparent);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.app-story-generating-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.app-story-generating-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.app-story-create-head {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.app-story-create-actions {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.app-story-create-main {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.app-story-create-style-chip {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
.library-confirm-modal .ant-modal-body { padding-top: 4px; padding-bottom: 12px; }
|
||
|
||
.skill-install-modal .ant-modal-container { border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); background: var(--popover); }
|
||
.skill-install-modal .ant-modal-header { margin-bottom: 8px; background: transparent; }
|
||
.skill-install-modal .ant-modal-title { font-size: var(--fs-heading-lg); font-weight: 620; }
|
||
.skill-install-modal .ant-upload-wrapper .ant-upload-drag { border-color: color-mix(in srgb, var(--foreground) 14%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 2.5%, transparent); }
|
||
.skill-install-modal .ant-upload-wrapper .ant-upload-drag:hover { border-color: color-mix(in srgb, var(--foreground) 28%, transparent); }
|
||
.skill-install-modal .skill-install-form { margin-top: 16px; }
|
||
|
||
.skill-package-modal .ant-modal-container { border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent); border-radius: var(--r-xl); background: var(--popover); box-shadow: var(--elevation-panel); }
|
||
.skill-package-modal .ant-modal-close { top: 17px; inset-inline-end: 18px; z-index: 3; border-radius: var(--r-full); color: color-mix(in srgb, var(--foreground) 45%, transparent); }
|
||
.skill-package-modal .ant-modal-close:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
|
||
.skill-package-shell { display: flex; height: 100%; min-height: 0; flex-direction: column; }
|
||
.skill-package-header { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; min-height: 112px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); padding: 18px 68px 18px 24px; }
|
||
.skill-package-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
||
.skill-package-workspace { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(220px, 26%) minmax(0, 1fr); }
|
||
.skill-package-sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 10px; border-right: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); background: color-mix(in srgb, var(--foreground) 2%, transparent); padding: 14px 12px 10px; }
|
||
.skill-package-sidebar-summary, .skill-package-sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: color-mix(in srgb, var(--foreground) 44%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
|
||
.skill-package-sidebar-summary span:first-child { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--foreground) 62%, transparent); }
|
||
.skill-package-sidebar-footer { flex: 0 0 auto; border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); padding: 9px 2px 0; }
|
||
.skill-package-tree { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 3px 0 8px; }
|
||
.skill-package-tree .ant-tree { background: transparent; color: color-mix(in srgb, var(--foreground) 70%, transparent); font-size: var(--fs-label); }
|
||
.skill-package-tree .ant-tree-treenode { display: flex; width: 100%; min-width: 0; min-height: 30px; align-items: center; padding-block: 0; }
|
||
.skill-package-tree .ant-tree-indent-unit { width: 14px; }
|
||
.skill-package-tree .ant-tree-switcher { display: grid; width: 20px; height: 30px; flex: 0 0 20px; place-items: center; color: color-mix(in srgb, var(--foreground) 38%, transparent); }
|
||
.skill-package-tree .ant-tree-switcher:hover { color: color-mix(in srgb, var(--foreground) 72%, transparent); }
|
||
.skill-package-tree-chevron { transition: transform var(--motion-state) ease-out; }
|
||
.skill-package-tree-chevron.is-expanded { transform: rotate(90deg); }
|
||
.skill-package-tree .ant-tree-node-content-wrapper { display: flex; height: 30px; min-width: 0; flex: 1 1 auto; align-items: center; border-radius: var(--r-sm); padding: 0 7px 0 2px; line-height: 30px; }
|
||
.skill-package-tree .ant-tree-node-content-wrapper:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); }
|
||
.skill-package-tree .ant-tree-node-content-wrapper.ant-tree-node-selected { background: color-mix(in srgb, var(--foreground) 9%, transparent) !important; color: var(--foreground); }
|
||
.skill-package-tree .ant-tree-node-content-wrapper:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }
|
||
.skill-package-tree .ant-tree-iconEle { display: grid !important; width: 20px !important; height: 30px !important; flex: 0 0 20px; place-items: center; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
|
||
.skill-package-tree .ant-tree-title { display: block; min-width: 0; flex: 1 1 auto; line-height: normal; }
|
||
.skill-package-folder-title { display: block; overflow: hidden; color: color-mix(in srgb, var(--foreground) 76%, transparent); font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
|
||
.skill-package-tree-title { display: flex; min-width: 0; height: 30px; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.skill-package-tree-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.skill-package-tree-title > span:last-child { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 30%, transparent); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
|
||
.skill-package-preview { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--background); }
|
||
.skill-package-preview-toolbar { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; gap: 10px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); padding: 8px 14px 8px 18px; }
|
||
.skill-package-raw-link { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: color-mix(in srgb, var(--foreground) 48%, transparent); }
|
||
.skill-package-raw-link:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
|
||
.skill-package-raw-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
||
.skill-package-preview-body { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: clamp(18px, 2.4vw, 36px); }
|
||
.skill-package-empty { display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; color: color-mix(in srgb, var(--foreground) 42%, transparent); font-size: var(--fs-caption); text-align: center; }
|
||
.skill-package-source { min-height: 100%; margin: 0; color: color-mix(in srgb, var(--foreground) 78%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.75; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||
.skill-package-media-stage { display: grid; min-height: 100%; place-items: center; }
|
||
.skill-package-media-stage :where(img, video) { max-width: 100%; max-height: calc(82vh - 220px); border-radius: var(--r-md); object-fit: contain; }
|
||
.skill-package-media-stage audio { width: min(560px, 100%); }
|
||
.skill-package-markdown { max-width: 920px; margin: 0 auto; color: color-mix(in srgb, var(--foreground) 76%, transparent); font-size: 14px; line-height: 1.75; }
|
||
.skill-package-markdown :where(h1, h2, h3, h4) { color: var(--foreground); font-weight: 650; line-height: 1.35; text-wrap: balance; }
|
||
.skill-package-markdown h1 { margin: 0 0 22px; font-size: 28px; }
|
||
.skill-package-markdown h2 { margin: 30px 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); padding-bottom: 7px; font-size: 20px; }
|
||
.skill-package-markdown h3 { margin: 24px 0 8px; font-size: 16px; }
|
||
.skill-package-markdown h4 { margin: 20px 0 6px; font-size: 14px; }
|
||
.skill-package-markdown p { margin: 10px 0; text-wrap: pretty; }
|
||
.skill-package-markdown :where(ul, ol) { margin: 10px 0; padding-left: 24px; }
|
||
.skill-package-markdown li { margin: 4px 0; }
|
||
.skill-package-markdown a { color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent); text-underline-offset: 3px; }
|
||
.skill-package-markdown a:hover { text-decoration-color: currentColor; }
|
||
.skill-package-markdown blockquote { margin: 14px 0; border-left: 3px solid color-mix(in srgb, var(--foreground) 22%, transparent); padding: 2px 0 2px 14px; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
|
||
.skill-package-markdown :not(pre) > code { border-radius: var(--r-xs); background: color-mix(in srgb, var(--foreground) 7%, transparent); padding: 2px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .9em; }
|
||
.skill-package-markdown pre { overflow: auto; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 3%, transparent); padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.65; }
|
||
.skill-package-markdown img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: var(--r-md); }
|
||
.skill-package-inline-file { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 3%, transparent); padding: 8px 10px; color: var(--foreground); font-size: var(--fs-caption); }
|
||
.skill-package-inline-file:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); }
|
||
.skill-package-inline-file:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
||
.skill-package-inline-missing { color: color-mix(in srgb, var(--foreground) 42%, transparent); font-size: var(--fs-caption); }
|
||
.skill-package-table-wrap { overflow-x: auto; margin: 16px 0; }
|
||
.skill-package-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
|
||
.skill-package-table-wrap :where(th, td) { border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent); padding: 8px 10px; text-align: left; }
|
||
.skill-package-table-wrap th { background: color-mix(in srgb, var(--foreground) 4%, transparent); color: var(--foreground); font-weight: 620; }
|
||
|
||
@media (max-width: 860px) {
|
||
.skill-package-modal { width: 96vw !important; max-width: 96vw; }
|
||
.skill-package-modal .ant-modal-container { height: 90vh !important; }
|
||
.skill-package-header { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 54px 16px 18px; }
|
||
.skill-package-actions { justify-content: flex-start; }
|
||
.skill-package-workspace { grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.skill-package-workspace { display: flex; flex-direction: column; }
|
||
.skill-package-sidebar { min-height: 190px; max-height: 34%; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); }
|
||
.skill-package-sidebar-footer { display: none; }
|
||
.skill-package-preview-body { padding: 18px; }
|
||
.skill-package-actions .ant-btn > span:not(.ant-btn-icon) { display: none; }
|
||
}
|
||
|
||
.library-drawer .ant-drawer-content { overflow: hidden; border: 0 !important; background: var(--popover); box-shadow: var(--elevation-panel) !important; }
|
||
.library-drawer .ant-drawer-header { min-height: 70px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); background: transparent; padding: 22px 28px 15px; }
|
||
.library-drawer .ant-drawer-title { color: var(--foreground); font-size: var(--fs-heading-lg); font-weight: 620; }
|
||
.library-drawer .ant-drawer-close { width: 34px; height: 34px; margin-inline-end: 6px; border-radius: var(--r-full); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.library-drawer .ant-drawer-close:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
|
||
.library-drawer .ant-drawer-body { padding: 22px 28px 30px; }
|
||
.library-drawer .ant-drawer-extra .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous) { border: 1px solid var(--btn-outline-border); border-radius: var(--r-md); background: transparent; color: var(--foreground); font-weight: 560; box-shadow: none; }
|
||
.library-drawer .ant-drawer-extra .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(:disabled):hover { border-color: var(--btn-outline-hover-border); background: var(--btn-outline-hover-bg); color: var(--foreground); }
|
||
.library-drawer .ant-form-item-label > label { color: color-mix(in srgb, var(--foreground) 68%, transparent); font-size: var(--fs-caption); font-weight: 560; }
|
||
.library-drawer :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector) { border-color: color-mix(in srgb, var(--foreground) 15%, transparent) !important; border-radius: var(--r-md) !important; background: color-mix(in srgb, var(--foreground) 3%, transparent) !important; box-shadow: none !important; }
|
||
.library-drawer :where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-select-selector:hover) { border-color: color-mix(in srgb, var(--foreground) 26%, transparent) !important; }
|
||
.library-drawer :where(.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector) { border-color: color-mix(in srgb, var(--workspace-accent) 46%, transparent) !important; box-shadow: none !important; }
|
||
.library-drawer .border-border\/70 { border-color: color-mix(in srgb, var(--foreground) 10%, transparent); }
|
||
.library-drawer .asset-drawer-content { border-color: color-mix(in srgb, var(--foreground) 10%, transparent) !important; background: color-mix(in srgb, var(--foreground) 3%, transparent); }
|
||
|
||
@media (max-width: 680px) {
|
||
.library-modal .ant-modal-header { padding: 22px 20px 8px; }
|
||
.library-modal .ant-modal-body { padding: 10px 20px 20px; }
|
||
.library-modal .ant-modal-footer { padding-inline: 20px; }
|
||
.library-drawer .ant-drawer-header { padding: 18px 18px 13px; }
|
||
.library-drawer .ant-drawer-body { padding: 18px; }
|
||
}
|
||
|
||
/* ===== 工作台首页 · 创作仪表盘（欢迎区 + 统计卡 + 活跃度/素材图表 + 最近项目表格） ===== */
|
||
.app-home-dashboard {
|
||
--home-panel-radius: var(--r-lg);
|
||
--home-panel-surface: var(--workspace-surface-strong);
|
||
--home-panel-border: var(--workspace-border);
|
||
--home-title-fs: var(--fs-title);
|
||
--home-section-fs: var(--fs-heading-lg);
|
||
}
|
||
|
||
.app-home-dashboard h1,
|
||
.app-home-dashboard h2,
|
||
.app-home-dashboard h3 {
|
||
letter-spacing: 0;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
.app-home-dashboard h1 { font-size: var(--home-title-fs); }
|
||
.app-home-dashboard h2 { font-size: var(--home-section-fs); }
|
||
.app-home-dashboard h3 { font-size: var(--fs-heading); }
|
||
|
||
/* 面板外壳：卡片、图表、表格共用 */
|
||
.home-panel {
|
||
border-radius: var(--home-panel-radius);
|
||
border: 1px solid var(--home-panel-border);
|
||
background: var(--home-panel-surface);
|
||
box-shadow: var(--elevation-card);
|
||
}
|
||
|
||
.home-panel-head {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px 16px;
|
||
padding: 16px 18px 4px;
|
||
}
|
||
|
||
.app-home-dashboard .home-panel-title { font-size: var(--fs-heading-lg); font-weight: 620; }
|
||
.home-panel-sub { margin-top: 3px; font-size: var(--fs-tiny); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.home-panel-body { padding: 8px 12px 14px; }
|
||
.home-panel-foot {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 12px 18px 14px;
|
||
border-top: 1px solid var(--home-panel-border);
|
||
}
|
||
|
||
/* 欢迎区 */
|
||
.home-welcome {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 18px 24px;
|
||
padding: 6px 0 22px;
|
||
}
|
||
|
||
.home-welcome-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: var(--fs-label);
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
color: color-mix(in srgb, var(--foreground) 46%, transparent);
|
||
}
|
||
|
||
.app-home-dashboard .home-welcome-title {
|
||
margin-top: 10px;
|
||
font-size: clamp(24px, 2.4vw, 30px);
|
||
font-weight: 650;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
|
||
.home-welcome-sub {
|
||
margin-top: 8px;
|
||
max-width: 620px;
|
||
font-size: var(--fs-body);
|
||
line-height: 1.7;
|
||
color: color-mix(in srgb, var(--foreground) 55%, transparent);
|
||
}
|
||
|
||
.home-welcome-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* 统计卡 */
|
||
.home-stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.home-stat-card {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
border-radius: var(--home-panel-radius);
|
||
border: 1px solid var(--home-panel-border);
|
||
background: var(--home-panel-surface);
|
||
box-shadow: var(--elevation-card);
|
||
padding: 16px 18px 15px;
|
||
transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
|
||
}
|
||
|
||
.home-stat-card:hover {
|
||
border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
|
||
box-shadow: var(--elevation-card-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.home-stat-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
|
||
.home-stat-icon {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--workspace-accent) 7%, transparent);
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
.home-stat-value {
|
||
font-size: 26px;
|
||
font-weight: 650;
|
||
line-height: 1;
|
||
letter-spacing: -0.02em;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.home-stat-label { margin-top: 8px; font-size: var(--fs-label); font-weight: 520; color: color-mix(in srgb, var(--foreground) 62%, transparent); }
|
||
.home-stat-hint {
|
||
margin-top: 3px;
|
||
overflow: hidden;
|
||
font-size: var(--fs-tiny);
|
||
line-height: 1.5;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 图表区 */
|
||
.home-charts-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.home-charts-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr); }
|
||
}
|
||
|
||
.home-chart-empty {
|
||
display: grid;
|
||
min-height: 220px;
|
||
place-items: center;
|
||
padding: 20px;
|
||
text-align: center;
|
||
font-size: var(--fs-label);
|
||
line-height: 1.6;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||
}
|
||
|
||
.home-donut-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.home-donut-center strong {
|
||
display: block;
|
||
font-size: 22px;
|
||
font-weight: 650;
|
||
line-height: 1;
|
||
letter-spacing: -0.02em;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.home-donut-center span { margin-top: 4px; font-size: var(--fs-tiny); color: color-mix(in srgb, var(--foreground) 45%, transparent); }
|
||
|
||
.home-donut-legend {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.home-donut-legend li {
|
||
display: grid;
|
||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||
gap: 8px;
|
||
align-items: center;
|
||
font-size: var(--fs-label);
|
||
}
|
||
|
||
.home-donut-legend i { width: 8px; height: 8px; border-radius: 999px; }
|
||
.home-donut-legend em { font-style: normal; color: color-mix(in srgb, var(--foreground) 45%, transparent); font-variant-numeric: tabular-nums; }
|
||
|
||
/* 最近项目表格 */
|
||
.home-lower-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.home-lower-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr); }
|
||
}
|
||
|
||
.home-side-stack {
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.home-recent-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 18px 10px;
|
||
border-bottom: 1px solid var(--home-panel-border);
|
||
}
|
||
|
||
.home-recent-search { max-width: 260px; }
|
||
.home-recent-scroll { overflow-x: auto; }
|
||
.home-recent-table { min-width: 680px; }
|
||
|
||
.home-recent-col-head,
|
||
.home-recent-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 96px 150px 104px 20px;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 8px 18px;
|
||
}
|
||
|
||
.home-recent-col-head {
|
||
border-bottom: 1px solid var(--home-panel-border);
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 540;
|
||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||
}
|
||
|
||
.home-recent-row {
|
||
padding-block: 11px;
|
||
transition: background-color 150ms ease-out;
|
||
}
|
||
|
||
.home-recent-row + .home-recent-row { border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent); }
|
||
.home-recent-row:hover { background: color-mix(in srgb, var(--workspace-accent) 4%, transparent); }
|
||
|
||
.home-stage-pill {
|
||
display: inline-flex;
|
||
max-width: 100%;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
padding: 3px 8px;
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 520;
|
||
font-style: normal;
|
||
color: color-mix(in srgb, var(--foreground) 55%, transparent);
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.home-progress-track {
|
||
display: block;
|
||
height: 6px;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||
}
|
||
|
||
.home-progress-fill {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: var(--workspace-accent);
|
||
}
|
||
|
||
.home-recent-empty {
|
||
display: grid;
|
||
place-items: center;
|
||
gap: 10px;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 快捷创建与工作流 */
|
||
.home-quick-create { display: flex; flex-direction: column; padding-top: 4px; }
|
||
|
||
.home-quick-item {
|
||
display: grid;
|
||
grid-template-columns: 36px minmax(0, 1fr) 16px;
|
||
gap: 12px;
|
||
align-items: center;
|
||
border-radius: var(--r-md);
|
||
padding: 10px;
|
||
text-align: left;
|
||
transition: background-color 150ms ease-out;
|
||
}
|
||
|
||
.home-quick-item:hover { background: color-mix(in srgb, var(--workspace-accent) 5%, transparent); }
|
||
|
||
.home-quick-icon {
|
||
display: grid;
|
||
width: 36px;
|
||
height: 36px;
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--workspace-accent) 7%, transparent);
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
.home-quick-title { font-size: var(--fs-body); font-weight: 560; }
|
||
.home-quick-desc { margin-top: 2px; font-size: var(--fs-tiny); color: color-mix(in srgb, var(--foreground) 44%, transparent); }
|
||
|
||
.home-workflow { display: flex; flex-direction: column; padding-top: 2px; }
|
||
|
||
.home-workflow-step {
|
||
display: grid;
|
||
grid-template-columns: 24px minmax(0, 1fr);
|
||
gap: 10px;
|
||
border-radius: var(--r-md);
|
||
padding: 8px 10px;
|
||
transition: background-color 150ms ease-out;
|
||
}
|
||
|
||
.home-workflow-step:hover { background: color-mix(in srgb, var(--workspace-accent) 5%, transparent); }
|
||
|
||
.home-workflow-num {
|
||
display: grid;
|
||
width: 24px;
|
||
height: 24px;
|
||
place-items: center;
|
||
border-radius: 7px;
|
||
background: color-mix(in srgb, var(--workspace-accent) 8%, transparent);
|
||
color: var(--workspace-accent);
|
||
font-size: var(--fs-tiny);
|
||
font-weight: 650;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.home-workflow-title { font-size: var(--fs-body); font-weight: 560; }
|
||
.home-workflow-desc { margin-top: 1px; font-size: var(--fs-tiny); color: color-mix(in srgb, var(--foreground) 44%, transparent); }
|
||
|
||
.home-workflow-hint {
|
||
margin-top: 10px;
|
||
padding: 10px 10px 2px;
|
||
border-top: 1px dashed var(--home-panel-border);
|
||
font-size: var(--fs-tiny);
|
||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||
}
|
||
|
||
|
||
/* 空态：banner + 对话区（控态时展示，发送后切换分镜台） */
|
||
.creation-home .creation-empty-workspace {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
.creation-empty-workspace .creation-chat-intro p { color: var(--creation-muted); }
|
||
.creation-empty-workspace .creation-empty-composer {
|
||
width: min(820px, calc(100% - 28px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-home .creation-empty-workspace { padding-top: 24px; }
|
||
.creation-empty-workspace .creation-empty-composer { width: 100%; }
|
||
}
|
||
|
||
|
||
.creation-home .creation-empty-suggest {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
width: min(820px, calc(100% - 28px));
|
||
margin: 24px auto 0;
|
||
}
|
||
|
||
|
||
.creation-home .creation-empty-suggest .suggest-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 11px;
|
||
min-height: 72px;
|
||
padding: 14px 16px;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: var(--r-lg);
|
||
background: var(--creation-surface);
|
||
color: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
box-shadow: var(--elevation-card);
|
||
transition: background var(--motion-state) var(--motion-ease-out), border-color var(--motion-state) var(--motion-ease-out), box-shadow var(--motion-state) var(--motion-ease-out), transform var(--motion-state) var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-home .creation-empty-suggest .suggest-card:hover {
|
||
border-color: var(--creation-border-strong);
|
||
transform: translateY(-2px);
|
||
background: var(--creation-surface-hover);
|
||
box-shadow: var(--elevation-card-hover);
|
||
}
|
||
|
||
.creation-home .creation-empty-suggest .suggest-card:focus-visible {
|
||
outline: 2px solid var(--creation-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.creation-home .creation-empty-suggest .suggest-icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--creation-surface-muted) 68%, transparent);
|
||
color: var(--creation-muted);
|
||
}
|
||
.creation-home .creation-empty-suggest .suggest-icon svg { width: 16px; height: 16px; stroke-width: 2; }
|
||
.creation-home .creation-empty-suggest .suggest-card:hover .suggest-icon,
|
||
.creation-home .creation-hero-prompt:hover .suggest-icon { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); }
|
||
.dark .creation-home .creation-empty-suggest .suggest-icon { border-color: rgba(255, 255, 255, .07); background: rgba(38, 41, 48, .44); }
|
||
|
||
.creation-home .creation-empty-suggest .suggest-copy strong {
|
||
display: block;
|
||
color: var(--creation-text);
|
||
font-size: var(--fs-body);
|
||
font-weight: 600;
|
||
line-height: 1.45;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.creation-home .creation-empty-suggest .suggest-copy span {
|
||
display: block;
|
||
color: var(--creation-muted);
|
||
font-size: var(--fs-label);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* 空态布局收敛：保持图片区、文案和输入区的文档流顺序，内容超高时由主区滚动承载。 */
|
||
.creation-home .creation-empty-workspace {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.creation-home .creation-empty-workspace > .creation-empty-art,
|
||
.creation-home .creation-empty-workspace > .creation-chat-intro,
|
||
.creation-home .creation-empty-workspace > .creation-empty-composer,
|
||
.creation-home .creation-empty-workspace > .creation-empty-suggest {
|
||
flex: 0 0 auto;
|
||
}
|
||
.creation-empty-workspace > .creation-empty-art {
|
||
width: min(820px, calc(100% - 28px));
|
||
height: 200px;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
.creation-empty-workspace .creation-empty-art-frame.is-back { top: 18px; height: 146px; }
|
||
.creation-empty-workspace .creation-empty-art-frame.is-main { top: 0; height: 182px; }
|
||
.creation-empty-workspace .creation-empty-art-frame.is-front { top: 24px; height: 146px; }
|
||
|
||
.creation-empty-workspace .creation-chat-intro { margin: 0 auto 18px; }
|
||
|
||
.creation-empty-workspace > .creation-empty-suggest { margin: 26px auto 0; }
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-empty-workspace > .creation-empty-art { height: 168px; margin-bottom: 16px; }
|
||
.creation-empty-workspace .creation-empty-art-frame.is-back { top: 14px; height: 122px; }
|
||
.creation-empty-workspace .creation-empty-art-frame.is-main { top: 0; height: 152px; }
|
||
.creation-empty-workspace .creation-empty-art-frame.is-front { top: 18px; height: 122px; }
|
||
.creation-empty-workspace .creation-chat-intro { margin-top: 0; margin-bottom: 14px; }
|
||
.creation-empty-workspace > .creation-empty-suggest { margin-top: 20px; }
|
||
}
|
||
|
||
/* ===== 素材库 · 重构（影策影视资产） =====
|
||
与画布库共用 studio-band 毛玻璃页头与 frame 外壳；类型化封面、accent 反白筛选、
|
||
批量操作条、banner+欢迎卡空态、资产档案抽屉。全局保持黑白单色。 */
|
||
.assets-library-page .assets-header-meta { gap: 6px; }
|
||
.assets-library-page .assets-header-meta::before {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: var(--r-full);
|
||
background: var(--workspace-accent);
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 16%, transparent);
|
||
content: "";
|
||
}
|
||
.assets-header-actions { display: flex; max-width: 100%; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||
.assets-header-action-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
|
||
.assets-header-actions .assets-storage-usage { justify-content: flex-end; }
|
||
.assets-storage-usage {
|
||
display: flex;
|
||
width: min(100%, 380px);
|
||
min-height: 24px;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||
}
|
||
.assets-storage-usage-icon {
|
||
display: inline-flex;
|
||
flex: none;
|
||
align-items: center;
|
||
color: color-mix(in srgb, var(--foreground) 44%, transparent);
|
||
}
|
||
.assets-storage-usage-icon svg { width: 14px; height: 14px; }
|
||
.assets-storage-usage-title { flex: none; color: color-mix(in srgb, var(--foreground) 62%, transparent); font-size: var(--fs-label); font-weight: 560; }
|
||
.assets-storage-usage-value { flex: none; color: color-mix(in srgb, var(--foreground) 76%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
|
||
.assets-storage-usage-track {
|
||
display: block;
|
||
flex: 1 1 96px;
|
||
min-width: 48px;
|
||
max-width: 120px;
|
||
height: 4px;
|
||
overflow: hidden;
|
||
border-radius: var(--progress-bar-radius);
|
||
background: color-mix(in srgb, var(--foreground) 9%, transparent);
|
||
}
|
||
.assets-storage-usage-track > span { display: block; height: 100%; border-radius: inherit; background: var(--workspace-accent); transition: width var(--motion-state) var(--motion-ease-out); }
|
||
.assets-storage-usage.has-usage .assets-storage-usage-track > span { min-width: 2px; }
|
||
.assets-storage-usage.is-full .assets-storage-usage-track > span { background: var(--progress-bar-fill-error); }
|
||
.assets-storage-usage-percent { min-width: 38px; flex: none; font-size: var(--fs-tiny); font-variant-numeric: tabular-nums; text-align: right; }
|
||
.assets-storage-usage-status { min-width: 0; font-size: var(--fs-label); }
|
||
.assets-storage-usage-status button { margin-left: 6px; color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
|
||
.assets-storage-usage-status button:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
|
||
@media (max-width: 639px) {
|
||
.assets-header-actions { width: 100%; align-items: stretch; }
|
||
.assets-header-action-buttons,
|
||
.assets-header-actions .assets-storage-usage { justify-content: flex-start; }
|
||
.assets-storage-usage { width: 100%; }
|
||
.assets-storage-usage-track { min-width: 32px; }
|
||
}
|
||
/* 筛选胶囊：激活态 accent 反白 + 计数徽章反白 */
|
||
.assets-filter-item {
|
||
display: flex;
|
||
height: 32px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
width: auto;
|
||
flex: 0 0 auto;
|
||
padding: 0 10px;
|
||
border-radius: var(--r-md);
|
||
color: color-mix(in srgb, var(--foreground) 56%, transparent);
|
||
font-size: var(--fs-label);
|
||
transition: background-color 160ms ease-out, color 160ms ease-out;
|
||
}
|
||
.assets-filter-item:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--foreground); }
|
||
.assets-filter-item:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: -2px; }
|
||
.assets-filter-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.assets-filter-count {
|
||
display: inline-grid;
|
||
min-width: 19px;
|
||
height: 18px;
|
||
place-items: center;
|
||
padding: 0 5px;
|
||
border-radius: var(--r-full);
|
||
background: color-mix(in srgb, var(--foreground) 6%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||
font-size: var(--fs-micro);
|
||
font-variant-numeric: tabular-nums;
|
||
transition: background-color 160ms ease-out, color 160ms ease-out;
|
||
}
|
||
.assets-filter-item.is-active { background: var(--control-selected-bg); color: var(--control-selected-fg); font-weight: 560; }
|
||
.assets-filter-item.is-active:hover { background: var(--control-selected-hover-bg); color: var(--control-selected-fg); }
|
||
.assets-filter-item.is-active .assets-filter-count { background: color-mix(in srgb, var(--control-selected-fg) 18%, transparent); color: var(--control-selected-fg); }
|
||
.assets-folder-row { display: flex; min-width: 0; align-items: center; gap: 2px; }
|
||
.assets-folder-add, .assets-folder-more { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--r-md); background: transparent; color: color-mix(in srgb, var(--foreground) 42%, transparent); cursor: pointer; }
|
||
.assets-folder-add:hover, .assets-folder-more:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
|
||
@media (min-width: 1024px) {
|
||
.assets-filter-item { width: 100%; flex: none; }
|
||
}
|
||
|
||
/* 类型化封面：容器继承 4/3 比例，内部 button 撑满 */
|
||
.assets-cover { position: relative; overflow: hidden; }
|
||
.assets-cover-link { position: relative; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; text-align: left; }
|
||
.assets-cover-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
|
||
.assets-cover-media { width: 100%; height: 100%; object-fit: contain; background: color-mix(in srgb, var(--foreground) 5%, transparent); }
|
||
.assets-cover-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.assets-cover-vignette { display: none; }
|
||
.assets-cover-badges { position: absolute; top: 8px; left: 38px; right: 44px; z-index: 2; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; pointer-events: none; }
|
||
.assets-cover-badge {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
height: 20px;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 0 7px;
|
||
border-radius: 6px;
|
||
font-size: var(--fs-micro);
|
||
font-weight: 560;
|
||
letter-spacing: .02em;
|
||
line-height: 1;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.assets-cover-badge svg { width: 11px; height: 11px; }
|
||
.assets-cover-badge.is-kind { background: rgba(10, 10, 10, .62); color: #fff; }
|
||
.assets-cover-badge.is-category { border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 10, 10, .5); color: rgba(255, 255, 255, .86); }
|
||
.assets-cover-clock {
|
||
position: absolute;
|
||
left: 8px;
|
||
bottom: 8px;
|
||
z-index: 2;
|
||
height: 20px;
|
||
padding: 0 7px;
|
||
border-radius: 6px;
|
||
background: rgba(10, 10, 10, .6);
|
||
color: #fff;
|
||
font-size: var(--fs-micro);
|
||
font-weight: 560;
|
||
line-height: 20px;
|
||
letter-spacing: .02em;
|
||
backdrop-filter: blur(6px);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.assets-cover-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity 180ms ease-out; }
|
||
.assets-cover-play::before { position: absolute; width: 42px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .78); border-radius: var(--r-full); background: rgba(10, 10, 10, .36); content: ""; backdrop-filter: blur(6px); }
|
||
.assets-cover-play svg { position: relative; width: 17px; height: 17px; margin-left: 2px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); }
|
||
.assets-cover-link:hover .assets-cover-play, .assets-cover-link:focus-visible .assets-cover-play { opacity: 1; }
|
||
|
||
/* 选择入口固定在左上角，徽章预留其空间；选中描边由 is-selected 提供。 */
|
||
.assets-select-check {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: 8px;
|
||
z-index: 3;
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
border: 1.5px solid rgba(255, 255, 255, .72);
|
||
border-radius: 7px;
|
||
background: rgba(10, 10, 10, .42);
|
||
cursor: pointer;
|
||
backdrop-filter: blur(6px);
|
||
opacity: 0;
|
||
transition: opacity 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms var(--motion-ease-out);
|
||
}
|
||
.assets-select-check::after {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 6px;
|
||
width: 6px;
|
||
height: 11px;
|
||
border: solid var(--control-check-fg);
|
||
border-width: 0 2px 2px 0;
|
||
content: "";
|
||
opacity: 0;
|
||
transform: rotate(45deg) scale(.6);
|
||
transition: opacity 120ms ease-out, transform 180ms var(--motion-ease-out);
|
||
}
|
||
.assets-select-check:checked { border-color: var(--control-check-bg); background: var(--control-check-bg); }
|
||
.assets-select-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
|
||
.assets-select-check:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
|
||
.asset-library-card:hover .assets-select-check, .asset-library-card:focus-within .assets-select-check { opacity: 1; }
|
||
.assets-select-check:checked { opacity: 1; }
|
||
.assets-cover-more {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
z-index: 3;
|
||
display: grid;
|
||
width: 28px;
|
||
height: 28px;
|
||
place-items: center;
|
||
border: 1px solid rgba(255, 255, 255, .18);
|
||
border-radius: var(--r-md);
|
||
background: rgba(10, 10, 10, .5);
|
||
color: rgba(255, 255, 255, .85);
|
||
cursor: pointer;
|
||
backdrop-filter: blur(8px);
|
||
opacity: 0;
|
||
transition: opacity 180ms ease-out, background-color 180ms ease-out, transform 180ms var(--motion-ease-out);
|
||
}
|
||
.assets-cover-more:hover { background: rgba(10, 10, 10, .78); color: #fff; transform: scale(1.05); }
|
||
.assets-cover-more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
||
.asset-library-card:hover .assets-cover-more, .asset-library-card:focus-within .assets-cover-more { opacity: 1; }
|
||
|
||
/* 音频：频谱条占位；文本：内容摘要底纹；模型：线框图标 */
|
||
.assets-cover-wave { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: 3px; padding: 0 14%; background: color-mix(in srgb, var(--foreground) 4%, transparent); }
|
||
.assets-cover-wave > span { display: block; width: 3px; min-height: 5px; flex: 0 1 3px; border-radius: var(--r-full); background: color-mix(in srgb, var(--workspace-accent) 46%, transparent); }
|
||
.assets-cover-wave-glyph { position: absolute; top: 50%; right: 9%; width: 30px; height: 30px; transform: translateY(-50%); color: color-mix(in srgb, var(--workspace-accent) 36%, var(--foreground)); opacity: .68; }
|
||
.assets-cover-text { width: 100%; height: 100%; padding: 16px 18px; overflow: hidden; background: color-mix(in srgb, var(--foreground) 4%, transparent); }
|
||
.assets-cover-text p {
|
||
display: -webkit-box;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||
font-size: var(--fs-label);
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 5;
|
||
}
|
||
.assets-cover-model { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 46%, transparent); }
|
||
.assets-cover-model > svg { width: 34px; height: 34px; stroke-width: 1.1; }
|
||
.assets-cover-model > span { max-width: 76%; overflow: hidden; font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* 批量操作条随列表正常排版，留出选中描边和 hover 位移的空间。 */
|
||
.assets-batch-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin: 2px 0 var(--space-4);
|
||
padding: 8px 12px;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||
border-radius: var(--r-lg);
|
||
background: color-mix(in srgb, var(--surface-card) 82%, transparent);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
box-shadow: var(--elevation-hairline);
|
||
animation: assets-batch-in 240ms var(--motion-ease-out) both;
|
||
}
|
||
@keyframes assets-batch-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
|
||
@media (prefers-reduced-motion: reduce) { .assets-batch-bar { animation: none; } }
|
||
.assets-batch-count { display: inline-flex; align-items: baseline; gap: 6px; margin-right: auto; color: color-mix(in srgb, var(--foreground) 56%, transparent); font-size: var(--fs-label); }
|
||
.assets-batch-count strong { color: var(--foreground); font-size: var(--fs-body); font-weight: 620; font-variant-numeric: tabular-nums; }
|
||
.assets-batch-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
|
||
.assets-batch-actions .ant-btn { border: 0; border-radius: var(--r-md); background: transparent; color: color-mix(in srgb, var(--foreground) 56%, transparent); box-shadow: none; }
|
||
.assets-batch-actions .ant-btn:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
|
||
|
||
/* 空态：banner 剧照 + 三张欢迎卡 */
|
||
.assets-empty { display: flex; width: 100%; flex-direction: column; align-items: center; padding: 5vh 0 8vh; }
|
||
.assets-empty-banner { position: relative; width: min(720px, calc(100% - 24px)); height: 180px; margin-bottom: 24px; }
|
||
.assets-empty-banner-frame { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); border-radius: var(--r-lg); box-shadow: var(--elevation-card); }
|
||
.assets-empty-banner-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) contrast(.94) saturate(.7); }
|
||
.assets-empty-banner-frame.is-back { top: 16px; left: 2%; width: 24%; height: 132px; transform: rotate(-6deg); opacity: .45; }
|
||
.assets-empty-banner-frame.is-main { z-index: 2; top: 0; left: 20%; width: 60%; height: 168px; transform: rotate(1deg); }
|
||
.assets-empty-banner-frame.is-front { top: 20px; right: 2%; width: 24%; height: 132px; transform: rotate(6deg); opacity: .5; }
|
||
.assets-empty-banner-frame.is-main::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--foreground) 55%, transparent)); content: ""; }
|
||
.assets-empty-banner-frame span { position: absolute; right: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: var(--fs-micro); letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
|
||
.assets-empty-banner-caption { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; color: color-mix(in srgb, var(--foreground) 44%, transparent); font-size: var(--fs-micro); letter-spacing: .1em; z-index: 3; }
|
||
.assets-empty-banner-caption span { color: var(--workspace-accent); font-weight: 620; font-variant-numeric: tabular-nums; }
|
||
.assets-empty-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(680px, calc(100% - 24px)); margin-top: 24px; }
|
||
.assets-empty-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 16px 18px;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||
border-radius: var(--r-lg);
|
||
background: var(--surface-card);
|
||
color: inherit;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: transform 260ms var(--motion-ease-out), border-color 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out;
|
||
}
|
||
.assets-empty-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--workspace-accent) 32%, transparent); background: var(--surface-card-hover); box-shadow: var(--elevation-card-hover), var(--elevation-hairline); }
|
||
.assets-empty-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
||
.assets-empty-card-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--workspace-accent) 10%, transparent); color: var(--workspace-accent); }
|
||
.assets-empty-card-icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
|
||
.assets-empty-card strong { color: var(--foreground); font-size: var(--fs-body); font-weight: 620; }
|
||
.assets-empty-card > span:last-child { color: color-mix(in srgb, var(--foreground) 48%, transparent); font-size: var(--fs-label); line-height: 1.55; }
|
||
|
||
.asset-preview-uploading { position: relative; overflow: hidden; }
|
||
.asset-preview-uploading.is-uploading::after { position: absolute; inset: 0; background: color-mix(in srgb, var(--foreground) 16%, transparent); content: ""; pointer-events: none; }
|
||
.asset-preview-uploading-panel { position: absolute; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); z-index: 1; padding: var(--space-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--background) 92%, transparent); color: var(--foreground); }
|
||
.asset-preview-uploading-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-caption); }
|
||
.asset-preview-uploading-copy strong { font-variant-numeric: tabular-nums; }
|
||
.asset-preview-uploading-panel .ant-progress { margin: var(--space-2) 0 0; }
|
||
|
||
/* 资产档案抽屉 */
|
||
.asset-archive-header { display: flex; align-items: flex-start; gap: 14px; }
|
||
.asset-archive-header-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--workspace-accent) 10%, transparent); color: var(--workspace-accent); }
|
||
.asset-archive-header-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
|
||
.asset-archive-title { color: var(--foreground); font-size: var(--fs-heading-lg); font-weight: 620; line-height: 1.3; }
|
||
.asset-archive-subtitle { margin-top: 4px; color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-label); }
|
||
.asset-archive-preview { overflow: hidden; border-radius: var(--r-xl); background: #050505; box-shadow: var(--elevation-hairline); }
|
||
.asset-archive-preview-media { display: block; width: 100%; max-height: 400px; object-fit: contain; background: #050505; }
|
||
.asset-zoom-viewer { position: relative; display: flex; min-height: 420px; align-items: center; justify-content: center; overflow: hidden; background: #050505; touch-action: none; }
|
||
.asset-zoom-image { max-height: 70vh; transform-origin: center; transition: transform 120ms ease-out; user-select: none; }
|
||
.asset-zoom-controls { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md); background: rgba(15,15,15,.76); backdrop-filter: blur(8px); }
|
||
.asset-zoom-controls button { display: grid; min-width: 30px; height: 30px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: rgba(255,255,255,.86); cursor: pointer; font-size: 11px; }
|
||
.asset-zoom-controls button:hover { background: rgba(255,255,255,.12); color: #fff; }
|
||
.batch-upload-dropzone { display: flex; min-height: 132px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 3%, transparent); color: color-mix(in srgb, var(--foreground) 52%, transparent); cursor: pointer; }
|
||
.batch-upload-dropzone:hover { border-color: var(--workspace-accent); background: color-mix(in srgb, var(--workspace-accent) 6%, transparent); color: var(--foreground); }
|
||
.batch-upload-dropzone strong { color: var(--foreground); font-size: var(--fs-body); }
|
||
.batch-upload-dropzone span { font-size: var(--fs-label); }
|
||
.batch-upload-list { max-height: 260px; overflow: auto; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); }
|
||
.batch-upload-item { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent); font-size: var(--fs-label); }
|
||
.batch-upload-item:last-child { border-bottom: 0; }
|
||
.batch-upload-remove { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 5px; background: transparent; color: color-mix(in srgb, var(--foreground) 38%, transparent); cursor: pointer; }
|
||
.batch-upload-remove:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
|
||
.asset-archive-preview-note { max-height: 400px; overflow: auto; padding: 26px 24px; color: color-mix(in srgb, var(--foreground) 72%, transparent); font-size: var(--fs-body); line-height: 1.75; white-space: pre-wrap; }
|
||
.asset-archive-preview-model { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; background: color-mix(in srgb, var(--foreground) 3%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
|
||
.asset-archive-preview-model > svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--workspace-accent) 55%, var(--foreground)); stroke-width: 1; }
|
||
.asset-archive-audio { padding: 22px 18px; background: color-mix(in srgb, var(--foreground) 3%, transparent); }
|
||
.asset-archive-audio audio { width: 100%; }
|
||
.asset-archive-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 9%, transparent); }
|
||
.asset-archive-fact { min-width: 0; padding: 11px 14px; background: var(--surface-card); }
|
||
.asset-archive-fact-label { display: block; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-tiny); letter-spacing: .04em; }
|
||
.asset-archive-fact-value { display: block; margin-top: 3px; overflow: hidden; color: color-mix(in srgb, var(--foreground) 78%, transparent); font-size: var(--fs-label); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
|
||
.asset-archive-link { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: var(--surface-card); color: color-mix(in srgb, var(--foreground) 72%, transparent); font-size: var(--fs-label); }
|
||
.asset-archive-link svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--workspace-accent) 60%, var(--foreground)); }
|
||
.asset-archive-link strong { margin-left: auto; color: var(--foreground); font-weight: 560; }
|
||
.asset-archive-section { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: var(--surface-card); }
|
||
.asset-archive-section-title { display: block; margin-bottom: 8px; color: color-mix(in srgb, var(--foreground) 40%, transparent); font-size: var(--fs-tiny); font-weight: 560; letter-spacing: .05em; }
|
||
.asset-archive-section-body { margin: 0; color: color-mix(in srgb, var(--foreground) 74%, transparent); font-size: var(--fs-label); line-height: 1.7; white-space: pre-wrap; }
|
||
.asset-archive-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.library-drawer .ant-btn-primary { box-shadow: none; font-weight: 560; }
|
||
|
||
@media (max-width: 680px) {
|
||
.assets-empty-cards { grid-template-columns: 1fr; }
|
||
.assets-empty-banner { height: 150px; }
|
||
.assets-cover-play { opacity: 1; }
|
||
}
|
||
@media (max-width: 639px) {
|
||
.assets-select-check, .assets-cover-more { opacity: 1; }
|
||
}
|
||
|
||
/* ===== 素材页布局与线条修正 ===== */
|
||
|
||
/* 1. 欢迎卡与 banner 同列宽，边缘对齐 */
|
||
.assets-empty-cards { width: min(720px, calc(100% - 24px)); }
|
||
|
||
/* 素材密度由页面传入卡片最小宽度，网格布局统一在 workspace-product.css。 */
|
||
.assets-library-page .library-create-title { margin-top: 12px; font-size: var(--fs-body); }
|
||
.assets-library-page .library-create-meta { margin-top: 4px; font-size: var(--fs-label); }
|
||
|
||
/* 4. 封面浮层统一：窄屏隐藏分类徽章；浅底封面（文本/音频/模型）改用自适应玻璃浮层 */
|
||
@media (max-width: 1100px) { .assets-cover-badge.is-category { display: none; } }
|
||
.assets-cover.is-light .assets-cover-badge.is-category {
|
||
border-color: color-mix(in srgb, var(--foreground) 14%, transparent);
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.assets-cover.is-light .assets-cover-clock {
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||
background: color-mix(in srgb, var(--foreground) 6%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 62%, transparent);
|
||
line-height: 18px;
|
||
}
|
||
.assets-cover.is-light .assets-cover-more {
|
||
border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
|
||
background: color-mix(in srgb, var(--surface-card) 82%, transparent);
|
||
color: color-mix(in srgb, var(--foreground) 60%, transparent);
|
||
}
|
||
.assets-cover.is-light .assets-cover-more:hover { background: color-mix(in srgb, var(--foreground) 9%, transparent); color: var(--foreground); }
|
||
.assets-cover.is-light .assets-cover-play::before { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); background: color-mix(in srgb, var(--surface-card) 78%, transparent); }
|
||
|
||
/* ===== AI Markdown ===== */
|
||
|
||
.ai-message-markdown {
|
||
min-width: 0;
|
||
color: inherit;
|
||
font-size: inherit;
|
||
line-height: 1.7;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.ai-message-markdown-streaming {
|
||
position: relative;
|
||
}
|
||
.ai-message-markdown-streaming::after {
|
||
content: ""; display: inline-block; width: 0.42em; height: 1.05em; margin-left: 0.18em; vertical-align: -0.12em;
|
||
background: currentColor; opacity: .55; animation: ai-message-caret 1s steps(1,end) infinite;
|
||
}
|
||
@keyframes ai-message-caret { 50% { opacity: 0; } }
|
||
@media (prefers-reduced-motion: reduce) { .ai-message-markdown-streaming::after { animation: none; opacity: .45; } }
|
||
.ai-message-markdown > :first-child { margin-top: 0; }
|
||
.ai-message-markdown > :last-child { margin-bottom: 0; }
|
||
.ai-message-markdown-heading {
|
||
margin: 1.15em 0 0.42em;
|
||
color: inherit;
|
||
font-weight: 650;
|
||
line-height: 1.35;
|
||
}
|
||
.ai-message-markdown-heading-1 { font-size: 1.18em; }
|
||
.ai-message-markdown-heading-2 { font-size: 1.08em; }
|
||
.ai-message-markdown-heading-3,
|
||
.ai-message-markdown-heading-4 { font-size: 1em; }
|
||
.ai-message-markdown-paragraph { margin: 0.5em 0; }
|
||
.ai-message-markdown-list {
|
||
margin: 0.55em 0;
|
||
padding-left: 1.35em;
|
||
}
|
||
.ai-message-markdown-list-unordered { list-style: disc; }
|
||
.ai-message-markdown-list-ordered { list-style: decimal; }
|
||
.ai-message-markdown-list-item { padding-left: 0.15em; }
|
||
.ai-message-markdown-list-item + .ai-message-markdown-list-item { margin-top: 0.22em; }
|
||
.ai-message-markdown-list-item > .ai-message-markdown-list { margin-top: 0.25em; margin-bottom: 0.25em; }
|
||
.ai-message-markdown-blockquote {
|
||
margin: 0.75em 0;
|
||
padding: 0.1em 0 0.1em 0.85em;
|
||
border-left: 2px solid color-mix(in srgb, currentColor 24%, transparent);
|
||
color: color-mix(in srgb, currentColor 74%, transparent);
|
||
}
|
||
.ai-message-markdown-code {
|
||
padding: 0.12em 0.34em;
|
||
border-radius: var(--r-sm);
|
||
background: color-mix(in srgb, currentColor 9%, transparent);
|
||
color: inherit;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: 0.88em;
|
||
}
|
||
.ai-message-codeblock {
|
||
margin: 0.8em 0;
|
||
overflow: hidden;
|
||
border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent);
|
||
border-radius: var(--r-md);
|
||
background: color-mix(in srgb, var(--foreground) 5%, var(--background));
|
||
}
|
||
.ai-message-codeblock-header {
|
||
display: flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-2);
|
||
padding: 0 var(--space-2) 0 12px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||
}
|
||
.ai-message-codeblock-lang {
|
||
overflow: hidden;
|
||
color: color-mix(in srgb, currentColor 56%, transparent);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: var(--fs-micro);
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
text-overflow: ellipsis;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
.ai-message-codeblock-copy {
|
||
display: inline-flex;
|
||
height: 24px;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
padding: 0 var(--space-2);
|
||
color: color-mix(in srgb, currentColor 62%, transparent);
|
||
font: inherit;
|
||
font-size: var(--fs-micro);
|
||
transition: background-color 150ms ease, color 150ms ease;
|
||
}
|
||
.ai-message-codeblock-copy svg { width: 13px; height: 13px; }
|
||
.ai-message-codeblock-copy:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
|
||
.ai-message-codeblock-copy:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: -1px; }
|
||
.ai-message-codeblock-pre {
|
||
margin: 0;
|
||
padding: 10px 12px;
|
||
overflow-x: auto;
|
||
background: transparent;
|
||
color: color-mix(in srgb, var(--foreground) 86%, transparent);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: 0.84em;
|
||
line-height: 1.55;
|
||
tab-size: 2;
|
||
}
|
||
.ai-message-codeblock-pre .ai-message-markdown-code {
|
||
padding: 0;
|
||
background: transparent;
|
||
color: inherit;
|
||
font-size: inherit;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ai-message-codeblock-copy { transition: none; }
|
||
}
|
||
|
||
/* --- ai-message 代码块语法高亮（shiki 双主题 CSS 变量：--shiki-light/--shiki-dark）--- */
|
||
.ai-message-codeblock-pre .shiki { margin: 0; padding: 0; background: transparent !important; }
|
||
.ai-message-codeblock-pre .shiki code { font-family: inherit; font-size: inherit; color: inherit; }
|
||
html:not(.dark) .ai-message-codeblock-pre .shiki,
|
||
html:not(.dark) .ai-message-codeblock-pre .shiki span { color: var(--shiki-light) !important; }
|
||
html.dark .ai-message-codeblock-pre .shiki,
|
||
html.dark .ai-message-codeblock-pre .shiki span { color: var(--shiki-dark) !important; }
|
||
.ai-message-markdown-link {
|
||
color: var(--primary);
|
||
text-decoration: underline;
|
||
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
|
||
text-underline-offset: 2px;
|
||
}
|
||
.ai-message-markdown-link:hover { text-decoration-color: currentColor; }
|
||
.ai-message-markdown-rule {
|
||
margin: 1em 0;
|
||
border: 0;
|
||
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
|
||
}
|
||
.ai-message-markdown-table-wrap {
|
||
max-width: 100%;
|
||
margin: 0.8em 0;
|
||
overflow-x: auto;
|
||
}
|
||
.ai-message-markdown-table {
|
||
width: 100%;
|
||
min-width: 320px;
|
||
border-collapse: collapse;
|
||
font-size: 0.92em;
|
||
}
|
||
.ai-message-markdown-table-cell {
|
||
padding: 0.48em 0.65em;
|
||
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
.ai-message-markdown-table-header {
|
||
color: color-mix(in srgb, currentColor 82%, transparent);
|
||
font-weight: 620;
|
||
background: color-mix(in srgb, currentColor 5%, transparent);
|
||
}
|
||
.ai-message-markdown-task {
|
||
width: 0.9em;
|
||
height: 0.9em;
|
||
margin: 0 0.35em 0 0;
|
||
vertical-align: -0.08em;
|
||
accent-color: var(--primary);
|
||
}
|
||
|
||
/* ===== 创作页 · 连续对话与媒体状态 ===== */
|
||
.creation-home .creation-thread-workbench {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.creation-thread-toolbar {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-2);
|
||
}
|
||
.creation-home .creation-thread-toolbar {
|
||
flex: 0 0 auto;
|
||
width: min(900px, calc(100% - 56px));
|
||
padding: var(--space-3) 0;
|
||
margin: 0 auto;
|
||
}
|
||
.creation-toolbar-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
|
||
.creation-toolbar-action {
|
||
display: inline-flex;
|
||
min-height: var(--space-8);
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-md);
|
||
background: transparent;
|
||
color: var(--creation-muted);
|
||
padding: 0 var(--space-2);
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||
}
|
||
.creation-toolbar-action:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||
.creation-toolbar-action:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||
.creation-toolbar-action svg { width: var(--space-4); height: var(--space-4); }
|
||
.creation-toolbar-shots { position: relative; display: inline-flex; }
|
||
.creation-rail-trigger {
|
||
display: inline-flex;
|
||
min-height: var(--space-8);
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-md);
|
||
background: transparent;
|
||
color: var(--creation-muted);
|
||
padding: 0 var(--space-2);
|
||
font-size: var(--fs-caption);
|
||
font-weight: 560;
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-state) ease, color var(--motion-state) ease;
|
||
}
|
||
.creation-rail-trigger:hover,
|
||
.creation-rail-trigger[aria-expanded="true"] { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||
.creation-rail-trigger:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
|
||
.creation-rail-trigger svg { width: var(--space-4); height: var(--space-4); }
|
||
.creation-rail-count {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 16px;
|
||
height: 16px;
|
||
border-radius: 99px;
|
||
background: color-mix(in srgb, var(--creation-accent) 14%, transparent);
|
||
color: var(--creation-accent);
|
||
padding: 0 var(--space-1);
|
||
font-size: var(--fs-micro);
|
||
font-style: normal;
|
||
font-weight: 620;
|
||
font-variant-numeric: tabular-nums;
|
||
line-height: 1;
|
||
}
|
||
.creation-rail-pop {
|
||
position: absolute;
|
||
z-index: 30;
|
||
top: calc(100% + var(--space-2));
|
||
left: 0;
|
||
width: min(360px, calc(100vw - 48px));
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: var(--r-lg);
|
||
background: var(--creation-surface);
|
||
box-shadow: var(--shadow-popover);
|
||
padding: var(--space-2);
|
||
}
|
||
.creation-rail-pop-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-2) var(--space-2); }
|
||
.creation-rail-pop-title { display: flex; align-items: baseline; gap: var(--space-2); color: var(--creation-text); font-size: var(--fs-body); font-weight: 620; }
|
||
.creation-rail-pop-title small { color: var(--creation-muted); font-size: var(--fs-micro); font-weight: 480; }
|
||
.creation-rail-pop-close {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 0;
|
||
border-radius: var(--r-sm);
|
||
background: transparent;
|
||
color: var(--creation-muted);
|
||
padding: var(--space-1);
|
||
cursor: pointer;
|
||
}
|
||
.creation-rail-pop-close:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||
.creation-rail-pop-close svg { width: var(--space-4); height: var(--space-4); }
|
||
.creation-rail-list { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 320px); overflow-y: auto; }
|
||
.creation-rail-row {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
border: 0;
|
||
border-radius: var(--r-md);
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
padding: var(--space-2);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-state) ease;
|
||
}
|
||
.creation-rail-row:hover { background: var(--creation-surface-hover); }
|
||
.creation-rail-row:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: -2px; }
|
||
.creation-rail-row-shot {
|
||
display: inline-flex;
|
||
min-width: 44px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--r-sm);
|
||
background: color-mix(in srgb, var(--creation-accent) 10%, transparent);
|
||
color: var(--creation-accent);
|
||
padding: var(--space-1) var(--space-2);
|
||
font-size: var(--fs-micro);
|
||
font-weight: 620;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.creation-rail-row-prompt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creation-text); font-size: var(--fs-caption); }
|
||
.creation-rail-row-state { color: var(--creation-muted); font-size: var(--fs-micro); white-space: nowrap; }
|
||
.creation-rail-row-state.is-done { color: var(--palette-status-success); }
|
||
.creation-rail-row-state.is-error { color: var(--palette-status-error); }
|
||
.creation-rail-row-state.is-pending { color: var(--creation-accent); }
|
||
.creation-rail-empty { margin: 0; color: var(--creation-muted); padding: var(--space-3) var(--space-2); font-size: var(--fs-caption); }
|
||
.creation-home .creation-shot-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border: 1px solid color-mix(in srgb, var(--creation-accent) 40%, transparent);
|
||
border-radius: var(--r-sm);
|
||
background: color-mix(in srgb, var(--creation-accent) 10%, transparent);
|
||
color: var(--creation-accent);
|
||
padding: 0 var(--space-2);
|
||
font-size: var(--fs-micro);
|
||
font-weight: 620;
|
||
font-variant-numeric: tabular-nums;
|
||
line-height: 1.6;
|
||
}
|
||
.creation-home .creation-thread-message { scroll-margin-top: 92px; }
|