Skip to content

Code: Matched GitHub's sidebar layout and hover states #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whereareiam merged 1 commit into from
Oct 22, 2026
Merged

Code: Matched GitHub's sidebar layout and hover states #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 12 additions & 63 deletions public/repo-latest-release.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
/* 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 {
display: flex;
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);
Expand All @@ -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;
Expand Down
9 changes: 4 additions & 5 deletions src/build-output.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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");
});
Expand Down
171 changes: 104 additions & 67 deletions styles/components/repo/repo_sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
}
}
Expand Down
Loading
Loading