feat(n7web): add pet settings and day night themes
This commit is contained in:
Miayui
@@ -98,6 +98,95 @@ body.console-v2 {
|
||||
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);
|
||||
--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: "";
|
||||
@@ -134,18 +223,19 @@ body.console-v2 .v2-boot-screen {
|
||||
|
||||
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: calc(100vw - 28px) !important;
|
||||
height: calc(100dvh - 28px) !important;
|
||||
width: 100vw !important;
|
||||
max-width: none !important;
|
||||
height: 100dvh !important;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 14px !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
color: var(--foreground);
|
||||
background: var(--glass-shell) !important;
|
||||
border: 1px solid var(--glass-line-strong);
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
|
||||
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);
|
||||
}
|
||||
@@ -384,6 +474,7 @@ body.console-v2 :is(
|
||||
.v2-extension-empty,
|
||||
.v2-pet-card-region,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.joint-seat-panel,
|
||||
.domain-panel,
|
||||
@@ -405,6 +496,7 @@ body.console-v2 :is(
|
||||
.v2-extension-gateway,
|
||||
.v2-extension-synced-device,
|
||||
.v2-pet-card,
|
||||
.v2-pet-presence-card,
|
||||
.v2-device-card,
|
||||
.joint-seat-panel,
|
||||
.domain-panel
|
||||
@@ -441,6 +533,7 @@ body.console-v2 :is(input, textarea)::placeholder {
|
||||
|
||||
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,
|
||||
@@ -455,6 +548,7 @@ body.console-v2 :is(
|
||||
|
||||
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,
|
||||
@@ -478,7 +572,7 @@ body.console-v2 .v2-pet-card > header > button:is(:hover, :focus-visible) {
|
||||
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-card-region > header > div > span) {
|
||||
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;
|
||||
@@ -507,6 +601,7 @@ body.console-v2 :is(
|
||||
.mode-editor,
|
||||
.v2-nfc-dialog,
|
||||
.v2-gscu-tcp-dialog,
|
||||
.v2-pet-settings-dialog,
|
||||
.energy-monitor-page
|
||||
) {
|
||||
color: var(--card-foreground) !important;
|
||||
@@ -547,13 +642,147 @@ body.console-v2 :is(.mode-gallery-close, .mode-editor-header > button, .v2-exten
|
||||
background: var(--glass-card-hover) !important;
|
||||
}
|
||||
|
||||
/* Persistent day / night appearance ------------------------------------- */
|
||||
.glass-theme-toggle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
left: max(16px, env(safe-area-inset-left));
|
||||
bottom: max(16px, env(safe-area-inset-bottom));
|
||||
z-index: 1600;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Scrollbars ------------------------------------------------------------- */
|
||||
body.console-v2 * {
|
||||
scrollbar-color: color-mix(in oklch, var(--primary) 70%, white 8%) oklch(0.08 0.025 286 / 0.32);
|
||||
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: oklch(0.08 0.025 286 / 0.28);
|
||||
background: color-mix(in oklch, var(--background) 66%, transparent);
|
||||
}
|
||||
|
||||
body.console-v2 *::-webkit-scrollbar-thumb {
|
||||
|
||||
Reference in New Issue
Block a user