feat(n7web): refine spatial UI and NFC-gated extension routing
This commit is contained in:
@@ -44,6 +44,7 @@ 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,
|
||||
@@ -132,6 +133,119 @@ body.console-v2 .v2-sync-log h3 {
|
||||
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,
|
||||
|
||||
Reference in New Issue
Block a user