+1

CHANGELOG.md

@@ -3,16 +3,20 @@
 ##### 更符合 GitHub 风格
 
 - 优化用户头像样式
-- 优化 Issue/PR 的评论菜单按钮样式
+- 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
 - 优化用户动态样式
+- 优化仓库发布页面样式
+- 同步字符提示的提示框动画
 
 ### 🐞 Fix
 
 - 修复 Issue/PR 侧边栏的时间追踪样式
 - 修复 Issue/PR 详细页面中的部分文字颜色
+- 修复 Issue/PR 详细页面中时间线上的标签样式
+- 修复一些选择输入框的排列问题
 
 ## 📃 English
 
 ### 🌈 Style
 
-##### More aligned with GitHub style
+##### More aligned with GitHub style

src/core/theme.ts

@@ -6,6 +6,8 @@ import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 
+export const overlayAppear = "overlay-appear";
+export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`;
 export const overlayAppearDown = "overlay-appear-down";
 export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`;
 export const overlayAppearUp = "overlay-appear-up";

src/types/color/github.ts

@@ -194,6 +194,7 @@ export const github = {
          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
          * @notification `notification` 通知列表的按钮悬停背景颜色
+         * @actions `actions` 列表页运行信息的三点操作按钮悬停背景颜色
          */
         hover: null,
       },

styles/components/actions.ts

@@ -88,9 +88,10 @@ export const actions = css`
               border-radius: ${otherThemeVars.border.radius};
             }
             > .ui.dropdown.jump {
+              border-radius: ${otherThemeVars.border.radius};
               color: ${themeVars.color.text.light.num1};
               &:hover {
-                color: ${themeVars.color.primary.self};
+                background-color: ${themeVars.github.control.transparent.bgColor.hover};
               }
               .menu > .item:hover {
                 color: ${themeVars.color.text.self} !important;

styles/components/commit.ts

@@ -101,10 +101,5 @@ export const commitGraph = css`
         }
       }
     }
-    // 提交图的分支选择菜单框
-    .ui.search.selection.dropdown > .menu > .item {
-      flex-direction: row;
-      align-items: center;
-    }
   }
 `;

styles/components/diff.ts

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const diff = css`
   /* 折叠行多余的颜色 */
@@ -63,9 +63,16 @@ export const diff = css`
       }
       // 操作按钮
       .diff-file-header-actions {
+        border-radius: ${otherThemeVars.border.radius};
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
         font-weight: 400;
+        &:hover {
+          background-color: ${themeVars.github.control.transparent.bgColor.hover};
+        }
+        .diff-header-popup-btn {
+          padding: 5px !important;
+        }
       }
     }
   }

styles/components/filelist.ts

@@ -441,7 +441,7 @@ export const repoSidebarBottom = css`
         padding: 16px 0;
         .flex-item {
           padding: 16px 0 0 0;
-          .flex-item-icon {
+          .flex-item-leading {
             svg.svg.octicon-tag {
               color: ${themeVars.color.green.self};
               margin-top: 2px;

styles/components/heatmap.ts

@@ -85,6 +85,7 @@ export const activity = css`
       // 动态的主要内容
       > .flex-item-main {
         gap: 8px !important;
+        text-underline-offset: 0.2rem;
         // 动态的标题
         > div:not([class]) {
           display: flex;
@@ -93,8 +94,6 @@ export const activity = css`
           flex-wrap: wrap;
           > a {
             color: ${themeVars.color.text.self};
-            text-decoration: none;
-            text-underline-offset: 0.2rem;
             // 不匹配作者
             &:not([title]) {
               // 尽量只选中仓库名, 不匹配标签和分支

styles/components/release.ts

@@ -114,7 +114,7 @@ export const releases = css`
           // 标题
           .release-list-title {
             font-size: 32px;
-            gap: 16px;
+            gap: 8px;
           }
           // 提交信息
           p.text.grey {
@@ -140,13 +140,13 @@ export const releases = css`
             position: relative;
             left: -16px;
             width: calc(100% + 32px);
-            border-top-width: 1.5px;
+            border-top-width: 1px;
             margin: 24px 0 16px 0;
           }
           // 下载列表
           .download {
             summary {
-              font-size: 18px;
+              font-size: 16px;
               font-weight: 600;
               margin-top: 16px;
               &::marker {

styles/public/animation.ts

@@ -1,7 +1,16 @@
-import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
+import { overlayAppear, overlayAppearDown, overlayAppearUp } from "src/core/theme";
 import { css } from "src/types/vars";
 
 export const keyframe = css`
+  // 出现动画
+  @keyframes ${overlayAppear} {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   // 向下出现动画
   @keyframes ${overlayAppearDown} {
     0% {

styles/public/dropdown.ts

@@ -230,7 +230,7 @@ export const selectionDropdown = css`
   // 标签页面的标签选择框
   .page-content.repository.labels .ui.selection.dropdown.active,
   // 创建仓库页面的标签选择框
-  .ui.search.selection.dropdown {
+  .page-content.repository.new-repo .ui.search.selection.dropdown {
     > .menu > .item {
       flex-direction: column;
       align-items: flex-start;

styles/public/label.ts

@@ -3,68 +3,73 @@ import { css, themeVars } from "src/types/vars";
 export const label = css`
   /* 所有标签, 但不包括 a 标签 */
   /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
+  div.label,
+  span.label,
+  // 包含多个标签的元素, 比如 Issue/PR 详情页中的时间线上的标签
+  span.labels-list a.label {
+    &.ui.ui.ui {
+      border-radius: 9999px;
+      padding: 1.5px 6px;
+      // 多个标签的组合标签的圆角修复
+      &.scope-parent {
+        .scope-left {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .scope-middle {
+          border-radius: 0;
+        }
+        .scope-right {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
   div,
   span {
-    &.ui.ui.ui {
-      &.label {
-        border-radius: 9999px;
-        padding: 1.5px 6px;
-        // 多个标签的组合标签的圆角修复
-        &.scope-parent {
-          .scope-left {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-          .scope-middle {
-            border-radius: 0;
-          }
-          .scope-right {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-        }
-        /* 主色调标签 */
-        &.primary {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.primary.self};
-          color: ${themeVars.color.primary.self};
-        }
-        /* 红色标签 */
-        &.red {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
-          color: ${themeVars.color.purple.self};
-        }
-        /* 橙色标签 */
-        &.orange {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
-          color: ${themeVars.color.yellow.self};
-        }
-        /* 黄色标签 */
-        &.yellow {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
-          color: ${themeVars.color.orange.self};
-        }
-        /* 黄绿色标签 */
-        &.olive {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.olive.self};
-          color: ${themeVars.color.olive.self};
-        }
-        /* 绿色标签 */
-        &.green {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.success.emphasis};
-          color: ${themeVars.color.green.self};
-        }
-        /* 紫色标签 */
-        &.purple {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
-          color: ${themeVars.color.purple.self};
-        }
+    &.ui.ui.ui.label {
+      /* 主色调标签 */
+      &.primary {
+        background-color: unset;
+        border: 1px solid ${themeVars.color.primary.self};
+        color: ${themeVars.color.primary.self};
+      }
+      /* 红色标签 */
+      &.red {
+        background-color: unset;
+        border: 1px solid ${themeVars.github.borderColor.done.emphasis};
+        color: ${themeVars.color.purple.self};
+      }
+      /* 橙色标签 */
+      &.orange {
+        background-color: unset;
+        border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
+        color: ${themeVars.color.yellow.self};
+      }
+      /* 黄色标签 */
+      &.yellow {
+        background-color: unset;
+        border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
+        color: ${themeVars.color.orange.self};
+      }
+      /* 黄绿色标签 */
+      &.olive {
+        background-color: unset;
+        border: 1px solid ${themeVars.color.olive.self};
+        color: ${themeVars.color.olive.self};
+      }
+      /* 绿色标签 */
+      &.green {
+        background-color: unset;
+        border: 1px solid ${themeVars.github.borderColor.success.emphasis};
+        color: ${themeVars.color.green.self};
+      }
+      /* 紫色标签 */
+      &.purple {
+        background-color: unset;
+        border: 1px solid ${themeVars.github.borderColor.done.emphasis};
+        color: ${themeVars.color.purple.self};
       }
     }
   }

styles/public/tippy.ts

@@ -1,4 +1,4 @@
-import { animationDown } from "src/core/theme";
+import { animation, animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
@@ -43,6 +43,7 @@ export const tippyBox = css`
     }
     // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
     &[data-theme="tooltip"] {
+      animation: ${animation};
       .tippy-content {
         font-size: 12px;
         font-weight: 400;