Miayui
1159 lines
41 KiB
CSS
1159 lines
41 KiB
CSS
/* Glassmorphism workspace theme -------------------------------------------
|
|
Visual direction adapted to the referenced Creative Cloud concept:
|
|
a colorful desktop backdrop, one dark translucent app shell, restrained
|
|
separators and low-contrast glass cards. The existing N7 information
|
|
architecture and interaction contracts remain unchanged. */
|
|
|
|
body.console-v2 {
|
|
color-scheme: dark;
|
|
--background: oklch(0.16 0.045 286);
|
|
--foreground: oklch(0.97 0.012 274);
|
|
--card: oklch(0.25 0.045 282 / 0.68);
|
|
--card-foreground: oklch(0.95 0.018 274);
|
|
--popover: oklch(0.205 0.048 284 / 0.96);
|
|
--popover-foreground: oklch(0.97 0.012 274);
|
|
--primary: oklch(0.68 0.19 270);
|
|
--primary-foreground: oklch(0.99 0.004 274);
|
|
--secondary: oklch(0.31 0.05 281 / 0.72);
|
|
--secondary-foreground: oklch(0.94 0.018 274);
|
|
--muted: oklch(0.32 0.035 279 / 0.56);
|
|
--muted-foreground: oklch(0.78 0.035 276);
|
|
--accent: oklch(0.41 0.105 273 / 0.58);
|
|
--accent-foreground: oklch(0.98 0.012 274);
|
|
--destructive: oklch(0.69 0.2 22);
|
|
--border: oklch(0.9 0.035 276 / 0.16);
|
|
--input: oklch(0.93 0.025 276 / 0.22);
|
|
--ring: oklch(0.75 0.14 265);
|
|
--sidebar: oklch(0.19 0.05 286 / 0.64);
|
|
--sidebar-foreground: oklch(0.95 0.018 274);
|
|
--sidebar-primary: var(--primary);
|
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
--sidebar-accent: oklch(0.36 0.08 276 / 0.54);
|
|
--sidebar-accent-foreground: var(--foreground);
|
|
--sidebar-border: var(--border);
|
|
--sidebar-ring: var(--ring);
|
|
--heading-foreground: oklch(0.99 0.008 274);
|
|
--body-foreground: var(--card-foreground);
|
|
--subtle-foreground: var(--muted-foreground);
|
|
--status-success: oklch(0.77 0.17 158);
|
|
--status-online: var(--status-success);
|
|
--status-warning: oklch(0.82 0.16 82);
|
|
--status-offline: var(--destructive);
|
|
--status-info: oklch(0.76 0.14 247);
|
|
--status-success-foreground: oklch(0.86 0.14 158);
|
|
--status-warning-foreground: oklch(0.9 0.13 84);
|
|
--status-info-foreground: oklch(0.88 0.1 248);
|
|
--status-error-foreground: oklch(0.86 0.11 22);
|
|
--status-success-soft: oklch(0.67 0.14 158 / 0.15);
|
|
--status-warning-soft: oklch(0.72 0.15 82 / 0.16);
|
|
--status-info-soft: oklch(0.65 0.15 250 / 0.17);
|
|
--status-error-soft: oklch(0.66 0.18 22 / 0.16);
|
|
--bg: var(--background);
|
|
--surface: var(--card);
|
|
--surface-muted: var(--muted);
|
|
--ink: var(--foreground);
|
|
--line: var(--border);
|
|
--line-strong: var(--input);
|
|
--teal: var(--primary);
|
|
--teal-dark: color-mix(in oklch, var(--primary) 78%, black);
|
|
--teal-soft: color-mix(in oklch, var(--primary) 16%, transparent);
|
|
--blue: var(--primary);
|
|
--blue-soft: color-mix(in oklch, var(--primary) 16%, transparent);
|
|
--amber: var(--status-warning);
|
|
--amber-soft: var(--status-warning-soft);
|
|
--red: var(--destructive);
|
|
--red-soft: var(--status-error-soft);
|
|
--accent-bright: color-mix(in oklch, var(--primary) 78%, white);
|
|
--accent-ink: var(--primary);
|
|
--accent-wash: color-mix(in oklch, var(--primary) 14%, transparent);
|
|
--v2-accent: var(--primary);
|
|
--v2-accent-strong: color-mix(in oklch, var(--primary) 76%, white);
|
|
--v2-accent-soft: color-mix(in oklch, var(--primary) 14%, transparent);
|
|
--v2-sidebar: var(--sidebar);
|
|
--v2-sidebar-deep: oklch(0.15 0.045 287 / 0.72);
|
|
--v2-ink: var(--foreground);
|
|
--v2-muted: var(--muted-foreground);
|
|
--v2-line: var(--border);
|
|
--v2-surface: var(--card);
|
|
--v2-canvas: transparent;
|
|
--glass-shell: oklch(0.14 0.045 286 / 0.62);
|
|
--glass-panel: oklch(0.19 0.045 284 / 0.56);
|
|
--glass-card: oklch(0.43 0.04 276 / 0.18);
|
|
--glass-card-hover: oklch(0.5 0.07 270 / 0.23);
|
|
--glass-line: oklch(0.96 0.02 274 / 0.15);
|
|
--glass-line-strong: oklch(0.96 0.025 274 / 0.24);
|
|
--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;
|
|
color: var(--foreground);
|
|
background:
|
|
radial-gradient(circle at 8% 12%, oklch(0.69 0.2 232 / 0.82), transparent 31%),
|
|
radial-gradient(circle at 78% 2%, oklch(0.45 0.22 290 / 0.82), transparent 34%),
|
|
radial-gradient(circle at 94% 78%, oklch(0.64 0.25 339 / 0.72), transparent 38%),
|
|
radial-gradient(circle at 18% 96%, oklch(0.49 0.22 22 / 0.58), transparent 35%),
|
|
linear-gradient(135deg, oklch(0.17 0.075 242), oklch(0.16 0.075 292) 52%, oklch(0.23 0.11 344));
|
|
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 {
|
|
color-scheme: light;
|
|
--background: oklch(0.965 0.022 239);
|
|
--foreground: oklch(0.27 0.055 253);
|
|
--card: oklch(0.995 0.008 245 / 0.72);
|
|
--card-foreground: oklch(0.32 0.045 251);
|
|
--popover: oklch(0.99 0.01 245 / 0.94);
|
|
--popover-foreground: oklch(0.27 0.055 253);
|
|
--primary: oklch(0.61 0.19 255);
|
|
--primary-foreground: oklch(0.99 0.004 245);
|
|
--secondary: oklch(0.93 0.035 244 / 0.76);
|
|
--secondary-foreground: oklch(0.36 0.055 252);
|
|
--muted: oklch(0.94 0.025 244 / 0.68);
|
|
--muted-foreground: oklch(0.5 0.045 250);
|
|
--accent: oklch(0.9 0.062 249 / 0.72);
|
|
--accent-foreground: oklch(0.36 0.12 257);
|
|
--destructive: oklch(0.61 0.19 24);
|
|
--border: oklch(0.58 0.07 249 / 0.2);
|
|
--input: oklch(0.55 0.075 249 / 0.28);
|
|
--ring: oklch(0.62 0.16 255);
|
|
--sidebar: oklch(0.965 0.025 244 / 0.7);
|
|
--sidebar-foreground: oklch(0.29 0.055 252);
|
|
--sidebar-primary: var(--primary);
|
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
--sidebar-accent: oklch(0.89 0.065 248 / 0.66);
|
|
--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);
|
|
--status-success: oklch(0.62 0.15 158);
|
|
--status-online: var(--status-success);
|
|
--status-warning: oklch(0.7 0.15 78);
|
|
--status-offline: var(--destructive);
|
|
--status-info: var(--primary);
|
|
--status-success-foreground: oklch(0.4 0.12 158);
|
|
--status-warning-foreground: oklch(0.44 0.115 75);
|
|
--status-info-foreground: oklch(0.39 0.145 255);
|
|
--status-error-foreground: oklch(0.46 0.17 24);
|
|
--status-success-soft: color-mix(in oklch, var(--status-success) 12%, var(--card));
|
|
--status-warning-soft: color-mix(in oklch, var(--status-warning) 12%, var(--card));
|
|
--status-info-soft: color-mix(in oklch, var(--status-info) 11%, var(--card));
|
|
--status-error-soft: color-mix(in oklch, var(--destructive) 10%, var(--card));
|
|
--bg: var(--background);
|
|
--surface: var(--card);
|
|
--surface-muted: var(--muted);
|
|
--ink: var(--foreground);
|
|
--line: var(--border);
|
|
--line-strong: var(--input);
|
|
--teal: var(--primary);
|
|
--teal-dark: color-mix(in oklch, var(--primary) 80%, var(--foreground));
|
|
--teal-soft: color-mix(in oklch, var(--primary) 11%, transparent);
|
|
--blue: var(--primary);
|
|
--blue-soft: color-mix(in oklch, var(--primary) 11%, transparent);
|
|
--amber: var(--status-warning);
|
|
--amber-soft: var(--status-warning-soft);
|
|
--red: var(--destructive);
|
|
--red-soft: var(--status-error-soft);
|
|
--accent-bright: color-mix(in oklch, var(--primary) 78%, white);
|
|
--accent-ink: var(--primary);
|
|
--accent-wash: color-mix(in oklch, var(--primary) 12%, transparent);
|
|
--v2-accent: var(--primary);
|
|
--v2-accent-strong: color-mix(in oklch, var(--primary) 78%, var(--foreground));
|
|
--v2-accent-soft: color-mix(in oklch, var(--primary) 12%, transparent);
|
|
--v2-sidebar: var(--sidebar);
|
|
--v2-sidebar-deep: oklch(0.9 0.045 247 / 0.66);
|
|
--v2-ink: var(--foreground);
|
|
--v2-muted: var(--muted-foreground);
|
|
--v2-line: var(--border);
|
|
--v2-surface: var(--card);
|
|
--v2-canvas: transparent;
|
|
--glass-shell: oklch(0.975 0.018 244 / 0.68);
|
|
--glass-panel: oklch(0.99 0.012 245 / 0.62);
|
|
--glass-card: oklch(1 0 0 / 0.42);
|
|
--glass-card-hover: oklch(1 0 0 / 0.62);
|
|
--glass-line: oklch(0.46 0.075 252 / 0.16);
|
|
--glass-line-strong: oklch(0.42 0.09 253 / 0.24);
|
|
--glass-highlight: oklch(1 0 0 / 0.82);
|
|
--glass-shadow: 0 22px 64px oklch(0.35 0.09 254 / 0.18);
|
|
--glass-panel-shadow: 0 12px 30px oklch(0.36 0.075 252 / 0.13);
|
|
background:
|
|
radial-gradient(circle at 7% 8%, oklch(0.79 0.14 220 / 0.76), transparent 34%),
|
|
radial-gradient(circle at 77% -2%, oklch(0.78 0.14 286 / 0.52), transparent 36%),
|
|
radial-gradient(circle at 96% 80%, oklch(0.82 0.15 344 / 0.58), transparent 39%),
|
|
radial-gradient(circle at 17% 102%, oklch(0.84 0.12 26 / 0.48), transparent 37%),
|
|
linear-gradient(135deg, oklch(0.91 0.055 224), oklch(0.94 0.045 286) 52%, oklch(0.94 0.06 344));
|
|
}
|
|
|
|
body.console-v2::before,
|
|
body.console-v2::after {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
border-radius: 999px;
|
|
filter: blur(44px);
|
|
opacity: 0.56;
|
|
}
|
|
|
|
body.console-v2::before {
|
|
width: 34vw;
|
|
height: 34vw;
|
|
top: -18vw;
|
|
left: 28vw;
|
|
background: oklch(0.72 0.2 224 / 0.72);
|
|
}
|
|
|
|
body.console-v2::after {
|
|
width: 30vw;
|
|
height: 30vw;
|
|
right: -10vw;
|
|
bottom: -16vw;
|
|
background: oklch(0.67 0.25 334 / 0.68);
|
|
}
|
|
|
|
body.console-v2 .v2-boot-screen {
|
|
color: var(--foreground);
|
|
background:
|
|
radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--primary) 32%, transparent), transparent 18rem),
|
|
oklch(0.13 0.04 286);
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .workspace,
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .workspace {
|
|
width: 100vw !important;
|
|
max-width: none !important;
|
|
height: 100dvh !important;
|
|
min-height: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 0 !important;
|
|
overflow: hidden;
|
|
color: var(--foreground);
|
|
background: var(--glass-shell) !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
-webkit-backdrop-filter: blur(22px) saturate(1.25);
|
|
backdrop-filter: blur(22px) saturate(1.25);
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .main-panel {
|
|
min-height: 0;
|
|
color: var(--foreground);
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .command-panel.v2-sidebar {
|
|
height: 100%;
|
|
color: var(--sidebar-foreground);
|
|
background:
|
|
linear-gradient(165deg, oklch(0.22 0.07 284 / 0.38), oklch(0.12 0.04 287 / 0.42)) !important;
|
|
border-right: 1px solid var(--glass-line);
|
|
-webkit-backdrop-filter: blur(18px) saturate(1.2);
|
|
backdrop-filter: blur(18px) saturate(1.2);
|
|
}
|
|
|
|
/* Header / app navigation ------------------------------------------------ */
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel > .v2-mode-rail {
|
|
color: var(--foreground);
|
|
background:
|
|
linear-gradient(110deg, oklch(0.32 0.08 274 / 0.26), transparent 42%),
|
|
oklch(0.18 0.045 284 / 0.62) !important;
|
|
border: 1px solid var(--glass-line);
|
|
border-radius: 14px;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 24px oklch(0.05 0.04 286 / 0.2);
|
|
-webkit-backdrop-filter: blur(18px) saturate(1.22);
|
|
backdrop-filter: blur(18px) saturate(1.22);
|
|
}
|
|
|
|
body.console-v2 .v2-mode-rail .mode-rail-title,
|
|
body.console-v2 .v2-mode-rail .mode-rail-identity small,
|
|
body.console-v2 .v2-mode-rail .mode-rail-selection {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
body.console-v2 .v2-mode-rail .mode-rail-identity small {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
body.console-v2 .v2-mode-rail .mode-rail-mark,
|
|
body.console-v2 .v2-panel-control-dock > button,
|
|
body.console-v2 .v2-mode-rail .mode-rail-actions > button,
|
|
body.console-v2 .v2-mode-rail .mode-rail-toggle {
|
|
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;
|
|
-webkit-backdrop-filter: blur(10px) saturate(1.15);
|
|
backdrop-filter: blur(10px) saturate(1.15);
|
|
}
|
|
|
|
body.console-v2 .v2-panel-control-dock > button:is(:hover, :focus-visible, .active),
|
|
body.console-v2 .v2-mode-rail .mode-rail-actions > button:is(:hover, :focus-visible),
|
|
body.console-v2 .v2-mode-rail .mode-rail-toggle:is(:hover, :focus-visible) {
|
|
color: var(--foreground) !important;
|
|
background: color-mix(in oklch, var(--primary) 58%, transparent) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 64%, white 18%) !important;
|
|
box-shadow: 0 7px 18px color-mix(in oklch, var(--primary) 24%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.22) !important;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .v2-mode-rail .mode-chips {
|
|
background: transparent;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .v2-mode-rail .mode-chips > button {
|
|
color: var(--muted-foreground) !important;
|
|
background: transparent !important;
|
|
border-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .v2-mode-rail .mode-chips > button:is(:hover, :focus-visible) {
|
|
color: var(--foreground) !important;
|
|
background: var(--glass-card-hover) !important;
|
|
border-color: var(--glass-line) !important;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .v2-mode-rail .mode-chips > button::after {
|
|
background: var(--primary);
|
|
box-shadow: 0 0 14px color-mix(in oklch, var(--primary) 70%, transparent);
|
|
}
|
|
|
|
/* Primary glass surfaces ------------------------------------------------- */
|
|
body.console-v2.v2-passive-display.v2-interactive-sync :is(
|
|
#assistantDrawer,
|
|
.joint-twin-shell > .twin-band,
|
|
#v2DevicePanel,
|
|
#v2ExtensionPanel .v2-extension-sync-mount
|
|
) {
|
|
color: var(--card-foreground) !important;
|
|
background:
|
|
linear-gradient(145deg, oklch(0.36 0.055 278 / 0.12), transparent 44%),
|
|
var(--glass-panel) !important;
|
|
border: 1px solid var(--glass-line) !important;
|
|
border-radius: 14px !important;
|
|
box-shadow: var(--glass-panel-shadow), inset 0 1px 0 var(--glass-highlight) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(1.2);
|
|
backdrop-filter: blur(20px) saturate(1.2);
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync #assistantDrawer .v2-natural-panel {
|
|
color: var(--card-foreground);
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-operation-heading,
|
|
.joint-twin-shell .twin-heading,
|
|
.v2-device-sync-board > header,
|
|
.v2-extension-sync-heading
|
|
) {
|
|
color: var(--foreground) !important;
|
|
background: oklch(0.17 0.045 285 / 0.38) !important;
|
|
border-bottom-color: var(--glass-line) !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-operation-heading h2,
|
|
.joint-twin-shell .twin-heading h3,
|
|
.joint-twin-shell .twin-heading .section-kicker,
|
|
.v2-device-sync-board > header h3,
|
|
.v2-extension-sync-heading h3
|
|
) {
|
|
color: var(--heading-foreground) !important;
|
|
}
|
|
|
|
/* Assistant -------------------------------------------------------------- */
|
|
body.console-v2 .assistant-message-assistant .assistant-message-content,
|
|
body.console-v2 .assistant-message-user .assistant-message-content,
|
|
body.console-v2 .assistant-dispatched-controls {
|
|
color: var(--card-foreground) !important;
|
|
background: var(--glass-card) !important;
|
|
border: 1px solid var(--glass-line) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 20px oklch(0.05 0.035 285 / 0.14) !important;
|
|
-webkit-backdrop-filter: blur(12px) saturate(1.16);
|
|
backdrop-filter: blur(12px) saturate(1.16);
|
|
}
|
|
|
|
body.console-v2 .assistant-avatar {
|
|
color: var(--primary-foreground) !important;
|
|
background: linear-gradient(145deg, color-mix(in oklch, var(--primary) 78%, white), var(--primary)) !important;
|
|
border-color: oklch(1 0 0 / 0.22) !important;
|
|
box-shadow: 0 8px 20px color-mix(in oklch, var(--primary) 24%, transparent) !important;
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer {
|
|
color: var(--foreground);
|
|
background: oklch(0.12 0.035 286 / 0.46) !important;
|
|
border-color: var(--glass-line-strong) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px oklch(0.05 0.04 286 / 0.24) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.18);
|
|
backdrop-filter: blur(16px) saturate(1.18);
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled .v2-request-form #utterance {
|
|
color: var(--foreground) !important;
|
|
caret-color: var(--primary);
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled .v2-request-form #utterance::placeholder {
|
|
color: color-mix(in oklch, var(--muted-foreground) 82%, transparent);
|
|
}
|
|
|
|
body.console-v2 .assistant-drawer-actions :is(.context-reset, .assistant-drawer-close),
|
|
body.console-v2 .v2-request-form :is(.speech-dictation, .v2-reasoning-trigger) {
|
|
color: var(--muted-foreground) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.console-v2 .assistant-drawer-actions :is(.context-reset, .assistant-drawer-close):is(:hover, :focus-visible),
|
|
body.console-v2 .v2-request-form :is(.speech-dictation, .v2-reasoning-trigger):is(:hover, :focus-visible) {
|
|
color: var(--foreground) !important;
|
|
background: var(--glass-card-hover) !important;
|
|
}
|
|
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .primary-action,
|
|
body.console-v2 .v2-extension-primary,
|
|
body.console-v2 .mode-editor-primary {
|
|
color: var(--primary-foreground) !important;
|
|
background: linear-gradient(135deg, color-mix(in oklch, var(--primary) 78%, white), var(--primary)) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 72%, white 20%) !important;
|
|
box-shadow: 0 9px 22px color-mix(in oklch, var(--primary) 28%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.25) !important;
|
|
}
|
|
|
|
/* Vehicle twin ----------------------------------------------------------- */
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .joint-twin-shell[data-open-panels] {
|
|
color: var(--foreground);
|
|
background: transparent !important;
|
|
}
|
|
|
|
body.console-v2.v2-passive-display.v2-interactive-sync .joint-twin-shell .twin-stage {
|
|
background:
|
|
radial-gradient(ellipse at 53% 58%, color-mix(in oklch, var(--primary) 25%, transparent), transparent 42%),
|
|
radial-gradient(circle at 82% 8%, oklch(0.72 0.18 232 / 0.12), transparent 32%),
|
|
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-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,
|
|
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;
|
|
border-color: color-mix(in oklch, var(--primary) 70%, white 18%) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-twin-hotspot-label,
|
|
body.console-v2 .v2-twin-device-popover {
|
|
color: var(--foreground) !important;
|
|
background: oklch(0.16 0.045 285 / 0.74) !important;
|
|
border-color: var(--glass-line-strong) !important;
|
|
box-shadow: 0 10px 28px oklch(0.04 0.035 286 / 0.32), inset 0 1px 0 var(--glass-highlight) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-twin-device-popover {
|
|
-webkit-backdrop-filter: blur(14px) saturate(1.18);
|
|
backdrop-filter: blur(14px) saturate(1.18);
|
|
}
|
|
|
|
/* Reusable cards, fields and side rails --------------------------------- */
|
|
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-pet-card-region,
|
|
.v2-pet-card,
|
|
.v2-pet-presence-card,
|
|
.v2-device-card,
|
|
.joint-seat-panel,
|
|
.domain-panel,
|
|
.coverage-card,
|
|
.decision-list li,
|
|
.frame-summary,
|
|
.execution-summary
|
|
) {
|
|
color: var(--card-foreground) !important;
|
|
background: var(--glass-card) !important;
|
|
border-color: var(--glass-line) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), 0 7px 20px oklch(0.05 0.035 286 / 0.15) !important;
|
|
-webkit-backdrop-filter: blur(13px) saturate(1.16);
|
|
backdrop-filter: blur(13px) saturate(1.16);
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-nfc-inline,
|
|
.v2-extension-gateway,
|
|
.v2-extension-synced-device,
|
|
.v2-pet-card,
|
|
.v2-pet-presence-card,
|
|
.v2-device-card,
|
|
.joint-seat-panel,
|
|
.domain-panel
|
|
):is(:hover, :focus-within) {
|
|
background: var(--glass-card-hover) !important;
|
|
border-color: var(--glass-line-strong) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-pet-card-region {
|
|
--pet-acrylic-surface: var(--glass-card);
|
|
--pet-acrylic-surface-strong: var(--glass-card-hover);
|
|
--pet-acrylic-border: var(--glass-line);
|
|
--pet-acrylic-highlight: var(--glass-highlight);
|
|
}
|
|
|
|
body.console-v2 :is(input, textarea, select),
|
|
body.console-v2 .v2-pet-nfc-field output {
|
|
color: var(--foreground) !important;
|
|
background: oklch(0.11 0.035 286 / 0.42) !important;
|
|
border-color: var(--glass-line-strong) !important;
|
|
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08) !important;
|
|
}
|
|
|
|
body.console-v2 :is(input, textarea, select):focus {
|
|
border-color: color-mix(in oklch, var(--primary) 68%, white 16%) !important;
|
|
box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 22%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.1) !important;
|
|
}
|
|
|
|
body.console-v2 :is(input, textarea)::placeholder {
|
|
color: color-mix(in oklch, var(--muted-foreground) 76%, transparent);
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-extension-nfc-launch,
|
|
.v2-pet-settings-launch,
|
|
.v2-extension-gateway > button,
|
|
.v2-nfc-inline > button,
|
|
.v2-pet-card-region button,
|
|
.v2-device-adjust-toggle,
|
|
.config-action
|
|
) {
|
|
color: var(--foreground) !important;
|
|
background: color-mix(in oklch, var(--primary) 52%, transparent) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 54%, white 14%) !important;
|
|
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 7px 18px color-mix(in oklch, var(--primary) 18%, transparent) !important;
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.v2-extension-nfc-launch,
|
|
.v2-pet-settings-launch,
|
|
.v2-extension-gateway > button,
|
|
.v2-nfc-inline > button,
|
|
.v2-pet-card-region button,
|
|
.v2-device-adjust-toggle,
|
|
.config-action
|
|
):is(:hover, :focus-visible) {
|
|
color: var(--primary-foreground) !important;
|
|
background: color-mix(in oklch, var(--primary) 78%, transparent) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 76%, white 18%) !important;
|
|
}
|
|
|
|
body.console-v2 .v2-pet-card > header > button {
|
|
color: var(--muted-foreground) !important;
|
|
background: transparent !important;
|
|
border-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body.console-v2 .v2-pet-card > header > button:is(:hover, :focus-visible) {
|
|
color: var(--status-error-foreground) !important;
|
|
background: var(--status-error-soft) !important;
|
|
}
|
|
|
|
body.console-v2 :is(.v2-nfc-inline-icon, .v2-extension-gateway > span, .v2-pet-card > header > span, .v2-pet-presence-card > header > span, .v2-pet-card-region > header > div > span) {
|
|
color: color-mix(in oklch, var(--primary) 74%, white) !important;
|
|
background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
|
|
border-color: color-mix(in oklch, var(--primary) 32%, transparent) !important;
|
|
box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15) !important;
|
|
}
|
|
|
|
body.console-v2 :is(.v2-extension-linkage, .v2-sidebar-footer) {
|
|
color: var(--muted-foreground) !important;
|
|
border-color: var(--glass-line) !important;
|
|
}
|
|
|
|
/* Dialogs and secondary pages ------------------------------------------- */
|
|
body.console-v2 :is(
|
|
.mode-gallery-backdrop,
|
|
.mode-editor-backdrop,
|
|
.energy-monitor-layer,
|
|
.device-power-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 .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(
|
|
.mode-gallery,
|
|
.mode-editor,
|
|
.v2-nfc-dialog,
|
|
.v2-gscu-tcp-dialog,
|
|
.v2-pet-settings-dialog,
|
|
.energy-monitor-page
|
|
) {
|
|
color: var(--card-foreground) !important;
|
|
background:
|
|
linear-gradient(145deg, oklch(0.36 0.065 279 / 0.14), transparent 42%),
|
|
oklch(0.15 0.045 285 / 0.88) !important;
|
|
border-color: var(--glass-line-strong) !important;
|
|
box-shadow: 0 28px 84px oklch(0.03 0.03 286 / 0.58), inset 0 1px 0 var(--glass-highlight) !important;
|
|
-webkit-backdrop-filter: blur(24px) saturate(1.24);
|
|
backdrop-filter: blur(24px) saturate(1.24);
|
|
}
|
|
|
|
body.console-v2 :is(
|
|
.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
|
|
) {
|
|
color: var(--card-foreground) !important;
|
|
background: var(--glass-card) !important;
|
|
border-color: var(--glass-line) !important;
|
|
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;
|
|
border-color: var(--glass-line) !important;
|
|
}
|
|
|
|
body.console-v2 :is(.mode-gallery-close, .mode-editor-header > button, .v2-extension-dialog [data-dialog-close], #energyMonitorClose):is(:hover, :focus-visible) {
|
|
color: var(--foreground) !important;
|
|
background: var(--glass-card-hover) !important;
|
|
}
|
|
|
|
/* Persistent day / night appearance ------------------------------------- */
|
|
.glass-theme-toggle {
|
|
width: 44px;
|
|
height: 44px;
|
|
position: fixed;
|
|
left: max(16px, env(safe-area-inset-left));
|
|
bottom: max(16px, env(safe-area-inset-bottom));
|
|
z-index: 1100;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
color: var(--foreground);
|
|
background: var(--glass-card-hover);
|
|
border: 1px solid var(--glass-line-strong);
|
|
border-radius: 50%;
|
|
box-shadow: 0 12px 30px color-mix(in oklch, var(--foreground) 18%, transparent), inset 0 1px 0 var(--glass-highlight);
|
|
-webkit-backdrop-filter: blur(18px) saturate(1.24);
|
|
backdrop-filter: blur(18px) saturate(1.24);
|
|
cursor: pointer;
|
|
transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
|
|
}
|
|
|
|
.glass-theme-toggle:is(:hover, :focus-visible) {
|
|
color: var(--primary-foreground);
|
|
background: var(--primary);
|
|
border-color: color-mix(in oklch, var(--primary) 72%, white 18%);
|
|
transform: translateY(-2px) rotate(6deg);
|
|
}
|
|
|
|
.glass-theme-toggle svg {
|
|
grid-area: 1 / 1;
|
|
width: 21px;
|
|
height: 21px;
|
|
transition: opacity 150ms ease, transform 180ms ease;
|
|
}
|
|
|
|
html[data-glass-theme="dark"] .glass-theme-toggle [data-theme-icon="moon"],
|
|
html[data-glass-theme="light"] .glass-theme-toggle [data-theme-icon="sun"] {
|
|
opacity: 0;
|
|
transform: scale(0.5) rotate(-35deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
html[data-glass-theme="dark"] .glass-theme-toggle [data-theme-icon="sun"],
|
|
html[data-glass-theme="light"] .glass-theme-toggle [data-theme-icon="moon"] {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2::before {
|
|
background: oklch(0.78 0.14 220 / 0.54);
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2::after {
|
|
background: oklch(0.8 0.15 338 / 0.5);
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 .v2-boot-screen {
|
|
color: var(--foreground);
|
|
background:
|
|
radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 18rem),
|
|
var(--background);
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2.v2-passive-display.v2-interactive-sync .command-panel.v2-sidebar {
|
|
background:
|
|
linear-gradient(165deg, color-mix(in oklch, var(--primary) 6%, transparent), color-mix(in oklch, var(--card) 76%, transparent)) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel > .v2-mode-rail {
|
|
background:
|
|
linear-gradient(110deg, color-mix(in oklch, var(--primary) 9%, transparent), transparent 44%),
|
|
color-mix(in oklch, var(--glass-panel) 92%, transparent) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-panel-shadow);
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2.v2-passive-display.v2-interactive-sync :is(
|
|
#assistantDrawer,
|
|
.joint-twin-shell > .twin-band,
|
|
#v2DevicePanel,
|
|
#v2ExtensionPanel .v2-extension-sync-mount
|
|
) {
|
|
background:
|
|
linear-gradient(145deg, color-mix(in oklch, var(--primary) 5%, transparent), transparent 46%),
|
|
var(--glass-panel) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 :is(
|
|
.v2-operation-heading,
|
|
.joint-twin-shell .twin-heading,
|
|
.v2-device-sync-board > header,
|
|
.v2-extension-sync-heading
|
|
) {
|
|
background: color-mix(in oklch, var(--card) 72%, transparent) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer {
|
|
background: color-mix(in oklch, var(--popover) 70%, transparent) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-panel-shadow) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2.v2-passive-display.v2-interactive-sync .joint-twin-shell .twin-stage {
|
|
background:
|
|
radial-gradient(ellipse at 53% 58%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 44%),
|
|
radial-gradient(circle at 82% 8%, color-mix(in oklch, var(--status-info) 11%, transparent), transparent 34%),
|
|
linear-gradient(160deg, color-mix(in oklch, var(--card) 58%, transparent), color-mix(in oklch, var(--accent) 42%, transparent)) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 .v2-twin-hotspot-label,
|
|
html[data-glass-theme="light"] body.console-v2 .v2-twin-device-popover {
|
|
background: color-mix(in oklch, var(--popover) 88%, transparent) !important;
|
|
box-shadow: var(--glass-panel-shadow), inset 0 1px 0 var(--glass-highlight) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 :is(input, textarea, select),
|
|
html[data-glass-theme="light"] body.console-v2 .v2-pet-nfc-field output {
|
|
background: color-mix(in oklch, var(--popover) 72%, transparent) !important;
|
|
box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
|
|
}
|
|
|
|
html[data-glass-theme="light"] body.console-v2 :is(
|
|
.mode-gallery,
|
|
.mode-editor,
|
|
.v2-nfc-dialog,
|
|
.v2-gscu-tcp-dialog,
|
|
.v2-pet-settings-dialog,
|
|
.energy-monitor-page
|
|
) {
|
|
background:
|
|
linear-gradient(145deg, color-mix(in oklch, var(--primary) 6%, transparent), transparent 44%),
|
|
color-mix(in oklch, var(--popover) 94%, transparent) !important;
|
|
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);
|
|
}
|
|
|
|
body.console-v2 *::-webkit-scrollbar-track {
|
|
background: color-mix(in oklch, var(--background) 66%, transparent);
|
|
}
|
|
|
|
body.console-v2 *::-webkit-scrollbar-thumb {
|
|
background: color-mix(in oklch, var(--primary) 68%, white 10%);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
@media (max-width: 900px), (max-height: 680px) {
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .workspace,
|
|
body.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .workspace {
|
|
width: 100vw !important;
|
|
height: 100dvh !important;
|
|
margin: 0 !important;
|
|
border-width: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body.console-v2::before,
|
|
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;
|
|
}
|
|
}
|