feat(n7web): enhance control workflows and status feedback
This commit is contained in:
Miayui
@@ -85,6 +85,12 @@ body.console-v2 {
|
||||
--glass-highlight: oklch(1 0 0 / 0.14);
|
||||
--glass-shadow: 0 24px 70px oklch(0.06 0.04 285 / 0.42);
|
||||
--glass-panel-shadow: 0 12px 32px oklch(0.05 0.035 285 / 0.24);
|
||||
--glass-card-radius: 14px;
|
||||
--glass-card-lift: -3px;
|
||||
--glass-card-rest-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 22px color-mix(in oklch, var(--foreground) 10%, transparent);
|
||||
--glass-card-float-shadow: inset 0 1px 0 var(--glass-highlight), 0 16px 34px color-mix(in oklch, var(--foreground) 18%, transparent);
|
||||
--glass-dialog-scrim: oklch(0.035 0.025 286 / 0.82);
|
||||
--glass-dialog-scrim-filter: blur(18px) saturate(0.78) brightness(0.58);
|
||||
min-width: 1180px;
|
||||
min-height: 620px;
|
||||
overflow: hidden;
|
||||
@@ -126,6 +132,8 @@ html[data-glass-theme="light"] body.console-v2 {
|
||||
--sidebar-accent-foreground: var(--foreground);
|
||||
--sidebar-border: var(--border);
|
||||
--sidebar-ring: var(--ring);
|
||||
--glass-dialog-scrim: oklch(0.26 0.035 252 / 0.34);
|
||||
--glass-dialog-scrim-filter: blur(14px) saturate(0.9) brightness(0.92);
|
||||
--heading-foreground: oklch(0.235 0.068 255);
|
||||
--body-foreground: var(--card-foreground);
|
||||
--subtle-foreground: var(--muted-foreground);
|
||||
@@ -438,14 +446,14 @@ body.console-v2.v2-passive-display.v2-interactive-sync .joint-twin-shell .twin-s
|
||||
linear-gradient(160deg, oklch(0.18 0.05 285 / 0.2), oklch(0.09 0.03 286 / 0.32)) !important;
|
||||
}
|
||||
|
||||
body.console-v2 .joint-twin-shell :is(.twin-seat-switch, .twin-seat-switch button, .twin-reset, .twin-focus-badge) {
|
||||
body.console-v2 .joint-twin-shell :is(.twin-selector, .twin-selector button, .twin-reset, .twin-focus-badge) {
|
||||
color: var(--muted-foreground) !important;
|
||||
background: var(--glass-card) !important;
|
||||
border-color: var(--glass-line) !important;
|
||||
box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
|
||||
}
|
||||
|
||||
body.console-v2 .joint-twin-shell .twin-seat-switch button.active,
|
||||
body.console-v2 .joint-twin-shell .twin-selector button.active,
|
||||
body.console-v2 .joint-twin-shell :is(.twin-reset, .twin-focus-badge):is(:hover, :focus-visible) {
|
||||
color: var(--primary-foreground) !important;
|
||||
background: color-mix(in oklch, var(--primary) 72%, transparent) !important;
|
||||
@@ -588,12 +596,18 @@ body.console-v2 :is(.v2-extension-linkage, .v2-sidebar-footer) {
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-backdrop,
|
||||
.mode-editor-backdrop,
|
||||
.v2-extension-dialog::backdrop,
|
||||
.energy-monitor-layer
|
||||
.energy-monitor-layer,
|
||||
.device-power-backdrop
|
||||
) {
|
||||
background: oklch(0.055 0.025 286 / 0.62) !important;
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.12);
|
||||
backdrop-filter: blur(14px) saturate(1.12);
|
||||
background: var(--glass-dialog-scrim) !important;
|
||||
-webkit-backdrop-filter: var(--glass-dialog-scrim-filter) !important;
|
||||
backdrop-filter: var(--glass-dialog-scrim-filter) !important;
|
||||
}
|
||||
|
||||
body.console-v2 .v2-extension-dialog::backdrop {
|
||||
background: var(--glass-dialog-scrim) !important;
|
||||
-webkit-backdrop-filter: var(--glass-dialog-scrim-filter) !important;
|
||||
backdrop-filter: var(--glass-dialog-scrim-filter) !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
@@ -631,6 +645,98 @@ body.console-v2 :is(
|
||||
box-shadow: inset 0 1px 0 var(--glass-highlight), 0 9px 24px oklch(0.04 0.03 286 / 0.2) !important;
|
||||
}
|
||||
|
||||
/* Unified floating cards -------------------------------------------------
|
||||
Card geometry never changes on interaction; transform-only elevation
|
||||
keeps the dashboard stable while matching the shared shadcn card states. */
|
||||
body.console-v2 :is(
|
||||
.v2-sync-transport-field,
|
||||
.v2-sync-execution-field,
|
||||
.v2-can-command-panel,
|
||||
.v2-sync-log,
|
||||
.v2-nfc-inline,
|
||||
.v2-extension-gateway,
|
||||
.v2-extension-synced-device,
|
||||
.v2-extension-empty,
|
||||
.v2-extension-config-card,
|
||||
.v2-extension-type-card,
|
||||
.v2-extension-vehicle-card,
|
||||
.v2-pet-card-region,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.v2-synced-device,
|
||||
.joint-seat-panel,
|
||||
.domain-panel,
|
||||
.coverage-card,
|
||||
.decision-list li,
|
||||
.frame-summary,
|
||||
.execution-summary,
|
||||
.mode-gallery-card,
|
||||
.mode-editor-flow,
|
||||
.mode-editor-command-card,
|
||||
.v2-nfc-body,
|
||||
.v2-nfc-existing,
|
||||
.v2-nfc-pet-binding,
|
||||
.energy-kpi,
|
||||
.energy-trend-card,
|
||||
.energy-devices-card,
|
||||
.assistant-dispatched-controls,
|
||||
.assistant-mode-draft,
|
||||
.assistant-mode-created,
|
||||
.assistant-control-suggestion
|
||||
) {
|
||||
border-radius: var(--glass-card-radius) !important;
|
||||
box-shadow: var(--glass-card-rest-shadow) !important;
|
||||
transform: translateY(0);
|
||||
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.v2-can-command-panel,
|
||||
.v2-sync-log,
|
||||
.v2-nfc-inline,
|
||||
.v2-extension-gateway,
|
||||
.v2-extension-synced-device,
|
||||
.v2-extension-empty,
|
||||
.v2-extension-config-card,
|
||||
.v2-extension-type-card,
|
||||
.v2-extension-vehicle-card,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.v2-synced-device,
|
||||
.joint-seat-panel,
|
||||
.domain-panel,
|
||||
.coverage-card,
|
||||
.decision-list li,
|
||||
.frame-summary,
|
||||
.execution-summary,
|
||||
.mode-gallery-card,
|
||||
.mode-editor-command-card,
|
||||
.v2-nfc-existing,
|
||||
.v2-nfc-pet-binding,
|
||||
.energy-kpi,
|
||||
.energy-trend-card,
|
||||
.energy-devices-card,
|
||||
.assistant-dispatched-controls,
|
||||
.assistant-mode-draft,
|
||||
.assistant-mode-created,
|
||||
.assistant-control-suggestion
|
||||
):is(:hover, :focus-within) {
|
||||
background-color: var(--glass-card-hover) !important;
|
||||
border-color: var(--glass-line-strong) !important;
|
||||
box-shadow: var(--glass-card-float-shadow) !important;
|
||||
transform: translateY(var(--glass-card-lift));
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-card,
|
||||
.assistant-control-suggestion
|
||||
):active {
|
||||
box-shadow: var(--glass-card-rest-shadow) !important;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
body.console-v2 :is(.mode-gallery-close, .mode-editor-header > button, .v2-extension-dialog [data-dialog-close], #energyMonitorClose) {
|
||||
color: var(--muted-foreground) !important;
|
||||
background: var(--glass-card) !important;
|
||||
@@ -644,12 +750,12 @@ body.console-v2 :is(.mode-gallery-close, .mode-editor-header > button, .v2-exten
|
||||
|
||||
/* Persistent day / night appearance ------------------------------------- */
|
||||
.glass-theme-toggle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
left: max(16px, env(safe-area-inset-left));
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
z-index: 1600;
|
||||
z-index: 1100;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
@@ -776,6 +882,206 @@ html[data-glass-theme="light"] body.console-v2 :is(
|
||||
box-shadow: 0 28px 84px color-mix(in oklch, var(--foreground) 20%, transparent), inset 0 1px 0 var(--glass-highlight) !important;
|
||||
}
|
||||
|
||||
/* Audited component hierarchy -------------------------------------------
|
||||
Keep shadcn-style roles visually distinct: panel > section > item >
|
||||
control. These rules intentionally live after the theme variants so both
|
||||
day and night modes consume the same geometry and typography contract. */
|
||||
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync :is(
|
||||
.main-panel > .v2-mode-rail,
|
||||
#assistantDrawer,
|
||||
.joint-twin-shell > .twin-band,
|
||||
#v2DevicePanel,
|
||||
#v2ExtensionPanel .v2-extension-sync-mount
|
||||
) {
|
||||
border-radius: var(--ui-radius-panel) !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.v2-sync-log,
|
||||
.mode-gallery-group,
|
||||
.v2-pet-card-region,
|
||||
.energy-trend-card,
|
||||
.energy-devices-card
|
||||
) {
|
||||
border-radius: var(--ui-radius-section) !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.v2-sync-transport-field,
|
||||
.v2-sync-execution-field,
|
||||
.v2-can-command-panel,
|
||||
.v2-nfc-inline,
|
||||
.v2-extension-gateway,
|
||||
.v2-extension-synced-device,
|
||||
.v2-extension-empty,
|
||||
.v2-extension-config-card,
|
||||
.v2-extension-type-card,
|
||||
.v2-extension-vehicle-card,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.v2-synced-device,
|
||||
.mode-gallery-card,
|
||||
.mode-editor-flow,
|
||||
.mode-editor-command-card,
|
||||
.energy-kpi,
|
||||
.assistant-dispatched-controls,
|
||||
.assistant-mode-draft,
|
||||
.assistant-mode-created,
|
||||
.assistant-control-suggestion
|
||||
) {
|
||||
border-radius: var(--ui-radius-item) !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery,
|
||||
.mode-editor,
|
||||
.v2-nfc-dialog,
|
||||
.v2-gscu-tcp-dialog,
|
||||
.v2-pet-settings-dialog,
|
||||
.energy-monitor-page
|
||||
) {
|
||||
border-radius: var(--ui-radius-modal) !important;
|
||||
}
|
||||
|
||||
/* Read-only containers must not imitate clickable cards on hover. */
|
||||
body.console-v2 :is(
|
||||
.v2-sync-transport-field,
|
||||
.v2-sync-execution-field,
|
||||
.v2-sync-log,
|
||||
.v2-pet-card-region,
|
||||
.mode-editor-flow,
|
||||
.energy-trend-card,
|
||||
.energy-devices-card
|
||||
):is(:hover, :focus-within) {
|
||||
background-color: var(--glass-card) !important;
|
||||
border-color: var(--glass-line) !important;
|
||||
box-shadow: var(--glass-card-rest-shadow) !important;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* One title scale across peer panels and dialogs. */
|
||||
body.console-v2 :is(
|
||||
#assistantDrawer .v2-operation-heading h2,
|
||||
.joint-twin-shell .twin-heading h3,
|
||||
.v2-device-sync-board > header h3,
|
||||
.v2-extension-sync-heading h3
|
||||
) {
|
||||
font-size: var(--ui-font-panel-title) !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(.v2-sync-log h3, .v2-mode-rail .mode-rail-title) {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-header h2,
|
||||
.mode-editor-header h2,
|
||||
.v2-extension-dialog h2,
|
||||
.energy-monitor-heading h2
|
||||
) {
|
||||
font-size: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.2 !important;
|
||||
letter-spacing: -0.025em !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-header p,
|
||||
.mode-gallery-footer,
|
||||
.mode-editor-header p,
|
||||
.mode-editor-status,
|
||||
.v2-pet-settings-footnote,
|
||||
.v2-nfc-footnote
|
||||
) {
|
||||
font-size: 12px !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-card-heading strong,
|
||||
.v2-pet-card > header > strong,
|
||||
.v2-gscu-actions > header strong,
|
||||
.v2-gscu-command-catalog > header strong
|
||||
) {
|
||||
font-size: var(--ui-font-card-title) !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-card-description,
|
||||
.v2-pet-card-fields > label > span,
|
||||
.v2-gscu-tcp-dialog label,
|
||||
.energy-kpi > small
|
||||
) {
|
||||
font-size: 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(.mode-gallery-card-meta, .energy-kpi > em, .energy-devices-card > footer) {
|
||||
font-size: 11px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
/* Consistent icon-button variants. */
|
||||
body.console-v2 :is(
|
||||
.mode-gallery-close,
|
||||
.mode-editor-header > button,
|
||||
.v2-extension-dialog [data-dialog-close],
|
||||
.v2-extension-dialog [data-close-extension-dialog],
|
||||
.v2-extension-dialog [data-close-nfc-dialog],
|
||||
#energyMonitorClose,
|
||||
.twin-reset
|
||||
) {
|
||||
width: var(--ui-control-size-icon) !important;
|
||||
height: var(--ui-control-size-icon) !important;
|
||||
min-width: var(--ui-control-size-icon) !important;
|
||||
min-height: var(--ui-control-size-icon) !important;
|
||||
border-radius: var(--ui-radius-control) !important;
|
||||
}
|
||||
|
||||
body.console-v2 :is(.mode-gallery-edit, .mode-gallery-delete, .v2-pet-card > header > button) {
|
||||
width: var(--ui-control-height-compact) !important;
|
||||
height: var(--ui-control-height-compact) !important;
|
||||
min-width: var(--ui-control-height-compact) !important;
|
||||
min-height: var(--ui-control-height-compact) !important;
|
||||
border-radius: var(--ui-radius-control-inner) !important;
|
||||
}
|
||||
|
||||
/* Make horizontal continuation discoverable without adding another control. */
|
||||
body.console-v2 .v2-mode-rail .mode-chips {
|
||||
scroll-padding-inline: 18px;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, black 18px, black calc(100% - 26px), transparent);
|
||||
mask-image: linear-gradient(90deg, transparent, black 18px, black calc(100% - 26px), transparent);
|
||||
}
|
||||
|
||||
/* Reserve scroll space beneath the required floating theme switch. */
|
||||
body.console-v2 .v2-sync-log ol {
|
||||
padding-bottom: 58px !important;
|
||||
scroll-padding-bottom: 58px;
|
||||
}
|
||||
|
||||
/* Offline is a destructive state, not an active primary state. */
|
||||
body.console-v2 .v2-nfc-stage[data-state="offline"] > header {
|
||||
color: var(--status-error-foreground) !important;
|
||||
background: color-mix(in oklch, var(--destructive) 16%, var(--card)) !important;
|
||||
border-bottom: 1px solid color-mix(in oklch, var(--destructive) 30%, var(--border));
|
||||
}
|
||||
|
||||
body.console-v2 .v2-nfc-stage[data-state="offline"] > header :is(span, small, h3, p, b) {
|
||||
color: var(--status-error-foreground) !important;
|
||||
}
|
||||
|
||||
body.console-v2 .v2-nfc-stage[data-state="offline"] > header > span,
|
||||
body.console-v2 .v2-nfc-stage[data-state="offline"] > header > b {
|
||||
background: var(--status-error-soft) !important;
|
||||
border-color: color-mix(in oklch, var(--destructive) 28%, var(--border)) !important;
|
||||
}
|
||||
|
||||
/* Scrollbars ------------------------------------------------------------- */
|
||||
body.console-v2 * {
|
||||
scrollbar-color: color-mix(in oklch, var(--primary) 70%, white 8%) color-mix(in oklch, var(--background) 66%, transparent);
|
||||
@@ -807,4 +1113,45 @@ body.console-v2 *::-webkit-scrollbar-thumb {
|
||||
body.console-v2::after {
|
||||
filter: blur(44px);
|
||||
}
|
||||
|
||||
body.console-v2 :is(
|
||||
.v2-sync-transport-field,
|
||||
.v2-sync-execution-field,
|
||||
.v2-can-command-panel,
|
||||
.v2-sync-log,
|
||||
.v2-nfc-inline,
|
||||
.v2-extension-gateway,
|
||||
.v2-extension-synced-device,
|
||||
.v2-extension-empty,
|
||||
.v2-extension-config-card,
|
||||
.v2-extension-type-card,
|
||||
.v2-extension-vehicle-card,
|
||||
.v2-pet-card-region,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.v2-synced-device,
|
||||
.joint-seat-panel,
|
||||
.domain-panel,
|
||||
.coverage-card,
|
||||
.decision-list li,
|
||||
.frame-summary,
|
||||
.execution-summary,
|
||||
.mode-gallery-card,
|
||||
.mode-editor-flow,
|
||||
.mode-editor-command-card,
|
||||
.v2-nfc-body,
|
||||
.v2-nfc-existing,
|
||||
.v2-nfc-pet-binding,
|
||||
.energy-kpi,
|
||||
.energy-trend-card,
|
||||
.energy-devices-card,
|
||||
.assistant-dispatched-controls,
|
||||
.assistant-mode-draft,
|
||||
.assistant-mode-created,
|
||||
.assistant-control-suggestion
|
||||
) {
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user