ludan
a6626beb32
Web Quality / verify (pull_request) Has been cancelled
本次更新对多个功能页面进行了系统性的 UI/UX 打磨，统一了交互模式并补充了缺失的状态反馈。 ## 新增功能 - WorkbenchPage: 图片提示词案例区域新增加载骨架屏、错误回退、空数据三种状态展示 - CharacterMixPage: 新增左侧设置面板（驱动提示词、图像检测开关、水印开关），支持清除已上传的人物图/参考视频 - DigitalHumanPage: 新增左侧设置面板（提示词输入、去水印/保留原声开关），支持清除已上传的人像/音频，增加取消生成按钮 - ImageWorkbenchPage / ResolutionUpscalePage: 新增参数设置面板和资产清除交互 - MorePage: 新增页面入口 ## UI 优化 - 统一 Toggle 开关组件: 所有设置页面采用一致的 .studio-toggle 交互模式 - 资产清除: 各上传区域新增清除按钮，含二次确认和提示反馈 - 生成按钮: 统一为带图标的 .studio-generate-btn，增加 disabled/loading 状态 - ConversationSidebar / ProjectSidebar: 侧边栏交互细节优化 ## 样式升级 - image-workbench.css: 大幅扩展样式 (+1900 行)，覆盖设置面板、上传区、结果展示等 - workbench.css: 新增 666 行样式，含骨架屏动画、案例卡片网格、状态占位等 - subtitle-removal.css: 补充设置面板样式
160 lines
3.9 KiB
CSS
160 lines
3.9 KiB
CSS
.subtitle-removal-presets {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.subtitle-removal-preset {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
min-height: 92px;
|
|
padding: 10px 8px;
|
|
border: 1px solid color-mix(in srgb, var(--border-subtle, #333) 82%, white 10%);
|
|
border-radius: var(--radius-xs, 8px);
|
|
background:
|
|
linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
|
|
var(--bg-inset, #111);
|
|
color: var(--fg-muted, #aaa);
|
|
cursor: pointer;
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.subtitle-removal-preset:hover {
|
|
border-color: color-mix(in srgb, var(--accent, #0d9488) 42%, var(--border-subtle, #333));
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--accent, #0d9488) 8%, transparent), transparent),
|
|
var(--bg-hover, #171717);
|
|
color: var(--fg-body, #eee);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.subtitle-removal-preset.is-active {
|
|
border-color: color-mix(in srgb, var(--accent, #0d9488) 72%, transparent);
|
|
background: color-mix(in srgb, var(--accent, #0d9488) 13%, var(--bg-inset, #111));
|
|
color: var(--accent, #0d9488);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0d9488) 8%, transparent) inset;
|
|
}
|
|
|
|
.subtitle-removal-preset strong {
|
|
max-width: 100%;
|
|
color: var(--fg-body, #eee);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.subtitle-removal-preset span {
|
|
max-width: 100%;
|
|
color: var(--fg-muted, #aaa);
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
opacity: 0.82;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle-removal-preset__visual {
|
|
position: relative;
|
|
width: 54px;
|
|
height: 34px;
|
|
border: 1px solid color-mix(in srgb, var(--border-subtle, #333) 78%, white 10%);
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent),
|
|
color-mix(in srgb, var(--bg-elevated, #161616) 92%, black 8%);
|
|
box-shadow: 0 1px 0 rgb(255 255 255 / 0.035) inset;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.subtitle-removal-preset__region {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: var(--region-top);
|
|
height: var(--region-height);
|
|
background: color-mix(in srgb, var(--accent, #0d9488) 24%, transparent);
|
|
border-top: 1px dashed var(--accent, #0d9488);
|
|
border-bottom: 1px dashed var(--accent, #0d9488);
|
|
}
|
|
|
|
.subtitle-removal-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 24px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.subtitle-removal-preview__video-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.subtitle-removal-preview__video-wrap video {
|
|
max-width: 100%;
|
|
max-height: 40vh;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.subtitle-removal-preview__video-wrap h4 {
|
|
margin: 0 0 8px;
|
|
font-size: 13px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.subtitle-removal-preview__region-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: var(--region-top);
|
|
height: var(--region-height);
|
|
background: rgba(13, 148, 136, 0.15);
|
|
border-top: 2px dashed rgba(13, 148, 136, 0.6);
|
|
border-bottom: 2px dashed rgba(13, 148, 136, 0.6);
|
|
pointer-events: none;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.subtitle-removal-preview__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.subtitle-removal-preview__actions button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 14px;
|
|
border: none;
|
|
border-radius: var(--radius-sm, 6px);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.subtitle-removal-preview__actions button:hover:not(:disabled) {
|
|
background: var(--accent, #0d9488);
|
|
}
|
|
|
|
.subtitle-removal-preview__actions button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|