suzmii
8b85977828
- packages/shared/src/components/styles.css:528 [bug medium] min-width: max-content 收窄到新的 .platform-segmented-tabs--scroll 修饰类：grid 分支没有溢出容器、轨道是 minmax(0,1fr)，同样的下限只会让内容画到相邻格上；grid 侧靠轨道等分与宿主 truncateLabels 收口，选中 PlatformSegmentedTabs.tsx 的 scroll 分支补修修饰类。
- packages/shared/src/components/PlatformResourceFilterBar.test.tsx 同步改成钉「下限只挂在 --scroll」+「grid 分支不带 --scroll/overflow-x-auto」（声明级断言，jsdom 不计算外部样式表，属弱验证，真机判据见提交说明）。
- packages/shared/src/components/PlatformResourceFilterBar.tsx:24 [maintainability low] Props 改为以 tagItems 为判别项的联合类型：给 tagItems 就必须给 onToggleTag，非法状态编译期不可表达；组件内部再兜 disabled={!onToggleTag} 供给不带类型检查的调用方，并补对应运行时用例。
- packages/shared/src/components/PlatformResourceFilterBar.tsx:107 [style low] 标签行补 scrollbar-hide：它是唯一还画滚动条的横向滚动容器，与 styles.css 里 .scrollbar-hide 的注释口径对齐；补类名与声明级用例。
- packages/shared/src/contracts/gameCreationAppAssetTagLibrary.ts:51 [maintainability low] assetIds 排序改为确定性 code-unit sort()，不再依赖运行环境默认 locale（标签那一层仍显式钉 zh-CN），补跨输入顺序可复现的用例。
- packages/shared/src/contracts/gameCreationAppAssetTagLibrary.ts:68 [bug low] assetTagsMatchSelection 两侧对称归一化：selectedTags 也过 normalizeGameCreationAppAssetTags，' 像素风 ' 这类未归一化的选中项不再静默匹配不上。
- packages/shared/src/contracts/gameCreationApp.test.ts [test low] 新增解析 Rust PROJECT_RESOURCE_CANVAS_SECTIONS 与 TS 常量对齐的交叉校验（仿 assetKindCanonicalMapping.test.ts 解析 Rust 常量先例），钉住两侧分区顺序不漂移。
- packages/shared/src/contracts/gameCreationApp.ts 同步「读显示 / 写回」口径注释：未知 category 已在 Rust 读侧失败关闭，「非法值 → 派生」只剩内存对象语义。
- apps/ai-game-creator-shell/src/styles.css:5790 [bug medium] :has() 悬停高亮分类值换成现行 7 个分区（ui-interaction/character/scene/audio/document/unclassified/version），删掉永不渲染的 code/art 死选择器，补齐缺失栏目的高亮。
- apps/ai-game-creator-shell/src/styles.css:6873 [bug medium] hover/focus-within/is-selected 由只写 border-color 改为完整 border: 1px solid #d57b51（基规则 border: 0 下 border-color 无效果，选中/焦点态此前完全不可见），box-sizing: border-box 下不改卡片尺寸。
- apps/ai-game-creator-shell/src/styles.css:10151 [bug medium] 去掉高优先级 :focus-within 规则里的 box-shadow: none：它盖掉了 --platform-input-focus-ring 焦点光环，direct-codex 输入区此前没有任何可见焦点（无障碍回归），现在光环生效。
- apps/ai-game-creator-shell/src/styles.css:10198 [bug low] 润色状态文字与操作排改为同一行分列（grid-row: 2 + grid-column: 1 / 2），不再整行独占或与按钮重叠，状态出现/消失不改变输入框高度。
- apps/ai-game-creator-shell/src/styles.css:10206 [maintainability low] 删除永不命中的 .resource-reference-input-at direct-codex 规则（showTriggerButton={!directCodex} 不渲染该按钮），保留说明指向真正的 .project-supervisor-reference-trigger。
- 附带 prettier 对 .design-agent-reasoning summary 单行规则的换行归一（该文件本来未过 prettier --check）。
1313 lines
32 KiB
CSS
1313 lines
32 KiB
CSS
/*
|
||
* Shared token CSS for the shadcn-owned UI source. Hosts only need to import
|
||
* this file and theme.css; no application layout, business selector, or
|
||
* Tailwind preset is pulled into the consuming app.
|
||
*/
|
||
.genarrative-ui {
|
||
--genarrative-ui-focus-ring: var(
|
||
--platform-input-focus-ring,
|
||
rgba(204, 117, 76, 0.24)
|
||
);
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-family: var(
|
||
--platform-font-family,
|
||
Inter,
|
||
'Noto Sans CJK SC',
|
||
'PingFang SC',
|
||
system-ui,
|
||
sans-serif
|
||
);
|
||
}
|
||
|
||
.genarrative-ui *,
|
||
.genarrative-ui *::before,
|
||
.genarrative-ui *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.genarrative-ui-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-size: 0.8125rem;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.genarrative-ui-checkbox {
|
||
display: inline-grid;
|
||
width: 1.125rem;
|
||
height: 1.125rem;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
appearance: none;
|
||
border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.88));
|
||
border-radius: 0.35rem;
|
||
background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
|
||
color: var(--platform-button-primary-text, #fffaf5);
|
||
cursor: pointer;
|
||
transition:
|
||
background-color 160ms ease,
|
||
border-color 160ms ease,
|
||
box-shadow 160ms ease,
|
||
transform 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-checkbox::after {
|
||
content: '✓';
|
||
font-size: 0.75rem;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
opacity: 0;
|
||
transform: scale(0.7);
|
||
transition:
|
||
opacity 120ms ease,
|
||
transform 120ms ease;
|
||
}
|
||
|
||
.genarrative-ui-checkbox:checked {
|
||
border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
|
||
background: var(--platform-button-primary-fill, #c7653d);
|
||
}
|
||
|
||
.genarrative-ui-checkbox:checked::after {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.genarrative-ui-checkbox:hover:not(:disabled) {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.genarrative-ui-checkbox:active:not(:disabled) {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.genarrative-ui-checkbox:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
|
||
}
|
||
|
||
.genarrative-ui-checkbox:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.genarrative-ui-skeleton {
|
||
min-height: 1rem;
|
||
border-radius: 0.55rem;
|
||
background: linear-gradient(
|
||
100deg,
|
||
rgba(226, 203, 184, 0.42) 20%,
|
||
rgba(255, 253, 250, 0.92) 40%,
|
||
rgba(226, 203, 184, 0.42) 60%
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: genarrative-ui-skeleton-shimmer 1.4s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes genarrative-ui-skeleton-shimmer {
|
||
to {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
.genarrative-ui-table__container {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.88));
|
||
border-radius: 0.9rem;
|
||
background: var(--platform-subpanel-fill, rgba(255, 253, 250, 0.72));
|
||
}
|
||
|
||
.genarrative-ui-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-size: 0.8125rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.genarrative-ui-table__head,
|
||
.genarrative-ui-table__cell {
|
||
padding: 0.7rem 0.85rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.genarrative-ui-table__header {
|
||
background: rgba(226, 203, 184, 0.2);
|
||
color: var(--platform-text-soft, #755a49);
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.genarrative-ui-table__row + .genarrative-ui-table__row {
|
||
border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
|
||
}
|
||
|
||
.genarrative-ui-table__body .genarrative-ui-table__row:hover {
|
||
background: rgba(255, 255, 255, 0.58);
|
||
}
|
||
|
||
.genarrative-ui-table__caption {
|
||
padding: 0.7rem 0.85rem;
|
||
color: var(--platform-text-soft, #755a49);
|
||
font-size: 0.75rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.genarrative-ui-button,
|
||
.genarrative-ui-icon-button,
|
||
.genarrative-ui-tabs__item,
|
||
.genarrative-ui-switch {
|
||
font: inherit;
|
||
}
|
||
|
||
.genarrative-ui-button {
|
||
display: inline-flex;
|
||
min-height: 2.5rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
border: 1px solid transparent;
|
||
border-radius: 0.75rem;
|
||
padding: 0 1rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 160ms ease,
|
||
box-shadow 160ms ease,
|
||
background-color 160ms ease,
|
||
border-color 160ms ease,
|
||
color 160ms ease,
|
||
opacity 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-button--sm {
|
||
min-height: 2.125rem;
|
||
border-radius: 0.625rem;
|
||
padding-inline: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.genarrative-ui-button--md {
|
||
min-height: 2.5rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.genarrative-ui-button--lg {
|
||
min-height: 2.875rem;
|
||
border-radius: 0.875rem;
|
||
padding-inline: 1.25rem;
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.genarrative-ui-button--full-width {
|
||
width: 100%;
|
||
}
|
||
|
||
.genarrative-ui-button--pill {
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.genarrative-ui-button--start {
|
||
justify-content: flex-start;
|
||
text-align: left;
|
||
}
|
||
|
||
.genarrative-ui-button--primary {
|
||
border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
|
||
background: var(--platform-button-primary-fill, #c7653d);
|
||
color: var(--platform-button-primary-text, #fffaf5);
|
||
box-shadow: var(
|
||
--platform-profile-action-shadow,
|
||
0 8px 18px rgba(182, 98, 63, 0.18)
|
||
);
|
||
}
|
||
|
||
.genarrative-ui-button--secondary {
|
||
border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.88));
|
||
background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
|
||
color: var(--platform-button-secondary-text, #4b2412);
|
||
}
|
||
|
||
.genarrative-ui-button--ghost {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
color: var(--platform-button-ghost-text, #755a49);
|
||
}
|
||
|
||
.genarrative-ui-button--danger {
|
||
border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
|
||
background: var(--platform-button-danger-fill, #fff0eb);
|
||
color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-button--tone-accent {
|
||
border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.3));
|
||
background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
|
||
color: var(--platform-warm-text, #b6623f);
|
||
}
|
||
|
||
.genarrative-ui-button--tone-accent-soft {
|
||
border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.22));
|
||
background: transparent;
|
||
color: var(--platform-accent, #c7653d);
|
||
}
|
||
|
||
.genarrative-ui-button:not(:disabled):hover,
|
||
.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):hover,
|
||
.genarrative-ui-tabs__item:not(:disabled):hover,
|
||
.genarrative-ui-switch:not(:disabled):hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.genarrative-ui-button:not(:disabled):active,
|
||
.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active,
|
||
.genarrative-ui-tabs__item:not(:disabled):active,
|
||
.genarrative-ui-switch:not(:disabled):active {
|
||
transform: translateY(1px);
|
||
transition-duration: 80ms;
|
||
}
|
||
|
||
.genarrative-ui-button:not(:disabled):active {
|
||
filter: brightness(0.97);
|
||
box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.14);
|
||
}
|
||
|
||
.genarrative-ui-button--primary:not(:disabled):active {
|
||
filter: brightness(0.94);
|
||
box-shadow:
|
||
inset 0 2px 4px rgba(50, 22, 8, 0.2),
|
||
0 3px 8px rgba(182, 98, 63, 0.16);
|
||
}
|
||
|
||
.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active {
|
||
background: var(--platform-icon-active-fill, rgba(238, 208, 183, 0.42));
|
||
box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.12);
|
||
}
|
||
|
||
.genarrative-ui-icon-button--quiet:not(:disabled):not(
|
||
[aria-disabled='true']
|
||
):active {
|
||
background: var(--platform-button-ghost-fill, rgba(255, 253, 250, 0.56));
|
||
}
|
||
|
||
.genarrative-ui-tabs__item:not(:disabled):active {
|
||
background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
|
||
box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
|
||
}
|
||
|
||
.genarrative-ui-switch:not(:disabled):active {
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
}
|
||
|
||
.genarrative-ui-switch:not(:disabled):active .genarrative-ui-switch__track {
|
||
filter: brightness(0.94);
|
||
}
|
||
|
||
.genarrative-ui-button--primary:not(:disabled):hover {
|
||
filter: brightness(1.04);
|
||
box-shadow: 0 12px 24px rgba(182, 98, 63, 0.24);
|
||
}
|
||
|
||
.genarrative-ui-button:focus-visible,
|
||
.genarrative-ui-icon-button:focus-visible,
|
||
.genarrative-ui-tabs__item:focus-visible,
|
||
.genarrative-ui-switch:focus-visible,
|
||
.genarrative-ui-text-field__control:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
|
||
}
|
||
|
||
/* Platform-prefixed adapters share these small chrome primitives with the
|
||
* web host. Keeping the selectors in the package means Tauri consumers do not
|
||
* need to import the website's large application stylesheet. */
|
||
.platform-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.55rem;
|
||
min-height: 2.9rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
border-radius: 1rem;
|
||
padding: 0.7rem 1rem;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
transition:
|
||
transform 180ms ease,
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
color 180ms ease,
|
||
opacity 180ms ease,
|
||
box-shadow 180ms ease;
|
||
}
|
||
|
||
.platform-button:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.platform-button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.platform-button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.platform-button--primary {
|
||
border-color: var(--platform-button-primary-border);
|
||
background: var(--platform-button-primary-fill);
|
||
color: var(--platform-button-primary-text);
|
||
box-shadow: 0 16px 34px rgba(182, 98, 63, 0.18);
|
||
}
|
||
|
||
.platform-button--secondary {
|
||
background: var(--platform-button-secondary-fill);
|
||
color: var(--platform-button-secondary-text);
|
||
}
|
||
|
||
.platform-button--ghost {
|
||
background: var(--platform-button-ghost-fill);
|
||
color: var(--platform-button-ghost-text);
|
||
}
|
||
|
||
.platform-button--danger {
|
||
border-color: var(--platform-button-danger-border);
|
||
background: var(--platform-button-danger-fill);
|
||
color: var(--platform-button-danger-text);
|
||
}
|
||
|
||
.platform-icon-button {
|
||
display: inline-flex;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--platform-icon-border);
|
||
border-radius: 9999px;
|
||
background: var(--platform-icon-fill);
|
||
color: var(--platform-icon-text);
|
||
transition:
|
||
background-color 180ms ease,
|
||
border-color 180ms ease,
|
||
color 180ms ease,
|
||
transform 180ms ease;
|
||
}
|
||
|
||
.platform-icon-button:hover {
|
||
transform: translateY(-1px);
|
||
border-color: var(--platform-nav-active-border);
|
||
background: var(--platform-nav-active-fill);
|
||
color: var(--platform-text-strong);
|
||
}
|
||
|
||
.platform-subpanel {
|
||
border: 1px solid var(--platform-subpanel-border);
|
||
background: var(--platform-subpanel-fill);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.platform-primary-button {
|
||
border: 1px solid var(--platform-button-primary-border);
|
||
background: var(--platform-button-primary-fill);
|
||
color: var(--platform-button-primary-text);
|
||
box-shadow: var(--platform-profile-action-shadow);
|
||
transition:
|
||
transform 180ms ease,
|
||
filter 180ms ease,
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
.platform-primary-button:hover:not(:disabled) {
|
||
transform: translateY(-1px);
|
||
filter: brightness(1.02);
|
||
}
|
||
|
||
.platform-progress-track {
|
||
border: 1px solid var(--platform-track-border);
|
||
background: var(--platform-track-fill);
|
||
}
|
||
|
||
/* Filter toolbar chrome is part of the shared platform surface so the
|
||
* canonical toolbar renders the same in the web app and standalone hosts. */
|
||
.platform-category-filter-row {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 0.65rem;
|
||
overflow: hidden;
|
||
border: 1px solid var(--platform-subpanel-border);
|
||
border-radius: 1.25rem;
|
||
background: var(--platform-subpanel-fill);
|
||
padding: 0.55rem 0.65rem;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.platform-category-filter-button,
|
||
.platform-category-sort-button,
|
||
.platform-category-chip {
|
||
cursor: pointer;
|
||
transition:
|
||
transform 160ms ease,
|
||
border-color 160ms ease,
|
||
background-color 160ms ease,
|
||
color 160ms ease,
|
||
box-shadow 160ms ease;
|
||
}
|
||
|
||
.platform-category-filter-button {
|
||
display: inline-flex;
|
||
position: relative;
|
||
min-height: 2.25rem;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
border: 1px solid var(--platform-cool-border);
|
||
border-radius: 9999px;
|
||
background: var(--platform-cool-bg);
|
||
color: var(--platform-cool-text);
|
||
padding: 0 0.75rem;
|
||
font-size: 0.86rem;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.platform-category-filter-button__count {
|
||
display: inline-flex;
|
||
min-width: 1.18rem;
|
||
height: 1.18rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 9999px;
|
||
background: var(--platform-warm-text);
|
||
color: var(--platform-button-primary-text);
|
||
padding: 0 0.28rem;
|
||
font-size: 0.72rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.platform-category-filter-divider {
|
||
width: 1px;
|
||
height: 1.85rem;
|
||
flex: 0 0 auto;
|
||
background: var(--platform-line-soft);
|
||
}
|
||
|
||
.platform-category-chip-scroll {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
gap: 0.55rem;
|
||
overflow-x: auto;
|
||
padding-right: 0.1rem;
|
||
}
|
||
|
||
/* 横向滚动条按需隐藏：分段页签的 `layout="scroll"` 与标签排都靠它保持外观干净，
|
||
滚动能力本身不隐藏（内容仍可横向滚动，只是不画滚动条）。 */
|
||
.scrollbar-hide {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 分段页签的**横滚**子项不得被压到内容宽度以下。中文标签（例如「角色与对象」需要一个
|
||
`1.5rem 内边距 + 4 个字`的宽度）在窄容器里一旦被压扁，标签虽然 `nowrap`，文字仍会
|
||
画出自己的盒子压到相邻项上——现场表现就是「后几项挤成一团、文字互相重叠」。
|
||
`min-width: max-content` 给每个子项一个「内容宽度」下限：放得下就照原样排，放不下
|
||
就由容器横向滚动兜底（`layout="scroll"` 的容器有 `overflow-x-auto`），任何情况下都不叠字。
|
||
|
||
这里**只作用于 scroll 布局**：grid 布局没有溢出容器，轨道是 `minmax(0, 1fr)`，
|
||
给子项加 `min-width: max-content` 只会让盒子宽过自己那条轨道、直接画到相邻格上，
|
||
正是本规则要防的重叠。grid 侧靠轨道等分 + 宿主的 `truncateLabels` 收口。 */
|
||
.platform-segmented-tabs--scroll > button {
|
||
min-width: max-content;
|
||
}
|
||
|
||
.platform-category-chip {
|
||
display: inline-flex;
|
||
min-height: 2.25rem;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--platform-subpanel-border);
|
||
border-radius: 0.78rem;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
color: var(--platform-text-base);
|
||
padding: 0 0.92rem;
|
||
font-size: 0.88rem;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.platform-category-chip--active {
|
||
border-color: var(--platform-cool-border);
|
||
background: var(--platform-cool-bg);
|
||
color: var(--platform-cool-text);
|
||
}
|
||
|
||
.platform-category-sort-button {
|
||
display: inline-flex;
|
||
width: fit-content;
|
||
min-height: 1.75rem;
|
||
align-items: center;
|
||
gap: 0.2rem;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--platform-text-soft);
|
||
padding: 0 0.2rem;
|
||
font-size: 0.88rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.platform-category-filter-button:hover,
|
||
.platform-category-chip:hover,
|
||
.platform-category-sort-button:hover {
|
||
transform: translateY(-1px);
|
||
filter: brightness(1.03);
|
||
}
|
||
|
||
.platform-category-filter-button:active,
|
||
.platform-category-chip:active,
|
||
.platform-category-sort-button:active {
|
||
transform: translateY(1px);
|
||
filter: brightness(0.96);
|
||
transition-duration: 80ms;
|
||
}
|
||
|
||
.platform-category-filter-button:focus-visible,
|
||
.platform-category-chip:focus-visible,
|
||
.platform-category-sort-button:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
|
||
}
|
||
|
||
.platform-navigable-list-item {
|
||
cursor: pointer;
|
||
border-radius: 0.9rem;
|
||
transition:
|
||
transform 160ms ease,
|
||
background-color 160ms ease,
|
||
box-shadow 160ms ease,
|
||
opacity 160ms ease;
|
||
}
|
||
|
||
.platform-navigable-list-item:hover:not(:disabled) {
|
||
background: var(--platform-button-ghost-fill);
|
||
}
|
||
|
||
.platform-navigable-list-item:active:not(:disabled) {
|
||
transform: translateY(1px);
|
||
box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
|
||
transition-duration: 80ms;
|
||
}
|
||
|
||
.platform-navigable-list-item:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.platform-navigable-list-item:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.platform-category-filter-row {
|
||
border-radius: 1rem;
|
||
gap: 0.5rem;
|
||
padding: 0.46rem 0.5rem;
|
||
}
|
||
|
||
.platform-category-filter-button {
|
||
min-height: 2.05rem;
|
||
padding-inline: 0.62rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.platform-category-chip {
|
||
min-height: 2.05rem;
|
||
border-radius: 0.68rem;
|
||
padding-inline: 0.78rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
|
||
.genarrative-ui-button:disabled,
|
||
.genarrative-ui-icon-button:disabled,
|
||
.genarrative-ui-icon-button[aria-disabled='true'],
|
||
.genarrative-ui-tabs__item:disabled,
|
||
.genarrative-ui-switch:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.52;
|
||
}
|
||
|
||
.genarrative-ui-spinner {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
flex: 0 0 auto;
|
||
border: 2px solid currentColor;
|
||
border-right-color: transparent;
|
||
border-radius: 50%;
|
||
animation: genarrative-ui-spin 700ms linear infinite;
|
||
}
|
||
|
||
@keyframes genarrative-ui-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.genarrative-ui-icon-button {
|
||
display: inline-grid;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border: 1px solid var(--platform-icon-border, rgba(226, 203, 184, 0.72));
|
||
border-radius: 0.75rem;
|
||
background: var(--platform-icon-fill, rgba(255, 253, 250, 0.86));
|
||
color: var(--platform-icon-text, #7b5c49);
|
||
cursor: pointer;
|
||
transition:
|
||
transform 160ms ease,
|
||
background-color 160ms ease,
|
||
color 160ms ease,
|
||
opacity 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--sm {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--md {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--lg {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
font-size: 1.35rem;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--quiet {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--danger {
|
||
border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
|
||
background: var(--platform-button-danger-fill, #fff0eb);
|
||
color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-icon-button--surface-floating {
|
||
border-color: rgba(255, 255, 255, 0.8);
|
||
background: rgba(255, 255, 255, 0.94);
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
box-shadow: 0 0.35rem 1rem rgba(50, 22, 8, 0.12);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.genarrative-ui-icon-button--surface-dark-mini {
|
||
border-color: rgba(255, 255, 255, 0.16);
|
||
background: rgba(0, 0, 0, 0.55);
|
||
color: #fff;
|
||
}
|
||
|
||
.genarrative-ui-icon-button--surface-dark-mini:not(:disabled):hover {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
.genarrative-ui-visually-hidden {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.genarrative-ui-text-field {
|
||
display: grid;
|
||
min-width: 0;
|
||
gap: 0.45rem;
|
||
color: var(--platform-text-base, #6f5848);
|
||
font-size: 0.875rem;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.genarrative-ui-text-field__label {
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-weight: 750;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
|
||
border-radius: 0.75rem;
|
||
background: var(--platform-input-fill, rgba(255, 253, 250, 0.94));
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font: inherit;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
transition:
|
||
border-color 160ms ease,
|
||
background-color 160ms ease,
|
||
box-shadow 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control--sm {
|
||
min-height: 2.125rem;
|
||
padding: 0.5rem 0.75rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control--md {
|
||
min-height: 2.5rem;
|
||
padding: 0.625rem 0.875rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control--lg {
|
||
min-height: 2.875rem;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
textarea.genarrative-ui-text-field__control {
|
||
min-height: 7rem;
|
||
resize: vertical;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control:focus {
|
||
border-color: var(--platform-surface-hover-border, rgba(204, 117, 76, 0.52));
|
||
background: var(--platform-input-fill-focus, #fff);
|
||
}
|
||
|
||
.genarrative-ui-text-field__control--error {
|
||
border-color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-text-field__slot {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--platform-text-soft, #988476);
|
||
}
|
||
|
||
.genarrative-ui-text-field__control-wrap
|
||
> .genarrative-ui-text-field__slot:first-child {
|
||
margin-right: -2rem;
|
||
z-index: 1;
|
||
width: 2rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control-wrap
|
||
> .genarrative-ui-text-field__slot:last-child {
|
||
margin-left: -2rem;
|
||
z-index: 1;
|
||
width: 2rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.genarrative-ui-text-field__control-wrap
|
||
> .genarrative-ui-text-field__slot:first-child
|
||
~ .genarrative-ui-text-field__control {
|
||
padding-left: 2.25rem;
|
||
}
|
||
|
||
.genarrative-ui-text-field__hint,
|
||
.genarrative-ui-text-field__error {
|
||
font-size: 0.75rem;
|
||
font-weight: 550;
|
||
}
|
||
|
||
.genarrative-ui-text-field__hint {
|
||
color: var(--platform-text-soft, #988476);
|
||
}
|
||
|
||
.genarrative-ui-text-field__error {
|
||
color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-subpanel {
|
||
border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
|
||
border-radius: 1rem;
|
||
background: var(--platform-subpanel-fill, rgba(255, 254, 252, 0.94));
|
||
color: var(--platform-text-base, #6f5848);
|
||
}
|
||
|
||
.genarrative-ui-subpanel--soft {
|
||
background: var(--platform-panel-fill-soft, rgba(255, 254, 252, 0.9));
|
||
}
|
||
|
||
.genarrative-ui-subpanel--contrast {
|
||
border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.82));
|
||
background: var(--platform-panel-fill, #fff);
|
||
}
|
||
|
||
.genarrative-ui-subpanel--padding-sm {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.genarrative-ui-subpanel--padding-md {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.genarrative-ui-subpanel--padding-lg {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.genarrative-ui-subpanel--padding-none {
|
||
padding: 0;
|
||
}
|
||
|
||
.genarrative-ui-subpanel__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
.genarrative-ui-subpanel__title {
|
||
min-width: 0;
|
||
margin: 0;
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-size: 0.9375rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.genarrative-ui-subpanel__actions {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.genarrative-ui-modal__backdrop {
|
||
position: fixed;
|
||
z-index: 1000;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
background: var(--platform-overlay-fill, rgba(21, 12, 7, 0.48));
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.genarrative-ui-modal__panel {
|
||
display: flex;
|
||
width: min(100%, 38rem);
|
||
max-height: min(90vh, 50rem);
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
border: 1px solid var(--platform-modal-border, rgba(255, 255, 255, 0.58));
|
||
border-radius: 1.25rem;
|
||
background: var(--platform-modal-fill, #fff);
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
box-shadow: 0 24px 72px rgba(50, 22, 8, 0.24);
|
||
}
|
||
|
||
.genarrative-ui-modal__panel--sm {
|
||
width: min(100%, 26rem);
|
||
}
|
||
|
||
.genarrative-ui-modal__panel--lg {
|
||
width: min(100%, 54rem);
|
||
}
|
||
|
||
.genarrative-ui-modal__header,
|
||
.genarrative-ui-modal__footer {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.genarrative-ui-modal__header {
|
||
border-bottom: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
|
||
}
|
||
|
||
.genarrative-ui-modal__footer {
|
||
align-items: center;
|
||
border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
|
||
}
|
||
|
||
.genarrative-ui-modal__title {
|
||
margin: 0;
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-size: 1.05rem;
|
||
font-weight: 850;
|
||
}
|
||
|
||
.genarrative-ui-modal__description {
|
||
margin: 0.35rem 0 0;
|
||
color: var(--platform-text-soft, #988476);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.genarrative-ui-modal__body {
|
||
min-height: 0;
|
||
padding: 1.25rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
/*
|
||
* 平台弹窗外壳：共享弹窗组件（网页端 `src/components/common/UnifiedModal`、
|
||
* `PlatformMudPointConfirmDialog` 等）产出的宿主类。
|
||
*
|
||
* 这三条原先只写在网页端整站样式表 `src/index.css`。AGC 是独立宿主，只引入本文件与
|
||
* `theme.css`，不引入那张整站样式表，于是弹窗面板拿到 `platform-modal-shell` 却没有任何
|
||
* `background` / `border` / `box-shadow` 声明，面板变透明、背后画布直接透出来（AGC
|
||
* 「选择替换素材」弹窗即此例）。放在这里，凡是引入本文件的宿主就一起命中；写进任一宿主的
|
||
* 业务样式里都会变成下一份平行拷贝。
|
||
*
|
||
* 依赖 `theme.css` 的 token，由祖先的 `.platform-theme--light` / `.platform-theme--dark`
|
||
* 提供：弹窗 portal 到 `document.body` 时主题类必须挂在遮罩上（`UnifiedModal.portalTheme`）。
|
||
*/
|
||
.platform-modal-shell {
|
||
border: 1px solid var(--platform-modal-border);
|
||
background: var(--platform-modal-fill);
|
||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.platform-modal-backdrop {
|
||
background: var(--platform-overlay-fill);
|
||
color: var(--platform-text-strong);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.platform-overlay {
|
||
background: var(--platform-overlay-fill);
|
||
}
|
||
|
||
.genarrative-ui-empty-state {
|
||
display: grid;
|
||
min-height: 10rem;
|
||
place-items: center;
|
||
align-content: center;
|
||
gap: 0.5rem;
|
||
border: 1px dashed var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
color: var(--platform-text-soft, #988476);
|
||
}
|
||
|
||
.genarrative-ui-empty-state__icon {
|
||
display: grid;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
|
||
color: var(--platform-accent, #c7653d);
|
||
}
|
||
|
||
.genarrative-ui-empty-state h2,
|
||
.genarrative-ui-empty-state p {
|
||
margin: 0;
|
||
}
|
||
|
||
.genarrative-ui-empty-state h2 {
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.genarrative-ui-empty-state p {
|
||
max-width: 34rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.genarrative-ui-empty-state__action {
|
||
margin-top: 0.35rem;
|
||
}
|
||
|
||
.genarrative-ui-status {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.625rem;
|
||
border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
|
||
border-radius: 0.75rem;
|
||
padding: 0.75rem 0.875rem;
|
||
color: var(--platform-text-base, #6f5848);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.genarrative-ui-status__icon {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
color: currentColor;
|
||
}
|
||
|
||
.genarrative-ui-status--neutral {
|
||
background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
|
||
}
|
||
|
||
.genarrative-ui-status--info {
|
||
border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
|
||
background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
|
||
color: var(--platform-cool-text, #b76038);
|
||
}
|
||
|
||
.genarrative-ui-status--success {
|
||
border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
|
||
background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
|
||
color: var(--platform-success-text, #2f7b46);
|
||
}
|
||
|
||
.genarrative-ui-status--warning {
|
||
border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
|
||
background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
|
||
color: var(--platform-warm-text, #b6623f);
|
||
}
|
||
|
||
.genarrative-ui-status--error {
|
||
border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
|
||
background: var(--platform-button-danger-fill, #ffede5);
|
||
color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.44));
|
||
border-radius: 999px;
|
||
font-weight: 750;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.genarrative-ui-badge--sm {
|
||
min-height: 1.5rem;
|
||
padding: 0.25rem 0.55rem;
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.genarrative-ui-badge--md {
|
||
min-height: 1.875rem;
|
||
padding: 0.35rem 0.7rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.genarrative-ui-badge--neutral {
|
||
background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
|
||
color: var(--platform-neutral-text, #7b6150);
|
||
}
|
||
|
||
.genarrative-ui-badge--accent {
|
||
border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
|
||
background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
|
||
color: var(--platform-warm-text, #b6623f);
|
||
}
|
||
|
||
.genarrative-ui-badge--success {
|
||
border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
|
||
background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
|
||
color: var(--platform-success-text, #2f7b46);
|
||
}
|
||
|
||
.genarrative-ui-badge--warning {
|
||
border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
|
||
background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
|
||
color: var(--platform-warm-text, #b6623f);
|
||
}
|
||
|
||
.genarrative-ui-badge--danger {
|
||
border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
|
||
background: var(--platform-button-danger-fill, #ffede5);
|
||
color: var(--platform-button-danger-text, #a6402f);
|
||
}
|
||
|
||
.genarrative-ui-badge--info {
|
||
border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
|
||
background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
|
||
color: var(--platform-cool-text, #b76038);
|
||
}
|
||
|
||
.genarrative-ui-progress {
|
||
display: grid;
|
||
gap: 0.45rem;
|
||
}
|
||
|
||
.genarrative-ui-progress__track {
|
||
position: relative;
|
||
height: 0.5rem;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: var(--platform-track-fill, rgba(255, 253, 250, 0.9));
|
||
}
|
||
|
||
.genarrative-ui-progress__fill {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: var(--platform-button-primary-fill, #c7653d);
|
||
transition: width 220ms ease;
|
||
}
|
||
|
||
.genarrative-ui-progress__track--indeterminate .genarrative-ui-progress__fill {
|
||
width: 42%;
|
||
animation: genarrative-ui-progress 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes genarrative-ui-progress {
|
||
from {
|
||
transform: translateX(-110%);
|
||
}
|
||
to {
|
||
transform: translateX(260%);
|
||
}
|
||
}
|
||
|
||
.genarrative-ui-progress__label {
|
||
color: var(--platform-text-soft, #988476);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.genarrative-ui-tabs {
|
||
display: flex;
|
||
min-width: 0;
|
||
gap: 0.25rem;
|
||
overflow-x: auto;
|
||
border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
|
||
border-radius: 0.875rem;
|
||
padding: 0.25rem;
|
||
background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
|
||
}
|
||
|
||
.genarrative-ui-tabs__item {
|
||
min-height: 2.125rem;
|
||
flex: 1 0 auto;
|
||
border: 0;
|
||
border-radius: 0.625rem;
|
||
background: transparent;
|
||
padding: 0 0.875rem;
|
||
color: var(--platform-text-base, #6f5848);
|
||
font-size: 0.8125rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 160ms ease,
|
||
background-color 160ms ease,
|
||
color 160ms ease,
|
||
opacity 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-tabs__item--active {
|
||
background: var(--platform-panel-fill, #fff);
|
||
color: var(--platform-text-strong, #3d1f10);
|
||
box-shadow: 0 2px 8px rgba(112, 57, 30, 0.1);
|
||
}
|
||
|
||
.genarrative-ui-switch {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
color: var(--platform-text-base, #6f5848);
|
||
font-size: 0.875rem;
|
||
font-weight: 650;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition:
|
||
transform 160ms ease,
|
||
opacity 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-switch__track {
|
||
position: relative;
|
||
display: inline-flex;
|
||
width: 2.75rem;
|
||
height: 1.625rem;
|
||
align-items: center;
|
||
border-radius: 999px;
|
||
background: var(--platform-neutral-border, rgba(226, 203, 184, 0.7));
|
||
padding: 0.1875rem;
|
||
transition: background-color 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-switch__thumb {
|
||
display: block;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(50, 22, 8, 0.2);
|
||
transition: transform 160ms ease;
|
||
}
|
||
|
||
.genarrative-ui-switch--checked .genarrative-ui-switch__track {
|
||
background: var(
|
||
--platform-button-primary-solid,
|
||
var(--platform-accent, #c7653d)
|
||
);
|
||
}
|
||
|
||
.genarrative-ui-switch--checked .genarrative-ui-switch__thumb {
|
||
transform: translateX(1.125rem);
|
||
}
|
||
|
||
.genarrative-ui-divider {
|
||
height: 1px;
|
||
border: 0;
|
||
background: var(--platform-line-soft, rgba(226, 203, 184, 0.72));
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.genarrative-ui-button,
|
||
.genarrative-ui-icon-button,
|
||
.genarrative-ui-tabs__item,
|
||
.genarrative-ui-switch,
|
||
.genarrative-ui-progress__fill,
|
||
.genarrative-ui-spinner,
|
||
.genarrative-ui-skeleton {
|
||
transition: none;
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.genarrative-ui-modal__backdrop {
|
||
align-items: flex-end;
|
||
padding: 0;
|
||
}
|
||
|
||
.genarrative-ui-modal__panel,
|
||
.genarrative-ui-modal__panel--sm,
|
||
.genarrative-ui-modal__panel--lg {
|
||
width: 100%;
|
||
max-height: 92vh;
|
||
border-radius: 1.25rem 1.25rem 0 0;
|
||
}
|
||
}
|