支持克隆菜单自定义长度

.github/release-template.md

@@ -1,3 +1,7 @@
+## ✨ Feat
+
+#### CSS 变量
+
 ## 🌈 Style
 
 #### 更符合 GitHub 风格

.github/release.md

@@ -1,3 +1,11 @@
+## ✨ Feat
+
+🎉 支持自定义 CSS 变量设置主题样式
+
+#### CSS 变量
+
+- 支持克隆菜单自定义长度
+
 ## 🌈 Style
 
 - 分支菜单项目添加动画效果

README.md

@@ -26,6 +26,35 @@ THEMES = gitea-dark, github-dark
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+## 自定义 CSS 变量
+
+可以根据自己的偏好自定义主题的一部分样式
+
+### 使用方法
+
+在主题的 CSS 文件中头部或尾部添加以下代码
+
+```css
+:root {
+  --custom-clone-menu-width: 150px;.
+  ...
+}
+```
+
+>[!IMPORTANT]
+>
+>请确保在 `:root` 选择器中添加自定义变量，否则无法生效
+>
+>变量之间用 `;` 分隔
+>
+>建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
+
+### CSS 变量
+
+| 变量名                    | 描述         | Gitea (默认值) | Github | 推荐  | 最小值 | 最大值 |
+| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
+| --custom-clone-menu-width | 克隆菜单宽度 | 232px          | 332px  | 200px | 150px  | 400px  |
+
 ## 截图
 
 ![仓库](screenshots/repo.png)
@@ -45,3 +74,7 @@ THEMES = gitea-dark, github-dark
 ## 贡献
 
 欢迎提交 Issue 或 Pull Request
+
+```
+
+```

src/types/vars.ts

@@ -35,7 +35,14 @@ const otherVars = {
   },
 };
 
+const customVars = {
+  custom: {
+    cloneMenuWidth: "custom-clone-menu-width",
+  },
+};
+
 export const themeVars = createGlobalThemeContract(vars, varMapper);
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
+export const customThemeVars = createGlobalThemeContract(customVars, varMapper);
 
 export { css } from "@linaria/core";

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -52,7 +52,9 @@ export const clone = css`
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-          width: 332px;
+          min-width: 150px;
+          max-width: 400px;
+          width: ${customThemeVars.custom.cloneMenuWidth};
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
             border-radius: ${otherThemeVars.border.radius};