From 768c675fc3e0ab433fea0a799d4865859ef8de10 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Thu, 2 Jul 2026 22:11:49 +0800 Subject: [PATCH] Preliminary style adaptation to version 1.27 --- CHANGELOG.md | 10 +++ src/core/theme.ts | 1 + src/types/vars.ts | 7 +- styles/components/actions/actions.ts | 13 +-- styles/components/explore.ts | 42 +++++----- styles/components/heatmap.ts | 102 ++++++++++++----------- styles/components/issues/issue.ts | 2 +- styles/components/issues/issue_list.ts | 30 +++---- styles/components/notification.ts | 24 +++--- styles/components/org.ts | 68 +++++++++------- styles/components/repo/milestones.ts | 2 +- styles/components/repo/packages.ts | 13 +-- styles/components/repo/repo.ts | 16 ++-- styles/components/repo/repo_sidebar.ts | 107 ++++++++++++++----------- styles/components/user.ts | 16 ++-- styles/public/attached.ts | 9 +++ styles/public/base.ts | 3 + styles/public/label/checkbox_label.ts | 30 +++++++ styles/public/label/index.ts | 3 +- styles/public/menu/compact_menu.ts | 2 +- styles/public/menu/menu.ts | 3 + styles/public/menu/vertical_menu.ts | 18 +++-- styles/public/modal.ts | 9 ++- styles/public/transition.ts | 2 +- 24 files changed, 317 insertions(+), 215 deletions(-) create mode 100644 styles/public/label/checkbox_label.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dee578..64e1be5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ - Reduce the displacement when the button is clicked. +#### Adaptation for version 1.27 + +- Fine tune the global spacing of elements. +- Fine tune menu item height. +- Fix some border corner issues. +- Fix the horizontal alignment issue of check boxes in some drop-down menus. +- Optimize heat map style. + #### More GitHub-like style ### 🐞 Fix + +- Fix the issue where the branch menu under the manual workflow pop-up window is obscured. diff --git a/src/core/theme.ts b/src/core/theme.ts index aab564c..b0a7184 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -107,6 +107,7 @@ export function createTheme(theme: Theme): void { border: { radius: "6px" }, color: { git: "#f05133" }, checkbox: { size: "14px" }, + gap: { inline: "4px", block: "8px" }, }); // 全局样式 globalStyle(selectors.root, { diff --git a/src/types/vars.ts b/src/types/vars.ts index 09d041a..0b6f184 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -48,7 +48,12 @@ const vars = { github: color.github, }; -const otherVars = { border: { radius: null }, color: { ...color.otherAuto }, checkbox: { size: null } }; +const otherVars = { + border: { radius: null }, + color: { ...color.otherAuto }, + checkbox: { size: null }, + gap: { inline: null, block: null }, +}; const customVars = { branchMenuWidth: "branch-menu-width", diff --git a/styles/components/actions/actions.ts b/styles/components/actions/actions.ts index 3ff62e1..9898b9e 100644 --- a/styles/components/actions/actions.ts +++ b/styles/components/actions/actions.ts @@ -84,17 +84,16 @@ const actions = css` color: ${themeVars.color.text.light.num1}; } - .flex-item { + .item { padding: 16px; line-height: 18px; - .flex-item-leading { + .item-leading { align-self: flex-start; - margin-top: 2px; } - .flex-item-main { + .item-main { gap: 0.5rem; } - .flex-item-trailing { + .item-trailing { > .ui.label { border-radius: ${otherThemeVars.border.radius}; } @@ -137,7 +136,9 @@ const label = css` const runWorkflow = css` /* 手动工作流弹窗 */ #runWorkflowDispatchModal { - overflow: hidden; + > .content { + border-radius: ${otherThemeVars.border.radius}; + } } /* 手动工作流下拉列表 */ #runWorkflowDispatchForm { diff --git a/styles/components/explore.ts b/styles/components/explore.ts index 5c1fa97..c0cf191 100644 --- a/styles/components/explore.ts +++ b/styles/components/explore.ts @@ -33,25 +33,25 @@ const repoList = css` /* 探索 */ .page-content.explore.repositories > .ui.container { /* 排除用户的公开活动页 */ - > .flex-list:not(#activity-feed) { + > .items-with-main:not(#activity-feed) { display: grid; - > .flex-item { + > .item { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; padding: 16px; /* 仓库头像 */ - > .flex-item-leading { + > .item-leading { img, svg { color: ${themeVars.color.text.light.num1}; } } /* 仓库信息 */ - > .flex-item-main { + > .item-main { /* 仓库标题 */ - > .flex-item-header { + > .item-header { /* 仓库名称 */ - > .flex-item-title { + > .item-title { gap: 8px; /* 仓库中间的间隔线 */ &:not(a) { @@ -59,7 +59,7 @@ const repoList = css` } } /* 仓库语言, 星标 */ - > .flex-item-trailing { + > .item-trailing { color: ${themeVars.color.text.light.num1}; gap: 16px; font-size: 12px; @@ -71,7 +71,7 @@ const repoList = css` } } /* 描述和更新时间 */ - > .flex-item-body { + > .item-body { margin-top: 8px; /* 更新时间 */ &:last-child { @@ -88,18 +88,18 @@ const repoList = css` } /* 仓库列表列数 */ /* 组织 */ - .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list { + .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .items-with-main { grid-template-columns: repeat(${orgRepoVar}, 1fr); gap: min(${orgRepoVar} * 8px, 16px); } /* 用户 */ /* 排除用户的公开活动页 */ - .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list:not(#activity-feed) { + .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .items-with-main:not(#activity-feed) { grid-template-columns: repeat(${userRepoVar}, 1fr); gap: min(${userRepoVar} * 8px, 16px); } /* 探索 */ - .page-content.explore.repositories > .ui.container > .flex-list { + .page-content.explore.repositories > .ui.container > .items-with-main { grid-template-columns: repeat(${exploreRepoVar}, 1fr); gap: min(${exploreRepoVar} * 8px, 16px); } @@ -114,15 +114,15 @@ const userList = css` .page-content.organization.members > .ui.container, /* 探索的用户和组织 */ .page-content.explore.users > .ui.container { - > .flex-list { + > .items-with-main { display: grid; - > .flex-item { + > .item { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; padding: 16px; - > .flex-item-main { + > .item-main { /* 用户名称 */ - > .flex-item-title { + > .item-title { gap: 8px; margin-bottom: 8px; /* 用户标签 */ @@ -131,7 +131,7 @@ const userList = css` } } /* 用户描述 */ - > .flex-item-body { + > .item-body { font-size: 12px; svg { width: 12px; @@ -144,12 +144,12 @@ const userList = css` } /* 用户列表列数 */ /* 组织 */ - .page-content.organization.members > .ui.container > .flex-list { + .page-content.organization.members > .ui.container > .items-with-main { grid-template-columns: repeat(${orgUserVar}, 1fr); gap: min(${orgUserVar} * 8px, 16px); } /* 探索的用户和组织 */ - .page-content.explore.users > .ui.container > .flex-list { + .page-content.explore.users > .ui.container > .items-with-main { grid-template-columns: repeat(${exploreUserVar}, 1fr); gap: min(${exploreUserVar} * 8px, 16px); } @@ -169,7 +169,7 @@ const mobileList = css` /* 探索的用户和组织列表 */ .page-content.explore.users >.ui.container { /* 排除用户的公开活动页 */ - > .flex-list:not(#activity-feed) { + > .items-with-main:not(#activity-feed) { grid-template-columns: 1fr; gap: 8px; } @@ -190,8 +190,8 @@ const notMatch = css` /* 探索的用户和组织列表 */ .page-content.explore.users >.ui.container { /* 排除用户的公开活动页 */ - > .flex-list:not(#activity-feed) { - &:has(> div:only-child):not(:has(.flex-item-main)) { + > .items-with-main:not(#activity-feed) { + &:has(> div:only-child):not(:has(.item-main)) { grid-template-columns: 1fr; > div { border: 1px solid ${themeVars.color.light.border}; diff --git a/styles/components/heatmap.ts b/styles/components/heatmap.ts index da6e8d1..b2c958f 100644 --- a/styles/components/heatmap.ts +++ b/styles/components/heatmap.ts @@ -25,61 +25,59 @@ const heatmap = css` border-color: #0000; margin: 8px 0px; } - .total-contributions { - left: 25px + 20px; - bottom: 0 + 12px; - } - .total-contributions, - .vch__legend-right { + .heatmap-footer { color: ${themeVars.color.text.light.num1}; + padding: 2px 20px 0px 25px; } - .vch__container { + > div { padding: 12px 20px; box-shadow: 0px 0px 0px 1px ${themeVars.color.light.border}, ${themeVars.github.shadow.resting.small}; border-radius: 12px; /* 覆盖热力图和图例的背景色 */ - .vch__day__square, - .vch__legend__wrapper rect { - /* 圆角 */ - rx: 2.5px; - ry: 2.5px; - /* 边框圆角 */ - border-radius: 1px; - /* 宽度和高度可以用来控制间隔 */ - width: 9.5px; - height: 9.5px; - /* 边框 */ - outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; - /* 边框向内偏移 */ - outline-offset: -0.5px; + .heatmap-legend-svg, + .heatmap-grid { + rect { + /* 圆角 */ + rx: 2.5px; + ry: 2.5px; + /* 边框圆角 */ + border-radius: 1.5px; + /* 宽度和高度可以用来控制间隔 */ + width: 9.5px; + height: 9.5px; + /* 边框 */ + outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; + /* 边框向内偏移 */ + outline-offset: -0.5px; - &:hover { - outline: 0.5px solid ${themeVars.color.text.self} !important; - } - &[style="fill: var(--color-secondary-alpha-60);"] { - fill: ${themeVars.github.contribution.default.bgColor.num0} !important; - } - &[style="fill: var(--color-primary-light-4);"] { - fill: ${themeVars.github.contribution.default.bgColor.num1} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num1}; - } - &[style="fill: var(--color-primary-light-2);"] { - fill: ${themeVars.github.contribution.default.bgColor.num2} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num2}; - } - &[style="fill: var(--color-primary);"] { - fill: ${themeVars.github.contribution.default.bgColor.num3} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num3}; - } - &[style="fill: var(--color-primary-dark-2);"] { - fill: ${themeVars.github.contribution.default.bgColor.num4} !important; - outline-color: ${themeVars.github.contribution.default.borderColor.num4}; - } - &[style="fill: var(--color-primary-dark-4);"] { - fill: ${themeVars.github.themeExtra.contribution.default.bgColor.num5} !important; - outline-color: ${themeVars.github.themeExtra.contribution.default.borderColor.num5}; + &:hover { + outline: 0.5px solid ${themeVars.color.text.self} !important; + } + &[style="fill: var(--color-secondary-alpha-60);"] { + fill: ${themeVars.github.contribution.default.bgColor.num0} !important; + } + &[style="fill: var(--color-primary-light-4);"] { + fill: ${themeVars.github.contribution.default.bgColor.num1} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num1}; + } + &[style="fill: var(--color-primary-light-2);"] { + fill: ${themeVars.github.contribution.default.bgColor.num2} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num2}; + } + &[style="fill: var(--color-primary);"] { + fill: ${themeVars.github.contribution.default.bgColor.num3} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num3}; + } + &[style="fill: var(--color-primary-dark-2);"] { + fill: ${themeVars.github.contribution.default.bgColor.num4} !important; + outline-color: ${themeVars.github.contribution.default.borderColor.num4}; + } + &[style="fill: var(--color-primary-dark-4);"] { + fill: ${themeVars.github.themeExtra.contribution.default.bgColor.num5} !important; + outline-color: ${themeVars.github.themeExtra.contribution.default.borderColor.num5}; + } } } } @@ -91,15 +89,15 @@ const activity = css` .activity-heatmap-container + .divider:not(.divider-text) { border-color: #0000; } - .flex-list#activity-feed { + #activity-feed { border-radius: 12px; box-shadow: 0px 0px 0px 1px ${themeVars.color.light.border}, ${themeVars.github.shadow.resting.small}; - > .flex-item { + > .item { gap: 12px; padding: 16px; - > .flex-item-leading { + > .item-leading { img { width: 24px; height: 24px; @@ -107,7 +105,7 @@ const activity = css` } } /* 动态的主要内容 */ - > .flex-item-main { + > .item-main { gap: 8px !important; /* 动态的标题 */ > div:not([class]) { @@ -148,7 +146,7 @@ const activity = css` } } } - > .flex-item-body { + > .item-body { gap: 4px; font-size: 12px; color: ${themeVars.color.text.light.num1}; @@ -158,7 +156,7 @@ const activity = css` } } /* 动态的右侧 svg 图标 */ - .flex-item-trailing { + .item-trailing { align-self: center; svg { height: 18px; diff --git a/styles/components/issues/issue.ts b/styles/components/issues/issue.ts index 1a7734a..518e135 100644 --- a/styles/components/issues/issue.ts +++ b/styles/components/issues/issue.ts @@ -76,7 +76,7 @@ const babel = css` // PR 分支标签 const prBranch = css` .repository.view.issue .pull-desc code, - #issue-list .flex-item-body .branches .branch { + #issue-list .branches .branch { color: ${themeVars.github.fgColor.accent}; background-color: ${themeVars.github.bgColor.accent.muted}; border-radius: ${otherThemeVars.border.radius}; diff --git a/styles/components/issues/issue_list.ts b/styles/components/issues/issue_list.ts index 2b62402..80a9fe2 100644 --- a/styles/components/issues/issue_list.ts +++ b/styles/components/issues/issue_list.ts @@ -100,14 +100,14 @@ const issueList = css` .page-content.user.notification, /* 仓库 Issue 列表 */ .page-content.repository.issue-list { - .flex-list#issue-list { + #issue-list { border: 1px solid ${themeVars.color.light.border}; border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; img.ui.avatar { border-radius: 9999px; } - > .flex-item { + > .item { align-items: center; padding: 0; min-height: 64px; @@ -121,7 +121,7 @@ const issueList = css` &:has(:checked) { background-color: ${themeVars.github.bgColor.accent.muted}; } - > .flex-item-leading { + > .item-leading { align-self: flex-start; margin-top: 14px; margin-left: 16px; @@ -133,32 +133,34 @@ const issueList = css` } } } - > .flex-item-main { + > .item-main { gap: 4px; - .flex-item-header { + .item-header { padding-top: 8px; } - .flex-item-body { + .item-body { font-size: 12px; padding-bottom: 8px; } } - > .flex-item-trailing { + > .item-trailing { margin-right: 32px; } } } } + /* 里程碑列表 */ /* [TODO] 暂时排除项目的列表 */ - .page-content.repository.milestones:not(.projects) .milestone-list { + .page-content.repository.milestones:not(.projects) .milestone-list, + /* 仪表板的里程碑列表 */ + .page-content.repository.milestones.dashboard .flex-divided-list { border: 1px solid ${themeVars.color.light.border}; border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; - .milestone-card { + .item { padding: 8px 16px 10px 16px; - .milestone-header { - h3 { + .list-item-large-title { font-size: 16px; font-weight: 500; } @@ -166,11 +168,11 @@ const issueList = css` font-size: 14px; font-weight: 600; } - } + } - .milestone-toolbar { + .list-item-secondary-bar { font-size: 12px; - .group > a { + .a { font-size: 13px; } } diff --git a/styles/components/notification.ts b/styles/components/notification.ts index 5b92644..1caacff 100644 --- a/styles/components/notification.ts +++ b/styles/components/notification.ts @@ -31,7 +31,7 @@ const notification = css` } /* 订阅列表 */ &:has(#issue-list) { - > .tw-flex { + > .flex-left-right { align-items: center; align-content: center; background-color: ${themeVars.color.box.header}; @@ -64,7 +64,7 @@ const notification = css` } } /* 右侧菜单 */ - > .tw-flex:last-child > .ui.menu { + > .ui.secondary.menu:last-child { align-items: center; > .item { color: ${themeVars.color.text.light.num1}; @@ -77,18 +77,18 @@ const notification = css` } } /* 关注列表 */ - > .flex-list:not([id]) { + > .items-with-main:not([id]) { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; - > .flex-item { + > .item { padding: 16px; - > .flex-item-main { + > .item-main { gap: 4px; - > .flex-item-header { - > .flex-item-title { + > .item-header { + > .item-title { gap: 12px; } - > .flex-item-trailing { + > .item-trailing { color: ${themeVars.color.text.light.num1}; font-size: 12px; font-weight: 400; @@ -100,7 +100,7 @@ const notification = css` } } } - > .flex-item-body:last-child { + > .item-body:last-child { font-size: 12px; } } @@ -109,7 +109,7 @@ const notification = css` } /* 通知列表 */ &:has(#notification_table) { - > .flex-text-block:first-child { + > .flex-left-right:first-child { background-color: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.light.border}; border-bottom: 0; @@ -172,6 +172,10 @@ const notification = css` box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset; color: ${themeVars.color.text.self}; } + > .tw-self-start:has(svg) { + margin-top: 1px !important; + line-height: 1; + } > .notifications-link > div { &:first-child { font-size: 12px !important; diff --git a/styles/components/org.ts b/styles/components/org.ts index 618bf3c..6a7ec05 100644 --- a/styles/components/org.ts +++ b/styles/components/org.ts @@ -25,42 +25,48 @@ const org = css` .members .ui.avatar { border-radius: 9999px; } - /* 组织头像 */ - .org-avatar { - margin: 8px 24px 16px 0px; - } - /* 组织信息 */ - #org-info { - margin-top: 8px; /* 与头像对齐 */ - gap: 8px; - /* 组织名称 */ - > .ui.header { - font-size: 24px; - > .org-visibility { - margin-left: 8px; + > .ui.container { + /* 组织头像 */ + > div:not([class]):first-child { + .ui.avatar { + margin: 8px 16px 16px 0px; } - /* 组织页面的 RSS 订阅按钮 */ - .ui.label.button { - padding: 4px 16px; - .svg { - width: 20px; - min-width: 20px; - } - &:hover { - border-color: ${themeVars.color.light.border}; - } - } - } - /* 组织描述 */ - > .markup { - color: ${themeVars.color.text.light.num1}; } /* 组织信息 */ - > .meta { - font-size: 12px; - svg { + > .flex-relaxed-list:last-child { + gap: 8px; + /* 组织名称 */ + > .ui.header { + font-size: 24px; + > .org-visibility { + margin-left: 8px; + } + /* 组织页面的 RSS 订阅按钮 */ + .ui.label.button { + padding: 4px 16px; + .svg { + width: 20px; + min-width: 20px; + } + &:hover { + border-color: ${themeVars.color.light.border}; + } + } + } + /* 组织描述 */ + > .markup { color: ${themeVars.color.text.light.num1}; } + /* 组织信息 */ + > div:not([class]) { + display: flex; + flex-direction: column; + gap: 4px; + font-size: 12px; + svg { + color: ${themeVars.color.text.light.num1}; + } + } } } } diff --git a/styles/components/repo/milestones.ts b/styles/components/repo/milestones.ts index 73d7508..eaff685 100644 --- a/styles/components/repo/milestones.ts +++ b/styles/components/repo/milestones.ts @@ -31,7 +31,7 @@ const milestone = css` } } /* 里程碑 Issue 列表的进度条 */ - .milestone-progress-big { + .list-item-title-progress { height: 8px; } /* 里程碑 Issue 列表 */ diff --git a/styles/components/repo/packages.ts b/styles/components/repo/packages.ts index 87e06f9..e18c72e 100644 --- a/styles/components/repo/packages.ts +++ b/styles/components/repo/packages.ts @@ -23,19 +23,20 @@ import { css, cssCombine, otherThemeVars, themeVars } from "@lutinglt/gitea-gith const packagesList = css` .page-content.packages { /* 这里必须要用 >, 否则会影响到软件包详细信息页的样式 */ - > .ui.container > div:not([class]) { + /* 避免锚中组织头像 */ + > .ui.container > div:not([class]):not(:has(img.ui.avatar)) { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; margin-top: 16px; - .flex-list { + .items-with-main { border-top: 1px solid ${themeVars.color.light.border}; &:first-child { border-top: 0; } - .flex-item { + .item { padding: 16px; - .flex-item-main { - .flex-item-title { + .item-main { + .item-title { gap: 8px; > a { min-height: 25px; @@ -50,7 +51,7 @@ const packagesList = css` color: ${themeVars.color.primary.self}; } } - .flex-item-body { + .item-body { font-size: 12px; a { text-decoration: underline; diff --git a/styles/components/repo/repo.ts b/styles/components/repo/repo.ts index 365d3f7..664f1e9 100644 --- a/styles/components/repo/repo.ts +++ b/styles/components/repo/repo.ts @@ -26,9 +26,9 @@ const repoHeader = css` .ui.compact.button { padding: 3px 12px; } - /* 仓库名称 */ - .flex-item { - .flex-item-title { + > .flex-text-block:first-child { + /* 仓库名称 */ + > .flex-text-block:first-of-type { /* 间隔线颜色 */ color: ${themeVars.color.text.light.num1}; /* 仓库名称 */ @@ -41,8 +41,8 @@ const repoHeader = css` min-width: 3ch; padding: 0px 6px; border-radius: ${otherThemeVars.border.radius}; - margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-top: 8px; + margin-bottom: 8px; &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; } @@ -51,10 +51,6 @@ const repoHeader = css` } } } - /* 默认的 hover 为 primary 颜色, 修正 */ - a:not(.label, .button):hover { - color: ${themeVars.color.text.self} !important; - } } } `; @@ -87,7 +83,7 @@ const repoMenu = css` const repoTopic = css` /* 理应只能覆盖探索/组织/用户下仓库的 topic 标签 */ /* 避免渲染到仓库的类型标签 */ - .flex-item-main > .label-list .ui.label, + .items-with-main > .item > .item-main > .label-list > .ui.label, /* 仓库文件列表下的 topic 标签 */ #repo-topics .ui.label.repo-topic { border-radius: 9999px; diff --git a/styles/components/repo/repo_sidebar.ts b/styles/components/repo/repo_sidebar.ts index c2103ab..0848fb7 100644 --- a/styles/components/repo/repo_sidebar.ts +++ b/styles/components/repo/repo_sidebar.ts @@ -23,7 +23,7 @@ import { css, cssCombine, themeVars } from "@lutinglt/gitea-github-theme/core"; const repoGrid = css` .repo-grid-filelist-sidebar { grid-template-columns: auto 312px; - gap: 24px; + gap: 16px; } @media (max-width: 767.98px) { @@ -31,6 +31,12 @@ const repoGrid = css` grid-template-columns: 100%; } } + .repo-grid-filelist-sidebar { + .repo-home-sidebar-top, + .repo-home-sidebar-bottom { + padding-left: 24px; + } + } `; // 仓库代码页面侧边栏上半部, 版本发布以上 @@ -44,40 +50,41 @@ const repoSidebarTop = css` a.muted:hover { text-decoration: none; } - .flex-item { - padding: 10px 0 0 0; - /* 仓库描述本身 */ - .flex-item-title { - margin-top: 10px; + /* 仓库描述本身 */ + .repo-home-sidebar-header { + margin-top: 10px; + } + /* 仓库描述内容 */ + .repo-description { + margin-top: 10px; + color: ${themeVars.color.text.self}; + } + /* 仓库标签 */ + #repo-topics { + margin: 8px 0px !important; + gap: 4px !important; + } + #manage_topic { + color: ${themeVars.color.text.light.num1} !important; + } + /* 仓库属性 */ + .flex-text-block { + color: ${themeVars.color.text.light.num1}; + font-size: 14px; + font-weight: 600; + margin-top: 10px; + &.muted { + margin-top: 2px; + font-weight: normal; } - /* 仓库描述内容 */ - .flex-item-body { - > .tw-flex:first-child { - margin-top: 16px !important; - gap: 8px !important; - } - .repo-description { - color: ${themeVars.color.text.self}; - } - #repo-topics { - margin: 8px 0px !important; - } - .flex-text-block { - font-size: 14px; - font-weight: 600; - margin-top: 10px; - &.muted { - margin-top: 2px; - font-weight: normal; - } - svg.svg { - margin-right: 4px; - &.octicon-database, - &.octicon-law { - margin-right: 6px; - } - } - } + svg.svg { + margin-right: 4px; + } + } + #manage_topic, + a.flex-text-block.muted { + &:hover { + color: ${themeVars.color.primary.self} !important; } } } @@ -91,20 +98,29 @@ const repoSidebarBottom = css` a.muted:hover { text-decoration: none; } - .flex-item { - padding: 16px 0; - .flex-item { - padding: 16px 0 0 0; - .flex-item-leading { - svg.svg.octicon-tag { - color: ${themeVars.color.green.self}; - } - } - .flex-item-header .flex-item-title { + svg.svg.octicon-tag { + color: ${themeVars.color.green.self}; + } + .repo-home-sidebar-header { + margin: 8px 0; + } + /* 版本 */ + .repo-home-sidebar-header + .flex-relaxed-list { + gap: 0px; + margin-bottom: 8px; + .flex-text-block { + /* 版本名称 */ + > a.muted { font-size: 14px; + font-weight: 600; + } + /* 版本标签 */ + > .tw-shrink-0 { + display: inline-flex; } } - .flex-item-body { + relative-time { + color: ${themeVars.color.text.light.num1}; font-size: 12px; } } @@ -117,6 +133,7 @@ const repoSidebarBottom = css` outline-offset: -1px; } .language-stats-details .item { + color: ${themeVars.color.text.light.num1}; font-size: 12px; margin-right: 8px; .color-icon { diff --git a/styles/components/user.ts b/styles/components/user.ts index 361cc3e..5944a02 100644 --- a/styles/components/user.ts +++ b/styles/components/user.ts @@ -23,25 +23,25 @@ import { css, cssCombine, themeVars } from "@lutinglt/gitea-github-theme/core"; const stars = css` .page-content.user.profile { .stars { - > .flex-list { - > .flex-item { + > .items-with-main { + > .item { padding: 24px 0; &:first-child { padding-top: 14px; } /* 仓库头像 */ - > .flex-item-leading { + > .item-leading { img, svg { color: ${themeVars.color.text.light.num1}; } } /* 仓库信息 */ - > .flex-item-main { + > .item-main { /* 仓库标题 */ - > .flex-item-header { + > .item-header { /* 仓库名称 */ - > .flex-item-title { + > .item-title { font-size: 20px; gap: 8px; /* 仓库中间的间隔线 */ @@ -50,7 +50,7 @@ const stars = css` } } /* 仓库语言, 星标 */ - > .flex-item-trailing { + > .item-trailing { color: ${themeVars.color.text.light.num1}; gap: 16px; font-size: 12px; @@ -62,7 +62,7 @@ const stars = css` } } /* 描述和更新时间 */ - > .flex-item-body { + > .item-body { margin-top: 10px; /* 更新时间 */ &:last-child { diff --git a/styles/public/attached.ts b/styles/public/attached.ts index 69f975f..0c0a9ec 100644 --- a/styles/public/attached.ts +++ b/styles/public/attached.ts @@ -62,6 +62,12 @@ const attached = css` border-top-left-radius: ${otherThemeVars.border.radius} !important; border-top-right-radius: ${otherThemeVars.border.radius} !important; } + /* 元素和元素之间有隐藏的元素 */ + &:has(+ .tw-hidden) + .ui.attached.segment + .ui.attached.segment { + border-top-width: 0 !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } &:has(+ :not(.ui.attached.segment)), &:last-child { border-bottom-left-radius: ${otherThemeVars.border.radius} !important; @@ -83,6 +89,9 @@ const fixActivity = css` border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; } + &:only-of-type { + border-radius: ${otherThemeVars.border.radius}; + } } } `; diff --git a/styles/public/base.ts b/styles/public/base.ts index b6910c3..dfd2670 100644 --- a/styles/public/base.ts +++ b/styles/public/base.ts @@ -25,6 +25,9 @@ const body = css` } a { text-underline-offset: 0.2rem; /* 0.2rem 可以始终保持下划线不受 overflow: hidden 的影响 */ + &:hover { + text-underline-position: unset; + } } /* 默认代码块 */ code:not(.code-inner) { diff --git a/styles/public/label/checkbox_label.ts b/styles/public/label/checkbox_label.ts new file mode 100644 index 0000000..031d1c1 --- /dev/null +++ b/styles/public/label/checkbox_label.ts @@ -0,0 +1,30 @@ +/*! + * Copyright (c) https://github.com/lutinglt + * + * See the NOTICE file distributed with this work for additional + * information regarding copyright ownership. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { css, cssCombine } from "@lutinglt/gitea-github-theme/core"; + +const checkboxLabel = css` + .ui.checkbox label { + display: inline-flex; + align-items: center; + gap: 2px; + } +`; + +export default cssCombine(checkboxLabel); diff --git a/styles/public/label/index.ts b/styles/public/label/index.ts index a299f33..a003c9e 100644 --- a/styles/public/label/index.ts +++ b/styles/public/label/index.ts @@ -18,9 +18,10 @@ */ import { cssCombine } from "@lutinglt/gitea-github-theme/core"; +import checkboxLabel from "./checkbox_label"; import label from "./label"; import repoLabel from "./repo_label"; import shaLabel from "./sha_label"; import taskStatusLabel from "./task_status_label"; -export default cssCombine(label, repoLabel, shaLabel, taskStatusLabel); +export default cssCombine(label, repoLabel, shaLabel, taskStatusLabel, checkboxLabel); diff --git a/styles/public/menu/compact_menu.ts b/styles/public/menu/compact_menu.ts index a80aa2f..c03d540 100644 --- a/styles/public/menu/compact_menu.ts +++ b/styles/public/menu/compact_menu.ts @@ -24,7 +24,7 @@ const smallCompactMenu = css` /* 编辑/预览切换菜单(仓库编辑文件时的编辑器操作栏左侧) */ .page-content.repository.file.editor .repo-view-content .ui.edit.form .ui.top.attached.header, /* 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面) */ - .page-content.user.notification > .ui.container:has(.flex-list), + .page-content.user.notification > .ui.container:has(.items-with-main), /* 里程碑/标签切换菜单(里程碑页) */ .page-content.repository.milestones .list-header, /* 里程碑/标签切换菜单(新建里程碑页) */ diff --git a/styles/public/menu/menu.ts b/styles/public/menu/menu.ts index 6669d0e..58d7c82 100644 --- a/styles/public/menu/menu.ts +++ b/styles/public/menu/menu.ts @@ -23,6 +23,9 @@ import { labelStyle } from "@lutinglt/gitea-github-theme/styles/common"; const menu = css` .ui.menu { min-height: 32px; + .item { + line-height: 21px; + } } .menu .item svg { color: ${themeVars.color.text.light.num1}; diff --git a/styles/public/menu/vertical_menu.ts b/styles/public/menu/vertical_menu.ts index 2d33c79..6d9e4cf 100644 --- a/styles/public/menu/vertical_menu.ts +++ b/styles/public/menu/vertical_menu.ts @@ -30,10 +30,10 @@ const verticalMenu = css` /* 设置页面的菜单头部 */ .header.item { color: ${themeVars.color.text.light.num1} !important; - font-size: 1.5rem; - font-weight: 700; + font-size: 20px; + font-weight: 600; background: unset; - margin-bottom: 0.5rem; + margin-bottom: 8px; } /* 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染 */ a.item { @@ -48,7 +48,7 @@ const verticalMenu = css` /* 菜单项 */ .item, .item > summary { - font-size: 1.1rem; + font-size: 14px; background: unset; border-radius: ${otherThemeVars.border.radius}; padding: 6px 8px; @@ -76,7 +76,15 @@ const verticalMenu = css` ${activeItemAfterStyle}; } /* 部分菜单项的子菜单 */ - details.item { + > details.item { + /* Actions 其他工作流菜单 */ + > summary, + > .menu.items-full-width > .item { + padding: 6px 8px; + } + > .menu { + margin: 0; + } /* 子菜单的标题 */ summary:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; diff --git a/styles/public/modal.ts b/styles/public/modal.ts index c878408..e9bc4c4 100644 --- a/styles/public/modal.ts +++ b/styles/public/modal.ts @@ -47,4 +47,11 @@ const modal = css` } `; -export default cssCombine(modal); +const modalFix = css` + /* 覆盖默认的动画 */ + .ui.modal.transition { + ${animationDown} + } +`; + +export default cssCombine(modal, modalFix); diff --git a/styles/public/transition.ts b/styles/public/transition.ts index 7fd6b92..0b525f9 100644 --- a/styles/public/transition.ts +++ b/styles/public/transition.ts @@ -30,7 +30,7 @@ const transition = css` .ui.attached.segment.table ul li, /* Issue 列表 */ .issue-list-toolbar .item, - .flex-list#issue-list > .flex-item, + #issue-list > .item, /* 分页菜单 */ .ui.borderless.pagination.menu .item, /* 迁移的元素 */