diff --git a/public/repo-latest-release.css b/public/repo-latest-release.css index bd699f9d..c537e089 100644 --- a/public/repo-latest-release.css +++ b/public/repo-latest-release.css @@ -1,11 +1,11 @@ +/* GitHub's latest release: tag icon, name and Latest badge on one 21px row, the date beneath the name. */ .page-content.repository.file.list .repo-latest-release { display: block; margin: 0; - padding: 7px 0 8px; + padding: 0; color: var(--color-text); } -.page-content.repository.file.list .repo-latest-release:hover, -.page-content.repository.file.list .repo-release-count:hover { +.page-content.repository.file.list .repo-latest-release:hover { text-decoration: none; } .page-content.repository.file.list .repo-latest-release-heading { @@ -13,6 +13,7 @@ align-items: center; gap: 8px; min-width: 0; + line-height: 21px; } .page-content.repository.file.list .repo-latest-release-heading > svg { color: var(--color-green); @@ -27,80 +28,28 @@ white-space: nowrap; } .page-content.repository.file.list .repo-latest-release-badge { - border: 1px solid var(--color-green); - border-radius: 12px; - color: var(--color-green); flex: 0 0 auto; + padding: 0 6px; + border: 1px solid var(--github-borderColor-success-emphasis); + border-radius: 2em; + color: var(--color-green); font-size: 12px; + font-weight: 500; line-height: 18px; - padding: 0 7px; } .page-content.repository.file.list .repo-latest-release-date { display: block; - color: var(--color-text-light-1); - font-size: 12px; margin-left: 24px; -} -.page-content.repository.file.list .repo-latest-release-date { - margin-top: 2px; -} -.page-content.repository.file.list .repo-release-count { - display: block; - color: var(--color-accent-fg); + color: var(--color-text-light-1); font-size: 12px; - padding: 3px 0 10px; -} -.page-content.repository.file.list .repo-release-heading { - margin-bottom: 0; -} -.page-content.repository.file.list .repo-latest-release { - padding-top: 0; -} -.page-content.repository.file.list .repo-release-heading + .repo-latest-release { - margin-top: -8px; -} -.page-content.repository.file.list .repo-release-count { - color: var(--color-primary); - text-decoration: none; -} -.page-content.repository.file.list .repo-release-count:hover, -.page-content.repository.file.list .repo-release-count:focus-visible { - background: transparent; - color: var(--color-primary); - text-decoration: none; -} -/* Match GitHub's inline release-count link: no block hit area or padding. */ -.page-content.repository.file.list .repo-release-count { - display: inline; - color: rgb(68 147 248); line-height: 18px; - padding: 0; -} -.page-content.repository.file.list .repo-release-count:hover, -.page-content.repository.file.list .repo-release-count:focus-visible { - color: rgb(68 147 248); - text-decoration: underline; -} -.page-content.repository.file.list .repo-release-count { - display: inline !important; -} -.page-content.repository.file.list .repo-release-count:hover, -.page-content.repository.file.list .repo-release-count:focus-visible { - text-decoration: underline !important; -} -/* GitHub leaves a compact gap below the release-count link before the divider. */ -.page-content.repository.file.list .repo-release-count { - margin-bottom: -8px; -} -.page-content.repository.file.list .repo-release-count { - margin-bottom: 10px; } -/* GitHub's empty Releases/Packages states: a muted line and a first-step link. */ +/* GitHub's empty Releases and Packages states: a muted line and, for people who can publish, a first-step link. */ .repo-home-sidebar-empty { display: flex; flex-direction: column; - gap: 2px; + gap: 0; color: var(--color-text-light-1); font-size: 12px; line-height: 18px; diff --git a/src/build-output.test.ts b/src/build-output.test.ts index 80b87e0d..06a632d6 100644 --- a/src/build-output.test.ts +++ b/src/build-output.test.ts @@ -502,7 +502,6 @@ describe("Forgejo 15 native integration", () => { path.join(ROOT_DIR, "styles", "components", "repo", "repo_sidebar.ts"), "utf-8" ); - const repoHomeStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "home.ts"), "utf-8"); const viewListStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "view_list.ts"), "utf-8"); const viewListTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "view_list.tmpl"), "utf-8"); const latestCommitTemplate = fs.readFileSync( @@ -554,10 +553,10 @@ describe("Forgejo 15 native integration", () => { expect(viewListStyle).toContain("#repo-files-table .repo-file-cell.name > svg"); expect(viewListStyle).toContain("color: ${themeVars.color.text.light.num1};"); expect(viewListStyle).toContain("text-transform: capitalize;"); - expect(repoHomeStyle).toContain("column-gap: 16px;"); - expect(repoHomeStyle).toContain(".language-stats-details .item"); - expect(repoHomeStyle).toContain("padding: 0;"); - expect(repoSidebarStyle).toContain("margin-right: 0;"); + // GitHub's language legend: 12px between entries, an 8px dot 8px before the name, 4px before the share. + expect(repoSidebarStyle).toContain(".language-stats-details {"); + expect(repoSidebarStyle).toContain("gap: 3px 12px;"); + expect(repoSidebarStyle).toContain("margin-right: 8px;"); expect(repoSidebarStyle).toContain("margin-right: 4px;"); expect(repoFilesStyle).not.toContain("&.repo-file-last-commit"); }); diff --git a/styles/components/repo/repo_sidebar.ts b/styles/components/repo/repo_sidebar.ts index 19f8b055..5c98295f 100644 --- a/styles/components/repo/repo_sidebar.ts +++ b/styles/components/repo/repo_sidebar.ts @@ -39,97 +39,134 @@ const repoGrid = css` } `; -// 仓库代码页面侧边栏上半部, 版本发布以上 +// GitHub's About section, measured on github.com at the same width: 12px between its blocks, 8px between metadata +// rows, links that turn accent blue on hover. const repoSidebarTop = css` - .page-content.repository.file.list { - .repo-home-sidebar-top { - /* 搜索代码 */ - .ui.input > input { - background: unset; + .page-content.repository.file.list .repo-home-sidebar-top { + .repo-about-block { + gap: 0; + } + .repo-about-settings { + color: ${themeVars.color.text.light.num1}; + &:hover { + background: transparent; + color: ${themeVars.github.fgColor.accent}; } - a.muted:hover { - text-decoration: none; + } + .repo-description { + margin-top: 12px; + } + .repo-home-sidebar-website { + gap: 8px; + margin-top: 0; + color: ${themeVars.github.fgColor.accent}; + font-size: 14px; + font-weight: 600; + line-height: 21px; + & svg { + color: ${themeVars.color.text.self}; + } + &:hover { + text-decoration: underline; + } + } + .repo-about-topic-list { + gap: 8px 2px; + margin-top: 12px; + .repo-description + & { + margin-top: 0; + } + &:not(:has(.repo-topic)) { + display: none; } - #manage_topic { - color: ${themeVars.color.text.light.num1} !important; + } + /* Beats the shared topic label rule in repo.ts, which also styles explore and profile lists. */ + #repo-topics .repo-about-topic-list .ui.label.repo-topic { + margin: 0; + padding: 2px 12px; + border: 1px solid transparent; + border-radius: 2em; + font-size: 12px; + font-weight: 600; + line-height: 19.5px; + &:hover { + background: ${themeVars.github.bgColor.accent.emphasis}; + color: ${themeVars.github.fgColor.onEmphasis}; } - /* 仓库属性 */ + } + .repo-home-sidebar-metadata { + gap: 8px; + margin-top: 8px; .flex-text-block { + gap: 8px; + min-height: 0; + margin: 0; color: ${themeVars.color.text.light.num1}; font-size: 14px; - font-weight: 600; - margin-top: 10px; - &.muted { - margin-top: 2px; - font-weight: normal; - } - svg.svg { - margin-right: 4px; + font-weight: 400; + line-height: 21px; + & b { + font-weight: 600; } } - #manage_topic, - a.flex-text-block.muted { - &:hover { - color: ${themeVars.color.primary.self} !important; - } + a.flex-text-block:hover { + color: ${themeVars.github.fgColor.accent}; + text-decoration: none; } } } `; -// 仓库代码页面侧边栏下半部, 版本发布以下 +// GitHub's lower sections: a divider, 16px, the heading with its counter beside it, 12px, the content, 16px. const repoSidebarBottom = css` - .page-content.repository.file.list { - .repo-home-sidebar-bottom { - a.muted:hover { - text-decoration: none; - } - 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; - } - } - relative-time { - color: ${themeVars.color.text.light.num1}; - font-size: 12px; - } + .page-content.repository.file.list .repo-home-sidebar-bottom { + &.flex-relaxed-list { + gap: 0; + } + > .divider { + margin: 16px 0 !important; + &:first-child { + margin-top: 0 !important; } - /* 编程语言 */ - .language-stats { - height: 8px; - margin-bottom: 0px; - background-color: ${themeVars.github.progressBar.track.bgColor}; - outline: 1px solid ${themeVars.github.progressBar.track.borderColor}; - outline-offset: -1px; + } + .repo-home-sidebar-header { + justify-content: flex-start; + gap: 4px; + margin: 0 0 12px; + line-height: 24px; + & a.muted:hover { + color: ${themeVars.github.fgColor.accent}; + text-decoration: none; } - .language-stats-details .item { - color: ${themeVars.color.text.light.num1}; + } + /* Languages: an 8px bar of 2px-separated segments over a legend of dot, name and share. */ + .language-stats { + gap: 2px; + height: 8px; + border-radius: 3px; + outline: none; + } + .language-stats-details { + display: flex; + flex-wrap: wrap; + gap: 3px 12px; + margin-top: 11px; + padding-bottom: 0; + .item { + display: flex; + align-items: center; + color: ${themeVars.color.text.self}; font-size: 12px; - margin-right: 0; + line-height: 18px; .color-icon { - height: 8px; + flex: 0 0 8px; width: 8px; + height: 8px; margin-right: 8px; } .tw-font-semibold { - color: ${themeVars.color.text.self}; margin-right: 4px; + color: ${themeVars.color.text.self}; } } } diff --git a/styles/templates/repo/home.ts b/styles/templates/repo/home.ts index 7d42485d..82508029 100644 --- a/styles/templates/repo/home.ts +++ b/styles/templates/repo/home.ts @@ -118,14 +118,6 @@ const repositoryHome = css` white-space: nowrap; } - .page-content.repository.file.list .repo-home-sidebar-metadata { - gap: 2px; - } - - .page-content.repository.file.list .repo-home-sidebar-metadata .flex-text-block { - min-height: 22px; - } - .page-content.repository.file.list .repo-home-sidebar-header { align-items: center; display: flex; @@ -134,9 +126,7 @@ const repositoryHome = css` .page-content.repository.file.list .language-stats { background-color: ${themeVars.github.progressBar.track.bgColor}; - border-radius: 5px; display: flex; - gap: 1px; height: 8px; margin: 0; overflow: hidden; @@ -145,53 +135,11 @@ const repositoryHome = css` width: 100%; } - .page-content.repository.file.list .language-stats-details { - column-gap: 16px; - display: flex; - flex-wrap: wrap; - margin-top: 8px; - padding-bottom: 3px; - row-gap: 3px; - } - - .page-content.repository.file.list .language-stats-details .item { - align-items: center; - display: flex; - gap: 0; - height: auto; - justify-content: flex-start; - line-height: 18px; - padding: 0; - text-decoration: none; - } - - .page-content.repository.file.list .language-stats-details .color-icon { - border-radius: 50%; - display: inline-block; - flex: 0 0 10px; - height: 10px; - margin-right: 6px; - width: 10px; - } - - .page-content.repository.file.list .language-stats-details .tw-font-semibold { - margin-right: 4px; - } - - .page-content.repository.file.list .repo-language-content { - margin-top: -4px; - } - @media (max-width: 767.98px) { .page-content.repository.file.list.repo-has-sidebar > .repository-content-header > .ui.container { border-bottom: 0; padding-bottom: 0; } - .page-content.repository.file.list - .repo-home-sidebar-metadata - > a:has(:is(.octicon-star, .octicon-repo-forked, .octicon-eye)) { - text-transform: lowercase; - } .page-content.repository.file.list.repo-has-sidebar .repo-header > .flex-item { display: none; @@ -206,15 +154,11 @@ const repositoryHome = css` .page-content.repository.file.list .repo-about-heading { display: none; } - .page-content.repository.file.list .repo-home-sidebar-metadata { + .page-content.repository.file.list .repo-home-sidebar-top .repo-home-sidebar-metadata { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } - .page-content.repository.file.list .repo-home-sidebar-metadata > a:has(.octicon-book), - .page-content.repository.file.list .repo-home-sidebar-metadata > div:has(.octicon-database) { - display: none; - } .page-content.repository.file.list .repo-home-sidebar-metadata > a:has(.octicon-star) { order: 1; } diff --git a/styles/templates/repo/view_content.ts b/styles/templates/repo/view_content.ts index 6277b52e..0bd0f66a 100644 --- a/styles/templates/repo/view_content.ts +++ b/styles/templates/repo/view_content.ts @@ -365,7 +365,7 @@ const repoToolbarDetails = css` width: 24px; } - .page-content.repository.file.list .repo-about-settings:hover, + /* The About gear has GitHub's bare link hover instead, in repo_sidebar.ts. */ .page-content.repository.file.list .repo-about-modal-close:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active}; diff --git a/templates/repo/home_sidebar_bottom.tmpl b/templates/repo/home_sidebar_bottom.tmpl index 1ba1798a..f84a92d3 100644 --- a/templates/repo/home_sidebar_bottom.tmpl +++ b/templates/repo/home_sidebar_bottom.tmpl @@ -1,12 +1,12 @@ {{/* Repository-root metadata sections: releases, packages and languages, like GitHub's sidebar. */}}