From 6d68e8138eb0d462602fc9858c5f64c862d4dd01 Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 16:04:34 +0200 Subject: [PATCH] Releases: Move the release and tag page styles into a page stylesheet The theme files were about 600 bytes under the size limit the build test enforces. The release list, release form and tag list rules (21 KB) are page-specific and already plain CSS, so they move to styles/pages/releases.css, loaded with the other page stylesheets. The largest theme file drops from 224.7 KB to 208.3 KB. No visual change: the affected and unaffected pages render identically before and after. Co-Authored-By: Claude Opus 5.5 --- scripts/assembleForgejo.ts | 1 + styles/components/repo/release.ts | 880 +-------------------------- styles/pages/releases.css | 861 ++++++++++++++++++++++++++ templates/base/component_assets.tmpl | 1 + 4 files changed, 864 insertions(+), 879 deletions(-) create mode 100644 styles/pages/releases.css diff --git a/scripts/assembleForgejo.ts b/scripts/assembleForgejo.ts index cfc95f86..d42f4265 100644 --- a/scripts/assembleForgejo.ts +++ b/scripts/assembleForgejo.ts @@ -48,6 +48,7 @@ for (const file of [ "organization.css", "profile-subpages.css", "pull-request.css", + "releases.css", "user-profile.css", ]) { cpSync(join(root, "styles", "pages", file), join(css, "components", "pages", file)); diff --git a/styles/components/repo/release.ts b/styles/components/repo/release.ts index 3164301f..eac6f815 100644 --- a/styles/components/repo/release.ts +++ b/styles/components/repo/release.ts @@ -171,882 +171,4 @@ const releaseListMobile = css` } `; -const githubReleasePage = css` - body:has(.page-content.repository.github-releases) .repository-content-header { - display: none; - } - .page-content.repository.github-releases > .ui.container { - box-sizing: border-box; - max-width: calc(100% - 32px); - padding-left: 0; - padding-right: 0; - width: 1116px !important; - } - .github-release-toolbar { - align-items: center; - border-bottom: 1px solid ${themeVars.color.light.border}; - display: flex; - gap: 16px; - justify-content: space-between; - margin: 0 0 32px; - padding: 24px 0; - } - .github-release-actions { - align-items: center; - display: flex; - gap: 8px; - } - .github-release-actions .secondary.button { - align-items: center; - box-sizing: border-box; - display: inline-flex; - height: 32px !important; - line-height: 20px; - min-height: 0 !important; - min-width: 163px; - padding: 5px 16px; - background-color: var(--color-button); - border-color: var(--color-light-border); - box-shadow: none; - color: var(--color-text); - } - .github-release-actions .secondary.button:hover { - background-color: var(--color-hover); - } - .github-release-content { - display: grid; - gap: 0 38px; - grid-template-columns: 164px minmax(0, 1fr); - } - .github-release-mobile-toc { - display: none; - } - .github-release-toc h2 { - color: var(--color-text); - font-size: 20px; - font-weight: 600; - line-height: 1.5; - margin: 0 0 8px; - margin-left: 0; - } - .github-release-toc ul { - list-style: none; - margin: 0; - padding: 0; - } - .github-release-toc li a { - border-radius: 6px; - color: var(--color-text) !important; - display: block; - font-size: 14px; - line-height: 20px; - margin-left: -10px; - overflow: hidden; - padding: 8px 10px; - text-overflow: ellipsis; - text-decoration: none; - white-space: nowrap; - } - .github-release-toc li a[aria-current="location"] { - font-weight: 600; - } - .github-release-toc li { - border-radius: 6px; - position: relative; - } - .github-release-toc li:has(a[aria-current="location"]) { - background: rgba(101, 108, 118, 0.2); - } - .github-release-toc li:has(a[aria-current="location"])::before { - background: #1f6feb; - border-radius: 6px; - bottom: 4px; - content: ""; - left: -8px; - position: absolute; - top: 4px; - width: 4px; - } - .github-release-toc li a:hover:not([aria-current="location"]) { - background: var(--color-hover); - color: var(--github-fgColor-accent); - } - #release-list.github-release-list { - grid-column: 2; - display: flex !important; - flex-direction: column; - gap: 32px; - margin: 0 0 16px !important; - } - #release-list.github-release-list > li { - display: block; - } - #release-list.github-release-list > li .meta { - display: none; - } - #release-list.github-release-list > li .release-title-wrap { - margin-left: 0 !important; - padding: 16px 16px 0; - } - #release-list.github-release-list > li .release-title-wrap > div { - display: flex; - flex-shrink: 0; - gap: 8px; - } - #release-list.github-release-list > li .release-title-wrap > div > :is(a, button) { - align-items: center; - background: var(--color-button); - border: 1px solid var(--color-light-border); - border-radius: 6px; - display: inline-flex; - height: 28px; - justify-content: center; - padding: 0; - width: 28px; - } - #release-list.github-release-list > li .github-release-controls > a { - color: var(--color-text-light-1) !important; - } - #release-list.github-release-list > li .github-release-controls > a svg { - color: var(--color-text-light-1) !important; - } - #release-list.github-release-list > li .release-title-wrap > div > :is(a, button):hover { - background: var(--color-hover); - } - #release-list.github-release-list > li .github-release-delete:hover { - color: var(--github-control-danger-fgColor-hover); - } - #release-list.github-release-list > li .release-title-wrap h4 { - align-items: center; - display: flex !important; - flex: 1; - flex-wrap: wrap; - font-size: 32px; - font-weight: 600; - gap: 8px; - line-height: 1.5; - min-width: 0; - } - #release-list.github-release-list > li .release-title-wrap h4 .github-release-name { - display: contents; - } - #release-list.github-release-list > li .github-release-name > a:first-child { - flex: 0 1 auto; - color: var(--color-text); - font-weight: 600; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none; - white-space: nowrap; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"] { - align-items: center; - border: 1px solid currentColor; - border-radius: 24px; - display: inline-flex; - flex-shrink: 0; - font-size: 12px; - font-weight: 500; - gap: 4px; - height: 24px; - line-height: 18px; - margin: 0 0 0 8px; - padding: 2px 8px; - text-decoration: none; - vertical-align: middle; - width: max-content !important; - } - #release-list.github-release-list > li .release-title-wrap h4 .github-release-latest { - align-items: center; - display: inline-flex !important; - height: 24px; - line-height: 18px; - margin: 0 0 0 8px; - vertical-align: middle; - } - #release-list.github-release-list > li .release-title-wrap h4 .github-release-latest[hidden] { - display: none !important; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"] svg { - height: 12px; - width: 12px; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]::after { - content: "Checks"; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.yellow) { - color: #d29922; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.green) { - color: #3fb950; - } - #release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.red) { - color: #f85149; - } - #release-list.github-release-list - > li - .release-title-wrap - h4 - a[data-tippy="commit-statuses"]:has(svg.text.yellow)::after { - content: "Checks pending"; - } - #release-list.github-release-list - > li - .release-title-wrap - h4 - a[data-tippy="commit-statuses"]:has(svg.text.green)::after { - content: "Checks passed"; - } - #release-list.github-release-list - > li - .release-title-wrap - h4 - a[data-tippy="commit-statuses"]:has(svg.text.red)::after { - content: "Checks failed"; - } - #release-list.github-release-list > li .github-release-name > a:first-child:hover { - color: var(--github-fgColor-accent); - text-decoration: underline; - } - #release-list.github-release-list > li .detail { - margin-left: 0 !important; - padding: 0 16px 16px; - } - #release-list.github-release-list > li .detail .author a { - color: var(--color-text-light-1) !important; - text-decoration: none; - } - #release-list.github-release-list > li .detail .author a:hover { - color: var(--github-fgColor-accent) !important; - text-decoration: underline; - } - #release-list.github-release-list > li .detail .markup.desc { - color: var(--color-text); - font-size: 16px; - line-height: 1.5; - } - #release-list.github-release-list > li .detail .markup.desc :is(h1, h2, h3, h4, h5, h6) { - border-bottom: 1px solid var(--color-light-border); - color: var(--color-text); - font-weight: 600; - line-height: 1.25; - padding-bottom: 8px; - } - #release-list.github-release-list > li .detail .markup.desc h2 { - font-size: 24px; - } - #release-list.github-release-list > li .detail .markup.desc h3 { - font-size: 20px; - } - @media (max-width: 767.98px) { - .page-content.repository.github-releases > .ui.container { - padding-left: 16px; - padding-right: 16px; - width: 100%; - } - .github-release-toolbar { - align-items: stretch; - flex-direction: column; - } - .github-release-actions { - flex-wrap: wrap; - } - .github-release-actions .github-release-search { - flex: 1 1 100%; - min-width: 100%; - order: 3; - } - .github-release-list { - gap: 24px; - } - .github-release-list > li { - display: block; - } - .page-content.repository.github-releases .github-release-list > li .meta { - display: none; - } - } -`; - -const releaseRefinements = css` - .page-content.repository.github-releases { - .github-release-toolbar { - margin-bottom: 48px; - } - .github-release-search { - width: 248px; - flex: 0 0 248px; - } - .github-release-toc { - align-self: start; - position: sticky; - top: 24px; - overflow: visible; - padding-left: 0; - margin-left: 0; - margin-top: -8px; - width: 162px; - } - .github-release-toc li a { - margin-left: 0; - padding: 6px 8px; - } - ul#release-list.github-release-list > li { - border: 1px solid var(--color-light-border); - border-radius: 6px; - background: var(--color-box-body); - scroll-margin-top: 24px; - min-width: 0; - .release-title-wrap, - .detail { - border: 0; - background: transparent; - border-radius: 0; - } - .release-title-wrap { - align-items: flex-start; - gap: 16px; - padding: 16px 16px 0; - } - .release-title-wrap h4 { - display: block; - margin: 0; - overflow-wrap: anywhere; - } - .github-release-name > a:first-child { - white-space: normal; - overflow: visible; - } - .release-title-wrap h4 a[data-tippy="commit-statuses"] { - margin-left: 0; - } - .release-title-wrap h4 .ui.label { - display: inline-block; - vertical-align: middle; - background: transparent; - border: 1px solid currentColor; - border-radius: 24px; - font-size: 12px; - font-weight: 500; - line-height: 18px; - padding: 2px 8px; - } - .github-release-latest { - display: inline; - margin-left: 8px; - } - .github-release-latest[hidden] { - display: none; - } - .release-title-wrap h4 .github-release-draft { - background: var(--github-bgColor-neutral-emphasis); - border: 0; - color: var(--github-fgColor-onEmphasis); - line-height: 24px; - margin-left: 8px; - padding: 0 10px; - } - .github-release-controls { - align-items: center; - } - .github-release-controls .branch-dropdown-button { - min-height: 28px; - padding: 3px 10px; - font-size: 12px; - line-height: 20px; - } - .github-release-delete { - cursor: pointer; - color: var(--color-text-light-1); - } - .detail { - margin-top: 0; - padding: 0 16px 16px; - } - .detail p.text.grey { - align-items: center; - margin: 16px 0 0; - color: var(--color-text-light-1) !important; - font-size: 14px; - } - .detail p.text.grey .time { - color: inherit; - } - .detail .author { - display: inline-flex; - align-items: center; - font-weight: 600; - } - .detail .author a { - color: var(--color-text-light-1) !important; - text-decoration: none; - } - .detail .author a:hover, - .github-release-ref:hover { - color: var(--github-fgColor-accent) !important; - text-decoration: none; - } - .github-release-ref { - display: inline-flex; - align-items: center; - gap: 6px; - margin-left: 16px; - color: var(--color-text-light-1); - text-decoration: none; - } - .detail .markup.desc { - margin-top: 16px; - } - .detail .markup.desc :is(h3, h4, h5, h6) { - border-bottom: 0; - padding-bottom: 0; - } - .github-release-footer { - border-top: 1px solid var(--color-light-border); - margin: 24px -16px -16px; - padding: 16px; - } - .detail .download summary { - font-size: 20px; - line-height: 28px; - margin-top: 0; - } - .github-release-asset-count { - vertical-align: middle; - margin-left: 4px; - } - .detail .download .list > li { - gap: 8px; - padding: 8px 12px; - flex-wrap: wrap; - } - .detail .download .list > li > a { - min-width: 0; - overflow-wrap: anywhere; - } - .detail .download .list > li > a svg { - flex-shrink: 0; - color: var(--color-text-light-1); - } - .detail .download .list > li .text.grey { - font-size: 12px; - color: var(--color-text-light-1) !important; - } - .github-release-digest { - align-items: center; - display: inline-flex; - font-family: var(--fonts-monospace); - font-size: 12px; - gap: 4px; - margin-right: 16px; - } - .github-release-copy-digest { - background: transparent; - border: 0; - color: var(--color-text-light-1); - cursor: pointer; - padding: 0; - } - .github-release-copy-digest:hover { - color: var(--color-text); - } - } - .github-release-empty { - padding: 64px 24px; - } - @media (max-width: 767.98px) { - > .ui.container { - max-width: calc(100% - 32px); - width: calc(100% - 32px) !important; - margin: 0 auto !important; - padding: 0; - } - .github-release-toolbar { - gap: 8px; - margin: 0 14px 16px; - padding: 24px 0 16px; - } - .github-release-content { - display: block; - } - .github-release-toc { - display: none; - } - .github-release-mobile-toc { - display: block; - margin: 0 auto 48px; - position: relative; - width: max-content; - summary { - align-items: center; - background: var(--color-button); - border: 1px solid var(--color-light-border); - border-radius: 6px; - cursor: pointer; - display: flex; - gap: 8px; - list-style: none; - padding: 5px 12px; - font-weight: 500; - } - summary::-webkit-details-marker { - display: none; - } - ul { - background: var(--color-box-body); - border: 1px solid var(--color-light-border); - border-radius: 6px; - list-style: none; - margin: 4px 0 0; - padding: 4px 0; - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 280px; - max-height: 320px; - overflow-y: auto; - z-index: 10; - } - a { - color: var(--color-text); - display: block; - padding: 8px 12px; - text-decoration: none; - } - a:hover, - a[aria-current="location"] { - background: var(--color-hover); - color: var(--github-fgColor-accent); - } - a[aria-current="location"] { - background: #262c36; - } - } - ul#release-list.github-release-list > li { - .release-title-wrap { - flex-direction: column; - gap: 12px; - } - .release-title-wrap h4 { - display: flex; - gap: 8px; - font-size: 26px; - width: 100%; - .github-release-name { - flex: 1; - min-width: 0; - } - > .ui.label, - .github-release-latest { - align-self: flex-start; - flex-shrink: 0; - margin-top: 12px; - } - } - .github-release-controls { - flex-wrap: wrap; - } - .detail p.text.grey { - margin-top: 16px; - } - .github-release-ref { - margin-left: 0; - margin-right: 8px; - } - .detail .download .list > li > a { - flex-basis: 100%; - } - } - } - } -`; - -const githubTagPage = css` - /* Details measured against GitHub's releases pages. */ - .page-content.repository.github-releases { - /* The meta line closes with a divider; the notes start 16px below it. */ - .github-release-list .detail p.text.grey { - min-height: 55px; - margin-bottom: 0; - padding-bottom: 24px; - border-bottom: 1px solid var(--color-light-border); - } - #release-list.github-release-list > li .detail .markup.desc > :first-child { - margin-top: 0 !important; - } - /* The notes sit inside a list item, so the browser would give their bullets the nested style. */ - .github-release-list .markup ul { - list-style-type: disc; - } - .github-release-list .markup ul ul { - list-style-type: circle; - } - .github-release-list .markup ul ul ul { - list-style-type: square; - } - /* Draft is a solid grey label, like a draft pull request's. */ - .release-title-wrap .github-release-draft.ui.ui.label { - border-color: var(--github-bgColor-neutral-emphasis) !important; - background: var(--github-bgColor-neutral-emphasis) !important; - color: var(--github-fgColor-onEmphasis) !important; - } - /* Asset rows */ - .detail .download .list > li { - min-height: 45px; - padding: 8px 16px !important; - align-items: center; - } - .detail .download .list > li > a { - font-size: 14px; - font-weight: 600 !important; - } - .detail .download .list > li .text.grey { - font-size: 14px; - } - .github-release-digest { - color: var(--color-text-light-1); - font-weight: 400; - } - } - /* A single release: a breadcrumb instead of the Releases/Tags bar, and no release list. */ - .github-release-breadcrumb { - display: flex; - align-items: center; - gap: 8px; - margin: 24px 0 32px; - font-size: 14px; - line-height: 21px; - } - .github-release-breadcrumb-separator { - color: var(--color-text-light-1); - } - .page-content.repository.github-releases.github-release-single { - .github-release-toolbar, - .github-release-toc, - .github-release-mobile-toc { - display: none; - } - .github-release-content { - display: block; - } - } - /* New and edit release: GitHub's form page, on Forgejo's own template. */ - body:has(.page-content.repository.new.release) .repository-content-header { - display: none; - } - .page-content.repository.new.release { - > .ui.container { - box-sizing: border-box; - width: calc(100% - 32px) !important; - max-width: 1216px !important; - margin: 24px auto !important; - padding: 0; - } - .ui.dividing.header { - margin: 0 0 24px; - padding-bottom: 8px; - border-bottom: 1px solid var(--color-light-border); - font-size: 20px; - font-weight: 600; - line-height: 30px; - .sub.header { - margin: 0; - color: var(--color-text-light-1); - font-size: 12px; - font-weight: 400; - line-height: 18px; - } - } - .ui.form { - max-width: 896px; - } - .ui.form .field { - margin-bottom: 16px; - } - #tag-name, - #release-title { - height: 32px; - padding: 5px 12px; - font-size: 14px; - line-height: 20px; - } - #tag-target-selector .ui.selection.dropdown { - min-height: 32px; - padding: 5px 12px; - font-size: 14px; - line-height: 20px; - } - .help { - color: var(--color-text-light-1); - font-size: 12px; - line-height: 18px; - } - .combo-markdown-editor textarea { - min-height: 200px !important; - } - /* GitHub keeps a dashed area for binaries on this page. */ - .ui.dropzone { - min-height: 46px; - border: 1px dashed var(--color-light-border); - border-radius: var(--border-radius); - background: var(--color-box-header); - } - fieldset { - display: flex; - flex-direction: column; - gap: 8px; - margin: 0; - padding: 0; - border: 0; - } - .ui.form .ui.ui.ui.button:not(.mini) { - height: 32px; - min-height: 32px; - padding: 5px 12px; - font-size: 14px; - font-weight: 500; - line-height: 20px; - } - .ui.form .ui.ui.ui.mini.button { - height: 28px; - min-height: 28px; - padding: 3px 12px; - font-size: 12px; - font-weight: 500; - } - } - body:has(.page-content.repository.github-tags) .repository-content-header { - display: none; - } - .page-content.repository.github-tags > .ui.container { - box-sizing: border-box; - max-width: calc(100% - 32px); - padding: 0; - width: 1116px !important; - } - .github-tags-toolbar { - align-items: center; - border-bottom: 1px solid var(--color-light-border); - display: flex; - justify-content: space-between; - margin-bottom: 16px; - padding: 24px 0; - } - .github-tags-search { - width: 248px; - } - .github-tags-box { - border: 1px solid var(--color-light-border); - border-radius: 6px; - overflow: hidden; - } - .github-tags-box-header { - align-items: center; - background: var(--color-box-header); - border-bottom: 1px solid var(--color-light-border); - display: flex; - font-size: 16px; - font-weight: 600; - gap: 4px; - line-height: 20px; - margin: 0; - padding: 16px; - } - .github-tags-list { - background: var(--color-box-body); - } - .github-tag-row { - border-bottom: 1px solid var(--color-light-border); - min-height: 90px; - padding: 16px; - } - .github-tag-row:last-child { - border-bottom: 0; - } - .github-tag-heading { - align-items: center; - display: flex; - justify-content: space-between; - min-height: 28px; - } - .github-tag-heading > a { - color: var(--color-text); - font-size: 16px; - font-weight: 600; - line-height: 24px; - text-decoration: none; - } - .github-tag-heading > a:hover { - color: var(--github-fgColor-accent); - text-decoration: underline; - } - .github-tag-heading .verification-status { - margin-left: auto; - } - .github-tag-actions { - align-items: center; - color: var(--color-text-light-1); - display: flex; - flex-wrap: wrap; - font-size: 12px; - gap: 16px; - line-height: 20px; - margin-top: 8px; - } - .github-tag-actions > span, - .github-tag-actions > a { - align-items: center; - display: inline-flex; - gap: 4px; - white-space: nowrap; - } - .github-tag-actions a { - color: var(--color-text-light-1); - text-decoration: none; - } - .github-tag-actions a:hover { - color: var(--github-fgColor-accent); - text-decoration: none; - } - .github-tag-actions svg { - flex-shrink: 0; - } - .github-tag-actions .github-tag-delete { - cursor: pointer; - } - .github-tags-empty { - padding: 48px 16px; - text-align: center; - } - @media (max-width: 767.98px) { - .page-content.repository.github-tags > .ui.container { - width: calc(100% - 32px) !important; - } - .github-tags-toolbar { - align-items: stretch; - flex-direction: column; - gap: 12px; - } - .github-tags-search { - align-self: center; - width: 248px; - } - .github-tag-actions { - gap: 8px 16px; - } - .github-tag-heading .verification-status { - margin-left: 8px; - } - } -`; - -export default cssCombine( - releaseHeader, - tagList, - releaseList, - releaseListMobile, - githubReleasePage, - releaseRefinements, - githubTagPage -); +export default cssCombine(releaseHeader, tagList, releaseList, releaseListMobile); diff --git a/styles/pages/releases.css b/styles/pages/releases.css new file mode 100644 index 00000000..af02c945 --- /dev/null +++ b/styles/pages/releases.css @@ -0,0 +1,861 @@ +/* Releases, tags and the release form. Kept as a page stylesheet, outside the size-limited theme files. */ + +body:has(.page-content.repository.github-releases) .repository-content-header { + display: none; +} +.page-content.repository.github-releases > .ui.container { + box-sizing: border-box; + max-width: calc(100% - 32px); + padding-left: 0; + padding-right: 0; + width: 1116px !important; +} +.github-release-toolbar { + align-items: center; + border-bottom: 1px solid var(--color-light-border); + display: flex; + gap: 16px; + justify-content: space-between; + margin: 0 0 32px; + padding: 24px 0; +} +.github-release-actions { + align-items: center; + display: flex; + gap: 8px; +} +.github-release-actions .secondary.button { + align-items: center; + box-sizing: border-box; + display: inline-flex; + height: 32px !important; + line-height: 20px; + min-height: 0 !important; + min-width: 163px; + padding: 5px 16px; + background-color: var(--color-button); + border-color: var(--color-light-border); + box-shadow: none; + color: var(--color-text); +} +.github-release-actions .secondary.button:hover { + background-color: var(--color-hover); +} +.github-release-content { + display: grid; + gap: 0 38px; + grid-template-columns: 164px minmax(0, 1fr); +} +.github-release-mobile-toc { + display: none; +} +.github-release-toc h2 { + color: var(--color-text); + font-size: 20px; + font-weight: 600; + line-height: 1.5; + margin: 0 0 8px; + margin-left: 0; +} +.github-release-toc ul { + list-style: none; + margin: 0; + padding: 0; +} +.github-release-toc li a { + border-radius: 6px; + color: var(--color-text) !important; + display: block; + font-size: 14px; + line-height: 20px; + margin-left: -10px; + overflow: hidden; + padding: 8px 10px; + text-overflow: ellipsis; + text-decoration: none; + white-space: nowrap; +} +.github-release-toc li a[aria-current="location"] { + font-weight: 600; +} +.github-release-toc li { + border-radius: 6px; + position: relative; +} +.github-release-toc li:has(a[aria-current="location"]) { + background: rgba(101, 108, 118, 0.2); +} +.github-release-toc li:has(a[aria-current="location"])::before { + background: #1f6feb; + border-radius: 6px; + bottom: 4px; + content: ""; + left: -8px; + position: absolute; + top: 4px; + width: 4px; +} +.github-release-toc li a:hover:not([aria-current="location"]) { + background: var(--color-hover); + color: var(--github-fgColor-accent); +} +#release-list.github-release-list { + grid-column: 2; + display: flex !important; + flex-direction: column; + gap: 32px; + margin: 0 0 16px !important; +} +#release-list.github-release-list > li { + display: block; +} +#release-list.github-release-list > li .meta { + display: none; +} +#release-list.github-release-list > li .release-title-wrap { + margin-left: 0 !important; + padding: 16px 16px 0; +} +#release-list.github-release-list > li .release-title-wrap > div { + display: flex; + flex-shrink: 0; + gap: 8px; +} +#release-list.github-release-list > li .release-title-wrap > div > :is(a, button) { + align-items: center; + background: var(--color-button); + border: 1px solid var(--color-light-border); + border-radius: 6px; + display: inline-flex; + height: 28px; + justify-content: center; + padding: 0; + width: 28px; +} +#release-list.github-release-list > li .github-release-controls > a { + color: var(--color-text-light-1) !important; +} +#release-list.github-release-list > li .github-release-controls > a svg { + color: var(--color-text-light-1) !important; +} +#release-list.github-release-list > li .release-title-wrap > div > :is(a, button):hover { + background: var(--color-hover); +} +#release-list.github-release-list > li .github-release-delete:hover { + color: var(--github-control-danger-fgColor-hover); +} +#release-list.github-release-list > li .release-title-wrap h4 { + align-items: center; + display: flex !important; + flex: 1; + flex-wrap: wrap; + font-size: 32px; + font-weight: 600; + gap: 8px; + line-height: 1.5; + min-width: 0; +} +#release-list.github-release-list > li .release-title-wrap h4 .github-release-name { + display: contents; +} +#release-list.github-release-list > li .github-release-name > a:first-child { + flex: 0 1 auto; + color: var(--color-text); + font-weight: 600; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + white-space: nowrap; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"] { + align-items: center; + border: 1px solid currentColor; + border-radius: 24px; + display: inline-flex; + flex-shrink: 0; + font-size: 12px; + font-weight: 500; + gap: 4px; + height: 24px; + line-height: 18px; + margin: 0 0 0 8px; + padding: 2px 8px; + text-decoration: none; + vertical-align: middle; + width: max-content !important; +} +#release-list.github-release-list > li .release-title-wrap h4 .github-release-latest { + align-items: center; + display: inline-flex !important; + height: 24px; + line-height: 18px; + margin: 0 0 0 8px; + vertical-align: middle; +} +#release-list.github-release-list > li .release-title-wrap h4 .github-release-latest[hidden] { + display: none !important; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"] svg { + height: 12px; + width: 12px; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]::after { + content: "Checks"; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.yellow) { + color: #d29922; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.green) { + color: #3fb950; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.red) { + color: #f85149; +} +#release-list.github-release-list + > li + .release-title-wrap + h4 + a[data-tippy="commit-statuses"]:has(svg.text.yellow)::after { + content: "Checks pending"; +} +#release-list.github-release-list + > li + .release-title-wrap + h4 + a[data-tippy="commit-statuses"]:has(svg.text.green)::after { + content: "Checks passed"; +} +#release-list.github-release-list > li .release-title-wrap h4 a[data-tippy="commit-statuses"]:has(svg.text.red)::after { + content: "Checks failed"; +} +#release-list.github-release-list > li .github-release-name > a:first-child:hover { + color: var(--github-fgColor-accent); + text-decoration: underline; +} +#release-list.github-release-list > li .detail { + margin-left: 0 !important; + padding: 0 16px 16px; +} +#release-list.github-release-list > li .detail .author a { + color: var(--color-text-light-1) !important; + text-decoration: none; +} +#release-list.github-release-list > li .detail .author a:hover { + color: var(--github-fgColor-accent) !important; + text-decoration: underline; +} +#release-list.github-release-list > li .detail .markup.desc { + color: var(--color-text); + font-size: 16px; + line-height: 1.5; +} +#release-list.github-release-list > li .detail .markup.desc :is(h1, h2, h3, h4, h5, h6) { + border-bottom: 1px solid var(--color-light-border); + color: var(--color-text); + font-weight: 600; + line-height: 1.25; + padding-bottom: 8px; +} +#release-list.github-release-list > li .detail .markup.desc h2 { + font-size: 24px; +} +#release-list.github-release-list > li .detail .markup.desc h3 { + font-size: 20px; +} +@media (max-width: 767.98px) { + .page-content.repository.github-releases > .ui.container { + padding-left: 16px; + padding-right: 16px; + width: 100%; + } + .github-release-toolbar { + align-items: stretch; + flex-direction: column; + } + .github-release-actions { + flex-wrap: wrap; + } + .github-release-actions .github-release-search { + flex: 1 1 100%; + min-width: 100%; + order: 3; + } + .github-release-list { + gap: 24px; + } + .github-release-list > li { + display: block; + } + .page-content.repository.github-releases .github-release-list > li .meta { + display: none; + } +} + +.page-content.repository.github-releases { + .github-release-toolbar { + margin-bottom: 48px; + } + .github-release-search { + width: 248px; + flex: 0 0 248px; + } + .github-release-toc { + align-self: start; + position: sticky; + top: 24px; + overflow: visible; + padding-left: 0; + margin-left: 0; + margin-top: -8px; + width: 162px; + } + .github-release-toc li a { + margin-left: 0; + padding: 6px 8px; + } + ul#release-list.github-release-list > li { + border: 1px solid var(--color-light-border); + border-radius: 6px; + background: var(--color-box-body); + scroll-margin-top: 24px; + min-width: 0; + .release-title-wrap, + .detail { + border: 0; + background: transparent; + border-radius: 0; + } + .release-title-wrap { + align-items: flex-start; + gap: 16px; + padding: 16px 16px 0; + } + .release-title-wrap h4 { + display: block; + margin: 0; + overflow-wrap: anywhere; + } + .github-release-name > a:first-child { + white-space: normal; + overflow: visible; + } + .release-title-wrap h4 a[data-tippy="commit-statuses"] { + margin-left: 0; + } + .release-title-wrap h4 .ui.label { + display: inline-block; + vertical-align: middle; + background: transparent; + border: 1px solid currentColor; + border-radius: 24px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + padding: 2px 8px; + } + .github-release-latest { + display: inline; + margin-left: 8px; + } + .github-release-latest[hidden] { + display: none; + } + .release-title-wrap h4 .github-release-draft { + background: var(--github-bgColor-neutral-emphasis); + border: 0; + color: var(--github-fgColor-onEmphasis); + line-height: 24px; + margin-left: 8px; + padding: 0 10px; + } + .github-release-controls { + align-items: center; + } + .github-release-controls .branch-dropdown-button { + min-height: 28px; + padding: 3px 10px; + font-size: 12px; + line-height: 20px; + } + .github-release-delete { + cursor: pointer; + color: var(--color-text-light-1); + } + .detail { + margin-top: 0; + padding: 0 16px 16px; + } + .detail p.text.grey { + align-items: center; + margin: 16px 0 0; + color: var(--color-text-light-1) !important; + font-size: 14px; + } + .detail p.text.grey .time { + color: inherit; + } + .detail .author { + display: inline-flex; + align-items: center; + font-weight: 600; + } + .detail .author a { + color: var(--color-text-light-1) !important; + text-decoration: none; + } + .detail .author a:hover, + .github-release-ref:hover { + color: var(--github-fgColor-accent) !important; + text-decoration: none; + } + .github-release-ref { + display: inline-flex; + align-items: center; + gap: 6px; + margin-left: 16px; + color: var(--color-text-light-1); + text-decoration: none; + } + .detail .markup.desc { + margin-top: 16px; + } + .detail .markup.desc :is(h3, h4, h5, h6) { + border-bottom: 0; + padding-bottom: 0; + } + .github-release-footer { + border-top: 1px solid var(--color-light-border); + margin: 24px -16px -16px; + padding: 16px; + } + .detail .download summary { + font-size: 20px; + line-height: 28px; + margin-top: 0; + } + .github-release-asset-count { + vertical-align: middle; + margin-left: 4px; + } + .detail .download .list > li { + gap: 8px; + padding: 8px 12px; + flex-wrap: wrap; + } + .detail .download .list > li > a { + min-width: 0; + overflow-wrap: anywhere; + } + .detail .download .list > li > a svg { + flex-shrink: 0; + color: var(--color-text-light-1); + } + .detail .download .list > li .text.grey { + font-size: 12px; + color: var(--color-text-light-1) !important; + } + .github-release-digest { + align-items: center; + display: inline-flex; + font-family: var(--fonts-monospace); + font-size: 12px; + gap: 4px; + margin-right: 16px; + } + .github-release-copy-digest { + background: transparent; + border: 0; + color: var(--color-text-light-1); + cursor: pointer; + padding: 0; + } + .github-release-copy-digest:hover { + color: var(--color-text); + } + } + .github-release-empty { + padding: 64px 24px; + } + @media (max-width: 767.98px) { + > .ui.container { + max-width: calc(100% - 32px); + width: calc(100% - 32px) !important; + margin: 0 auto !important; + padding: 0; + } + .github-release-toolbar { + gap: 8px; + margin: 0 14px 16px; + padding: 24px 0 16px; + } + .github-release-content { + display: block; + } + .github-release-toc { + display: none; + } + .github-release-mobile-toc { + display: block; + margin: 0 auto 48px; + position: relative; + width: max-content; + summary { + align-items: center; + background: var(--color-button); + border: 1px solid var(--color-light-border); + border-radius: 6px; + cursor: pointer; + display: flex; + gap: 8px; + list-style: none; + padding: 5px 12px; + font-weight: 500; + } + summary::-webkit-details-marker { + display: none; + } + ul { + background: var(--color-box-body); + border: 1px solid var(--color-light-border); + border-radius: 6px; + list-style: none; + margin: 4px 0 0; + padding: 4px 0; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 280px; + max-height: 320px; + overflow-y: auto; + z-index: 10; + } + a { + color: var(--color-text); + display: block; + padding: 8px 12px; + text-decoration: none; + } + a:hover, + a[aria-current="location"] { + background: var(--color-hover); + color: var(--github-fgColor-accent); + } + a[aria-current="location"] { + background: #262c36; + } + } + ul#release-list.github-release-list > li { + .release-title-wrap { + flex-direction: column; + gap: 12px; + } + .release-title-wrap h4 { + display: flex; + gap: 8px; + font-size: 26px; + width: 100%; + .github-release-name { + flex: 1; + min-width: 0; + } + > .ui.label, + .github-release-latest { + align-self: flex-start; + flex-shrink: 0; + margin-top: 12px; + } + } + .github-release-controls { + flex-wrap: wrap; + } + .detail p.text.grey { + margin-top: 16px; + } + .github-release-ref { + margin-left: 0; + margin-right: 8px; + } + .detail .download .list > li > a { + flex-basis: 100%; + } + } + } +} + +/* Details measured against GitHub's releases pages. */ +.page-content.repository.github-releases { + /* The meta line closes with a divider; the notes start 16px below it. */ + .github-release-list .detail p.text.grey { + min-height: 55px; + margin-bottom: 0; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-light-border); + } + #release-list.github-release-list > li .detail .markup.desc > :first-child { + margin-top: 0 !important; + } + /* The notes sit inside a list item, so the browser would give their bullets the nested style. */ + .github-release-list .markup ul { + list-style-type: disc; + } + .github-release-list .markup ul ul { + list-style-type: circle; + } + .github-release-list .markup ul ul ul { + list-style-type: square; + } + /* Draft is a solid grey label, like a draft pull request's. */ + .release-title-wrap .github-release-draft.ui.ui.label { + border-color: var(--github-bgColor-neutral-emphasis) !important; + background: var(--github-bgColor-neutral-emphasis) !important; + color: var(--github-fgColor-onEmphasis) !important; + } + /* Asset rows */ + .detail .download .list > li { + min-height: 45px; + padding: 8px 16px !important; + align-items: center; + } + .detail .download .list > li > a { + font-size: 14px; + font-weight: 600 !important; + } + .detail .download .list > li .text.grey { + font-size: 14px; + } + .github-release-digest { + color: var(--color-text-light-1); + font-weight: 400; + } +} +/* A single release: a breadcrumb instead of the Releases/Tags bar, and no release list. */ +.github-release-breadcrumb { + display: flex; + align-items: center; + gap: 8px; + margin: 24px 0 32px; + font-size: 14px; + line-height: 21px; +} +.github-release-breadcrumb-separator { + color: var(--color-text-light-1); +} +.page-content.repository.github-releases.github-release-single { + .github-release-toolbar, + .github-release-toc, + .github-release-mobile-toc { + display: none; + } + .github-release-content { + display: block; + } +} +/* New and edit release: GitHub's form page, on Forgejo's own template. */ +body:has(.page-content.repository.new.release) .repository-content-header { + display: none; +} +.page-content.repository.new.release { + > .ui.container { + box-sizing: border-box; + width: calc(100% - 32px) !important; + max-width: 1216px !important; + margin: 24px auto !important; + padding: 0; + } + .ui.dividing.header { + margin: 0 0 24px; + padding-bottom: 8px; + border-bottom: 1px solid var(--color-light-border); + font-size: 20px; + font-weight: 600; + line-height: 30px; + .sub.header { + margin: 0; + color: var(--color-text-light-1); + font-size: 12px; + font-weight: 400; + line-height: 18px; + } + } + .ui.form { + max-width: 896px; + } + .ui.form .field { + margin-bottom: 16px; + } + #tag-name, + #release-title { + height: 32px; + padding: 5px 12px; + font-size: 14px; + line-height: 20px; + } + #tag-target-selector .ui.selection.dropdown { + min-height: 32px; + padding: 5px 12px; + font-size: 14px; + line-height: 20px; + } + .help { + color: var(--color-text-light-1); + font-size: 12px; + line-height: 18px; + } + .combo-markdown-editor textarea { + min-height: 200px !important; + } + /* GitHub keeps a dashed area for binaries on this page. */ + .ui.dropzone { + min-height: 46px; + border: 1px dashed var(--color-light-border); + border-radius: var(--border-radius); + background: var(--color-box-header); + } + fieldset { + display: flex; + flex-direction: column; + gap: 8px; + margin: 0; + padding: 0; + border: 0; + } + .ui.form .ui.ui.ui.button:not(.mini) { + height: 32px; + min-height: 32px; + padding: 5px 12px; + font-size: 14px; + font-weight: 500; + line-height: 20px; + } + .ui.form .ui.ui.ui.mini.button { + height: 28px; + min-height: 28px; + padding: 3px 12px; + font-size: 12px; + font-weight: 500; + } +} +body:has(.page-content.repository.github-tags) .repository-content-header { + display: none; +} +.page-content.repository.github-tags > .ui.container { + box-sizing: border-box; + max-width: calc(100% - 32px); + padding: 0; + width: 1116px !important; +} +.github-tags-toolbar { + align-items: center; + border-bottom: 1px solid var(--color-light-border); + display: flex; + justify-content: space-between; + margin-bottom: 16px; + padding: 24px 0; +} +.github-tags-search { + width: 248px; +} +.github-tags-box { + border: 1px solid var(--color-light-border); + border-radius: 6px; + overflow: hidden; +} +.github-tags-box-header { + align-items: center; + background: var(--color-box-header); + border-bottom: 1px solid var(--color-light-border); + display: flex; + font-size: 16px; + font-weight: 600; + gap: 4px; + line-height: 20px; + margin: 0; + padding: 16px; +} +.github-tags-list { + background: var(--color-box-body); +} +.github-tag-row { + border-bottom: 1px solid var(--color-light-border); + min-height: 90px; + padding: 16px; +} +.github-tag-row:last-child { + border-bottom: 0; +} +.github-tag-heading { + align-items: center; + display: flex; + justify-content: space-between; + min-height: 28px; +} +.github-tag-heading > a { + color: var(--color-text); + font-size: 16px; + font-weight: 600; + line-height: 24px; + text-decoration: none; +} +.github-tag-heading > a:hover { + color: var(--github-fgColor-accent); + text-decoration: underline; +} +.github-tag-heading .verification-status { + margin-left: auto; +} +.github-tag-actions { + align-items: center; + color: var(--color-text-light-1); + display: flex; + flex-wrap: wrap; + font-size: 12px; + gap: 16px; + line-height: 20px; + margin-top: 8px; +} +.github-tag-actions > span, +.github-tag-actions > a { + align-items: center; + display: inline-flex; + gap: 4px; + white-space: nowrap; +} +.github-tag-actions a { + color: var(--color-text-light-1); + text-decoration: none; +} +.github-tag-actions a:hover { + color: var(--github-fgColor-accent); + text-decoration: none; +} +.github-tag-actions svg { + flex-shrink: 0; +} +.github-tag-actions .github-tag-delete { + cursor: pointer; +} +.github-tags-empty { + padding: 48px 16px; + text-align: center; +} +@media (max-width: 767.98px) { + .page-content.repository.github-tags > .ui.container { + width: calc(100% - 32px) !important; + } + .github-tags-toolbar { + align-items: stretch; + flex-direction: column; + gap: 12px; + } + .github-tags-search { + align-self: center; + width: 248px; + } + .github-tag-actions { + gap: 8px 16px; + } + .github-tag-heading .verification-status { + margin-left: 8px; + } +} diff --git a/templates/base/component_assets.tmpl b/templates/base/component_assets.tmpl index a158ae25..227336df 100644 --- a/templates/base/component_assets.tmpl +++ b/templates/base/component_assets.tmpl @@ -15,4 +15,5 @@ +