Miayui
390 lines
11 KiB
CSS
390 lines
11 KiB
CSS
/* N7 Web Console design-system contract.
|
|
* Loaded last by Vite so every legacy surface consumes one geometry,
|
|
* typography, state and elevation scale while the runtime is migrated to
|
|
* Vue components incrementally. */
|
|
|
|
:root {
|
|
--n7-control-height-sm: 32px;
|
|
--n7-control-height: 38px;
|
|
--n7-icon-button-size: 38px;
|
|
--n7-radius-control: 10px;
|
|
--n7-radius-card: 14px;
|
|
--n7-radius-section: 16px;
|
|
--n7-radius-panel: 18px;
|
|
--n7-radius-dialog: 22px;
|
|
--n7-font-caption: 12px;
|
|
--n7-font-body: 13px;
|
|
--n7-font-card-title: 14px;
|
|
--n7-font-panel-title: 16px;
|
|
--n7-font-dialog-title: 22px;
|
|
--n7-shadow-card: inset 0 1px 0 var(--glass-highlight), 0 7px 20px color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
--n7-shadow-panel: inset 0 1px 0 var(--glass-highlight), 0 14px 34px color-mix(in oklch, var(--foreground) 13%, transparent);
|
|
--n7-shadow-dialog: inset 0 1px 0 var(--glass-highlight), 0 28px 84px color-mix(in oklch, var(--foreground) 28%, transparent);
|
|
}
|
|
|
|
#app {
|
|
min-width: inherit;
|
|
min-height: 100dvh;
|
|
display: contents;
|
|
}
|
|
|
|
/* Workspace panels: one top-level geometry, distinct from their children. */
|
|
body.console-v2.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(--n7-radius-panel) !important;
|
|
box-shadow: var(--n7-shadow-panel) !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-sync-transport-field,
|
|
.v2-sync-execution-field,
|
|
.v2-can-command-panel,
|
|
.v2-control-link-card,
|
|
.v2-nfc-inline,
|
|
.v2-extension-gateway,
|
|
.v2-extension-synced-device,
|
|
.v2-extension-empty,
|
|
.v2-pet-card,
|
|
.v2-pet-presence-card,
|
|
.v2-device-card,
|
|
.v2-synced-device,
|
|
.mode-gallery-card,
|
|
.mode-editor-command-card,
|
|
.energy-kpi,
|
|
.energy-device-row,
|
|
.assistant-dispatched-controls,
|
|
.assistant-mode-draft,
|
|
.assistant-mode-created,
|
|
.assistant-control-suggestion
|
|
) {
|
|
border-radius: var(--n7-radius-card) !important;
|
|
box-shadow: var(--n7-shadow-card) !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-sync-log,
|
|
.v2-pet-card-region,
|
|
.mode-gallery-group,
|
|
.mode-editor-flow,
|
|
.v2-nfc-stage,
|
|
.energy-trend-card,
|
|
.energy-devices-card
|
|
) {
|
|
border-radius: var(--n7-radius-section) !important;
|
|
}
|
|
|
|
/* Only actionable cards float. Read-only panels remain spatially stable. */
|
|
body.console-v2 :is(
|
|
.v2-sync-log,
|
|
.v2-pet-card-region,
|
|
.mode-editor-flow,
|
|
.energy-trend-card,
|
|
.energy-devices-card
|
|
):is(:hover, :focus-within) {
|
|
transform: none !important;
|
|
box-shadow: var(--n7-shadow-card) !important;
|
|
}
|
|
|
|
/* The current DOM uses .twin-selector; the previous glass selector targeted
|
|
* the removed .twin-seat-switch class and produced white-on-white tabs. */
|
|
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-selector button.active {
|
|
color: var(--primary-foreground) !important;
|
|
background: var(--primary) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 72%, white 18%) !important;
|
|
}
|
|
|
|
/* Shared heading hierarchy. */
|
|
body.console-v2 :is(
|
|
#assistantDrawer h2,
|
|
.joint-twin-shell .twin-heading h3,
|
|
.v2-device-sync-board > header h3,
|
|
.v2-extension-sync-heading h3,
|
|
.v2-mode-rail .mode-rail-title
|
|
) {
|
|
font-size: var(--n7-font-panel-title) !important;
|
|
font-weight: 750 !important;
|
|
line-height: 1.25 !important;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* The log title shares a 217 px header with its filter, so it needs the
|
|
* compact card-title scale instead of the full panel-title scale. */
|
|
body.console-v2 .v2-sync-log h3 {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-size: var(--n7-font-card-title) !important;
|
|
font-weight: 750 !important;
|
|
line-height: 1.25 !important;
|
|
letter-spacing: -0.02em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Sidebar disclosure, connection status and control-command readability use
|
|
* the same semantic tokens in both day and night themes. */
|
|
body.console-v2 .v2-sync-log[data-collapsed="true"] {
|
|
min-height: 0;
|
|
align-self: start;
|
|
grid-template-rows: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log[data-collapsed="true"] > header {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log[data-collapsed="true"] #v2LogFilter {
|
|
display: none;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log #v2SyncLogList[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log > header > div:first-child {
|
|
min-width: 0;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log .v2-sync-log-actions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log .v2-sync-log-toggle {
|
|
min-width: 46px;
|
|
min-height: var(--n7-control-height-sm);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0 7px;
|
|
color: var(--muted-foreground);
|
|
background: var(--secondary);
|
|
border: 1px solid var(--input);
|
|
border-radius: var(--n7-radius-control);
|
|
cursor: pointer;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log .v2-sync-log-toggle:is(:hover, :focus-visible) {
|
|
color: var(--accent-foreground);
|
|
background: var(--accent);
|
|
border-color: var(--ring);
|
|
outline: none;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log .v2-sync-log-toggle svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
body.console-v2 .v2-sync-log .v2-sync-log-toggle[aria-expanded="true"] svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .v2-control-link-card {
|
|
min-height: 56px;
|
|
grid-template-columns: 10px minmax(0, 1fr);
|
|
gap: 10px;
|
|
margin: 0 !important;
|
|
padding: 10px 11px !important;
|
|
color: var(--card-foreground);
|
|
background: var(--glass-card) !important;
|
|
border: 1px solid var(--glass-line) !important;
|
|
border-radius: var(--n7-radius-card) !important;
|
|
box-shadow: var(--n7-shadow-card) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.2);
|
|
backdrop-filter: blur(16px) saturate(1.2);
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card strong {
|
|
color: var(--card-foreground) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card small {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card[data-state="online"] .v2-live-dot {
|
|
background: var(--status-online);
|
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--status-online) 18%, transparent);
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card[data-state="connecting"] .v2-live-dot {
|
|
background: var(--status-info);
|
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--status-info) 18%, transparent);
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card[data-state="degraded"] .v2-live-dot {
|
|
background: var(--status-warning);
|
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--status-warning) 18%, transparent);
|
|
}
|
|
|
|
body.console-v2 .v2-control-link-card[data-state="offline"] .v2-live-dot {
|
|
background: var(--status-offline);
|
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--status-offline) 18%, transparent);
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync
|
|
.v2-can-command-list li[data-can-channel]
|
|
.v2-can-command-actual code {
|
|
color: var(--card-foreground) !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.mode-gallery-header h2,
|
|
.mode-editor-header h2,
|
|
.v2-extension-dialog > header h2,
|
|
.v2-extension-dialog form > header h2,
|
|
.energy-monitor-heading h2
|
|
) {
|
|
font-size: var(--n7-font-dialog-title) !important;
|
|
font-weight: 750 !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.mode-gallery-card-heading strong,
|
|
.v2-device-card-focus strong,
|
|
.v2-nfc-inline strong,
|
|
.v2-extension-gateway strong,
|
|
.v2-pet-card > header > strong,
|
|
.energy-trend-card h3,
|
|
.energy-devices-card h3
|
|
) {
|
|
font-size: var(--n7-font-card-title) !important;
|
|
line-height: 1.35 !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.mode-editor-status,
|
|
.mode-gallery-footer,
|
|
.v2-pet-settings-footnote,
|
|
.v2-pet-card-fields > label > span,
|
|
.v2-pet-nfc-field output,
|
|
.energy-kpi > small,
|
|
.energy-kpi > em,
|
|
.energy-devices-card > footer
|
|
) {
|
|
font-size: var(--n7-font-caption) !important;
|
|
line-height: 1.45 !important;
|
|
}
|
|
|
|
/* One dialog radius, elevation and close-button size. */
|
|
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(--n7-radius-dialog) !important;
|
|
box-shadow: var(--n7-shadow-dialog) !important;
|
|
}
|
|
|
|
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
|
|
) {
|
|
width: var(--n7-icon-button-size) !important;
|
|
height: var(--n7-icon-button-size) !important;
|
|
min-width: var(--n7-icon-button-size);
|
|
min-height: var(--n7-icon-button-size);
|
|
border-radius: var(--n7-radius-control) !important;
|
|
}
|
|
|
|
/* Compact icon actions still meet a usable hit target without becoming a
|
|
* second visual system. */
|
|
body.console-v2 :is(
|
|
.twin-reset,
|
|
.mode-gallery-edit,
|
|
.mode-gallery-delete,
|
|
.v2-pet-card > header > button
|
|
) {
|
|
width: var(--n7-control-height-sm) !important;
|
|
height: var(--n7-control-height-sm) !important;
|
|
min-width: var(--n7-control-height-sm);
|
|
min-height: var(--n7-control-height-sm);
|
|
border-radius: var(--n7-radius-control) !important;
|
|
}
|
|
|
|
/* Offline hardware is a destructive state, not a primary/active state. */
|
|
body.console-v2 .v2-nfc-stage:has(.v2-nfc-waiting.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) 32%, var(--border));
|
|
}
|
|
|
|
body.console-v2 .v2-nfc-stage:has(.v2-nfc-waiting.offline) > header :is(span, small, h3, p, b) {
|
|
color: var(--status-error-foreground) !important;
|
|
}
|
|
|
|
/* Keep the global appearance control out of content and below every modal. */
|
|
.glass-theme-toggle {
|
|
left: max(18px, env(safe-area-inset-left)) !important;
|
|
bottom: max(18px, env(safe-area-inset-bottom)) !important;
|
|
z-index: 1100 !important;
|
|
}
|
|
|
|
body.mode-gallery-open .glass-theme-toggle,
|
|
body.mode-editor-open .glass-theme-toggle,
|
|
body:has(.v2-extension-dialog[open]) .glass-theme-toggle,
|
|
body:has(.energy-monitor-layer:not([hidden])) .glass-theme-toggle {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* The sidebar reserves the floating control's footprint instead of allowing
|
|
* it to cover the log timeline. */
|
|
body.console-v2 .v2-sync-log {
|
|
margin-bottom: 58px;
|
|
}
|
|
|
|
/* Top mode rail communicates that more content is available. */
|
|
body.console-v2 .v2-mode-rail .mode-rail-content {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
body.console-v2 .v2-mode-rail .mode-rail-content::after {
|
|
width: 28px;
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 0 auto;
|
|
pointer-events: none;
|
|
background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--glass-panel) 94%, transparent));
|
|
}
|
|
|
|
@media (max-width: 1360px) {
|
|
.glass-theme-toggle {
|
|
width: 42px !important;
|
|
height: 42px !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body.console-v2 * {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|