/* 管理后台视口边界:document 不滚动,各个工作区和面板独立滚动。 */ :root { --app-ink: #191919; --app-muted: #707070; --app-body: #ededed; --app-surface: #ffffff; --app-subtle: #f7f7f7; --app-control: #f0f0f0; --app-control-hover: #e5e5e5; --app-field: #ffffff; --app-field-hover: #ffffff; --app-border: #e5e5e5; --app-inverse: #ffffff; --app-accent: #07c160; --app-accent-hover: #2dcb79; --app-accent-text: #087c42; --app-on-accent: #ffffff; --app-button-primary: #078640; --app-button-hover: #087c42; --app-button-pressed: #066b36; --app-disabled-bg: #e4e4e4; --app-disabled-text: #8c8c8c; --app-selected: #e4f4e9; --app-shadow: #00000018; --app-danger: #a93232; --app-success: #087c42; } :root[data-theme='dark'] { --app-ink: #d9d9d9; --app-muted: #a3a3a3; --app-body: #111111; --app-surface: #191919; --app-subtle: #232323; --app-control: #2b2b2b; --app-control-hover: #353535; --app-field: #2b2b2b; --app-field-hover: #353535; --app-disabled-bg: #303030; --app-disabled-text: #808080; --app-border: #333333; --app-inverse: #111111; --app-accent-text: #5cd693; --app-selected: #173527; --app-shadow: #00000055; --app-danger: #fa7373; --app-success: #5cd693; } html, body, #app, .app-provider { height: 100%; min-height: 0; overflow: hidden; } html { background: var(--app-body); } body { margin: 0; } .admin-layout { height: 100dvh; overflow: hidden; } .admin-main { min-width: 0; height: 100%; } .admin-main > .n-layout-scroll-container { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .admin-sider { height: 100%; } /* 外壳固定品牌与底部设置;只有菜单自身使用 NScrollbar 滚动。 */ .admin-sider-content { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .admin-nav-scroll.n-scrollbar { flex: 1; min-height: 0; } .admin-sider-footer { flex-shrink: 0; padding-block: 8px max(8px, env(safe-area-inset-bottom)); } .n-button.admin-settings-button { justify-content: flex-start; height: 44px; padding-inline: 20px; } .n-button.admin-settings-button.is-collapsed { justify-content: center; padding-inline: 0; width: 44px; min-width: 44px; height: 44px; margin-inline: auto; } .admin-settings-button.is-collapsed .n-button__icon { margin: 0; } /* Naive 菜单背景默认左右内缩 8px;只铺满导航行,不改图标与文字缩进。 */ .admin-sider .n-menu .n-menu-item-content::before { left: 0; right: 0; border-radius: 0; } .admin-brand { display: flex; flex-shrink: 0; align-items: center; gap: 12px; height: 74px; padding: 0 20px; color: var(--app-ink); white-space: nowrap; } .admin-brand > svg { flex-shrink: 0; } .admin-brand span { font-size: 15px; font-weight: 600; } .admin-brand small { display: block; font-size: 8px; letter-spacing: 1px; font-weight: 400; color: var(--app-muted); margin-top: 3px; } .admin-topbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 20px; gap: 12px; } /* 按钮保持直角,单图标按钮以 Naive 当前尺寸为边长,加载时也不改变宽度。 */ .n-button { border-radius: 0; } .n-button.icon-button { width: var(--n-height); min-width: var(--n-height); height: var(--n-height); padding: 0; flex: 0 0 auto; } .n-button.icon-button .n-button__icon { margin: 0; } .n-button:focus-visible { outline: 2px solid var(--app-accent-text); outline-offset: 2px; } .admin-sider .n-menu-divider { height: 12px; background: transparent; } .workspace-tools-drawer .n-drawer-header, .workspace-tools-drawer .n-drawer-footer { background: var(--app-subtle); } .workspace-tools-drawer .n-drawer-body { background: var(--app-body); } .n-button.theme-toggle { flex-shrink: 0; width: 34px; height: 34px; } .admin-content { flex: 1; min-height: 0; min-width: 0; overflow: hidden; outline: none; } .project-frame { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .project-header { flex-shrink: 0; padding: 9px 20px; background: var(--app-surface); } .project-header .n-page-header__main, .project-header .n-page-header__title { min-width: 0; overflow: hidden; } .project-title { max-width: 100%; font-size: 16px; font-weight: 600; } .project-notices.n-scrollbar { flex-shrink: 0; height: auto; max-height: 100px; overflow: hidden; } .project-notices-content { padding: 8px 24px; display: grid; gap: 5px; } .project-notices .n-alert { padding: 7px 12px; font-size: 12px; } .project-view { flex: 1; min-height: 0; overflow: hidden; } /* 标题移除额外按钮后让名称使用剩余空间;未完成项目的引导仍留在内容区。 */ .project-header .n-page-header-wrapper { min-width: 0; } .project-access-gate { height: 100%; } .app-dialog { --app-field: var(--app-control); --app-field-hover: var(--app-control-hover); } .workspace-page { position: relative; height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .workspace-heading-scroll.n-scrollbar { flex-shrink: 0; height: auto; max-height: min(35dvh, 260px); overflow: hidden; } .workspace-heading { padding: 16px 24px 12px; } /* 常用工具固定在滚动区外;低频操作使用局部抽屉,不叠加占高面板。 */ .content-first-workspace .workspace-heading { padding: 8px 20px; } .content-first-workspace .workspace-split { padding: 0 20px 12px; gap: 8px; } .content-first-workspace .workspace-scroll-content { padding: 0 20px 16px; } .workspace-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 34px; } .toolbar-episode { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 180px; font-size: 12px; } .toolbar-episode .n-select { min-width: 0; } .toolbar-metrics, .toolbar-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--app-muted); font-size: 12px; line-height: 1.6; } .toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; } .toolbar-type-filter { width: 152px; } .workspace-tools-drawer { max-width: 100%; } .workspace-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; font-size: 15px; } .workspace-tools-body { padding: 20px; } /* 身份说明与折叠入口分开,避免正文紧贴下一组操作。 */ .identity-tools-intro { margin-bottom: 24px; } .workspace-tools-body .storyboard-controls, .workspace-tools-body .production-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-block: 20px; } /* 与 34px 中号输入框共用一行;不再通过 pb-2 / pb-3 手动垫高复选框。 */ .n-checkbox.control-row-checkbox { align-self: end; align-items: center; min-height: 34px; padding-block: 0; } .control-row-checkbox .n-checkbox-box-wrapper { align-self: center; } /* 拆解配置跟随抽屉实际宽度;标题 20px + 间距 8px,下方统一使用 34px 控件行。 */ .breakdown-settings-panel { container: breakdown-settings / inline-size; } .breakdown-config { --breakdown-label-offset: 28px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: start; gap: 16px 24px; } .breakdown-config .field-label { margin: 0 0 8px; padding: 0; line-height: 20px; } .breakdown-group-field, .breakdown-modules-field, .breakdown-module-option { min-width: 0; } .breakdown-group-input { display: flex; align-items: center; gap: 12px; } .breakdown-group-number.n-input-number { flex: 0 0 120px; width: 120px; } .breakdown-group-unit { flex-shrink: 0; white-space: nowrap; color: var(--app-muted); font-size: 14px; } .breakdown-modules-field { margin: 0; padding: 0; border: 0; } .breakdown-module-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; } .breakdown-module-description { margin: 4px 0 0; padding-left: 24px; color: var(--app-muted); font-size: 11px; line-height: 18px; overflow-wrap: anywhere; } .breakdown-preview-button.n-button { align-self: start; margin-top: var(--breakdown-label-offset); white-space: nowrap; } @container breakdown-settings (max-width: 780px) { .breakdown-config { grid-template-columns: 180px minmax(0, 1fr); } .breakdown-preview-button.n-button { grid-column: 2; justify-self: end; margin-top: 0; } } @container breakdown-settings (max-width: 560px) { .breakdown-config { grid-template-columns: minmax(0, 1fr); } .breakdown-module-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); } .breakdown-preview-button.n-button { grid-column: 1; } } .workspace-tools-body .storyboard-coverage { margin-block: 20px; } .workspace-tools-body .generation-row { display: block; } .workspace-tools-body .generation-row > div + div { margin-top: 14px; } .workspace-tools-body .production-pipeline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .workspace-inline-status { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 7px 12px; flex-shrink: 0; border-radius: 0; background: var(--app-subtle); font-size: 12px; } .confirm-action { display: inline-flex; align-items: center; max-width: 100%; } .production-pipeline-card > .confirm-action { margin-block: 16px 4px; } .gallery-workspace-page .workspace-scroll-content { padding-top: 8px; } /* 筛选与关联素材整体吸顶;间距由内部 padding 承担,避免出现透明断层。 */ .gallery-workspace-page .gallery-sticky-controls { position: sticky; top: 0; z-index: 10; background: var(--app-subtle); margin-block: 10px 0; } .gallery-sticky-controls > .form-image-filter-region { margin-block: 0; } .gallery-workspace-page .workspace-scroll > .n-scrollbar-container { overflow-anchor: none; } .workspace-heading h2 { font-size: 16px; } .workspace-heading .text-sm { font-size: 12px; } .workspace-heading .production-controls { gap: 12px; } .workspace-heading .n-input-number { width: 100%; } .workspace-scroll { flex: 1; min-height: 0; } .workspace-scroll-content { padding: 4px 24px 24px; } .workspace-scroll > .n-scrollbar-container { overscroll-behavior: contain; } .workspace-split { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 4px 24px 20px; gap: 12px; } .workspace-split > .my-6 { margin: 0; flex-shrink: 0; } .workspace-feedback.n-scrollbar { flex-shrink: 0; height: auto; max-height: min(24dvh, 160px); overflow: hidden; } .workspace-feedback .n-alert + .n-alert { margin-top: 8px; } .script-section { flex: 1; display: flex; flex-direction: column; min-height: 0; } .script-section > :first-child { flex-shrink: 0; } .script-section .content-with-history { flex: 1; height: auto; min-height: 0; } .script-workspace-page .workspace-split > :not(.script-section) { flex-shrink: 0; } .storyboard-workspace-page .storyboard-workspace { flex: 1; height: auto; min-height: 0; overflow: hidden; } .storyboard-coverage { flex-shrink: 0; } .overview-content { padding-bottom: 8px; } .workspace-loading { display: grid; place-content: center; height: 100%; } .production-workspace, .identity-workspace { flex: 1; min-height: 0; align-items: stretch; overflow: hidden; } .production-workspace, .identity-workspace, .storyboard-workspace { grid-template-columns: clamp(240px, 22%, 280px) minmax(0, 1fr); } .production-shot-list { max-height: none; overflow: hidden; min-height: 0; } .production-workspace > article { overflow: hidden; min-height: 0; overscroll-behavior: contain; } .identity-workspace > div { min-height: 0; overflow: hidden; overscroll-behavior: contain; } .identity-subject-list { max-height: none; min-height: 0; flex: 1; } .storyboard-workspace { height: clamp(360px, 65dvh, 850px); min-height: 0; } .storyboard-workspace > article, .storyboard-workspace .shot-list { overflow: hidden; min-height: 0; height: 100%; max-height: none; } /* 目录统一为固定标题/筛选区和独立滚动列表;不再依赖按钮的默认行高与内边距。 */ .directory-panel { --app-field: var(--app-surface); --app-field-hover: var(--app-surface); display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; overflow: hidden; background: var(--app-subtle); } .directory-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-shrink: 0; gap: 8px; padding: 18px 16px 14px; font-size: 11px; color: var(--app-muted); } .directory-heading h3 { font-size: 13px; font-weight: 600; color: var(--app-ink); } .directory-heading h3 span { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--app-muted); } .directory-filters { display: grid; gap: 10px; padding: 0 12px 12px; flex-shrink: 0; } .directory-filters > * { min-width: 0; } .directory-scroll { flex: 1; } .directory-list-content { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 16px; } .directory-group-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: 10px 14px; background: var(--app-control); font: 600 11px/1.6 ui-monospace, monospace; color: var(--app-ink); } .directory-group-count { font-weight: 400; color: var(--app-muted); } .beat-directory-group { min-width: 0; } .beat-directory-items { display: flex; flex-direction: column; } .directory-mobile-beat { display: none; } .shot-list-content, .production-shot-list-content { gap: 12px; padding: 0 0 12px; } .n-button.directory-item { display: flex; flex-shrink: 0; width: 100%; height: auto; min-height: 88px; padding: 12px 14px; border-radius: 0; white-space: normal; text-align: left; } .n-button.directory-item .n-button__content { display: block; width: 100%; min-width: 0; } .directory-item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } /* 可选前导内容用于主体母版,不改变剧集与镜头目录的原有排版。 */ .n-button.directory-item.has-leading .n-button__content { display: flex; align-items: center; gap: 12px; } .directory-item-leading { display: flex; flex-shrink: 0; } .directory-item.has-leading .directory-item-body { flex: 1; } .identity-subject-list-content { gap: 2px; padding: 0 0 8px; } .n-button.identity-subject-item { min-height: 86px; padding: 10px 14px; } .n-button.identity-subject-item:not(.selected) { background: var(--app-surface); } .n-button.identity-subject-item:not(.selected):hover { background: var(--app-subtle); } .identity-subject-item .directory-item-body { gap: 3px; } .identity-subject-item .directory-item-title { order: 0; font-size: 14px; font-weight: 600; } .identity-subject-item .directory-item-eyebrow { order: 1; font-size: 10px; } .identity-subject-item .directory-item-meta { order: 2; gap: 4px 6px; font-size: 10px; } .identity-thumbnail { display: flex; width: 48px; height: 64px; overflow: hidden; background: var(--app-subtle); } .identity-thumbnail .n-image, .identity-thumbnail .n-image img { width: 100%; height: 100%; } .identity-thumbnail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 5px; color: var(--app-muted); font-size: 10px; } .directory-item-eyebrow { font: 11px/1.5 ui-monospace, monospace; color: var(--app-muted); overflow-wrap: anywhere; } .directory-item-title { font-size: 13px; line-height: 1.7; font-weight: 500; color: var(--app-ink); overflow-wrap: anywhere; } .directory-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--app-muted); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; } .directory-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 5px; border-radius: 0; background: var(--app-control); } .directory-status svg { flex-shrink: 0; } .n-button.directory-item.selected { background: var(--app-selected); box-shadow: inset 3px 0 var(--app-accent); } .n-button.directory-item:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; } /* 标签与操作由同一 NTabs 导航行管理,suffix 共享底线及垂直中心。 */ .tabs-toolbar { container: tabs-toolbar / inline-size; width: 100%; min-width: 0; } .workspace-tabs.n-tabs { width: 100%; min-width: 0; } .workspace-tabs > .n-tabs-nav { align-items: stretch; } .workspace-tabs .n-tabs-tab { min-height: 40px; box-sizing: border-box; } .workspace-tabs .n-tabs-nav-scroll-wrapper { min-width: 0; } .workspace-tabs .n-tabs-nav__suffix { align-items: center; flex-shrink: 0; padding-left: 20px; } .tabs-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 14px; min-height: 40px; } .tabs-toolbar-actions .n-button, .tabs-toolbar-actions .text-button { display: inline-flex; align-items: center; justify-content: center; height: 32px; white-space: nowrap; } /* 窄内容区允许 suffix 独占一行;Tabs 本身继续使用组件内置横向滚动。 */ @container tabs-toolbar (max-width: 600px) { .workspace-tabs > .n-tabs-nav { flex-wrap: wrap; } .workspace-tabs .n-tabs-nav-scroll-wrapper { flex-basis: 100%; } .workspace-tabs .n-tabs-nav__suffix { width: 100%; justify-content: flex-end; padding-left: 0; } } .result-toolbar .n-tabs-tab__label { display: inline-flex; gap: 6px; } /* 筛选按内容区的实际宽度换行,避免侧栏展开后下拉框把其他控件挤到下一行。 */ .form-image-filter-region { container-type: inline-size; margin-block: 16px; padding: 14px 16px; background: var(--app-subtle); } /* 镜头选择和图库筛选共用一行,以控件中心对齐;窄屏保留完整筛选组,不挤压复选框。 */ .form-image-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px 16px; } .form-image-toolbar.has-impact-picker { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); } .form-image-toolbar.has-impact-picker.has-impact-actions { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); } .asset-impact-picker { display: flex; align-items: center; gap: 8px; min-width: 0; } .asset-impact-picker .asset-impact-select { flex: 1 1 0; } .form-image-toolbar > * { min-width: 0; } .form-image-filters { display: grid; grid-template-columns: minmax(200px, 360px) 152px minmax(260px, 1fr) auto; align-items: center; gap: 12px 16px; } .form-image-filters > * { min-width: 0; } .filter-toggles { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; } .filter-toggles .n-checkbox__label { white-space: nowrap; } .filter-result-count { justify-self: end; color: var(--app-muted); font-size: 12px; white-space: nowrap; } @container (max-width: 1200px) { .form-image-toolbar.has-impact-picker, .form-image-toolbar.has-impact-picker.has-impact-actions { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 900px) { .form-image-filters { grid-template-columns: minmax(0, 1fr) 152px; } } @container (max-width: 460px) { .form-image-filters { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 10px; } } .content-with-history { height: clamp(360px, 66dvh, 850px); min-height: 0; grid-template-columns: minmax(0, 1fr) 207px; } .content-with-history > main, .content-with-history > aside { min-height: 0; overflow: hidden; overscroll-behavior: contain; } /* 拆解结果使用剩余高度,不能再用视口比例定高后隐藏长列表。 */ .breakdown-results-section { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; gap: 8px; } .breakdown-results-section > .result-toolbar { flex-shrink: 0; } .breakdown-results-section > .content-with-history { flex: 1; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); } .breakdown-results-scroll .n-scrollbar-content { overflow-wrap: anywhere; } /* 剧集选择、统计和下一步入口共用一行,避免空操作行与双层顶部留白。 */ .breakdown-storyboard { padding: 16px 20px 20px; } .breakdown-storyboard-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 16px; } .breakdown-episode-picker { display: flex; align-items: center; gap: 12px; flex: 0 1 420px; min-width: 0; font-size: 14px; } .breakdown-episode-picker > span { flex-shrink: 0; white-space: nowrap; } .breakdown-episode-picker .n-select { flex: 1; min-width: 0; } .breakdown-storyboard-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-height: 34px; margin-left: auto; } .breakdown-storyboard-count { color: var(--app-muted); font-size: 12px; white-space: nowrap; } .breakdown-storyboard-summary .text-button { min-height: 34px; white-space: nowrap; } /* 连续阅读区保留双栏,执行记录按需展开,不挤占默认阅读宽度。 */ .script-section .n-tabs-tab__label { display: inline-flex; align-items: center; gap: 8px; } .script-section .content-with-history.history-hidden { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .episode-reader { display: grid; grid-template-columns: clamp(190px, 22%, 240px) minmax(0, 1fr); height: 100%; min-height: 0; min-width: 0; overflow: hidden; container-type: inline-size; } .reader-directory { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--app-subtle); } .reader-directory-heading { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 8px; padding: 22px 20px 14px; font-size: 13px; } .reader-directory-heading h3 { font-weight: 600; } .reader-directory-heading span { font-size: 11px; color: var(--app-muted); white-space: nowrap; } .reader-directory-scroll { flex: 1; } .reader-directory-content { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 18px; } .n-button.reader-episode-link { flex-shrink: 0; width: 100%; height: auto; min-height: 64px; padding: 12px 14px; border-radius: 0; color: var(--app-muted); white-space: normal; text-align: left; } .n-button.reader-episode-link .n-button__content { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-width: 0; } .reader-episode-label { font-size: 13px; font-weight: 600; line-height: 1.5; } .reader-episode-title { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; } .n-button.reader-episode-link.active { background: var(--app-selected); color: var(--app-accent-text); box-shadow: inset 3px 0 var(--app-accent); } .reader-page { min-width: 0; min-height: 0; overflow: hidden; background: var(--app-surface); } .reader-scroll .n-scrollbar-container:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -3px; } .reader-content { /* 正文紧邻目录左对齐,保留阅读行宽,不在宽屏内容区居中。 */ max-width: 900px; margin-inline: 0; padding: 32px; text-align: left; } .reader-chapter + .reader-chapter { margin-top: 48px; padding-top: 36px; } .reader-chapter:last-child { /* 末集较短时仍可定位到阅读线,不必把倒数第二集误认为当前集。 */ min-height: max(160px, calc(var(--reader-height) - 64px)); } .reader-chapter-heading { margin-bottom: 24px; } .reader-chapter-heading p { color: var(--app-muted); font-size: 13px; font-weight: 500; margin-bottom: 10px; } .reader-chapter-heading h2 { font-size: clamp(18px, 2cqw, 24px); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; } @media (max-width: 1000px) { .episode-reader { grid-template-columns: 180px minmax(0, 1fr); } } @media (max-width: 600px) { .episode-reader { grid-template-columns: 112px minmax(0, 1fr); } .reader-directory-heading { padding: 16px 12px 12px; flex-wrap: wrap; } .n-button.reader-episode-link { padding: 12px 10px; } .reader-content { padding-inline: 18px; } } /* 面板只负责尺寸与裁切;滚动和深浅主题滚动条统一交给 Naive UI。 */ .panel-scroll.n-scrollbar { height: 100%; min-height: 0; min-width: 0; overflow: hidden; } .n-scrollbar > .n-scrollbar-container { overscroll-behavior: contain; } .production-shot-list, .production-detail, .storyboard-detail, .shot-list, .content-with-history > main { min-width: 0; min-height: 0; } .history-panel, .production-shot-list, .shot-list { padding: 0; } .history-content { padding: 23px 21px; } .image-history.n-scrollbar, .table-scroll.n-scrollbar { height: auto; overflow: hidden; } .image-history.n-scrollbar { width: 100%; max-width: 100%; min-width: 0; } .image-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-block: 16px 8px; font-size: 12px; } .image-history-content { display: flex; gap: 12px; padding: 4px 4px 12px; width: max-content; } .code-scroll.n-scrollbar { height: auto; max-height: 420px; overflow: hidden; } .code-scroll .json-view, .code-scroll .storyboard-json { max-height: none; overflow: visible; } .project-table-area { flex: 1; min-height: 0; } .project-data-table { height: 100%; } .project-data-table .n-data-table-base-table { flex: 1; min-height: 0; } .project-index-heading { margin: 0; } .project-index-heading h1 { font-size: 22px; font-weight: 600; } .project-index-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; } .project-search { width: 240px; } /* 项目筛选与搜索框同高,保留更宽的点击区;窄屏可自然换行。 */ .project-status-filters.n-radio-group { display: flex; flex-wrap: wrap; height: auto; min-height: var(--n-height); gap: 4px 1px; } .project-status-filters .n-radio-group__splitor { display: none; } .project-status-filters .n-radio-button { min-width: 76px; padding-inline: 18px; text-align: center; } /* 状态说明与操作各自成组,避免小标签夹在不同尺寸的按钮之间。 */ .visual-style-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-block: 20px; padding: 14px 16px; background: var(--app-subtle); } .visual-style-status { display: flex; align-items: center; gap: 12px; min-width: 0; } .visual-style-status > svg { flex-shrink: 0; color: var(--app-muted); } .visual-style-status strong { font-size: 14px; font-weight: 500; } .visual-style-status p { margin: 4px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.6; } .visual-style-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; } .project-name-cell { display: block; min-width: 0; } .project-name-cell strong, .project-name-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-name-cell small { color: var(--app-muted); margin-top: 4px; font-size: 11px; } .app-dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); } .app-dialog .n-card-header { flex-shrink: 0; } .dialog-body-scroll { max-height: calc(100dvh - 154px); } .app-dialog .n-card__content { min-height: 0; } .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; } .asset-image .n-image { width: 100%; height: 100%; min-height: 0; min-width: 0; display: flex; justify-content: center; } .asset-image .n-image img { width: 100%; height: 100%; } /* 预览尺寸不随原图分辨率增长,历史缩略图也不能被按钮默认宽度覆盖。 */ .asset-image.asset-image-preview { height: min(42dvh, 420px); min-height: 0; aspect-ratio: auto; } .n-button__content { gap: 6px; } .n-button:disabled { opacity: 1; } .n-button.image-history-item { width: 128px; min-width: 128px; max-width: 128px; flex: 0 0 128px; height: auto; padding: 6px; white-space: normal; background: var(--app-subtle); } .n-button.image-history-item.selected { background: var(--app-selected); box-shadow: inset 0 0 0 2px var(--app-accent); } .n-button.image-history-item .n-button__content { display: block; width: 100%; text-align: left; overflow: hidden; } .image-history-item .asset-image { height: 88px; min-height: 0; aspect-ratio: auto; } .image-history-label { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } .image-history-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; color: var(--app-muted); font-size: 10px; line-height: 1.5; } /* 选角进度按抽屉实际宽度排列;按钮尺寸显式覆盖组件默认值。 */ .casting-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 24px; padding-top: 20px; } .n-button.casting-item { width: 100%; min-width: 0; height: auto; min-height: 76px; padding: 12px 14px; white-space: normal; text-align: left; background: var(--app-subtle); } .n-button.casting-item.selected { background: var(--app-selected); box-shadow: inset 3px 0 0 var(--app-accent); } .n-button.casting-item .n-button__content { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; text-align: left; } .casting-item-identity { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .casting-item-name { font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; } .casting-item-ref { color: var(--app-muted); font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } .casting-item-status { flex-shrink: 0; } /* 主体搜索靠左,统计紧随输入框;窄内容区自然换行,不占满整行或挤压控件。 */ .subject-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; margin-bottom: 20px; } .subject-list-search.n-input { flex: 0 1 260px; min-width: 0; max-width: 100%; } .subject-list-count { flex-shrink: 0; color: var(--app-muted); font-size: 12px; white-space: nowrap; } /* 诊断筛选按实际空间换行,长 checkpoint ID 不撑开弹窗。 */ .diagnostics-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .diagnostics-filters > .n-input { flex: 1 1 240px; min-width: 0; } .diagnostics-filters > .n-select { flex: 0 1 180px; min-width: 0; } .diagnostics-records { display: grid; gap: 12px; min-width: 0; } /* 镜头影响和素材定位使用固定底色;高亮只表示当前定位,不代表素材失效。 */ .asset-impact-context { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--app-subtle); margin: 0; min-width: 0; } /* 关联素材始终单行横向浏览,数量和长名称不会撑高定位区或压缩图片区域。 */ .asset-impact-links-scroll.n-scrollbar { height: auto; min-width: 0; max-width: 100%; } .asset-impact-links { display: flex; align-items: center; gap: 12px; width: max-content; white-space: nowrap; min-height: 32px; padding-block: 6px; } .asset-impact-links > * { flex-shrink: 0; } .asset-impact-select { min-width: 0; width: 100%; } .form-image-card-focused { box-shadow: inset 3px 0 0 var(--app-accent-text); } /* 低频记录收起后归还正文宽度,不留下历史列的占位。 */ .breakdown-results-section > .content-with-history.history-hidden { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } /* 补充说明只按需展开,继续使用平直背景层级,不增加边框或圆角。 */ .detail-disclosure.n-collapse { font-size: 12px; color: var(--app-muted); } .detail-disclosure-content { padding: 12px 14px; background: var(--app-subtle); color: var(--app-ink); line-height: 1.8; } .quality-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: start; gap: 16px; } .quality-result { margin-top: 24px; padding: 16px; background: var(--app-subtle); } .quality-result-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px; background: var(--app-control); font-size: 12px; overflow-wrap: anywhere; } .quality-json { margin-top: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.7; } .select-control { min-width: 130px; } .n-checkbox { align-items: flex-start; } .n-checkbox .n-checkbox__label { white-space: normal; } .n-alert { line-height: 1.8; } .n-collapse.panel { padding: 16px; } .n-table.project-table th { background: var(--app-subtle); } .empty-state { min-height: 200px; padding: 40px 20px; } .production-video { background: #080808; } .skip-link:focus { z-index: 3000; } @media (max-width: 1000px) { .production-controls { grid-template-columns: minmax(130px, 1fr) 90px; } .content-with-history { grid-template-columns: minmax(0, 1fr) 180px; } } @media (max-width: 760px) { .admin-topbar { padding: 0 10px; } .admin-sider:not(.n-layout-sider--collapsed) { position: absolute; top: 44px; bottom: 0; height: auto; z-index: 20; box-shadow: 6px 0 24px var(--app-shadow); } .project-header { padding: 8px 12px; } .project-title { font-size: 14px; } .workspace-heading { padding: 12px; } .content-first-workspace .workspace-heading { padding: 8px 12px; } .content-first-workspace .workspace-split, .content-first-workspace .workspace-scroll-content { padding: 0 12px 12px; } .toolbar-episode { flex: 1; } .toolbar-actions { gap: 8px; } .workspace-tools-body { padding: 14px; } .workspace-scroll-content, .workspace-split { padding: 0 12px 12px; } .workspace-heading .production-controls { grid-template-columns: minmax(100px, 1fr) 80px; } .production-workspace, .storyboard-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: 184px minmax(0, 1fr); } .directory-panel { height: 100%; border-right: 0; } .directory-heading { padding: 12px 14px 8px; } .directory-list-content { flex-direction: row; width: max-content; align-items: stretch; padding-bottom: 12px; } .n-button.directory-item { width: 228px; min-height: 104px; } .directory-group-heading { display: none; } .beat-directory-group, .beat-directory-items { display: contents; } .directory-mobile-beat { display: inline; } .identity-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: 250px minmax(0, 1fr); gap: 10px; } .directory-filters { grid-template-columns: minmax(0, 1fr) 120px; } .storyboard-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .content-with-history { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 130px; } .breakdown-results-section > .content-with-history { grid-template-rows: minmax(0, 1fr) min(25%, 130px); } .history-panel { overflow: hidden; min-height: 0; } .project-search { width: 100%; } .project-index-toolbar .n-radio-group { width: 100%; } .production-pipeline { grid-template-columns: 1fr; } }