suzmii
4f3516a5d9
- packages/shared/src/components/PlatformSegmentedTabs.tsx：容器补 `platform-segmented-tabs` 稳定钩子类，供共享样式表精确命中子项（不依赖 Tailwind 任意值扫描） - packages/shared/src/components/styles.css：新增 `.platform-segmented-tabs > button` 的 `min-width: max-content`，给每个子项一个「内容宽度」下限；放不下时由容器横向滚动兜底 - apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx： 「资源分类与标签」的 6 类分类条由 `columns="threeToSix"` 改为 `layout="scroll"` + `frame="bare"` + `surface="transparent"`，与 `@` 面板和资源画布的分类条同一条既有形态 - packages/shared/src/components/PlatformResourceFilterBar.test.tsx：新增两条声明级断言， 钉住「子项不换行 + 容器横向可滚 + 子项有不低于内容宽度的下限」
1281 lines
31 KiB
CSS
1281 lines
31 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` 给每个子项一个「内容宽度」下限：放得下就照原样排，放不下
|
|
就由容器横向滚动兜底，任何情况下都不叠字。grid 与 scroll 两条 layout 都需要它：
|
|
grid 的轨道按容器等分，scroll 的 flex 子项默认可收缩，两者都会压到内容宽度以下。 */
|
|
.platform-segmented-tabs > 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|