fix(windows): align native theme surfaces with macOS

Author: Fei-Away

windows/assets/dream-skin.css

@@ -74,6 +74,26 @@ html.codex-dream-skin aside.app-shell-left-panel nav {
   background: transparent !important;
 }
 
+/* Settings replaces the normal rail with a native light search field. Keep
+   that field on the same surface as the themed sidebar in either shell mode. */
+html.codex-dream-skin aside.app-shell-left-panel div:has(> input[type="text"]) {
+  color: var(--dream-text) !important;
+  background: var(--dream-immersive-composer) !important;
+  border-color: var(--dream-line-soft) !important;
+  box-shadow: inset 0 0 0 1px var(--dream-immersive-line) !important;
+  backdrop-filter: none !important;
+}
+
+html.codex-dream-skin aside.app-shell-left-panel input[type="text"] {
+  color: var(--dream-text) !important;
+  caret-color: var(--dream-accent) !important;
+}
+
+html.codex-dream-skin aside.app-shell-left-panel input[type="text"]::placeholder {
+  color: var(--dream-text-muted) !important;
+  opacity: 1 !important;
+}
+
 html.codex-dream-skin aside.app-shell-left-panel button {
   color: var(--dream-text) !important;
   transition: background-color 180ms cubic-bezier(.22, 1, .36, 1), color 180ms cubic-bezier(.22, 1, .36, 1) !important;
@@ -115,16 +135,16 @@ html.codex-dream-skin main.main-surface > header.app-header-tint {
 
 /* Wide art also reaches the native application menu, which sits outside the
    main surface and needs its own dark-theme legibility layer. */
-html.codex-dream-skin.dream-theme-dark [class~="group/application-menu-top-bar"] {
+html.codex-dream-skin [class~="group/application-menu-top-bar"] {
   color: var(--dream-text) !important;
   background: color-mix(in oklab, var(--dream-sidebar) 90%, transparent) !important;
   border-bottom: 1px solid var(--dream-line-soft) !important;
   box-shadow: 0 1px 12px color-mix(in oklab, var(--dream-canvas) 72%, transparent) !important;
   backdrop-filter: blur(16px) saturate(.9) !important;
 }
 
-html.codex-dream-skin.dream-theme-dark [class~="group/application-menu-top-bar"] button,
-html.codex-dream-skin.dream-theme-dark [class~="group/application-menu-top-bar"] svg {
+html.codex-dream-skin [class~="group/application-menu-top-bar"] button,
+html.codex-dream-skin [class~="group/application-menu-top-bar"] svg {
   color: var(--dream-text) !important;
   text-shadow: 0 1px 2px color-mix(in oklab, var(--dream-canvas) 82%, transparent) !important;
 }
@@ -258,7 +278,9 @@ html.codex-dream-skin.dream-theme-light.dream-art-wide:is(.dream-task-ambient, .
 /* The home route keeps the source image expressive, with a semantic safe-area
    wash selected from image focus metadata. */
 html.codex-dream-skin .dream-home {
-  --thread-content-max-width: min(1180px, calc(100cqw - 56px)) !important;
+  /* Leave enough logical width for Codex's native four-card minimum after
+     Windows applies its Electron display zoom. */
+  --thread-content-max-width: min(1180px, calc(100cqw - 20px)) !important;
   overflow-x: hidden !important;
   background: var(--dream-surface) !important;
 }
@@ -278,13 +300,16 @@ html.codex-dream-skin .dream-home {
 .dream-home > div:first-child > div:first-child > div:first-child {
   position: relative !important;
   isolation: isolate;
-  width: calc(100% - 56px) !important;
+  width: calc(100% - 20px) !important;
   max-width: 1180px !important;
   height: clamp(230px, 27cqw, 326px) !important;
   min-height: 230px !important;
   flex: 0 1 auto !important;
   padding: 0 !important;
-  overflow: hidden !important;
+  /* macOS keeps this hero open because the native suggestion row is
+     absolutely positioned below it. Windows uses the same layout one level
+     deeper, so clipping this ancestor hides every suggestion card. */
+  overflow: visible !important;
   border: 1px solid var(--dream-line) !important;
   border-radius: 20px !important;
   background-image: var(--dream-art) !important;
@@ -303,6 +328,7 @@ html.codex-dream-skin.dream-art-wide .dream-home > div:first-child > div:first-c
   position: absolute;
   z-index: 0;
   inset: 0;
+  border-radius: inherit;
   pointer-events: none;
   background: linear-gradient(90deg, var(--dream-hero-shade) 0 32%, transparent 70%);
 }
@@ -432,7 +458,7 @@ html.codex-dream-skin .composer-surface-chrome {
   color: var(--dream-text) !important;
   border: 1px solid var(--dream-line) !important;
   border-radius: 18px !important;
-  background: color-mix(in oklab, var(--dream-surface-raised) 95%, transparent) !important;
+  background: var(--dream-immersive-composer) !important;
   box-shadow: 0 12px 34px color-mix(in oklab, var(--dream-accent) 8%, transparent) !important;
   backdrop-filter: blur(14px) saturate(1.06) !important;
 }
@@ -532,6 +558,13 @@ html.codex-dream-skin.dream-art-wide main.main-surface > header.app-header-tint
   filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--dream-canvas) 72%, transparent));
 }
 
+html.codex-dream-skin.dream-art-wide [class~="group/application-menu-top-bar"] {
+  background: transparent !important;
+  border-bottom: 0 !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
 html.codex-dream-skin.dream-art-wide main.main-surface [role="main"] {
   background: transparent !important;
   color: var(--dream-text) !important;
@@ -628,9 +661,9 @@ html.codex-dream-skin .dream-home-utility [role="button"] svg {
   color: currentColor !important;
 }
 
-/* Plugins, scheduled tasks, search and settings ship opaque native surfaces.
-   Re-skin them with theme tokens so light Codex shells do not paint a pink/white
-   slab over gothic wallpapers, and secondary copy does not stay purple. */
+/* Plugins, scheduled tasks and search routes ship opaque sticky wrappers.
+   Clear only full-window or sticky route chrome, leaving functional cards and
+   their hover states intact. */
 html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
   main.main-surface:not(.dream-home-shell) div.sticky:has(input[type="text"]),
 html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
@@ -639,104 +672,28 @@ html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
 }
 
 html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) div.no-drag:has(> input[type="text"]),
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) input[type="text"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) input[type="search"] {
-  color: var(--dream-text) !important;
-  caret-color: var(--dream-accent) !important;
+  main.main-surface:not(.dream-home-shell) div.no-drag:has(> input[type="text"]) {
   background: var(--dream-immersive-composer) !important;
-  border-color: var(--dream-line-soft) !important;
+  border: 0 !important;
   box-shadow: inset 0 0 0 1px var(--dream-immersive-line) !important;
   backdrop-filter: none !important;
 }
 
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) input::placeholder,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) [class*="placeholder"] {
-  color: var(--dream-text-muted) !important;
-  opacity: 1 !important;
-}
-
-/* Full-route opaque slabs (settings body, utility pages). */
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class~="bg-token-main-surface-primary"][class~="h-full"][class~="w-full"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class~="bg-token-main-surface-primary"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class~="bg-token-main-surface-secondary"] {
+/* Current Windows settings uses a plain full-size nested surface. The outer
+   task wash already provides readability; keep the image continuous here and
+   let native token-backed controls own only their local cards. */
+html.codex-dream-skin main.main-surface:not(.dream-home-shell)
+  [class~="main-surface"][class~="h-full"][class~="min-h-0"][class~="flex-col"] {
   color: var(--dream-text) !important;
-  background: color-mix(in oklab, var(--dream-surface) 72%, transparent) !important;
+  background: transparent !important;
   border-color: var(--dream-line-soft) !important;
   box-shadow: none !important;
 }
 
-/* Settings / scheduled cards and list rows. */
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class~="bg-token-main-surface-tertiary"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="bg-token-surface"],
 html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
   main.main-surface:not(.dream-home-shell)
-  [class*="border-token"] {
-  color: var(--dream-text) !important;
-  background: color-mix(in oklab, var(--dream-surface-raised) 78%, transparent) !important;
-  border-color: var(--dream-line-soft) !important;
-}
-
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="text-token"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) h1,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) h2,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) h3,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) p,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) li,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) span {
-  color: var(--dream-text) !important;
-}
-
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="text-token-text-secondary"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="text-token-text-tertiary"],
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="text-token-text-secondary"] *,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell)
-  [class*="text-token-text-tertiary"] * {
-  color: var(--dream-text-muted) !important;
-}
-
-/* Keep interactive controls legible without forcing native light chips. */
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) button:not([class~="bg-token-foreground"]),
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) [role="button"]:not([class~="bg-token-foreground"]) {
-  color: var(--dream-text) !important;
-}
-
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) button:not([class~="bg-token-foreground"]) svg,
-html.codex-dream-skin.dream-art-wide:is(.dream-task-ambient, .dream-task-banner)
-  main.main-surface:not(.dream-home-shell) [role="button"] svg {
-  color: currentColor !important;
+  [class~="bg-token-main-surface-primary"][class~="h-full"][class~="w-full"] {
+  background: transparent !important;
 }
 
 html.codex-dream-skin.dream-art-wide main.main-surface .app-shell-main-content-frame {