同步里程碑页面样式

.github/release.md

@@ -1,5 +1,8 @@
 ### 🌈 Style
 
+- 优化小型按钮的高度
+- 一些列表栏的元素位置居中
+
 ##### 更符合 GitHub 风格
 
 - 同步查看代码文件内容时的样式
@@ -7,6 +10,7 @@
 - 略微减小导航栏创建仓库菜单按钮内的图标间隔
 - 微调一些标签的字体大小
 - 优化发布页面布局和下载列表样式
+- 同步里程碑页面样式
 
 ### 🐞 Fix
 

styles/components/index.ts

@@ -9,6 +9,7 @@ import "./explore";
 import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./milestones";
 import "./newrepo";
 import "./org";
 import "./release";

styles/components/issue.ts

@@ -3,6 +3,8 @@ import { activeItemAfterStyle } from "styles/public/menu";
 
 // 工单&PR 列表
 export const issueList = css`
+  // 仓库页面的里程碑列表菜单栏
+  .page-content.repository.milestones,
   .page-content.repository.issue-list {
     // 头部筛选菜单栏
     .issue-list-toolbar {
@@ -53,49 +55,74 @@ export const issueList = css`
         }
       }
     }
-    // Issue 列表
+  }
-    .flex-list#issue-list {
+  // Issue 列表
-      border: 1px solid ${themeVars.color.light.border};
+  .page-content.repository.issue-list .flex-list#issue-list {
-      border-bottom-left-radius: ${otherThemeVars.border.radius};
+    border: 1px solid ${themeVars.color.light.border};
-      border-bottom-right-radius: ${otherThemeVars.border.radius};
+    border-bottom-left-radius: ${otherThemeVars.border.radius};
-      > .flex-item {
+    border-bottom-right-radius: ${otherThemeVars.border.radius};
-        align-items: center;
+    > .flex-item {
-        padding: 0;
+      align-items: center;
-        &:last-child {
+      padding: 0;
-          border-bottom-left-radius: ${otherThemeVars.border.radius};
+      &:last-child {
-          border-bottom-right-radius: ${otherThemeVars.border.radius};
+        border-bottom-left-radius: ${otherThemeVars.border.radius};
-        }
+        border-bottom-right-radius: ${otherThemeVars.border.radius};
-        &:hover {
+      }
-          background-color: ${themeVars.color.hover.opaque};
+      &:hover {
-        }
+        background-color: ${themeVars.color.hover.opaque};
-        > .flex-item-icon {
+      }
-          display: flex;
+      > .flex-item-icon {
-          gap: 4px;
+        display: flex;
+        gap: 4px;
+        margin-left: 8px;
+        // 复选框
+        input {
+          background: unset;
+          margin-top: 14px;
           margin-left: 8px;
-          // 复选框
+          margin-right: 8px !important;
-          input {
-            background: unset;
-            margin-top: 14px;
-            margin-left: 8px;
-            margin-right: 8px !important;
-          }
-          svg {
-            margin-top: 14px;
-          }
         }
-        > .flex-item-main {
+        svg {
-          gap: 4px;
+          margin-top: 14px;
-          .flex-item-header {
-            padding-top: 8px;
-          }
-          .flex-item-body {
-            font-size: 12px;
-            padding-bottom: 8px;
-          }
         }
-        > .flex-item-trailing {
+      }
-          margin-right: 32px;
+      > .flex-item-main {
+        gap: 4px;
+        .flex-item-header {
+          padding-top: 8px;
         }
+        .flex-item-body {
+          font-size: 12px;
+          padding-bottom: 8px;
+        }
+      }
+      > .flex-item-trailing {
+        margin-right: 32px;
+      }
+    }
+  }
+  // 里程碑列表
+  .page-content.repository.milestones .milestone-list {
+    border: 1px solid ${themeVars.color.light.border};
+    border-bottom-left-radius: ${otherThemeVars.border.radius};
+    border-bottom-right-radius: ${otherThemeVars.border.radius};
+    .milestone-card {
+      padding: 8px 16px 10px 16px;
+      .milestone-header {
+        h3 {
+          font-size: 16px;
+          font-weight: 500;
+        }
+        div span {
+          font-size: 14px;
+          font-weight: 600;
+        }
+      }
+    }
+    .milestone-toolbar {
+      font-size: 12px;
+      .group > a {
+        font-size: 13px;
       }
     }
   }

styles/components/milestones.ts

@@ -0,0 +1,16 @@
+import { css } from "src/types/vars";
+
+export const milestones = css`
+  // 里程碑头部
+  .milestone-header {
+    gap: 16px;
+    // 进度条
+    progress {
+      height: 5px;
+      width: 300px;
+      max-width: 80vw;
+    }
+  }
+  .page-content.repository.milestones {
+  }
+`;

styles/public/button.ts

@@ -94,6 +94,7 @@ export const fixButtonHeight = css`
   .ui.small.buttons .button,
   .ui.ui.ui.ui.small.button {
     min-height: 26px;
+    height: 32px;
   }
   .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {

styles/public/index.ts

@@ -13,3 +13,4 @@ import "./modal"; // 弹窗
 import "./tippy"; // 提示框
 import "./navbar"; // 导航栏
 import "./attached"; // 附加样式
+import "./other"; // 其他样式

styles/public/other.ts

@@ -0,0 +1,8 @@
+import { css } from "src/types/vars";
+
+// 一些列表头, 比如工单的搜索标签里程碑栏
+export const listHeader = css`
+  .list-header {
+    align-items: center;
+  }
+`;