Optimize global line height

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ##### More aligned with GitHub style
 
+- Optimize global line height
 - Optimize the workflow log page style
 
 ### 🐞 Fix

styles/components/dashboard.ts

@@ -1,4 +1,5 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { labelStyle } from "styles/public/label";
 
 export const dashboard = css`
   // 首页仪表板, 避免选中管理员后台的维护管理面板
@@ -38,6 +39,10 @@ export const dashboard = css`
       font-weight: 400;
       background-color: unset !important;
       margin-bottom: 0.25rem;
+      .ui.label {
+        border-color: #00000000;
+        line-height: 22px;
+      }
     }
     // 仓库/组织列表
     .ui.attached.segment {
@@ -47,6 +52,12 @@ export const dashboard = css`
       &.repos-search {
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
+        > .menu.repos-filter {
+          .ui.circular.label {
+            border-color: #00000000;
+            padding: ${labelStyle.padding} !important;
+          }
+        }
       }
       &.table {
         &:last-child {
@@ -58,6 +69,7 @@ export const dashboard = css`
           li {
             border-radius: ${otherThemeVars.border.radius};
             padding: 6px 8px !important;
+            height: 32px;
             &:not(:last-child) {
               border-bottom: 0;
             }

styles/components/filelist.ts

@@ -399,18 +399,19 @@ export const repoSidebarTop = css`
         padding: 10px 0 0 0;
         // 仓库描述本身
         .flex-item-title {
-          margin-top: 12px;
+          margin-top: 10px;
         }
         // 仓库描述内容
         .flex-item-body {
           > .tw-flex:first-child {
-            margin-top: 21px !important;
+            margin-top: 16px !important;
+            gap: 8px !important;
           }
           .repo-description {
             color: ${themeVars.color.text.self};
           }
           #repo-topics {
-            margin: 10px 0px !important;
+            margin: 8px 0px !important;
           }
           .flex-text-block {
             font-size: 14px;
@@ -448,7 +449,6 @@ export const repoSidebarBottom = css`
           .flex-item-leading {
             svg.svg.octicon-tag {
               color: ${themeVars.color.green.self};
-              margin-top: 2px;
             }
           }
           .flex-item-header .flex-item-title {

styles/components/repo.ts

@@ -74,7 +74,8 @@ export const repoTopic = css`
     border-radius: 9999px;
     font-size: 12px;
     font-weight: 500;
-    padding: 2.5px 10px;
+    padding: 0px 10px;
+    line-height: 22px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
     &:hover {

styles/public/base.ts

@@ -2,7 +2,7 @@ import { css } from "src/types/vars";
 
 export const body = css`
   body {
-    line-height: 18px;
+    line-height: 1.5;
   }
   a {
     text-underline-offset: 0.2rem; // 0.2rem 可以始终保持下划线不受 overflow: hidden 的影响

styles/public/index.ts

@@ -5,6 +5,7 @@ import "./base"; // 基础样式, 确保在其他样式之前导入
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
 import "./animation"; // 动画效果
 import "./transition"; // 过渡效果
+import "./table"; // 表格
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./dropdown"; // 下拉框

styles/public/label.ts

@@ -1,6 +1,13 @@
 import { css, themeVars } from "src/types/vars";
 
+export const labelStyle = {
+  padding: "0px 6px",
+};
+
 export const label = css`
+  .ui.label {
+    border: 1px solid #00000000;
+  }
   /* 所有标签, 但不包括 a 标签 */
   /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
   div.label,
@@ -9,7 +16,11 @@ export const label = css`
   span.labels-list a.label {
     &.ui.ui.ui {
       border-radius: 9999px;
-      padding: 1.5px 6px;
+      ${labelStyle}
+      line-height: 18px;
+      &.large {
+        line-height: 22px;
+      }
       // 多个标签的组合标签的圆角修复
       &.scope-parent {
         .scope-left {
@@ -103,7 +114,6 @@ export const shaLabel = css`
         background-color: ${themeVars.color.label.hoverBg} !important;
       }
       span.ui.label.commit-is-signed {
-        padding: 3px 5px;
         margin-left: 5px;
         height: 25px;
       }
@@ -118,6 +128,7 @@ export const shaLabel = css`
   }
   // 验证提交附带的图标
   span.ui.label.commit-is-signed {
+    height: 25px;
     // 验证信任
     &.sign-trusted {
       border: 1.5px solid ${themeVars.color.green.badge.self} !important;
@@ -151,6 +162,11 @@ export const shaLabel = css`
       }
     }
   }
+  span.ui.label.commit-is-signed,
+  .ui.label.commit-id-short,
+  .ui.label.commit-sign-badge {
+    font-size: 12px;
+  }
 `;
 
 // 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
@@ -194,7 +210,6 @@ export const repoLabel = css`
       color: ${themeVars.color.text.light.num1};
       font-size: 12px;
       font-weight: 500;
-      padding: 1.5px 6px;
     }
   }
   .org-visibility span.ui.basic.label {

styles/public/menu.ts

@@ -1,4 +1,5 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { labelStyle } from "./label";
 
 export const activeItemAfterStyle = {
   backgroundColor: themeVars.github.borderColor.accent.emphasis,
@@ -141,7 +142,7 @@ export const menu = css`
   }
   // 菜单标签样式
   .ui.menu .item > .label:not(.floating) {
-    padding: 1.5px 6px;
+    ${labelStyle}
   }
 `;
 

styles/public/table.ts

@@ -0,0 +1,8 @@
+import { css, themeVars } from "src/types/vars";
+
+export const table = css`
+  .ui.table > tr > td,
+  .ui.table > tbody > tr > td {
+    border-top: 1px solid ${themeVars.color.secondary.alpha.num70};
+  }
+`;