Align application surfaces with Launcher and SEO
This commit is contained in:
DCCONSTRUCTIONS
parent
0e030136bb
commit
41e491191c
|
|
@ -56,16 +56,16 @@ type MaterialDraft = {
|
|||
|
||||
const materialDefaults: Record<NodedcTheme, MaterialDraft> = {
|
||||
dark: {
|
||||
panelHex: "#16161a",
|
||||
panelOpacity: 68,
|
||||
fieldHex: "#101016",
|
||||
fieldOpacity: 78,
|
||||
panelHex: "#151517",
|
||||
panelOpacity: 100,
|
||||
fieldHex: "#2a2a2c",
|
||||
fieldOpacity: 100,
|
||||
},
|
||||
light: {
|
||||
panelHex: "#ffffff",
|
||||
panelOpacity: 62,
|
||||
panelOpacity: 100,
|
||||
fieldHex: "#ffffff",
|
||||
fieldOpacity: 72,
|
||||
fieldOpacity: 100,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ const sectionDefinitions: Record<CatalogSection, { eyebrow: string; title: strin
|
|||
foundation: {
|
||||
eyebrow: "01 / FOUNDATION",
|
||||
title: "Основа",
|
||||
description: "Тема, акцент, стекло и неизменяемая геометрия приложения.",
|
||||
description: "Тема, нейтральные поверхности и неизменяемая геометрия приложения.",
|
||||
icon: "panel",
|
||||
},
|
||||
controls: {
|
||||
|
|
@ -234,7 +234,7 @@ export function CatalogApp() {
|
|||
dark: { ...materialDefaults.dark },
|
||||
light: { ...materialDefaults.light },
|
||||
}));
|
||||
const [savedEnvironmentControl, setSavedEnvironmentControl] = useState<string | null>(null);
|
||||
const [environmentLayoutSaved, setEnvironmentLayoutSaved] = useState(false);
|
||||
const workspace = useApplicationWorkspace<CatalogSection>();
|
||||
const { navigationOpen: guidelineOpen, activeView: activeSection, contentExpanded: panelExpanded } = workspace;
|
||||
const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
|
||||
|
|
@ -344,7 +344,7 @@ export function CatalogApp() {
|
|||
}));
|
||||
};
|
||||
|
||||
const saveEnvironmentLayout = (control: string) => {
|
||||
const saveEnvironmentLayout = () => {
|
||||
const draft = {
|
||||
theme,
|
||||
accentHex,
|
||||
|
|
@ -367,15 +367,9 @@ export function CatalogApp() {
|
|||
} catch {
|
||||
// The preview remains useful in restricted browser contexts even without local persistence.
|
||||
}
|
||||
setSavedEnvironmentControl(control);
|
||||
setEnvironmentLayoutSaved(true);
|
||||
};
|
||||
|
||||
const savedAction = (control: string) => (
|
||||
<IconButton label={`Сохранить «${control}» в локальный layout`} onClick={() => saveEnvironmentLayout(control)}>
|
||||
<Icon name="save" />
|
||||
</IconButton>
|
||||
);
|
||||
|
||||
const environmentSections = [
|
||||
{
|
||||
id: "application-material",
|
||||
|
|
@ -384,24 +378,21 @@ export function CatalogApp() {
|
|||
tone: "accent" as const,
|
||||
content: (
|
||||
<>
|
||||
<ControlRow label="Акцент" action={savedAction("Акцент")}>
|
||||
<ControlRow label="Акцент">
|
||||
<ColorField label="Акцент приложения" value={accentHex} onChange={setAccentHex} />
|
||||
</ControlRow>
|
||||
<ControlRow label="Плашки" action={savedAction("Плашки")}>
|
||||
<ControlRow label="Плашки">
|
||||
<ColorField label="Цвет плашек" value={material.panelHex} onChange={(panelHex) => updateMaterial({ panelHex })} />
|
||||
</ControlRow>
|
||||
<ControlRow label="Прозрачность плашки" action={savedAction("Прозрачность плашки")}>
|
||||
<ControlRow label="Прозрачность плашки">
|
||||
<RangeControl label="Прозрачность плашки" showLabel={false} value={material.panelOpacity} min={18} max={96} formatValue={(value) => `${value}%`} onChange={(panelOpacity) => updateMaterial({ panelOpacity })} />
|
||||
</ControlRow>
|
||||
<ControlRow label="Поля ввода" action={savedAction("Поля ввода")}>
|
||||
<ControlRow label="Поля ввода">
|
||||
<ColorField label="Цвет полей ввода" value={material.fieldHex} onChange={(fieldHex) => updateMaterial({ fieldHex })} />
|
||||
</ControlRow>
|
||||
<ControlRow label="Прозрачность полей" action={savedAction("Прозрачность полей")}>
|
||||
<ControlRow label="Прозрачность полей">
|
||||
<RangeControl label="Прозрачность полей" showLabel={false} value={material.fieldOpacity} min={18} max={100} formatValue={(value) => `${value}%`} onChange={(fieldOpacity) => updateMaterial({ fieldOpacity })} />
|
||||
</ControlRow>
|
||||
<p className="catalog-environment-draft" aria-live="polite">
|
||||
{savedEnvironmentControl ? `«${savedEnvironmentControl}» сохранён в локальный layout. Сервер и MCP не используются.` : "Дискета сохраняет текущий параметр в локальный layout браузера."}
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
@ -411,15 +402,9 @@ export function CatalogApp() {
|
|||
tone: "accent" as const,
|
||||
content: (
|
||||
<>
|
||||
<ControlRow label="Цвет" action={savedAction("Цвет подсветки")}><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
|
||||
<div className="catalog-environment-with-action">
|
||||
<ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
|
||||
<RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
|
||||
{savedAction("Яркость")}
|
||||
</div>
|
||||
<div className="catalog-environment-with-action">
|
||||
<RangeControl label="Дистанция свечения" value={glowDistance} min={0} max={200} formatValue={(value) => `${value}%`} onChange={setGlowDistance} />
|
||||
{savedAction("Дистанция свечения")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
@ -429,7 +414,7 @@ export function CatalogApp() {
|
|||
tone: "accent" as const,
|
||||
content: (
|
||||
<>
|
||||
<ControlRow label="Связи по умолчанию" action={savedAction("Связи по умолчанию")}>
|
||||
<ControlRow label="Связи по умолчанию">
|
||||
<Select
|
||||
variant="split"
|
||||
label="Тип связи"
|
||||
|
|
@ -442,11 +427,8 @@ export function CatalogApp() {
|
|||
onChange={setConnectionType}
|
||||
/>
|
||||
</ControlRow>
|
||||
<div className="catalog-environment-with-action">
|
||||
<Checker checked={usePortColors} label="Использовать цвет портов" onChange={setUsePortColors} />
|
||||
{savedAction("Использовать цвет портов")}
|
||||
</div>
|
||||
<ControlRow label="Цвет связей по умолчанию" action={savedAction("Цвет связей")}><ColorField value={connectionColor} onChange={setConnectionColor} /></ControlRow>
|
||||
<ControlRow label="Цвет связей по умолчанию"><ColorField value={connectionColor} onChange={setConnectionColor} /></ControlRow>
|
||||
<ControlRow label="Применить ко всем"><Button variant="primary" shape="pill" width="full">Применить</Button></ControlRow>
|
||||
</>
|
||||
),
|
||||
|
|
@ -457,16 +439,10 @@ export function CatalogApp() {
|
|||
tone: "accent" as const,
|
||||
content: (
|
||||
<>
|
||||
<ControlRow label="Заливка" action={savedAction("Заливка портов")}><ColorField value={fillColor} onChange={setFillColor} /></ControlRow>
|
||||
<div className="catalog-environment-with-action">
|
||||
<ControlRow label="Заливка"><ColorField value={fillColor} onChange={setFillColor} /></ControlRow>
|
||||
<RangeControl label="Прозрачность заливки" value={fillOpacity} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setFillOpacity} />
|
||||
{savedAction("Прозрачность заливки")}
|
||||
</div>
|
||||
<ControlRow label="Обводка" action={savedAction("Обводка портов")}><ColorField value={strokeColor} onChange={setStrokeColor} /></ControlRow>
|
||||
<div className="catalog-environment-with-action">
|
||||
<ControlRow label="Обводка"><ColorField value={strokeColor} onChange={setStrokeColor} /></ControlRow>
|
||||
<RangeControl label="Прозрачность обводки" value={strokeOpacity} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setStrokeOpacity} />
|
||||
{savedAction("Прозрачность обводки")}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
@ -477,18 +453,18 @@ export function CatalogApp() {
|
|||
case "foundation":
|
||||
return (
|
||||
<div className="catalog-grid catalog-grid--foundation">
|
||||
<Preview title="Тема приложения" note={theme === "dark" ? "dark glass" : "light glass"}>
|
||||
<Preview title="Тема приложения" note={theme === "dark" ? "Launcher / dark" : "SEO / light"}>
|
||||
<div className="catalog-theme-row">
|
||||
<Button variant={theme === "dark" ? "primary" : "secondary"} shape="pill" onClick={() => setTheme("dark")}>Dark</Button>
|
||||
<Button variant={theme === "light" ? "primary" : "secondary"} shape="pill" onClick={() => setTheme("light")}>Light</Button>
|
||||
</div>
|
||||
<p className="catalog-preview__explanation">Тема задаёт нейтральный каркас. Акцент, плашки, поля и их прозрачность настраиваются живым Environment control — там же сохраняется локальный draft.</p>
|
||||
<p className="catalog-preview__explanation">Две базовые темы фиксированы по эталонам: чёрная — Launcher/Hub, белая — SEO. Стекло используется только в модальных окнах.</p>
|
||||
</Preview>
|
||||
<Preview title="Иерархия стекла" note="default / strong / soft">
|
||||
<Preview title="Поверхности приложения" note="Launcher / SEO">
|
||||
<div className="catalog-surface-stack">
|
||||
<GlassSurface padding="md">Default surface</GlassSurface>
|
||||
<GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
|
||||
<GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
|
||||
<GlassSurface padding="md">Основная поверхность</GlassSurface>
|
||||
<GlassSurface tone="strong" padding="md">Контентное окно</GlassSurface>
|
||||
<GlassSurface tone="soft" padding="md">Вложенная область</GlassSurface>
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Каркас Launcher" note="fixed header / stage / panels" className="catalog-preview--wide">
|
||||
|
|
@ -555,10 +531,14 @@ export function CatalogApp() {
|
|||
<Preview title="Environment controls" note="Engine / select + accordion" className="catalog-preview--wide">
|
||||
<div className="catalog-environment-demo">
|
||||
<GlassSurface tone="strong" radius="panel" className="catalog-environment-card">
|
||||
<div className="catalog-environment-title"><strong>Настройки окружения</strong><span>ENGINE / новый канон</span></div>
|
||||
<div className="catalog-environment-title">
|
||||
<div><strong>Настройки окружения</strong><span>ENGINE / новый канон</span></div>
|
||||
<IconButton label="Сохранить текущий layout" onClick={saveEnvironmentLayout}><Icon name="save" /></IconButton>
|
||||
</div>
|
||||
{environmentLayoutSaved ? <p className="catalog-environment-draft" aria-live="polite">Layout сохранён локально. Сервер и MCP не используются.</p> : null}
|
||||
<Inspector sections={environmentSections} defaultOpen={["application-material"]} />
|
||||
</GlassSurface>
|
||||
<p className="catalog-preview__explanation">Environment controls — единый референс Engine: palette, range, checker, split-select и раскрывающиеся sections. Верхняя секция меняет настоящий material приложения; отдельной вкладки Inspector больше нет.</p>
|
||||
<p className="catalog-preview__explanation">Environment controls — единый референс Engine: palette, range, checker, split-select и раскрывающиеся sections. Верхняя секция меняет цвет плашек и полей приложения; сохраняется весь текущий layout одной кнопкой сверху.</p>
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Статусы операций" note="не цвет приложения" className="catalog-preview--wide">
|
||||
|
|
|
|||
|
|
@ -281,7 +281,7 @@ textarea {
|
|||
grid-template-rows: 3.2rem 1fr;
|
||||
gap: 0.6rem;
|
||||
border-radius: 1.1rem;
|
||||
background: color-mix(in srgb, var(--nodedc-canvas-soft) 76%, transparent);
|
||||
background: var(--nodedc-canvas-soft);
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
|
|
@ -300,11 +300,11 @@ textarea {
|
|||
}
|
||||
|
||||
.catalog-shell-diagram__nav {
|
||||
background: color-mix(in srgb, var(--nodedc-glass-control-hover) 90%, transparent) !important;
|
||||
background: var(--nodedc-glass-control-hover) !important;
|
||||
}
|
||||
|
||||
.catalog-shell-diagram__content {
|
||||
background: color-mix(in srgb, var(--nodedc-glass-control-hover) 70%, transparent) !important;
|
||||
background: var(--nodedc-glass-control-bg) !important;
|
||||
}
|
||||
|
||||
.catalog-environment-demo {
|
||||
|
|
@ -314,9 +314,7 @@ textarea {
|
|||
align-items: start;
|
||||
gap: clamp(1rem, 4vw, 4rem);
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
background:
|
||||
radial-gradient(circle at 18% 24%, rgb(var(--nodedc-accent-rgb) / 0.13), transparent 22rem),
|
||||
color-mix(in srgb, var(--nodedc-canvas-soft) 86%, transparent);
|
||||
background: var(--nodedc-canvas-soft);
|
||||
padding: clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
|
|
@ -326,9 +324,16 @@ textarea {
|
|||
}
|
||||
|
||||
.catalog-environment-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0 0.875rem 0.875rem;
|
||||
}
|
||||
|
||||
.catalog-environment-title > div {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
padding: 0 0.875rem 0.875rem;
|
||||
}
|
||||
|
||||
.catalog-environment-title span {
|
||||
|
|
@ -337,20 +342,12 @@ textarea {
|
|||
}
|
||||
|
||||
.catalog-environment-draft {
|
||||
margin: 0;
|
||||
margin: -0.25rem 0.875rem 0.75rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.catalog-environment-with-action {
|
||||
display: grid;
|
||||
width: min(var(--nodedc-inspector-inner-width), 100%);
|
||||
grid-template-columns: minmax(0, 1fr) var(--nodedc-control-height);
|
||||
align-items: center;
|
||||
gap: var(--nodedc-space-2);
|
||||
}
|
||||
|
||||
.catalog-icon-catalog {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
## GlassSurface
|
||||
|
||||
Базовая поверхность для карточки, панели и большого окна. Варианты меняют плотность материала, но не создают отдельный дизайн.
|
||||
Базовая непрозрачная поверхность для карточки, панели и большого окна. Варианты меняют плотность нейтральной поверхности, но не создают отдельный дизайн. Реальный glass-материал с blur и rim используется только у modal `Window`.
|
||||
|
||||
- `default` — обычная карточка/панель;
|
||||
- `strong` — dropdown, modal и поверхность над сложным фоном;
|
||||
- `soft` — вложенная или вторичная область.
|
||||
|
||||
Material rim допустим только как часть стекла. Жёсткая цветная рамка, случайный browser outline или debug border не являются rim.
|
||||
Material rim допустим только как часть modal-стекла. Жёсткая цветная рамка, случайный browser outline или debug border не являются rim.
|
||||
|
||||
## Button и IconButton
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ NODE.DC-приложения отличаются цветовой схемой,
|
|||
- canvas/background;
|
||||
- основной и вторичный текст;
|
||||
- accent и автоматически вычисляемый on-accent;
|
||||
- плотность/цвет glass surfaces;
|
||||
- цвет непрозрачных application surfaces;
|
||||
- field/control surfaces;
|
||||
- overlay;
|
||||
- shadows и material rim;
|
||||
- тени controls и modal material;
|
||||
- semantic success/warning/danger tones при необходимости.
|
||||
|
||||
## Что тема не меняет
|
||||
|
|
@ -31,14 +31,14 @@ NODE.DC-приложения отличаются цветовой схемой,
|
|||
В baseline включены `dark` и `light`. Это не два отдельных продукта, а примеры одного контракта:
|
||||
|
||||
- dark соответствует текущей основной семье Launcher/Hub/CMS;
|
||||
- light воспроизводит SEO-поверхности: `#ececec` canvas, полупрозрачные белые glass panels, тёмный текст и тонкие нейтральные outlines;
|
||||
- light воспроизводит SEO-поверхности: `#ececec` canvas, белые панели и поля, тёмный текст, чёрные primary actions и мягкую тень у белых secondary controls;
|
||||
- конкретный продукт может поверх preset задать свой accent и surface variables.
|
||||
|
||||
## Accent
|
||||
|
||||
Accent задаётся RGB tuple. On-accent вычисляется по luminance и не должен вручную прописываться белым или чёрным в отдельном компоненте.
|
||||
|
||||
Default accent текущего NODE.DC shell — `#ff2f92`. `ColorField` открывает единый portal-picker с saturation/value plane, hue slider, HEX и быстрыми цветами — системный `input[type=color]` не является runtime UI. Изменение accent сразу меняет Environment Settings, active actions, range fill, media file action и theme-aware window states без создания новой темы или fork компонентов.
|
||||
Default accent текущего NODE.DC shell — `#ff2f92`. `ColorField` открывает единый portal-picker с saturation/value plane, hue slider, HEX и быстрыми цветами — системный `input[type=color]` не является runtime UI. Изменение accent сразу меняет Environment Settings, active actions, range fill, media file action и theme-aware window states без создания новой темы или fork компонентов. Blur, gloss и material rim не наследуются application panels: это материал только для modal `Window`.
|
||||
|
||||
Semantic status не обязан совпадать с accent. Например, ошибка остаётся danger, даже если приложение использует красный брендовый accent.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,27 +15,27 @@
|
|||
--nodedc-text-disabled: rgba(247, 248, 244, 0.34);
|
||||
|
||||
/* Runtime material controls override only these five values. */
|
||||
--nodedc-panel-material-rgb: 22 22 26;
|
||||
--nodedc-panel-material-opacity: 0.68;
|
||||
--nodedc-panel-material-strong-opacity: 0.8;
|
||||
--nodedc-panel-material-soft-opacity: 0.48;
|
||||
--nodedc-field-material-rgb: 16 16 22;
|
||||
--nodedc-field-material-opacity: 0.78;
|
||||
--nodedc-panel-material-rgb: 21 21 23;
|
||||
--nodedc-panel-material-opacity: 1;
|
||||
--nodedc-panel-material-strong-opacity: 1;
|
||||
--nodedc-panel-material-soft-opacity: 1;
|
||||
--nodedc-field-material-rgb: 42 42 44;
|
||||
--nodedc-field-material-opacity: 1;
|
||||
--nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity));
|
||||
--nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity));
|
||||
--nodedc-glass-panel-bg-soft: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-soft-opacity));
|
||||
--nodedc-glass-panel-bg-soft: var(--nodedc-canvas-soft);
|
||||
--nodedc-header-pill-bg: rgba(64, 64, 64, 0.48);
|
||||
--nodedc-glass-panel-surface: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.075), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)), var(--nodedc-glass-panel-bg);
|
||||
--nodedc-glass-panel-surface-strong: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.09), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)), var(--nodedc-glass-panel-bg-strong);
|
||||
--nodedc-glass-panel-surface: var(--nodedc-glass-panel-bg);
|
||||
--nodedc-glass-panel-surface-strong: var(--nodedc-glass-panel-bg-strong);
|
||||
--nodedc-glass-control-bg: rgba(110, 110, 110, 0.07);
|
||||
--nodedc-glass-control-hover: rgba(129, 129, 129, 0.13);
|
||||
--nodedc-glass-control-active: rgba(255, 255, 255, 0.92);
|
||||
--nodedc-glass-control-active-text: rgba(8, 8, 10, 0.96);
|
||||
--nodedc-field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent), rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
||||
--nodedc-field-bg: rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
||||
--nodedc-overlay-bg: rgba(0, 0, 0, 0.46);
|
||||
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035));
|
||||
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
||||
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 28px 90px rgba(0, 0, 0, 0.38);
|
||||
--nodedc-glass-rim: transparent;
|
||||
--nodedc-glass-control-shadow: none;
|
||||
--nodedc-glass-panel-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
|
||||
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.2);
|
||||
--nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.14);
|
||||
--nodedc-glass-outline: rgba(255, 255, 255, 0.11);
|
||||
|
|
@ -55,6 +55,8 @@
|
|||
--nodedc-primary-action-hover: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white);
|
||||
--nodedc-primary-action-color: rgb(var(--nodedc-on-accent-rgb));
|
||||
--nodedc-primary-action-shadow: 0 12px 28px rgb(var(--nodedc-accent-rgb) / 0.2);
|
||||
--nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)), rgba(7, 7, 10, 0.54);
|
||||
--nodedc-modal-shadow: 0 34px 120px rgba(0, 0, 0, 0.64), 0 10px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
|
||||
}
|
||||
|
||||
[data-nodedc-theme="light"] {
|
||||
|
|
@ -72,40 +74,40 @@
|
|||
--nodedc-text-muted: rgba(18, 20, 22, 0.48);
|
||||
--nodedc-text-disabled: rgba(18, 20, 22, 0.32);
|
||||
|
||||
/* The light values follow the SEO launcher material: white glass, soft depth. */
|
||||
/* SEO light theme: solid application surfaces with soft, white controls. */
|
||||
--nodedc-panel-material-rgb: 255 255 255;
|
||||
--nodedc-panel-material-opacity: 0.62;
|
||||
--nodedc-panel-material-strong-opacity: 0.8;
|
||||
--nodedc-panel-material-soft-opacity: 0.46;
|
||||
--nodedc-panel-material-opacity: 1;
|
||||
--nodedc-panel-material-strong-opacity: 1;
|
||||
--nodedc-panel-material-soft-opacity: 1;
|
||||
--nodedc-field-material-rgb: 255 255 255;
|
||||
--nodedc-field-material-opacity: 0.72;
|
||||
--nodedc-field-material-opacity: 1;
|
||||
--nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity));
|
||||
--nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity));
|
||||
--nodedc-glass-panel-bg-soft: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-soft-opacity));
|
||||
--nodedc-glass-panel-bg-soft: var(--nodedc-canvas-soft);
|
||||
--nodedc-header-pill-bg: rgba(255, 255, 255, 0.56);
|
||||
--nodedc-glass-panel-surface: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.26)), var(--nodedc-glass-panel-bg);
|
||||
--nodedc-glass-panel-surface-strong: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.36)), var(--nodedc-glass-panel-bg-strong);
|
||||
--nodedc-glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.46)), rgba(255, 255, 255, 0.7);
|
||||
--nodedc-glass-control-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58)), rgba(255, 255, 255, 0.84);
|
||||
--nodedc-glass-panel-surface: var(--nodedc-glass-panel-bg);
|
||||
--nodedc-glass-panel-surface-strong: var(--nodedc-glass-panel-bg-strong);
|
||||
--nodedc-glass-control-bg: #ffffff;
|
||||
--nodedc-glass-control-hover: #f8f8f8;
|
||||
--nodedc-glass-control-active: rgba(32, 32, 34, 0.96);
|
||||
--nodedc-glass-control-active-text: rgba(247, 248, 244, 0.96);
|
||||
--nodedc-field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.3)), rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
||||
--nodedc-field-bg: rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
||||
--nodedc-overlay-bg: rgba(24, 32, 29, 0.22);
|
||||
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(24, 32, 29, 0.1));
|
||||
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 22px rgba(24, 32, 29, 0.08);
|
||||
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16);
|
||||
--nodedc-glass-rim: transparent;
|
||||
--nodedc-glass-control-shadow: 0 10px 22px rgba(24, 32, 29, 0.08);
|
||||
--nodedc-glass-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(24, 32, 29, 0.2), 0 6px 18px rgba(24, 32, 29, 0.1);
|
||||
--nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.1);
|
||||
--nodedc-glass-outline: rgba(24, 32, 29, 0.12);
|
||||
--nodedc-app-panel-surface: var(--nodedc-glass-panel-surface-strong);
|
||||
--nodedc-app-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16);
|
||||
--nodedc-app-panel-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 82px rgba(24, 32, 29, 0.2);
|
||||
--nodedc-app-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
--nodedc-app-panel-shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.14);
|
||||
--nodedc-panel-action-border: rgba(24, 32, 29, 0.12);
|
||||
--nodedc-panel-action-border-hover: rgba(24, 32, 29, 0.22);
|
||||
--nodedc-panel-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16)), rgba(255, 255, 255, 0.28);
|
||||
--nodedc-panel-item-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.38);
|
||||
--nodedc-panel-item-active-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28)), rgba(255, 255, 255, 0.46);
|
||||
--nodedc-panel-icon-bg: rgba(255, 255, 255, 0.38);
|
||||
--nodedc-panel-item-bg: #f4f4f4;
|
||||
--nodedc-panel-item-hover-bg: #eeeeee;
|
||||
--nodedc-panel-item-active-bg: #e8e8e8;
|
||||
--nodedc-panel-icon-bg: #ffffff;
|
||||
--nodedc-panel-active-icon-bg: rgba(32, 32, 34, 0.96);
|
||||
--nodedc-panel-active-icon-color: rgba(247, 248, 244, 0.96);
|
||||
--nodedc-scrollbar-thumb: rgba(24, 32, 29, 0.22);
|
||||
|
|
@ -113,4 +115,6 @@
|
|||
--nodedc-primary-action-hover: rgba(8, 8, 10, 0.98);
|
||||
--nodedc-primary-action-color: rgba(247, 248, 244, 0.96);
|
||||
--nodedc-primary-action-shadow: none;
|
||||
--nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.72);
|
||||
--nodedc-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,8 +54,6 @@
|
|||
background: var(--nodedc-glass-panel-surface);
|
||||
color: var(--nodedc-text-primary);
|
||||
box-shadow: var(--nodedc-glass-panel-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-panel)) saturate(1.28) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-panel)) saturate(1.28) brightness(1.05);
|
||||
}
|
||||
|
||||
.nodedc-glass[data-tone="strong"] {
|
||||
|
|
@ -652,6 +650,7 @@ textarea.nodedc-field__control {
|
|||
.nodedc-range {
|
||||
--nodedc-range-progress: 50%;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: var(--nodedc-control-height);
|
||||
overflow: hidden;
|
||||
|
|
@ -918,11 +917,9 @@ textarea.nodedc-field__control {
|
|||
align-items: center;
|
||||
gap: 0.18rem;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: var(--nodedc-glass-panel-bg-soft);
|
||||
background: var(--nodedc-header-pill-bg);
|
||||
padding: 0.32rem;
|
||||
box-shadow: var(--nodedc-glass-control-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-control)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-control)) saturate(1.2);
|
||||
}
|
||||
|
||||
.nodedc-segmented__item {
|
||||
|
|
@ -1246,8 +1243,6 @@ textarea.nodedc-field__control {
|
|||
color: var(--nodedc-text-primary);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--nodedc-app-panel-shadow);
|
||||
backdrop-filter: blur(28px);
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
animation: nodedc-application-panel-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
|
|
@ -1353,8 +1348,6 @@ textarea.nodedc-field__control {
|
|||
color: var(--nodedc-text-primary);
|
||||
padding: 1.1rem;
|
||||
box-shadow: var(--nodedc-app-panel-shadow-strong);
|
||||
backdrop-filter: blur(28px);
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
animation: nodedc-admin-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
|
|
@ -1634,8 +1627,6 @@ textarea.nodedc-field__control {
|
|||
color: var(--nodedc-text-primary);
|
||||
padding: 0.45rem;
|
||||
box-shadow: var(--nodedc-glass-dropdown-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2) brightness(1.02);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2) brightness(1.02);
|
||||
animation: nodedc-popover-in var(--nodedc-duration-fast) var(--nodedc-ease-standard);
|
||||
}
|
||||
|
||||
|
|
@ -1885,9 +1876,9 @@ textarea.nodedc-field__control {
|
|||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: var(--nodedc-radius-modal);
|
||||
background: var(--nodedc-glass-panel-surface-strong);
|
||||
background: var(--nodedc-modal-surface);
|
||||
color: var(--nodedc-text-primary);
|
||||
box-shadow: var(--nodedc-glass-panel-shadow);
|
||||
box-shadow: var(--nodedc-modal-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(1.38) brightness(1.06);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(1.38) brightness(1.06);
|
||||
animation: nodedc-window-in var(--nodedc-duration-normal) var(--nodedc-ease-standard);
|
||||
|
|
@ -1905,6 +1896,10 @@ textarea.nodedc-field__control {
|
|||
width: min(var(--nodedc-inspector-width), calc(100vw - 3rem));
|
||||
max-height: calc(100vh - 7.25rem);
|
||||
border-radius: var(--nodedc-radius-panel);
|
||||
background: var(--nodedc-app-panel-surface);
|
||||
box-shadow: var(--nodedc-app-panel-shadow);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -2085,8 +2080,6 @@ textarea.nodedc-field__control {
|
|||
background: var(--nodedc-glass-panel-surface-strong);
|
||||
padding: 0.6rem;
|
||||
box-shadow: var(--nodedc-glass-dropdown-shadow);
|
||||
backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--nodedc-blur-dropdown)) saturate(1.2);
|
||||
}
|
||||
|
||||
.nodedc-share-access__summary {
|
||||
|
|
@ -2347,11 +2340,6 @@ textarea.nodedc-field__control {
|
|||
gap: var(--nodedc-inspector-control-gap);
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-action="true"] {
|
||||
grid-template-columns: minmax(6.4rem, 1fr) minmax(0, 1fr) var(--nodedc-control-height);
|
||||
gap: var(--nodedc-space-2);
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-layout="stack"] {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
|
|
@ -2369,12 +2357,6 @@ textarea.nodedc-field__control {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.nodedc-control-row__action {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.nodedc-empty-state {
|
||||
display: grid;
|
||||
min-height: 12rem;
|
||||
|
|
@ -2517,23 +2499,6 @@ textarea.nodedc-field__control {
|
|||
gap: var(--nodedc-space-2);
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-action="true"] {
|
||||
grid-template-columns: minmax(0, 1fr) var(--nodedc-control-height);
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-action="true"] .nodedc-control-row__label {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-action="true"] .nodedc-control-row__control {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.nodedc-control-row[data-action="true"] .nodedc-control-row__action {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.nodedc-media-control {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
|
|
|
|||
|
|
@ -88,22 +88,18 @@ export function Inspector({
|
|||
export interface ControlRowProps {
|
||||
label: ReactNode;
|
||||
children: ReactNode;
|
||||
/** Optional trailing action, for example a per-control save-to-layout affordance. */
|
||||
action?: ReactNode;
|
||||
layout?: "inline" | "stack";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ControlRow({ label, children, action, layout = "inline", className }: ControlRowProps) {
|
||||
export function ControlRow({ label, children, layout = "inline", className }: ControlRowProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn("nodedc-control-row", className)}
|
||||
data-layout={layout === "inline" ? undefined : layout}
|
||||
data-action={action ? "true" : undefined}
|
||||
>
|
||||
<div className="nodedc-control-row__label">{label}</div>
|
||||
<div className="nodedc-control-row__control">{children}</div>
|
||||
{action ? <div className="nodedc-control-row__action">{action}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue