diff --git a/CHANGELOG.md b/CHANGELOG.md index 4774625..9ce3b86 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ##### More aligned with GitHub style +- Optimize global line height - Optimize the workflow log page style ### 🐞 Fix diff --git a/styles/components/dashboard.ts b/styles/components/dashboard.ts index 6251179..a77a598 100644 --- a/styles/components/dashboard.ts +++ b/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; } diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index ea243e2..01df58d 100644 --- a/styles/components/filelist.ts +++ b/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 { diff --git a/styles/components/repo.ts b/styles/components/repo.ts index 3bc3cb8..6ae5791 100644 --- a/styles/components/repo.ts +++ b/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 { diff --git a/styles/public/base.ts b/styles/public/base.ts index 010e15c..85cb729 100644 --- a/styles/public/base.ts +++ b/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 的影响 diff --git a/styles/public/index.ts b/styles/public/index.ts index c3e0912..83dae7e 100644 --- a/styles/public/index.ts +++ b/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"; // 下拉框 diff --git a/styles/public/label.ts b/styles/public/label.ts index 12aeb77..b950ad3 100644 --- a/styles/public/label.ts +++ b/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 { diff --git a/styles/public/menu.ts b/styles/public/menu.ts index 4538502..173f51b 100644 --- a/styles/public/menu.ts +++ b/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, @@ -140,8 +141,8 @@ export const menu = css` } } // 菜单标签样式 - .ui.menu .item>.label:not(.floating) { - padding: 1.5px 6px; + .ui.menu .item > .label:not(.floating) { + ${labelStyle} } `; diff --git a/styles/public/table.ts b/styles/public/table.ts new file mode 100644 index 0000000..b8d0215 --- /dev/null +++ b/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}; + } +`;