diff --git a/README.md b/README.md index b0552712..517a6eda 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,34 @@ -# Codex Dream Skin +# Codex Dream Skin · 泽音 Melody 主题版

中文 · English

+## 🌙 泽音 Melody · 樽前月下 + +这是为 Codex 桌面端制作的「泽音 Melody · 樽前月下」主题美化包。主题以月夜、虹彩与粉蓝色调为核心： +新建任务首页展示泽音 Melody 插画，普通任务对话页切换为安静的深紫纯色背景，在保留原生交互的同时， +加入粉色细描边、柔和外光晕、透明标题栏和白色装饰题字。 + +

+ 泽音 Melody · 樽前月下主题实机效果
+ Windows Codex 桌面端实机效果 · 新建任务首页 +

+ +### 使用方法 + +1. 安装 [Codex Dream Skin 最新版本](https://github.com/Fei-Away/Codex-Dream-Skin/releases)，首次安装后启动一次。 +2. 下载 [`zeyin-melody-home-only-v2.zip`](./output/theme-packs/zeyin-melody-home-only-v2.zip)，不要解压或修改扩展名。 +3. Windows 用户在系统托盘打开 Codex Dream Skin 菜单，选择“导入主题 ZIP…”；macOS 用户在菜单栏选择同名选项。 +4. 导入成功后，在“已保存的主题”中选择“泽音 Melody”并应用。 +5. 如果 Codex 已经打开但画面没有立即更新，请完全退出 Codex 后重新启动。 + +主题包采用“首页插画、普通对话纯色”的显示方式。完整源文件位于 +[`custom-themes/zeyin-melody/`](./custom-themes/zeyin-melody/)，也可按下文的手动导入方式安装。 + +> 本主题是非官方的粉丝向美化作品，不代表 OpenAI、Codex、VirtualReal 或相关艺人的官方合作与背书。 +> 请仅在符合图片来源授权及适用平台规则的范围内使用和再分发素材。 +

给 Codex 桌面端换一张会呼吸的脸。
外部主题 / 换肤工具 · 本机 CDP 注入 · 不改官方安装包 diff --git a/custom-themes/zeyin-melody/background.jpg b/custom-themes/zeyin-melody/background.jpg new file mode 100644 index 00000000..9627d2e7 Binary files /dev/null and b/custom-themes/zeyin-melody/background.jpg differ diff --git a/custom-themes/zeyin-melody/theme.css b/custom-themes/zeyin-melody/theme.css new file mode 100644 index 00000000..84db1b05 --- /dev/null +++ b/custom-themes/zeyin-melody/theme.css @@ -0,0 +1,30 @@ +[data-ds-part="root"] { + color: var(--ds-theme-color-text); +} + +[data-ds-part="sidebar"] { + background-color: rgba(23, 24, 43, .76); + border-right-color: rgba(241, 127, 159, .24); +} + +[data-ds-part="header"] { + background-color: rgba(23, 24, 43, .56); + border-bottom-color: rgba(124, 226, 232, .18); +} + +[data-ds-part="message"] { + border-color: rgba(255, 212, 223, .16); + border-radius: 18px; +} + +[data-ds-part="composer"] { + background-color: rgba(36, 33, 58, .82); + border-color: rgba(241, 127, 159, .34); + border-radius: 20px; +} + +[data-ds-part="dialog"] { + background-color: rgba(23, 24, 43, .90); + border-color: rgba(124, 226, 232, .26); + border-radius: 18px; +} diff --git a/custom-themes/zeyin-melody/theme.json b/custom-themes/zeyin-melody/theme.json new file mode 100644 index 00000000..bbe94dc5 --- /dev/null +++ b/custom-themes/zeyin-melody/theme.json @@ -0,0 +1,34 @@ +{ + "schemaVersion": 1, + "id": "local-zeyin-melody-rainbow-ibis", + "name": "泽音 Melody", + "brandSubtitle": "SCARLET IBIS · CODEX", + "tagline": "飞过阴霾，让虹光与歌声落在今天的工作台。", + "projectPrefix": "选择项目 · ", + "projectLabel": "◉ 选择项目", + "statusText": "MELODY SIGNAL ONLINE", + "quote": "SING THROUGH THE STORM", + "image": "background.jpg", + "appearance": "dark", + "art": { + "focusX": 0.78, + "focusY": 0.44, + "safeArea": "left", + "taskMode": "off" + }, + "colors": { + "background": "#17182b", + "panel": "#24213a", + "panelAlt": "#302a49", + "accent": "#f17f9f", + "accentAlt": "#7ce2e8", + "secondary": "#b85a79", + "highlight": "#ffd4df", + "text": "#fff7fb", + "muted": "#d8c9da", + "line": "rgba(241, 127, 159, .30)" + }, + "promoTitle": "Codex Dream Skin", + "promoSub": "泽音 Melody · 虹羽之声", + "promoUrl": "https://space.bilibili.com/1203217682" +} diff --git a/macos/assets/dream-skin.css b/macos/assets/dream-skin.css index bd112ec0..8c8094ae 100644 --- a/macos/assets/dream-skin.css +++ b/macos/assets/dream-skin.css @@ -480,6 +480,15 @@ html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art- content: none; } +/* 无任务插画时保持界面安静：保留 Codex 原生标题栏控件， + 仅移除 Dream Skin 的任务页装饰文字。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) > header.app-header-tint::before, +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) > header.app-header-tint::after { + content: none; +} + html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) > :not(header.app-header-tint) { position: relative; z-index: 1; @@ -521,6 +530,13 @@ html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) articl backdrop-filter: blur(7px) saturate(105%); } +/* 纯色任务页使用居中的粉色柔光，不保留带位移的深色圆角投影。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) article { + border-color: rgb(var(--ds-accent-rgb) / .36); + box-shadow: 0 0 14px rgb(var(--ds-accent-rgb) / .12); +} + html[data-dream-skin="active"][data-dream-shell="light"] main.main-surface:not(:has([role="main"])) article { background: rgb(var(--ds-panel-rgb) / .72); } @@ -670,6 +686,49 @@ html[data-dream-skin="active"] content: none !important; } +/* Codex 26.721+ 已不再保留可用的紧凑 hero 插画卡片。宽图会在下方规则中铺满窗口； + 方图和竖图则在首页主表面只绘制一次。用 banner 锚点限定新版 DOM， + 避免旧版首页同时在主表面和原生 hero 卡片重复绘图。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) { + background-color: var(--ds-bg) !important; + background-image: + linear-gradient(90deg, + rgb(var(--ds-bg-rgb) / .62) 0%, + rgb(var(--ds-bg-rgb) / .28) 56%, + rgb(var(--ds-bg-rgb) / .10) 100%), + var(--dream-skin-art) !important; + background-position: center, var(--ds-art-position) !important; + background-size: 100% 100%, cover !important; + background-repeat: no-repeat !important; +} + +/* 新版首页的固定标题栏覆盖在主表面插画之上。方图回退模式下将其透明化， + 让背景从窗口内容区顶部连续显示，避免形成深色横带。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) + > header.app-header-tint { + background: transparent !important; + border-bottom: 0 !important; + box-shadow: none !important; + backdrop-filter: none !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) + [class~="app-shell-main-content-top-fade"] { + background: transparent !important; + opacity: 0 !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners)::after { + color: rgb(255 255 255 / .96) !important; + text-shadow: + 0 1px 3px rgb(var(--ds-bg-rgb) / .90), + 0 0 12px rgb(var(--ds-bg-rgb) / .58) !important; +} + /* Codex 26.721+: this chain (3-6 first-child levels deep) targets the old compact hero-art card that used to live inside div:first-child's second level. That level is now the empty .home-banners slot (see #244), so on @@ -1059,6 +1118,44 @@ html[data-dream-skin="active"][data-dream-shell="light"][data-dream-art-wide="tr backdrop-filter: blur(8px) saturate(102%) !important; } +/* Codex 原生在 Tailwind utilities 层中用 !important 把输入框边框宽度归零。 + 同层覆写后，主题规则的更高特异性才能真正恢复粉色细描边。 */ +@layer utilities { + html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) .composer-surface-chrome { + border-width: 1px !important; + border-style: solid !important; + border-color: rgb(var(--ds-accent-rgb) / .72) !important; + border-radius: 22px !important; + background: rgb(var(--ds-panel-2-rgb)) !important; + box-shadow: 0 0 18px rgb(var(--ds-accent-rgb) / .26) !important; + backdrop-filter: none !important; + } +} + +/* Codex 在输入框后方另设一个深灰色滚动遮罩。保留遮挡滚动文字的渐变， + 但让它使用任务页主题底色，避免形成独立的深色圆角底板。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) + div.sticky.bottom-0 [class*="bg-gradient-to-t"][class*="via-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb)) 50%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) + div.sticky.bottom-0 [class*="pointer-events-none"][class*="bg-gradient-to-t"][class*="from-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + html[data-dream-skin="active"] [class*="_homeUtilityBar_"] button, html[data-dream-skin="active"] .composer-surface-chrome button:not([class~="bg-token-foreground"]) { color: var(--ds-muted) !important; diff --git a/output/theme-packs/zeyin-melody-home-only-v2.zip b/output/theme-packs/zeyin-melody-home-only-v2.zip new file mode 100644 index 00000000..25777e29 Binary files /dev/null and b/output/theme-packs/zeyin-melody-home-only-v2.zip differ diff --git a/output/verification/zeyin-melody-home-white-quote-v15.png b/output/verification/zeyin-melody-home-white-quote-v15.png new file mode 100644 index 00000000..4a718e42 Binary files /dev/null and b/output/verification/zeyin-melody-home-white-quote-v15.png differ diff --git a/runtime/dream-skin.css b/runtime/dream-skin.css index b2559ffc..1b6c6423 100644 --- a/runtime/dream-skin.css +++ b/runtime/dream-skin.css @@ -480,6 +480,15 @@ html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art- content: none; } +/* 无任务插画时保持界面安静：保留 Codex 原生标题栏控件， + 仅移除 Dream Skin 的任务页装饰文字。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > __DREAM_SELECTOR_HEADER_TINT__::before, +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > __DREAM_SELECTOR_HEADER_TINT__::after { + content: none; +} + html[data-dream-skin="active"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > :not(__DREAM_SELECTOR_HEADER_TINT__) { position: relative; z-index: 1; @@ -521,6 +530,13 @@ html[data-dream-skin="active"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SE backdrop-filter: blur(7px) saturate(105%); } +/* 纯色任务页使用居中的粉色柔光，不保留带位移的深色圆角投影。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) article { + border-color: rgb(var(--ds-accent-rgb) / .36); + box-shadow: 0 0 14px rgb(var(--ds-accent-rgb) / .12); +} + html[data-dream-skin="active"][data-dream-shell="light"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) article { background: rgb(var(--ds-panel-rgb) / .72); } @@ -670,6 +686,49 @@ html[data-dream-skin="active"] content: none !important; } +/* Codex 26.721+ 已不再保留可用的紧凑 hero 插画卡片。宽图会在下方规则中铺满窗口； + 方图和竖图则在首页主表面只绘制一次。用 banner 锚点限定新版 DOM， + 避免旧版首页同时在主表面和原生 hero 卡片重复绘图。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + __DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__) { + background-color: var(--ds-bg) !important; + background-image: + linear-gradient(90deg, + rgb(var(--ds-bg-rgb) / .62) 0%, + rgb(var(--ds-bg-rgb) / .28) 56%, + rgb(var(--ds-bg-rgb) / .10) 100%), + var(--dream-skin-art) !important; + background-position: center, var(--ds-art-position) !important; + background-size: 100% 100%, cover !important; + background-repeat: no-repeat !important; +} + +/* 新版首页的固定标题栏覆盖在主表面插画之上。方图回退模式下将其透明化， + 让背景从窗口内容区顶部连续显示，避免形成深色横带。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + __DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__) + > __DREAM_SELECTOR_HEADER_TINT__ { + background: transparent !important; + border-bottom: 0 !important; + box-shadow: none !important; + backdrop-filter: none !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + __DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__) + [class~="app-shell-main-content-top-fade"] { + background: transparent !important; + opacity: 0 !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + __DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__)::after { + color: rgb(255 255 255 / .96) !important; + text-shadow: + 0 1px 3px rgb(var(--ds-bg-rgb) / .90), + 0 0 12px rgb(var(--ds-bg-rgb) / .58) !important; +} + /* Codex 26.721+: this chain (3-6 first-child levels deep) targets the old compact hero-art card that used to live inside div:first-child's second level. That level is now the empty .home-banners slot (see #244), so on @@ -1059,6 +1118,44 @@ html[data-dream-skin="active"][data-dream-shell="light"][data-dream-art-wide="tr backdrop-filter: blur(8px) saturate(102%) !important; } +/* Codex 原生在 Tailwind utilities 层中用 !important 把输入框边框宽度归零。 + 同层覆写后，主题规则的更高特异性才能真正恢复粉色细描边。 */ +@layer utilities { + html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) __DREAM_SELECTOR_COMPOSER_CHROME__ { + border-width: 1px !important; + border-style: solid !important; + border-color: rgb(var(--ds-accent-rgb) / .72) !important; + border-radius: 22px !important; + background: rgb(var(--ds-panel-2-rgb)) !important; + box-shadow: 0 0 18px rgb(var(--ds-accent-rgb) / .26) !important; + backdrop-filter: none !important; + } +} + +/* Codex 在输入框后方另设一个深灰色滚动遮罩。保留遮挡滚动文字的渐变， + 但让它使用任务页主题底色，避免形成独立的深色圆角底板。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) + div.sticky.bottom-0 [class*="bg-gradient-to-t"][class*="via-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb)) 50%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) + div.sticky.bottom-0 [class*="pointer-events-none"][class*="bg-gradient-to-t"][class*="from-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + html[data-dream-skin="active"] __DREAM_SELECTOR_HOME_UTILITY__ button, html[data-dream-skin="active"] __DREAM_SELECTOR_COMPOSER_CHROME__ button:not([class~="bg-token-foreground"]) { color: var(--ds-muted) !important; diff --git a/windows/assets/dream-skin.css b/windows/assets/dream-skin.css index bd112ec0..8c8094ae 100644 --- a/windows/assets/dream-skin.css +++ b/windows/assets/dream-skin.css @@ -480,6 +480,15 @@ html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art- content: none; } +/* 无任务插画时保持界面安静：保留 Codex 原生标题栏控件， + 仅移除 Dream Skin 的任务页装饰文字。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) > header.app-header-tint::before, +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) > header.app-header-tint::after { + content: none; +} + html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) > :not(header.app-header-tint) { position: relative; z-index: 1; @@ -521,6 +530,13 @@ html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) articl backdrop-filter: blur(7px) saturate(105%); } +/* 纯色任务页使用居中的粉色柔光，不保留带位移的深色圆角投影。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) article { + border-color: rgb(var(--ds-accent-rgb) / .36); + box-shadow: 0 0 14px rgb(var(--ds-accent-rgb) / .12); +} + html[data-dream-skin="active"][data-dream-shell="light"] main.main-surface:not(:has([role="main"])) article { background: rgb(var(--ds-panel-rgb) / .72); } @@ -670,6 +686,49 @@ html[data-dream-skin="active"] content: none !important; } +/* Codex 26.721+ 已不再保留可用的紧凑 hero 插画卡片。宽图会在下方规则中铺满窗口； + 方图和竖图则在首页主表面只绘制一次。用 banner 锚点限定新版 DOM， + 避免旧版首页同时在主表面和原生 hero 卡片重复绘图。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) { + background-color: var(--ds-bg) !important; + background-image: + linear-gradient(90deg, + rgb(var(--ds-bg-rgb) / .62) 0%, + rgb(var(--ds-bg-rgb) / .28) 56%, + rgb(var(--ds-bg-rgb) / .10) 100%), + var(--dream-skin-art) !important; + background-position: center, var(--ds-art-position) !important; + background-size: 100% 100%, cover !important; + background-repeat: no-repeat !important; +} + +/* 新版首页的固定标题栏覆盖在主表面插画之上。方图回退模式下将其透明化， + 让背景从窗口内容区顶部连续显示，避免形成深色横带。 */ +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) + > header.app-header-tint { + background: transparent !important; + border-bottom: 0 !important; + box-shadow: none !important; + backdrop-filter: none !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners) + [class~="app-shell-main-content-top-fade"] { + background: transparent !important; + opacity: 0 !important; +} + +html[data-dream-skin="active"][data-dream-art-wide="false"] + main.main-surface:has([role="main"] .home-banners)::after { + color: rgb(255 255 255 / .96) !important; + text-shadow: + 0 1px 3px rgb(var(--ds-bg-rgb) / .90), + 0 0 12px rgb(var(--ds-bg-rgb) / .58) !important; +} + /* Codex 26.721+: this chain (3-6 first-child levels deep) targets the old compact hero-art card that used to live inside div:first-child's second level. That level is now the empty .home-banners slot (see #244), so on @@ -1059,6 +1118,44 @@ html[data-dream-skin="active"][data-dream-shell="light"][data-dream-art-wide="tr backdrop-filter: blur(8px) saturate(102%) !important; } +/* Codex 原生在 Tailwind utilities 层中用 !important 把输入框边框宽度归零。 + 同层覆写后，主题规则的更高特异性才能真正恢复粉色细描边。 */ +@layer utilities { + html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) .composer-surface-chrome { + border-width: 1px !important; + border-style: solid !important; + border-color: rgb(var(--ds-accent-rgb) / .72) !important; + border-radius: 22px !important; + background: rgb(var(--ds-panel-2-rgb)) !important; + box-shadow: 0 0 18px rgb(var(--ds-accent-rgb) / .26) !important; + backdrop-filter: none !important; + } +} + +/* Codex 在输入框后方另设一个深灰色滚动遮罩。保留遮挡滚动文字的渐变， + 但让它使用任务页主题底色，避免形成独立的深色圆角底板。 */ +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) + div.sticky.bottom-0 [class*="bg-gradient-to-t"][class*="via-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb)) 50%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + +html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"]) + main.main-surface:not(:has([role="main"])) + div.sticky.bottom-0 [class*="pointer-events-none"][class*="bg-gradient-to-t"][class*="from-token-main-surface-primary"] { + background-image: linear-gradient( + to top, + rgb(var(--ds-bg-rgb)) 0%, + rgb(var(--ds-bg-rgb) / 0) 100% + ) !important; +} + html[data-dream-skin="active"] [class*="_homeUtilityBar_"] button, html[data-dream-skin="active"] .composer-surface-chrome button:not([class~="bg-token-foreground"]) { color: var(--ds-muted) !important; diff --git a/windows/tests/run-tests.ps1 b/windows/tests/run-tests.ps1 index e25cf5b1..56eca7c9 100644 --- a/windows/tests/run-tests.ps1 +++ b/windows/tests/run-tests.ps1 @@ -1141,10 +1141,75 @@ try { 'background-position: var(--ds-art-position)', 'html[data-dream-skin="active"]', 'main.main-surface:has([role="main"])', + 'main.main-surface:has([role="main"] .home-banners)', 'main.main-surface:not(:has([role="main"]))' )) { if (-not $css.Contains($requiredCss)) { throw "Windows immersive CSS is missing: $requiredCss" } } + $quietTaskChromePattern = + '(?s)\[data-dream-task-mode="off"\].*?header\.app-header-tint::before,.*?' + + '\[data-dream-task-mode="off"\].*?header\.app-header-tint::after\s*\{\s*content:\s*none;' + if (-not [regex]::IsMatch($css, $quietTaskChromePattern)) { + throw 'Task mode off no longer removes Dream Skin decorative header labels.' + } + $quietTaskMessagePattern = + '(?s)\[data-dream-task-mode="off"\].*?main\.main-surface:not\(:has\(\[role="main"\]\)\) article\s*\{' + + '[^}]*border-color:\s*rgb\(var\(--ds-accent-rgb\) / \.36\);' + + '[^}]*box-shadow:\s*0 0 14px rgb\(var\(--ds-accent-rgb\) / \.12\);' + if (-not [regex]::IsMatch($css, $quietTaskMessagePattern)) { + throw 'Task mode off no longer replaces dark message-card edges with theme colors.' + } + $quietTaskComposerPattern = + '(?s)\[data-dream-task-mode="off"\].*?main\.main-surface:not\(:has\(\[role="main"\]\)\) ' + + '\.composer-surface-chrome\s*\{[^}]*border-width:\s*1px !important;' + + '[^}]*border-style:\s*solid !important;' + + '[^}]*border-color:\s*rgb\(var\(--ds-accent-rgb\) / \.72\) !important;' + + '[^}]*border-radius:\s*22px !important;' + + '[^}]*background:\s*rgb\(var\(--ds-panel-2-rgb\)\) !important;' + + '[^}]*box-shadow:\s*0 0 18px rgb\(var\(--ds-accent-rgb\) / \.26\) !important;' + + '[^}]*backdrop-filter:\s*none !important;' + if (-not [regex]::IsMatch($css, $quietTaskComposerPattern)) { + throw 'Task mode off no longer replaces the dark composer edge with theme colors.' + } + $quietTaskComposerBackdropPattern = + '(?s)\[data-dream-task-mode="off"\].*?div\.sticky\.bottom-0 \[class\*="bg-gradient-to-t"\]' + + '\[class\*="via-token-main-surface-primary"\]\s*\{[^}]*' + + 'rgb\(var\(--ds-bg-rgb\)\) 0%,[^}]*rgb\(var\(--ds-bg-rgb\)\) 50%,[^}]*' + + 'rgb\(var\(--ds-bg-rgb\) / 0\) 100%[^}]*!important;.*?' + + 'div\.sticky\.bottom-0 \[class\*="pointer-events-none"\]\[class\*="bg-gradient-to-t"\]' + + '\[class\*="from-token-main-surface-primary"\]\s*\{[^}]*' + + 'rgb\(var\(--ds-bg-rgb\)\) 0%,[^}]*rgb\(var\(--ds-bg-rgb\) / 0\) 100%[^}]*!important;' + if (-not [regex]::IsMatch($css, $quietTaskComposerBackdropPattern)) { + throw 'Task mode off no longer recolors the native composer backdrop gradient.' + } + $squareHomeHeaderPattern = + '(?s)\[data-dream-art-wide="false"\].*?' + + 'main\.main-surface:has\(\[role="main"\] \.home-banners\)\s*>\s*header\.app-header-tint\s*\{' + + '[^}]*background:\s*transparent !important;' + + '[^}]*border-bottom:\s*0 !important;' + + '[^}]*box-shadow:\s*none !important;' + + '[^}]*backdrop-filter:\s*none !important;' + if (-not [regex]::IsMatch($css, $squareHomeHeaderPattern)) { + throw 'Square-art home mode no longer reveals artwork behind the fixed header.' + } + $squareHomeTopFadePattern = + '(?s)\[data-dream-art-wide="false"\].*?' + + 'main\.main-surface:has\(\[role="main"\] \.home-banners\).*?' + + '\[class~="app-shell-main-content-top-fade"\]\s*\{' + + '[^}]*background:\s*transparent !important;' + + '[^}]*opacity:\s*0 !important;' + if (-not [regex]::IsMatch($css, $squareHomeTopFadePattern)) { + throw 'Square-art home mode no longer suppresses the native dark top-fade band.' + } + $squareHomeQuotePattern = + '(?s)\[data-dream-art-wide="false"\].*?' + + 'main\.main-surface:has\(\[role="main"\] \.home-banners\)::after\s*\{' + + '[^}]*color:\s*rgb\(255 255 255 / \.96\) !important;' + + '[^}]*0 1px 3px rgb\(var\(--ds-bg-rgb\) / \.90\),' + + '[^}]*0 0 12px rgb\(var\(--ds-bg-rgb\) / \.58\) !important;' + if (-not [regex]::IsMatch($css, $squareHomeQuotePattern)) { + throw 'Square-art home mode no longer keeps the decorative quote white and legible.' + } if ($css.Contains('home-suggestion-list-item') -or $css.Contains('.dream-skin-home') -or $css.Contains('.dream-home') -or $css.Contains('.dream-task') -or $css.Contains('codex-dream-skin-chrome')) {