@dsh-tom/dsh-css 0.0.0-stage → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dsh-tom
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# dsh-css 发布与安装
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## 发布到 npmjs
+
+使用有 `dsh-tom` 组织发布权限的账号，在 PowerShell 执行：
+
+```powershell
+cd D:\product\dsh-css
+npm ci
+npm login --registry=https://registry.npmjs.org/
+npm publish --access public --registry=https://registry.npmjs.org/
+```
+
+按提示完成登录和验证，发布时会自动构建并运行测试。已发布的版本号不能重复使用；后续发新版前先执行 `npm version patch --no-git-tag-version`，安装时也换成新版本号。
+
+
+## 本地安装
+
+如果已经安装旧版，先在 dsh 的插件页卸载。
+
+打开 **插件 → 添加插件 → 安装第三方插件**，在“包名或地址”输入：
+
+```text
+D:\product\dsh-css\dsh-tom-dsh-css-0.1.2.tgz
+```
+
+安装并启用，然后完全退出并重新打开 dsh。
+
+## npmjs 安装
+
+包发布到 npmjs 后，先卸载已安装的旧版，再打开 **插件 → 添加插件 → 安装第三方插件**，输入：
+
+```text
+@dsh-tom/dsh-css@0.1.2
+```
+
+选择 **安装源 → npm 官方源**，安装并启用，然后完全退出并重新打开 dsh。

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: dsh-css
+      name: '@dsh-tom/dsh-css'

package/dist/client.js

@@ -0,0 +1,87 @@
+// Generated by scripts/build.mjs. Edit theme.css or src/client.js instead.
+window.__ModuleLoader__.load({
+  id: "@dsh-tom/dsh-css",
+  factory: (require) => {
+    const { createElement } = require('react');
+    const css = "/* 深色模式配色，保留内置文字、边框和语法高亮颜色。 */\nhtml body[data-ds-dark-theme] {\n  /* 区域 1：左侧会话列表；Windows 标题栏在下方单独设置。原 RGB(27, 27, 28)。 */\n  --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n\n  /* 区域 2：会话标题、正文以及应用基础背景。原 RGB(21, 21, 23)。 */\n  --dsw-alias-bg-base: rgb(39, 40, 34) !important;\n\n  /* 区域 3：主输入框。原 RGB(44, 44, 46)。 */\n  --dsw-specific-input-major: rgb(66, 67, 61) !important;\n\n  /* 会话内代码块及使用同一语义变量的输出区域。原 RGB(27, 27, 28)。 */\n  --dsw-alias-markdown-code-block: rgb(55, 56, 50) !important;\n}\n\n/* 标题栏及原生窗口按钮共享此颜色，会话列表继续使用原来的背景。 */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] {\n  --dsw-specific-sidebar-fill: rgb(32, 32, 32) !important;\n\n  & .BynINW_sidebarCol {\n    --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;\n  }\n}\n\n/* Windows 桌面版展开侧栏：左侧图标栏 + 右侧标题、会话列表。\n * 类名对应 DSH 0.2.1-rc.2；折叠侧栏继续使用宿主布局。\n * 复用品牌、新会话、面板和账户按钮，不改变原有点击事件。\n */\nhtml[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_collapsed) {\n  --dsh-css-rail-width: 52px;\n  display: grid;\n  grid-template-columns: var(--dsh-css-rail-width) minmax(0, 1fr);\n  grid-template-rows: 52px auto auto minmax(0, 1fr);\n  padding: 0;\n  position: relative;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 auto 0 0;\n    width: var(--dsh-css-rail-width);\n    background: rgb(32, 32, 32);\n    pointer-events: none;\n  }\n\n  & ._2H3hWW_logoRow {\n    grid-area: 1 / 2;\n    height: 52px;\n    margin: 0;\n    padding: 0 16px;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_logoRow::after {\n    content: \"DeepSeek\";\n    color: var(--dsw-alias-label-primary);\n    font: 600 18px / 24px var(--dsw-font-family);\n    letter-spacing: 0;\n  }\n\n  /* 原品牌按钮仍打开新会话，以首页图标呈现。 */\n  & ._2H3hWW_brand {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    justify-content: center;\n    background: var(--dsw-alias-interactive-bg-hover);\n    overflow: visible;\n  }\n\n  & ._2H3hWW_brandIdentity {\n    display: none;\n  }\n\n  & ._2H3hWW_brand::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 10v3h2v7a2 2 0 0 0 2 2h4v-7h4v7h4a2 2 0 0 0 2-2v-7h2v-3Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  &:has(._2H3hWW_panelActive) ._2H3hWW_brand {\n    background: transparent;\n  }\n\n  & ._2H3hWW_newSession {\n    grid-area: 2 / 2;\n    align-self: start;\n    z-index: 1;\n    height: 36px;\n    margin: 0 8px;\n    padding: 0 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    font-weight: 400;\n    justify-content: flex-start;\n  }\n\n  & ._2H3hWW_newSessionContent {\n    width: 100%;\n    justify-content: flex-start;\n    gap: 8px;\n  }\n\n  & ._2H3hWW_newSessionContent > svg {\n    display: none;\n  }\n\n  & ._2H3hWW_newSessionContent::before {\n    content: \"\";\n    flex: none;\n    width: 14px;\n    height: 14px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7M16 3a2.1 2.1 0 0 1 3 3L9 16l-4 1 1-4Z'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  & ._2H3hWW_panelList {\n    grid-area: 2 / 1;\n    position: relative;\n    align-self: start;\n    gap: 8px;\n    margin: 0;\n    padding: 0 8px;\n  }\n\n  & ._2H3hWW_panelRow {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    margin: 0;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & ._2H3hWW_panelTitle {\n    display: none;\n  }\n\n  & ._2H3hWW_panelGlyph > svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  & ._2H3hWW_panelActive {\n    color: var(--dsw-alias-label-primary);\n  }\n\n  /* 列表与导航共用网格行，顶部留出新会话按钮的位置。 */\n  & ._2H3hWW_regionArea {\n    grid-area: 2 / 2 / -1 / 3;\n    margin: 0;\n    padding: 44px 0 0 12px;\n  }\n\n  & ._2H3hWW_footArea {\n    grid-area: 4 / 1;\n    position: relative;\n    align-self: end;\n    gap: 8px;\n    padding: 8px;\n  }\n\n  & ._2H3hWW_footerActions:empty {\n    display: none;\n  }\n\n  /* 左下角设置按钮沿用账户菜单，设置、登录等入口仍由宿主提供。 */\n  & .ET65mq_trigger {\n    position: relative;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    border-radius: 8px;\n    color: var(--dsw-alias-label-tertiary);\n  }\n\n  & .ET65mq_trigger > * {\n    display: none;\n  }\n\n  & .ET65mq_trigger::before {\n    content: \"\";\n    width: 18px;\n    height: 18px;\n    background: currentColor;\n    mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 3-.5 2-2 1-2-.5-2 3.5L4.5 10v3L3 14l2 3.5 2-.5 2 1 .5 3h5l.5-3 2-1 2 .5 2-3.5-1.5-1v-3L21 9l-2-3.5-2 .5-2-1-.5-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E\") center / contain no-repeat;\n  }\n\n  /* 同一元素也显示等待状态，只隐藏普通的相对时间。 */\n  & .hIlkoa_sessionRow > .hIlkoa_time:not([aria-hidden=\"true\"]) {\n    display: none;\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):hover {\n    background: var(--dsw-alias-interactive-bg-hover);\n  }\n\n  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):focus-visible {\n    outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n    outline-offset: -2px;\n  }\n\n  /* 展开状态下宿主禁用了面板 Tooltip，为纯图标入口补上名称。 */\n  & :is(._2H3hWW_panelRow, .ET65mq_trigger):is(:hover, :focus-visible)::after {\n    content: attr(aria-label);\n    position: absolute;\n    z-index: 40;\n    left: 44px;\n    top: 50%;\n    transform: translateY(-50%);\n    padding: 4px 8px;\n    border: 1px solid var(--dsw-alias-border-l3);\n    border-radius: 6px;\n    background: var(--dsw-alias-bg-layer-1);\n    color: var(--dsw-alias-label-primary);\n    font: 12px / 20px var(--dsw-font-family);\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & .ET65mq_trigger:is(:hover, :focus-visible)::after {\n    content: \"设置\";\n  }\n}\n\n/* 悬浮卡片由宿主通过 portal 挂在侧栏外。 */\n.dsh-css-project {\n  display: none;\n}\n\nhtml[data-windows-titlebar] body[data-ds-dark-theme] .dsh-css-project {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 20px;\n\n  & svg {\n    flex: none;\n  }\n\n  & span {\n    overflow-wrap: anywhere;\n  }\n}\n";
+const inject = ['slots', 'sessions', 'workspaces', 'layout'];
+
+// createElement 和 css 由构建入口注入，React 复用宿主提供的模块。
+function ProjectHover({ sessionId, useWorkspaces, useSessions }) {
+  const workspace = useWorkspaces(state => state.items.find(item => item.sessionIds.includes(sessionId)));
+  const cwd = useSessions(state => state.byId[sessionId]?.cwd);
+  const path = workspace?.path || cwd;
+  const name = workspace?.title || path?.split(/[\\/]/).filter(Boolean).at(-1) || path || '未归属项目';
+
+  return createElement('div', { className: 'dsh-css-project', title: path },
+    createElement('svg', {
+      width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none',
+      stroke: 'currentColor', strokeWidth: 1.7, strokeLinejoin: 'round', 'aria-hidden': true,
+    }, createElement('path', { d: 'M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm0 2h18' })),
+    createElement('span', null, name));
+}
+
+// 使用 DSH 0.2.1-rc.2 的布局 action，让正文、右侧面板和拖拽手柄一起更新。
+function applySidebarWidth(layout) {
+  let frame;
+  let expanded = false;
+  let previousWidth;
+  const width = () => Number.parseFloat(frame?.style.getPropertyValue('--dsh-windows-sidebar-width'));
+  const restore = () => {
+    if (previousWidth !== undefined && width() === 328) layout.panels.setSidebar(previousWidth);
+    previousWidth = undefined;
+  };
+  const sync = () => {
+    const nextFrame = frame?.isConnected ? frame : document.querySelector('.BynINW_frame');
+    const enabled = document.documentElement.hasAttribute('data-windows-titlebar') &&
+      document.body.hasAttribute('data-ds-dark-theme');
+    const nextExpanded = enabled && nextFrame !== null && !nextFrame.hasAttribute('data-sidebar-collapsed');
+    const opening = nextExpanded && (!expanded || frame !== nextFrame);
+    frame = nextFrame;
+    expanded = nextExpanded;
+    if (!enabled) restore();
+    else if (opening) {
+      const current = width();
+      if (current > 0 && current < 328) {
+        previousWidth = current;
+        layout.panels.setSidebar(328);
+      }
+    }
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(document.body, {
+    childList: true, subtree: true, attributes: true,
+    attributeFilter: ['data-sidebar-collapsed', 'data-ds-dark-theme'],
+  });
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-windows-titlebar'] });
+  sync();
+  return () => {
+    observer.disconnect();
+    restore();
+  };
+}
+
+function apply(ctx) {
+  ctx.effect(() => {
+    const style = document.createElement('style');
+    style.dataset.plugin = 'dsh-css';
+    style.dataset.pluginCss = 'dsh-css/theme.css';
+    style.textContent = css;
+    document.head.appendChild(style);
+
+    // Cordis 在停用、卸载或重新加载插件时回收样式。
+    return () => style.remove();
+  });
+
+  ctx.effect(() => applySidebarWidth(ctx.layout));
+  ctx.slots.inject('sidebar.session.row.hover', () => ctx.slots.register({
+    name: 'sidebar.session.row.hover',
+    id: 'dsh-css-project',
+    order: -100,
+    inject: () => ({ hooks: { workspaces: ctx.workspaces.list, sessions: ctx.sessions.list } }),
+  }, ProjectHover));
+}
+
+    return { apply, inject };
+  },
+});

package/index.js

@@ -0,0 +1,2 @@
+// 宿主入口用于注册插件；样式仅在浏览器端挂载。
+export function apply() {}

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@dsh-tom/dsh-css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "为 DeepSeek Harness 深色界面调整侧边栏、会话、输入框和代码块的背景颜色。",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./dist/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": ["index.js", "dist/client.js", "theme.css", "cordis.patch.yml", "README.md"],
+  "engines": {
+    "node": ">=22",
+    "dsh": ">=0.2.1-rc.2 <0.2.2-0"
+  },
+  "dsh": {
+    "bundle": { "patch": "./cordis.patch.yml" },
+    "client": {
+      "platform": "web",
+      "inject": ["@deepseek-ai/dsh-client-ui-layout", "@deepseek-ai/dsh-client-ui-workspace"]
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "check": "node --check index.js && node --check src/client.js && node --check scripts/build.mjs && npm run build && node --check dist/client.js",
+    "prepack": "npm run check"
+  }
+}

package/theme.css

@@ -0,0 +1,256 @@
+/* 深色模式配色，保留内置文字、边框和语法高亮颜色。 */
+html body[data-ds-dark-theme] {
+  /* 区域 1：左侧会话列表；Windows 标题栏在下方单独设置。原 RGB(27, 27, 28)。 */
+  --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;
+
+  /* 区域 2：会话标题、正文以及应用基础背景。原 RGB(21, 21, 23)。 */
+  --dsw-alias-bg-base: rgb(39, 40, 34) !important;
+
+  /* 区域 3：主输入框。原 RGB(44, 44, 46)。 */
+  --dsw-specific-input-major: rgb(66, 67, 61) !important;
+
+  /* 会话内代码块及使用同一语义变量的输出区域。原 RGB(27, 27, 28)。 */
+  --dsw-alias-markdown-code-block: rgb(55, 56, 50) !important;
+}
+
+/* 标题栏及原生窗口按钮共享此颜色，会话列表继续使用原来的背景。 */
+html[data-windows-titlebar] body[data-ds-dark-theme] {
+  --dsw-specific-sidebar-fill: rgb(32, 32, 32) !important;
+
+  & .BynINW_sidebarCol {
+    --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;
+  }
+}
+
+/* Windows 桌面版展开侧栏：左侧图标栏 + 右侧标题、会话列表。
+ * 类名对应 DSH 0.2.1-rc.2；折叠侧栏继续使用宿主布局。
+ * 复用品牌、新会话、面板和账户按钮，不改变原有点击事件。
+ */
+html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_collapsed) {
+  --dsh-css-rail-width: 52px;
+  display: grid;
+  grid-template-columns: var(--dsh-css-rail-width) minmax(0, 1fr);
+  grid-template-rows: 52px auto auto minmax(0, 1fr);
+  padding: 0;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: var(--dsh-css-rail-width);
+    background: rgb(32, 32, 32);
+    pointer-events: none;
+  }
+
+  & ._2H3hWW_logoRow {
+    grid-area: 1 / 2;
+    height: 52px;
+    margin: 0;
+    padding: 0 16px;
+    justify-content: flex-start;
+  }
+
+  & ._2H3hWW_logoRow::after {
+    content: "DeepSeek";
+    color: var(--dsw-alias-label-primary);
+    font: 600 18px / 24px var(--dsw-font-family);
+    letter-spacing: 0;
+  }
+
+  /* 原品牌按钮仍打开新会话，以首页图标呈现。 */
+  & ._2H3hWW_brand {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 8px;
+    justify-content: center;
+    background: var(--dsw-alias-interactive-bg-hover);
+    overflow: visible;
+  }
+
+  & ._2H3hWW_brandIdentity {
+    display: none;
+  }
+
+  & ._2H3hWW_brand::before {
+    content: "";
+    width: 18px;
+    height: 18px;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 10v3h2v7a2 2 0 0 0 2 2h4v-7h4v7h4a2 2 0 0 0 2-2v-7h2v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  &:has(._2H3hWW_panelActive) ._2H3hWW_brand {
+    background: transparent;
+  }
+
+  & ._2H3hWW_newSession {
+    grid-area: 2 / 2;
+    align-self: start;
+    z-index: 1;
+    height: 36px;
+    margin: 0 8px;
+    padding: 0 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    font-weight: 400;
+    justify-content: flex-start;
+  }
+
+  & ._2H3hWW_newSessionContent {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  & ._2H3hWW_newSessionContent > svg {
+    display: none;
+  }
+
+  & ._2H3hWW_newSessionContent::before {
+    content: "";
+    flex: none;
+    width: 14px;
+    height: 14px;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-7M16 3a2.1 2.1 0 0 1 3 3L9 16l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  & ._2H3hWW_panelList {
+    grid-area: 2 / 1;
+    position: relative;
+    align-self: start;
+    gap: 8px;
+    margin: 0;
+    padding: 0 8px;
+  }
+
+  & ._2H3hWW_panelRow {
+    position: relative;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin: 0;
+    padding: 0;
+    border-radius: 8px;
+    color: var(--dsw-alias-label-tertiary);
+  }
+
+  & ._2H3hWW_panelTitle {
+    display: none;
+  }
+
+  & ._2H3hWW_panelGlyph > svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  & ._2H3hWW_panelActive {
+    color: var(--dsw-alias-label-primary);
+  }
+
+  /* 列表与导航共用网格行，顶部留出新会话按钮的位置。 */
+  & ._2H3hWW_regionArea {
+    grid-area: 2 / 2 / -1 / 3;
+    margin: 0;
+    padding: 44px 0 0 12px;
+  }
+
+  & ._2H3hWW_footArea {
+    grid-area: 4 / 1;
+    position: relative;
+    align-self: end;
+    gap: 8px;
+    padding: 8px;
+  }
+
+  & ._2H3hWW_footerActions:empty {
+    display: none;
+  }
+
+  /* 左下角设置按钮沿用账户菜单，设置、登录等入口仍由宿主提供。 */
+  & .ET65mq_trigger {
+    position: relative;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 8px;
+    color: var(--dsw-alias-label-tertiary);
+  }
+
+  & .ET65mq_trigger > * {
+    display: none;
+  }
+
+  & .ET65mq_trigger::before {
+    content: "";
+    width: 18px;
+    height: 18px;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 3-.5 2-2 1-2-.5-2 3.5L4.5 10v3L3 14l2 3.5 2-.5 2 1 .5 3h5l.5-3 2-1 2 .5 2-3.5-1.5-1v-3L21 9l-2-3.5-2 .5-2-1-.5-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  /* 同一元素也显示等待状态，只隐藏普通的相对时间。 */
+  & .hIlkoa_sessionRow > .hIlkoa_time:not([aria-hidden="true"]) {
+    display: none;
+  }
+
+  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):hover {
+    background: var(--dsw-alias-interactive-bg-hover);
+  }
+
+  & :is(._2H3hWW_brand, ._2H3hWW_newSession, .ET65mq_trigger):focus-visible {
+    outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+    outline-offset: -2px;
+  }
+
+  /* 展开状态下宿主禁用了面板 Tooltip，为纯图标入口补上名称。 */
+  & :is(._2H3hWW_panelRow, .ET65mq_trigger):is(:hover, :focus-visible)::after {
+    content: attr(aria-label);
+    position: absolute;
+    z-index: 40;
+    left: 44px;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 4px 8px;
+    border: 1px solid var(--dsw-alias-border-l3);
+    border-radius: 6px;
+    background: var(--dsw-alias-bg-layer-1);
+    color: var(--dsw-alias-label-primary);
+    font: 12px / 20px var(--dsw-font-family);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  & .ET65mq_trigger:is(:hover, :focus-visible)::after {
+    content: "设置";
+  }
+}
+
+/* 悬浮卡片由宿主通过 portal 挂在侧栏外。 */
+.dsh-css-project {
+  display: none;
+}
+
+html[data-windows-titlebar] body[data-ds-dark-theme] .dsh-css-project {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 20px;
+
+  & svg {
+    flex: none;
+  }
+
+  & span {
+    overflow-wrap: anywhere;
+  }
+}