Align application surfaces with Launcher and SEO
This commit is contained in:
DCCONSTRUCTIONS
+37
-33
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user