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. */}}