修复一些下拉菜单缺失边框线

.github/release.md

@@ -1,19 +1,18 @@
 ## 🌈 Style
 
+- 创建仓库页面下拉菜单选项样式同步
+
 #### 更符合 GitHub 风格
 
-- 导航栏右侧按钮和头像颜色和样式同步
-
 ## 🎈 Perf
 
-- 优化输入框高度
-- 优化二级菜单按钮高度
-- 优化提交/分支/标签统计栏的激活颜色
+- 稍微减小了热力图方块的大小
 
 ## 🐞 Fix
 
-- 修复多个标签组合的范围标签圆角 #4
-- 修复探索/组织/用户页下的仓库主题标签样式
-- 修复仓库标签页右侧按钮大小
-- 修复管理员页面 Runner 任务状态标签的边框色
-- 修复 Actions 页面下的分支标签按钮颜色
+- 修复顶部导航栏的菜单按钮悬浮颜色
+- 修复选择输入框的样式
+- 修复创建仓库时拥有者按钮的高度
+- 修复一些输入框在整体元素中不居中
+- 修复一些下拉菜单在向上弹出时与向下弹出不一致的问题
+- 修复一些下拉菜单缺失边框线, 比如仓库动态的右侧菜单按钮

.github/todo.md

@@ -1 +0,0 @@
-action 下的分支标签颜色

TODO.md

@@ -0,0 +1,19 @@
+### 轻量
+
+- hover 动画迁移
+- 列表部分 item 展开动画迁移
+
+### 重大
+
+- gitea issue 默认标签颜色匹配使用 github 样式
+- 探索/组织/用户仓库样式 github 布局
+- issue/PR 列表样式 github 布局
+- styles/themes 库组件导出整理
+- defineTheme 颜色生成代码重构
+- 亮色主题适配/测试
+- 自动颜色主题生成
+
+### 其他
+
+- README 更新/截图更新
+- CONTRIBUTING 更新

src/types/color/github.ts

@@ -58,6 +58,7 @@ export const github = {
        * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
+       * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
        */
       emphasis: null,
     },

styles/components/heatmap.tsx

@@ -11,8 +11,8 @@ export const heatmap = css`
       // hover 时的圆角
       border-radius: 0.75px;
       // 宽度和高度可以用来控制间隔
-      width: 9.5px;
-      height: 9.5px;
+      width: 9px;
+      height: 9px;
       // 边框
       outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
       // 边框向内偏移

styles/components/index.tsx

@@ -6,6 +6,7 @@ import "./diff";
 import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./newrepo";
 import "./release";
 import "./repo";
 import "./setting";

styles/components/newrepo.tsx

@@ -0,0 +1,14 @@
+import { css } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
+
+// 新建仓库页面下拉菜单
+export const newRepo = css`
+  .page-content.repository.new-repo {
+    .ui.dropdown .menu {
+      .item:hover:after {
+        content: "";
+        ${activeItemAfterStyle}
+      }
+    }
+  }
+`;

styles/public/dropdown.tsx

@@ -8,7 +8,6 @@ export const dropdown = css`
     .menu {
       animation: ${animation};
       // 统一所有下拉菜单的样式
-      margin-top: 0.35em !important;
       background-color: ${themeVars.color.menu} !important;
       border: unset !important;
       border-radius: 12px !important;
@@ -58,6 +57,20 @@ export const dropdown = css`
       }
     }
   }
+  // 向下弹出的下拉菜单向下偏移
+  .ui.dropdown:not(.upward),
+  .ui.menu .ui.dropdown:not(.upward) {
+    .menu {
+      margin-top: 0.35em !important;
+    }
+  }
+  // 向上弹出的下拉菜单向上偏移
+  .ui.dropdown.upward,
+  .ui.menu .ui.dropdown.upward {
+    .menu {
+      margin-bottom: 0.35em !important;
+    }
+  }
   // 修复下拉菜单元素溢出问题
   // 用户菜单
   .user-menu>.item,
@@ -75,7 +88,10 @@ export const dropdown = css`
   .ui.dropdown .menu .menu {
     border-radius: 12px !important;
   }
-  // 修复仪表板切换控制用户按钮阴影被覆盖缺少边框线的问题
+  // 修复按钮阴影被覆盖缺少边框线的问题
+  // 仓库动态页面的右侧按钮, 比如时间周期
+  .ui.floating.dropdown .menu,
+  // 仪表板切换控制用户按钮
   .ui.dropdown .menu.context-user-switch .scrolling.menu {
     box-shadow: ${themeVars.github.shadow.floating.small} !important;
   }
@@ -83,8 +99,9 @@ export const dropdown = css`
 
 // 选择框的下拉菜单看起来像普通按钮
 export const selectionDropdown = css`
-  .ui.selection.dropdown,
-  .ui.selection.dropdown.active {
+  // 排除可以选择的输入搜索框和创建仓库的拥有者
+  .ui.selection.dropdown:not(.search):not(.ellipsis-text-items),
+  .ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
     background-color: ${themeVars.color.button};
     border-color: ${themeVars.color.light.border};
     border-radius: ${otherThemeVars.border.radius};
@@ -104,9 +121,43 @@ export const selectionDropdown = css`
       ${activeItemAfterStyle};
     }
   }
+  // 这个按钮项目前只在创建仓库的拥有者
+  // 不实现伪元素, 因为 .item 设置溢出的元素会被截断
+  .ui.selection.dropdown.ellipsis-text-items,
+  .ui.selection.dropdown.activeellipsis-text-items {
+    &:focus {
+      background: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+    }
+    &:hover {
+      background: ${themeVars.color.hover.self};
+      border-color: ${themeVars.color.light.border};
+    }
+  }
+  // 选择输入框效果和输入框 focus 效果一样
+  .ui.selection.dropdown.active.search {
+    background: ${themeVars.color.body};
+    // 向内部添加一个 1px 的边框
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+    outline: none;
+  }
+  // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
+  .ui.upward.active.selection.dropdown:hover {
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+  }
+  // 由于之前的排除导致样式优先级变高, 小按钮去除圆角
+  .ui.action.input > .dropdown.small:not(:first-child) {
+    border-radius: 0;
+  }
   // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
   .ui.selection.dropdown.active:not(.small) {
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 修复选择框的下拉菜单向上显示时的样式问题
+  .ui.upward.selection.dropdown.visible:not(.small),
+  .ui.active.upward.selection.dropdown:not(.small) {
+    border-top-left-radius: ${otherThemeVars.border.radius}!important;
+    border-top-right-radius: ${otherThemeVars.border.radius}!important;
+  }
 `;

styles/public/input.tsx

@@ -4,7 +4,8 @@ export const input = css`
   input,
   textarea,
   .ui.input input,
-  .ui.form input:not([type]),
+  // 排除可以选择的输入搜索框
+  .ui.form input:not([type]):not(.search),
   .ui.form select,
   .ui.form textarea,
   .ui.form input[type="date"],
@@ -33,4 +34,8 @@ export const input = css`
   .ui.input {
     height: 32px;
   }
+  // 由于输入框高度, 需要输入框在表单中垂直居中
+  .ui.form {
+    align-items: center;
+  }
 `;

styles/public/label.tsx

@@ -101,21 +101,33 @@ export const shaLabel = css`
     &.sign-trusted {
       border: 1.5px solid ${themeVars.color.green.badge.self} !important;
       color: ${themeVars.color.green.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.green.badge.hover.bg} !important;
+      }
     }
     // 验证未信任
     &.sign-untrusted {
       border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
       color: ${themeVars.color.yellow.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
+      }
     }
     // 验证未匹配
     &.sign-unmatched {
       border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
       color: ${themeVars.color.orange.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.orange.badge.hover.bg} !important;
+      }
     }
     // 验证警告
     &.sign-warning {
       border: 1.5px solid ${themeVars.color.red.badge.self} !important;
       color: ${themeVars.color.red.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.red.badge.hover.bg} !important;
+      }
     }
   }
 `;

styles/public/navbar.tsx

@@ -40,6 +40,9 @@ export const navbarRight = css`
               height: 16px;
             }
           }
+          &:hover {
+            background-color: ${themeVars.color.nav.hoverBg};
+          }
         }
       }
       .item.ui.dropdown {

styles/public/radius.tsx

@@ -38,7 +38,8 @@ export const radius = css`
     &.table,
     &.segment,
     &.segments,
-    &.grid.segment &.selection.dropdown,
+    &.grid.segment,
+    &.selection.dropdown,
     &.horizontal.segments,
     &.active.empty.selection.dropdown {
       border-radius: ${otherThemeVars.border.radius};