hairline directly above the repository * list. Each card already carries its own top border, so the two lines stack a * few pixels apart and read as one smudged edge glued to the first card. * Scoped with :has() so only that specific divider goes — the ones in * dropdowns and breadcrumbs are untouched. */ .divider:has(+ .flex-list) { display: none; } /* Forgejo ships: * * .divider + .flex-list > .flex-item:first-child { padding-top: 0 } * * In its own design these are rows separated by hairlines, so trimming the * outer padding is right. Here each item is a self-contained card, and that * rule left the first card's content glued to its top edge — measured live: * first item pt=0 h=61, second pt=12 h=73. * * Hiding the divider does NOT stop this: `display: none` keeps the element in * the DOM, so the `+` combinator still matches. And matching Forgejo's * selector class-for-class only ties it at 0,4,0, leaving the outcome to load * order — which a custom stylesheet must never depend on. Adding * `.page-content` takes these to 0,5,0 so they win outright. */ .page-content .divider + .flex-list > .flex-item:first-child, .page-content.organization .flex-list > .flex-item:first-child, .page-content.explore .flex-list > .flex-item:first-child, .page-content.profile .flex-list > .flex-item:first-child { padding-top: 12px; } .page-content.organization .flex-list > .flex-item:last-child, .page-content.explore .flex-list > .flex-item:last-child, .page-content.profile .flex-list > .flex-item:last-child { padding-bottom: 12px; } /* === 07-issues.css === */ /*! * forgejo-github-theme — 07-issues * Issue list, issue view, labels, milestones, projects, assignees, timeline. * SPDX-License-Identifier: MIT */ /* ========================================================================== * Issue list * ======================================================================== */ .repository.issue-list .issue.list, .issue-list-container, #issue-list { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); overflow: hidden; list-style: none; margin: 0; padding: 0; } /* Filter bar sits on top of the list like GitHub's grey strip. */ .repository.issue-list .list-header, .issue-list-toolbar, .gh-issue-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border); border-bottom: 0; border-radius: var(--gh-radius) var(--gh-radius) 0 0; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--gh-fg-muted); } .gh-issue-toolbar + .issue.list, .issue-list-toolbar + #issue-list { border-radius: 0 0 var(--gh-radius) var(--gh-radius); border-top: 0; } /* Open / Closed switch */ .gh-issue-toolbar .gh-state-filter { display: inline-flex; gap: 16px; } .gh-issue-toolbar .gh-state-filter a { color: var(--gh-fg-muted); display: inline-flex; align-items: center; gap: 6px; } .gh-issue-toolbar .gh-state-filter a.active, .gh-issue-toolbar .gh-state-filter a[aria-current="true"] { color: var(--gh-fg); font-weight: 600; } /* Rows */ .issue.list > .item, #issue-list .flex-item, .issue-list-item { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--gh-border-muted); padding: var(--gh-row-py) 16px; margin: 0; transition: background-color var(--gh-motion-fast) var(--gh-ease); } .issue.list > .item:last-child, #issue-list .flex-item:last-child { border-bottom: 0; } .issue.list > .item:hover, #issue-list .flex-item:hover { background: var(--gh-canvas-subtle); } .issue.list > .item .title, #issue-list .flex-item-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--gh-fg); margin: 0; } .issue.list > .item .title:hover, #issue-list .flex-item-title a:hover { color: var(--gh-accent-fg); text-decoration: none; } .issue.list > .item .desc, #issue-list .flex-item-body { color: var(--gh-fg-muted); font-size: 12px; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } /* Open / closed leading icon */ .issue.list > .item .issue-item-icon svg, .issue-list-item .gh-issue-icon { flex: 0 0 auto; margin-top: 2px; } .issue-list-item[data-state="open"] .gh-issue-icon { color: var(--gh-success-fg); } .issue-list-item[data-state="closed"] .gh-issue-icon { color: var(--gh-done-fg); } /* Inline labels on a row */ .issue.list > .item .labels-list, #issue-list .flex-item-title .ui.label { vertical-align: middle; } /* Comment-count bubble at the right edge */ .issue.list > .item .comment, .gh-issue-comments { color: var(--gh-fg-muted); font-size: 12px; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } /* ========================================================================== * Issue / PR view * ======================================================================== */ .repository.view.issue .issue-title-header, .gh-issue-header { border-bottom: 1px solid var(--gh-border-muted); padding-bottom: 16px; margin-bottom: 16px; } .repository.view.issue #issue-title, .gh-issue-header h1 { font-weight: 400; line-height: 1.25; margin: 0 0 8px; word-break: break-word; } .repository.view.issue #issue-title .index, .gh-issue-number { color: var(--gh-fg-muted); font-weight: 300; } .repository.view.issue .issue-title-meta, .gh-issue-submeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gh-fg-muted); font-size: 14px; } /* Two-column body: conversation + metadata sidebar */ .repository.view.issue .issue-content, .gh-issue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 24px; align-items: start; } .repository.view.issue .issue-content-left, .gh-issue-main { min-width: 0; } html[data-gh-sticky-sidebar="on"] .repository.view.issue .issue-content-right, html[data-gh-sticky-sidebar="on"] .gh-issue-aside { position: sticky; top: calc(var(--gh-rail-top, var(--gh-header-height)) + 16px); max-height: calc(100vh - var(--gh-rail-top, var(--gh-header-height)) - 32px); overflow-y: auto; overscroll-behavior: contain; } /* Metadata sidebar sections */ .repository.view.issue .issue-content-right .ui.divider { margin: 12px 0; } .repository.view.issue .issue-content-right .ui.header, .gh-issue-aside .gh-meta-title { font-size: 12px; font-weight: 600; color: var(--gh-fg-muted); margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; } .gh-issue-aside .gh-meta-block + .gh-meta-block { border-top: 1px solid var(--gh-border-muted); margin-top: 16px; padding-top: 16px; } .gh-issue-aside .gh-meta-empty { color: var(--gh-fg-muted); font-size: 13px; } /* Assignee rows */ .gh-assignees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .gh-assignees li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .gh-assignees img { width: 20px; height: 20px; border-radius: 50%; } /* ========================================================================== * Labels * ======================================================================== */ .label-list .item, .repository.labels .label-list > .item { border-bottom: 1px solid var(--gh-border-muted); padding: 12px 16px; display: flex; align-items: center; gap: 16px; } .label-list .item:last-child { border-bottom: 0; } .label-list .item .label-title { flex: 0 0 200px; } .label-list .item .label-description { color: var(--gh-fg-muted); font-size: 12px; flex: 1 1 auto; } /* Colour swatch used in the label editor */ .gh-label-preview { display: inline-block; border-radius: var(--gh-radius-pill); font-size: 12px; font-weight: 500; line-height: 18px; padding: 0 10px; } /* ========================================================================== * Milestones * ======================================================================== */ .repository.milestones .milestone-list > .item, .gh-milestone { border-bottom: 1px solid var(--gh-border-muted); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .gh-milestone-title { font-size: 16px; font-weight: 600; color: var(--gh-accent-fg); } .gh-milestone-meta { color: var(--gh-fg-muted); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; } .repository.milestones .milestone-list .ui.progress, .gh-milestone .ui.progress { margin: 4px 0; } /* Overdue */ .gh-milestone[data-overdue="true"] .gh-milestone-meta .gh-due { color: var(--gh-danger-fg); font-weight: 600; } /* ========================================================================== * Projects (kanban) * ======================================================================== */ .project-column, .ui.segment.project-column { background: var(--color-project-column-bg); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 8px; min-width: 280px; } .project-column > .project-column-header, .project-column > .ui.header { color: var(--gh-fg); font-size: 14px; font-weight: 600; padding: 4px 8px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .project-column .card, .project-column .issue-card { background: var(--gh-canvas); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); box-shadow: var(--gh-shadow-small); margin-bottom: 8px; padding: 12px; font-size: 13px; cursor: grab; transition: box-shadow var(--gh-motion) var(--gh-ease), transform var(--gh-motion) var(--gh-ease); } .project-column .card:hover { box-shadow: var(--gh-shadow-medium); transform: translateY(-1px); } .project-column .card:active { cursor: grabbing; } /* ========================================================================== * Timeline events specific to issues * ======================================================================== */ .timeline-item.event .text, .timeline .event .text { color: var(--gh-fg-muted); } .timeline-item.event .text a, .timeline .event .text a { color: var(--gh-fg); font-weight: 600; } /* Reference / cross-link event boxes */ .timeline-item .ref-issue, .gh-ref-card { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-canvas); padding: 8px 12px; width: 100%; font-size: 13px; } /* New-comment form */ .repository.view.issue .comment-form, #comment-form { margin-top: 16px; padding-left: 56px; position: relative; } .repository.view.issue .comment-form .ui.avatar, #comment-form > .ui.avatar { position: absolute; left: 0; top: 0; width: 40px; height: 40px; } /* Close / reopen action row */ .gh-comment-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 0 0; } /* === 08-pulls.css === */ /*! * forgejo-github-theme — 08-pulls * Pull request layout: conversation, commits, checks, files changed, * review sidebar, approvals, merge box. * SPDX-License-Identifier: MIT */ /* ========================================================================== * PR sub-navigation (Conversation / Commits / Checks / Files changed) * ======================================================================== */ .repository.view.issue.pull .pull-desc, .gh-pr-subnav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--gh-border); margin-bottom: 16px; } .gh-pr-subnav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--gh-fg); font-size: 14px; border-radius: var(--gh-radius) var(--gh-radius) 0 0; transition: background-color var(--gh-motion-fast) var(--gh-ease); } .gh-pr-subnav a:hover { background: var(--gh-canvas-subtle); text-decoration: none; } .gh-pr-subnav a[aria-current="page"] { font-weight: 600; } .gh-pr-subnav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 8px -1px 8px; height: 2px; background: #fd8c73; border-radius: 2px; } /* Branch pill in the PR header: base ← compare */ .gh-pr-branches { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } .gh-pr-branch { background: var(--gh-accent-subtle); border-radius: var(--gh-radius); color: var(--gh-accent-fg); font-family: var(--gh-font-mono); padding: 2px 6px; } /* ========================================================================== * Merge box * ======================================================================== */ .repository .merge-section, .pull-merge-box, .gh-merge-box { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-canvas); margin-top: 16px; overflow: hidden; } .gh-merge-box .gh-merge-row, .repository .merge-section .item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gh-border-muted); font-size: 14px; } .gh-merge-box .gh-merge-row:last-of-type, .repository .merge-section .item:last-child { border-bottom: 0; } .gh-merge-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .gh-merge-row[data-state="success"] .gh-merge-icon { background: var(--gh-success); } .gh-merge-row[data-state="failure"] .gh-merge-icon { background: var(--gh-danger); } .gh-merge-row[data-state="pending"] .gh-merge-icon { background: var(--gh-attention); } .gh-merge-row[data-state="neutral"] .gh-merge-icon { background: var(--gh-neutral-emphasis); } .gh-merge-title { font-weight: 600; color: var(--gh-fg); } .gh-merge-desc { color: var(--gh-fg-muted); font-size: 13px; } .gh-merge-actions { background: var(--gh-canvas-subtle); border-top: 1px solid var(--gh-border-muted); padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Merge-state colouring of the whole box */ .gh-merge-box[data-mergeable="false"] { border-color: var(--gh-danger-muted, var(--gh-danger)); } /* ========================================================================== * Checks * ======================================================================== */ .gh-checks, .commit-status-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); overflow: hidden; } .gh-checks > li, .commit-status-list > li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--gh-border-muted); font-size: 14px; } .gh-checks > li:last-child { border-bottom: 0; } .gh-checks .gh-check-name { font-weight: 500; color: var(--gh-fg); } .gh-checks .gh-check-desc { color: var(--gh-fg-muted); font-size: 12px; } .gh-checks .gh-check-link { margin-left: auto; font-size: 12px; } .gh-check-icon[data-state="success"] { color: var(--gh-success-fg); } .gh-check-icon[data-state="failure"] { color: var(--gh-danger-fg); } .gh-check-icon[data-state="pending"] { color: var(--gh-attention-fg); } .gh-check-icon[data-state="skipped"] { color: var(--gh-fg-subtle); } /* Spinner for running checks — respects reduced motion in 12-a11y.css */ .gh-check-icon[data-state="pending"] svg { animation: gh-spin 1.6s linear infinite; } @keyframes gh-spin { to { transform: rotate(360deg); } } /* ========================================================================== * Commits tab * ======================================================================== */ .repository.commits .commit-list, .gh-commit-list { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); overflow: hidden; width: 100%; } .gh-commit-group-date { background: var(--gh-canvas-subtle); border-bottom: 1px solid var(--gh-border-muted); color: var(--gh-fg-muted); font-size: 12px; font-weight: 600; padding: 8px 16px; } .repository.commits .commit-list tbody td, .gh-commit-list > li { border-bottom: 1px solid var(--gh-border-muted); padding: var(--gh-row-py) 16px; font-size: 14px; } .gh-commit-sha, .repository .commit-list .sha.label, .sha.label { background: var(--gh-canvas-subtle) !important; border: 1px solid var(--gh-border) !important; border-radius: var(--gh-radius) !important; color: var(--gh-fg-muted) !important; font-family: var(--gh-font-mono); font-size: 12px; padding: 1px 6px !important; } /* ========================================================================== * Review sidebar / rail * ======================================================================== */ .gh-review-rail { display: flex; flex-direction: column; gap: var(--gh-block-gap); } .gh-reviewers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .gh-reviewers li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .gh-reviewers img { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; } .gh-reviewers .gh-reviewer-name { font-weight: 600; color: var(--gh-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .gh-reviewers .gh-review-state { margin-left: auto; flex: 0 0 auto; } .gh-review-state[data-state="approved"] { color: var(--gh-success-fg); } .gh-review-state[data-state="changes_requested"] { color: var(--gh-danger-fg); } .gh-review-state[data-state="commented"] { color: var(--gh-fg-muted); } .gh-review-state[data-state="pending"] { color: var(--gh-attention-fg); } /* Approvals summary bar */ .gh-approvals { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 10px 12px; font-size: 13px; background: var(--gh-canvas); } .gh-approvals[data-satisfied="true"] { border-color: var(--gh-success-muted, var(--gh-success)); background: var(--gh-success-subtle); color: var(--gh-success-fg); } /* Review submission panel */ .repository .review-box, .gh-review-panel { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-canvas); padding: 16px; } .gh-review-panel fieldset { border: 0; margin: 12px 0 0; padding: 0; } .gh-review-panel legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; } .gh-review-panel label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 6px 0; } .gh-review-panel label .gh-review-hint { color: var(--gh-fg-muted); display: block; font-size: 12px; } /* Pending review counter shown while a review is in progress */ .gh-review-pending-count { background: var(--gh-attention-subtle); border-radius: var(--gh-radius-pill); color: var(--gh-attention-fg); font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 20px; } /* Inline review comment threads inside the diff */ .repository .comment-code-cloud, .gh-review-thread { background: var(--gh-canvas-subtle); border-top: 1px solid var(--gh-border); border-bottom: 1px solid var(--gh-border); padding: 12px 16px; } .gh-review-thread .gh-thread-resolved { color: var(--gh-done-fg); font-size: 12px; font-weight: 600; } /* ========================================================================== * PR list — same skeleton as the issue list plus a draft state * ======================================================================== */ .issue-list-item[data-state="merged"] .gh-issue-icon { color: var(--gh-done-fg); } .issue-list-item[data-state="draft"] .gh-issue-icon { color: var(--gh-fg-subtle); } /* Diff stat mini-bar (+12 −4) */ .gh-diffstat { display: inline-flex; align-items: center; gap: 2px; font-family: var(--gh-font-mono); font-size: 12px; } .gh-diffstat .gh-add { color: var(--gh-success-fg); } .gh-diffstat .gh-del { color: var(--gh-danger-fg); } .gh-diffstat-blocks { display: inline-flex; gap: 2px; margin-left: 4px; } .gh-diffstat-blocks i { width: 8px; height: 8px; display: inline-block; border-radius: 1px; background: var(--gh-border); } .gh-diffstat-blocks i[data-kind="add"] { background: var(--gh-success); } .gh-diffstat-blocks i[data-kind="del"] { background: var(--gh-danger); } /* === 09-diff.css === */ /*! * forgejo-github-theme — 09-diff * Diff viewer: spacing, syntax highlighting, file folding, sticky headers, * split/unified modes, word-level highlights, expandable context. * SPDX-License-Identifier: MIT */ /* ========================================================================== * Diff summary bar (files changed / additions / deletions) * ======================================================================== */ .repository .diff-detail-box, .diff-detail-box, .gh-diff-summary { background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); color: var(--gh-fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; margin-bottom: 16px; padding: 10px 16px; } .diff-detail-box .diff-stats-add, .gh-diff-summary .gh-add { color: var(--gh-success-fg); font-weight: 600; } .diff-detail-box .diff-stats-del, .gh-diff-summary .gh-del { color: var(--gh-danger-fg); font-weight: 600; } /* ========================================================================== * File box * ======================================================================== */ .diff-file-box, .gh-diff-file { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-canvas); margin-bottom: 16px; overflow: hidden; /* Long diffs stay cheap to paint while scrolled out of view. */ content-visibility: auto; contain-intrinsic-size: auto 480px; } .diff-file-box .diff-file-header, .gh-diff-file > .gh-diff-file-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--gh-canvas-subtle); border-bottom: 1px solid var(--gh-border); padding: 8px 12px; font-size: 12px; color: var(--gh-fg-muted); min-height: 40px; } .diff-file-box .diff-file-header .file, .gh-diff-file-name { font-family: var(--gh-font-mono); font-size: 12px; color: var(--gh-fg); font-weight: 600; word-break: break-all; min-width: 0; } /* Fold / unfold control */ .diff-file-box .fold-file, .gh-diff-fold { background: transparent; border: 0; border-radius: var(--gh-radius-small); color: var(--gh-fg-muted); cursor: pointer; flex: 0 0 auto; padding: 2px; transition: background-color var(--gh-motion-fast) var(--gh-ease), transform var(--gh-motion) var(--gh-ease); } .diff-file-box .fold-file:hover, .gh-diff-fold:hover { background: var(--gh-border-muted); } .diff-file-box[data-folded="true"] .fold-file svg, .gh-diff-file[data-folded="true"] .gh-diff-fold svg { transform: rotate(-90deg); } .diff-file-box[data-folded="true"] .diff-file-body, .gh-diff-file[data-folded="true"] .gh-diff-file-body { display: none; } /* "Viewed" checkbox on the right of the header */ .gh-diff-viewed { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gh-fg-muted); } .gh-diff-file[data-viewed="true"] { opacity: 0.72; } .gh-diff-file[data-viewed="true"] .gh-diff-file-body { display: none; } /* ========================================================================== * Code table * ======================================================================== */ .diff-file-body .file-body, .diff-file-box table, .gh-diff-file-body table { width: 100%; border-collapse: collapse; font-family: var(--gh-font-mono); font-size: 12px; line-height: 20px; tab-size: 4; } .code-diff td.lines-num, .diff-file-box .lines-num { background: var(--gh-canvas); border-right: 1px solid var(--gh-border-muted); color: var(--gh-fg-subtle); min-width: 44px; padding: 0 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 1%; } .code-diff td.lines-type-marker, .diff-file-box .lines-type-marker { padding: 0 4px 0 8px; user-select: none; vertical-align: top; width: 1%; color: var(--gh-fg-subtle); } .code-diff td.lines-code, .diff-file-box .lines-code { padding: 0 10px; vertical-align: top; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } /* Row states */ .code-diff .add-code, .code-diff tr.added .lines-code, .diff-file-box .lines-code.add-code { background: var(--gh-diff-add-bg); } .code-diff .del-code, .code-diff tr.removed .lines-code, .diff-file-box .lines-code.del-code { background: var(--gh-diff-del-bg); } .code-diff .add-code + .lines-num, .code-diff tr.added .lines-num { background: color-mix(in srgb, var(--gh-diff-add-bg) 65%, var(--gh-canvas)); } .code-diff tr.removed .lines-num { background: color-mix(in srgb, var(--gh-diff-del-bg) 65%, var(--gh-canvas)); } /* Word-level highlight inside a changed line */ .code-diff .added-code, .removed-code ~ .added-code, span.added-code { background: var(--gh-diff-add-word); border-radius: 2px; } .code-diff .removed-code, span.removed-code { background: var(--gh-diff-del-word); border-radius: 2px; } /* Hunk header (@@ -1,4 +1,6 @@) */ .code-diff .tag-code, .code-diff tr.tag-code td, .diff-file-box .tag-code { background: var(--gh-diff-hunk-bg) !important; color: var(--gh-diff-hunk-fg) !important; border-top: 1px solid var(--gh-border-muted); border-bottom: 1px solid var(--gh-border-muted); font-size: 12px; padding: 4px 10px; } /* Expand-context buttons */ .code-diff .code-expander-button, .diff-file-box .code-expander-button { background: var(--gh-accent-subtle); border: 0; color: var(--gh-accent-fg); cursor: pointer; padding: 2px 6px; width: 100%; transition: background-color var(--gh-motion-fast) var(--gh-ease); } .code-diff .code-expander-button:hover { background: var(--gh-accent); color: var(--gh-fg-on-emphasis); } /* Split view keeps a visible gutter between the two panes. */ .diff-file-box.file-content.split-diff .lines-code:nth-of-type(2), .code-diff-split td:nth-child(3) { border-left: 1px solid var(--gh-border); } .code-diff-split .lines-code.blob-excerpt, .code-diff .lines-code.blob-excerpt { background: var(--color-diff-inactive); } /* Empty placeholder cells in split mode */ .code-diff-split tr td.lines-num:empty, .code-diff-split tr td.lines-code:empty { background: var(--color-diff-inactive); } /* ========================================================================== * Inline comment affordance * ======================================================================== */ .code-diff .add-comment-left, .code-diff .add-comment-right { background: var(--gh-canvas-subtle); } .code-diff .lines-num .add-code-comment, .gh-add-comment-button { background: var(--gh-accent); border: 0; border-radius: var(--gh-radius-small); color: #fff; cursor: pointer; display: none; height: 20px; line-height: 1; padding: 0 4px; position: absolute; transform: translateX(-6px); width: 20px; } .code-diff tr:hover .add-code-comment { display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== * Sticky headers * ======================================================================== */ html[data-gh-sticky-toolbar="on"] .gh-diff-file > .gh-diff-file-header { position: sticky; top: var(--gh-sticky-offset, var(--gh-header-height)); z-index: 20; box-shadow: 0 1px 0 var(--gh-border); } /* File-list drawer at the top of "Files changed" */ .gh-diff-filelist { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); margin-bottom: 16px; overflow: hidden; } .gh-diff-filelist > summary { background: var(--gh-canvas-subtle); cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 16px; list-style: none; } .gh-diff-filelist > summary::-webkit-details-marker { display: none; } .gh-diff-filelist ul { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow: auto; } .gh-diff-filelist li a { display: flex; align-items: center; gap: 8px; padding: 4px 16px; font-family: var(--gh-font-mono); font-size: 12px; color: var(--gh-fg); } .gh-diff-filelist li a:hover { background: var(--gh-canvas-subtle); text-decoration: none; } /* ========================================================================== * Blame * ======================================================================== */ .repository .file-view.blame .blame-info, .blame-info { background: var(--gh-canvas-subtle); border-right: 1px solid var(--gh-border-muted); color: var(--gh-fg-muted); font-family: var(--gh-font-sans); font-size: 12px; padding: 0 8px; vertical-align: top; } /* ========================================================================== * Image diffs * ======================================================================== */ .diff-file-box .image-diff-container { background: var(--gh-canvas-subtle); padding: 16px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .diff-file-box .image-diff-container img { background: repeating-conic-gradient(var(--gh-canvas-inset) 0% 25%, var(--gh-canvas) 0% 50%) 50% / 16px 16px; border: 1px solid var(--gh-border); border-radius: var(--gh-radius-small); } /* ========================================================================== * Binary / too-large notices * ======================================================================== */ .diff-file-box .diff-file-body .binary-file-message, .gh-diff-notice { color: var(--gh-fg-muted); font-family: var(--gh-font-sans); font-size: 13px; padding: 24px 16px; text-align: center; } /* === 10-markdown.css === */ /*! * forgejo-github-theme — 10-markdown * GitHub Markdown styling for Forgejo's `.markup` container: headings, tables, * task lists, alerts/callouts, code blocks, mermaid, footnotes. * SPDX-License-Identifier: MIT */ .markup { color: var(--gh-fg); font-family: var(--gh-font-sans); font-size: 16px; line-height: 1.5; word-wrap: break-word; } html[data-gh-density="compact"] .markup { font-size: 15px; } .markup > *:first-child { margin-top: 0 !important; } .markup > *:last-child { margin-bottom: 0 !important; } /* ========================================================================== * Headings * ======================================================================== */ .markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6 { font-weight: 600; line-height: 1.25; margin-top: 24px; margin-bottom: 16px; } .markup h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--gh-border-muted); } .markup h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--gh-border-muted); } .markup h3 { font-size: 1.25em; } .markup h4 { font-size: 1em; } .markup h5 { font-size: 0.875em; } .markup h6 { font-size: 0.85em; color: var(--gh-fg-muted); } /* Anchor link that appears on hover */ .markup h1 .anchor, .markup h2 .anchor, .markup h3 .anchor, .markup h4 .anchor, .markup h5 .anchor, .markup h6 .anchor { float: left; margin-left: -20px; padding-right: 4px; opacity: 0; color: var(--gh-fg-muted); transition: opacity var(--gh-motion) var(--gh-ease); } .markup h1:hover .anchor, .markup h2:hover .anchor, .markup h3:hover .anchor, .markup h4:hover .anchor, .markup h5:hover .anchor, .markup h6:hover .anchor, .markup .anchor:focus-visible { opacity: 1; } /* ========================================================================== * Text blocks * ======================================================================== */ .markup p, .markup blockquote, .markup ul, .markup ol, .markup dl, .markup table, .markup pre, .markup details { margin-top: 0; margin-bottom: 16px; } .markup ul, .markup ol { padding-left: 2em; } .markup li + li { margin-top: 0.25em; } .markup li > p { margin-top: 16px; } .markup dl dt { font-weight: 600; font-style: italic; margin-top: 16px; padding: 0; } .markup dl dd { margin-left: 0; padding: 0 16px; } .markup blockquote { border-left: 0.25em solid var(--gh-border); color: var(--gh-fg-muted); padding: 0 1em; } .markup blockquote > :first-child { margin-top: 0; } .markup blockquote > :last-child { margin-bottom: 0; } .markup hr { background: var(--gh-border); border: 0; height: 0.25em; margin: 24px 0; padding: 0; } .markup a { color: var(--gh-accent-fg); } .markup a:hover { text-decoration: underline; } .markup strong { font-weight: 600; } .markup sup, .markup sub { line-height: 0; } .markup img { background-color: var(--gh-canvas); box-sizing: content-box; max-width: 100%; border-radius: var(--gh-radius-small); } .markup kbd { background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border); border-bottom-color: var(--gh-border-strong); border-radius: var(--gh-radius-small); box-shadow: inset 0 -1px 0 var(--gh-border-strong); color: var(--gh-fg); display: inline-block; font-size: 11px; line-height: 10px; padding: 3px 5px; vertical-align: middle; } /* ========================================================================== * Tables * ======================================================================== */ .markup table { display: block; width: max-content; max-width: 100%; overflow: auto; border-collapse: collapse; border-spacing: 0; font-size: 14px; } .markup table th, .markup table td { border: 1px solid var(--gh-border); padding: 6px 13px; } .markup table th { background: var(--gh-canvas-subtle); font-weight: 600; } .markup table tr { background: var(--gh-canvas); border-top: 1px solid var(--gh-border-muted); } .markup table tr:nth-child(2n) { background: var(--color-markup-table-row); } .markup table img { background-color: transparent; } /* ========================================================================== * Code * ======================================================================== */ .markup code, .markup tt { background: var(--color-markup-code-inline, var(--gh-canvas-subtle)); border-radius: var(--gh-radius-small); font-family: var(--gh-font-mono); font-size: 85%; margin: 0; padding: 0.2em 0.4em; white-space: break-spaces; } .markup pre { background: var(--color-markup-code-block, var(--gh-canvas-subtle)); border-radius: var(--gh-radius); font-family: var(--gh-font-mono); font-size: 85%; line-height: 1.45; overflow: auto; padding: 16px; } .markup pre > code, .markup pre code { background: transparent; border: 0; font-size: 100%; margin: 0; padding: 0; white-space: pre; word-break: normal; } /* Copy button Forgejo injects into fenced blocks */ .markup .code-copy, .markup pre .code-copy { background: var(--gh-canvas); border: 1px solid var(--gh-border); border-radius: var(--gh-radius-small); color: var(--gh-fg-muted); cursor: pointer; opacity: 0; padding: 4px 6px; position: absolute; right: 8px; top: 8px; transition: opacity var(--gh-motion) var(--gh-ease); } .markup pre:hover .code-copy, .markup .code-copy:focus-visible { opacity: 1; } /* ========================================================================== * Task lists * ======================================================================== */ .markup .task-list-item { list-style-type: none; } .markup .task-list-item + .task-list-item { margin-top: 4px; } .markup ul.contains-task-list, .markup ol.contains-task-list { padding-left: 1.4em; } .markup .task-list-item input[type="checkbox"], .markup .task-list-item-checkbox { margin: 0 0.2em 0.25em -1.4em; vertical-align: middle; accent-color: var(--gh-accent); cursor: pointer; } .markup .task-list-item input[type="checkbox"]:checked + * { color: var(--gh-fg-muted); } /* ========================================================================== * Alerts / callouts ( > [!NOTE] etc. ) * Forgejo renders these as .attention-header + .attention- blockquotes. * The generic [class*="attention-"] selectors keep this working across the * small markup differences between Forgejo point releases. * ======================================================================== */ .markup .attention-note, .markup .attention-tip, .markup .attention-important, .markup .attention-warning, .markup .attention-caution, .markup blockquote[class*="attention-"], .markup .markdown-alert { border-left: 0.25em solid var(--gh-border); color: inherit; padding: 8px 16px; margin-bottom: 16px; border-radius: 0 var(--gh-radius-small) var(--gh-radius-small) 0; } .markup .attention-header, .markup .markdown-alert-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; } .markup .attention-note, .markup .markdown-alert-note { border-left-color: var(--gh-accent); background: color-mix(in srgb, var(--gh-accent) 6%, transparent); } .markup .attention-note .attention-header, .markup .markdown-alert-note .markdown-alert-title { color: var(--gh-accent-fg); } .markup .attention-tip, .markup .markdown-alert-tip { border-left-color: var(--gh-success); background: color-mix(in srgb, var(--gh-success) 6%, transparent); } .markup .attention-tip .attention-header, .markup .markdown-alert-tip .markdown-alert-title { color: var(--gh-success-fg); } .markup .attention-important, .markup .markdown-alert-important { border-left-color: var(--gh-done); background: color-mix(in srgb, var(--gh-done) 6%, transparent); } .markup .attention-important .attention-header, .markup .markdown-alert-important .markdown-alert-title { color: var(--gh-done-fg); } .markup .attention-warning, .markup .markdown-alert-warning { border-left-color: var(--gh-attention); background: color-mix(in srgb, var(--gh-attention) 8%, transparent); } .markup .attention-warning .attention-header, .markup .markdown-alert-warning .markdown-alert-title { color: var(--gh-attention-fg); } .markup .attention-caution, .markup .markdown-alert-caution { border-left-color: var(--gh-danger); background: color-mix(in srgb, var(--gh-danger) 6%, transparent); } .markup .attention-caution .attention-header, .markup .markdown-alert-caution .markdown-alert-title { color: var(--gh-danger-fg); } .markup [class*="attention-"] > p:last-child, .markup .markdown-alert > p:last-child { margin-bottom: 0; } /* ========================================================================== * Details / summary * ======================================================================== */ .markup details { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); padding: 0; } .markup details > summary { background: var(--gh-canvas-subtle); cursor: pointer; font-weight: 600; list-style: revert; padding: 8px 12px; } .markup details[open] > summary { border-bottom: 1px solid var(--gh-border-muted); } .markup details > *:not(summary) { margin-left: 12px; margin-right: 12px; } .markup details > *:not(summary):first-of-type { margin-top: 12px; } /* ========================================================================== * Mermaid * ======================================================================== */ .markup .mermaid-chart, .markup pre.mermaid, .markup .mermaid { background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border); border-radius: var(--gh-radius); display: flex; justify-content: center; overflow: auto; padding: 16px; margin-bottom: 16px; } .markup .mermaid-chart svg, .markup .mermaid svg { max-width: 100%; height: auto; } /* Mermaid inherits our token colours where it exposes CSS hooks. */ .markup .mermaid .node rect, .markup .mermaid .node polygon, .markup .mermaid .node circle { stroke: var(--gh-border-strong); fill: var(--gh-canvas); } .markup .mermaid .edgePath .path { stroke: var(--gh-fg-muted); } .markup .mermaid text { fill: var(--gh-fg) !important; } /* ========================================================================== * Footnotes * ======================================================================== */ .markup .footnotes { border-top: 1px solid var(--gh-border-muted); color: var(--gh-fg-muted); font-size: 12px; margin-top: 32px; padding-top: 16px; } .markup .footnotes ol { padding-left: 16px; } .markup .footnotes li:target { background: var(--color-highlight-bg); } /* ========================================================================== * README container on the repository home page * ======================================================================== */ .repository #readme, .repository .ui.segment#readme, .gh-readme { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: var(--gh-canvas); padding: 0; overflow: hidden; } .gh-readme > header, .repository #readme > .ui.attached.header { background: var(--gh-canvas-subtle); border-bottom: 1px solid var(--gh-border-muted); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 8px 16px; } .gh-readme > .markup, .repository #readme > .markup { padding: 32px; } @media (max-width: 767px) { .gh-readme > .markup, .repository #readme > .markup { padding: 16px; } } /* README quick links (auto-generated table of contents in the sidebar) */ .gh-readme-toc { list-style: none; margin: 0; padding: 0; font-size: 13px; } .gh-readme-toc li { padding-left: calc((var(--gh-toc-depth, 1) - 1) * 12px); } .gh-readme-toc a { display: block; padding: 3px 0; color: var(--gh-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-readme-toc a:hover { color: var(--gh-accent-fg); text-decoration: none; } /* === 11-responsive.css === */ /*! * forgejo-github-theme — 11-responsive * Desktop / tablet / mobile behaviour. Breakpoints follow GitHub's: * >= 1280px wide desktop (right rail visible) * >= 1012px desktop (right rail visible, narrower) * >= 768px tablet (right rail becomes a drawer) * < 768px mobile (single column, drawer, larger tap targets) * SPDX-License-Identifier: MIT */ /* ========================================================================== * Wide desktop * ======================================================================== */ @media (min-width: 1400px) { :root { --gh-content-max: 1400px; } } /* ========================================================================== * Desktop -> tablet: the persistent rail turns into an off-canvas drawer * ======================================================================== */ @media (max-width: 1011px) { html[data-gh-sidebar="on"] body { padding-right: 0; } #gh-sidebar { width: min(360px, 88vw); transform: translateX(100%); transition: transform var(--gh-motion) var(--gh-ease); box-shadow: var(--gh-shadow-large); z-index: 800; top: 0; } html[data-gh-sidebar-side="left"] #gh-sidebar { transform: translateX(-100%); } html[data-gh-drawer="open"] #gh-sidebar { transform: none; } /* Backdrop behind the drawer */ html[data-gh-drawer="open"] body::after { content: ""; position: fixed; inset: 0; background: var(--color-overlay-backdrop, rgb(31 35 40 / 50%)); z-index: 700; animation: gh-fade var(--gh-motion) var(--gh-ease); } /* Resizing is pointless in drawer mode. */ #gh-sidebar .gh-resizer { display: none; } /* Base styles for .gh-drawer-toggle live in 02-layout.css so the control is visible on wide screens too, where it is the only way to bring a hidden rail back. */ .gh-dashboard-grid, .repository.view.issue .issue-content, .gh-issue-layout { grid-template-columns: minmax(0, 1fr); } html[data-gh-sticky-sidebar="on"] .gh-dashboard-grid > .gh-dash-aside, html[data-gh-sticky-sidebar="on"] .repository.view.issue .issue-content-right, html[data-gh-sticky-sidebar="on"] .gh-issue-aside { position: static; max-height: none; overflow: visible; } /* The VS Code style tree costs too much width below 1012px. */ #gh-filetree { display: none; } } /* On a wide screen the toggle is redundant while the rail is actually on screen — but it must stay available once the rail has been hidden, otherwise there is no way back short of clearing localStorage. */ @media (min-width: 1012px) { html[data-gh-sidebar="on"] .gh-drawer-toggle { display: none !important; } } /* ========================================================================== * Tablet * ======================================================================== */ @media (max-width: 991px) { .page-content > .ui.container, .ui.container:not(.fluid) { padding-inline: 12px; } .repository .repo-header { flex-direction: column; align-items: stretch; } .repository .repo-buttons { justify-content: flex-start; } /* Release rows stop being two-column. */ .repository.release #release-list > li, .gh-release { grid-template-columns: minmax(0, 1fr); gap: 12px; } } /* ========================================================================== * Mobile * ======================================================================== */ @media (max-width: 767px) { :root { --gh-header-height: 54px; --gh-font-size: 14px; } body { padding-right: 0 !important; } /* Navbar collapses to brand + burger; Forgejo already ships the toggle. */ #navbar { padding: 0 12px; flex-wrap: wrap; } #navbar .item { padding: 10px 8px; } #navbar .ui.input > input, #navbar input[name="q"] { min-width: 0; width: 100%; } #navbar .ui.input:focus-within > input { min-width: 0; } .page-content > .ui.container, .ui.container:not(.fluid) { padding-inline: 12px; } /* Tabs scroll horizontally instead of wrapping into a tall stack. */ .ui.tabular.menu, .overflow-menu.ui.secondary.pointing.menu, .gh-pr-subnav, .explore .ui.secondary.menu { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ui.tabular.menu::-webkit-scrollbar, .gh-pr-subnav::-webkit-scrollbar { display: none; } .ui.tabular.menu .item, .gh-pr-subnav a { white-space: nowrap; flex: 0 0 auto; } /* Cards go single-column. */ .gh-pinned { grid-template-columns: minmax(0, 1fr); } /* Stack the row: icon above the name is fine when width is the constraint. */ .explore .flex-list .flex-item-header, .organization .flex-list .flex-item-header { flex-direction: column; gap: 6px; } /* File table: drop the commit-message column, keep name + age. */ #repo-files-table .message, .repo-file-table .message { display: none; } #repo-files-table tbody td, .repo-file-table tbody td { padding: 10px 12px; } /* Diffs read better wrapped and unified on a phone. */ .code-diff td.lines-num, .diff-file-box .lines-num { min-width: 32px; padding: 0 6px; font-size: 11px; } .code-diff td.lines-code, .diff-file-box .lines-code { font-size: 11px; padding: 0 6px; } .diff-file-box .diff-file-header { padding: 8px; } /* Comments lose the avatar gutter. */ .repository.view.issue .comment-form, #comment-form { padding-left: 0; } .repository.view.issue .comment-form .ui.avatar, #comment-form > .ui.avatar { display: none; } .timeline::before { left: 12px; } .timeline-item, .timeline .event { padding-left: 40px; } .timeline-item .badge, .timeline .event .badge { width: 24px; height: 24px; left: 0; } /* Bigger tap targets — WCAG 2.2 target size. */ .ui.button, a.ui.button, .ui.pagination.menu .item, .gh-links > li > a { min-height: 36px; display: inline-flex; align-items: center; } .markup { font-size: 15px; } .gh-readme > .markup { padding: 16px; } .gh-issue-toolbar { flex-direction: column; align-items: flex-start; } /* Modals become near-fullscreen sheets. */ .ui.modal { width: calc(100vw - 24px) !important; margin: 12px !important; } #gh-palette { padding-top: 8vh; } .gh-palette-box { max-height: 80vh; } } /* ========================================================================== * Very small phones * ======================================================================== */ @media (max-width: 420px) { .repository .repo-buttons .ui.labeled.button > .label { display: none; } .gh-diff-summary { font-size: 12px; } .gh-profile-name { font-size: 20px; } } /* ========================================================================== * Touch devices — hover-only affordances become always-visible * ======================================================================== */ @media (hover: none) { .markup h1 .anchor, .markup h2 .anchor, .markup h3 .anchor, .markup h4 .anchor, .markup h5 .anchor, .markup h6 .anchor, .markup .code-copy { opacity: 1; } .gh-card:hover, .gh-pinned > li:hover, .gh-repo-card:hover { transform: none; box-shadow: none; } } /* ========================================================================== * Landscape phones — keep the sticky chrome from eating the viewport * ======================================================================== */ @media (max-height: 520px) { html[data-gh-sticky-header="on"] #navbar, html[data-gh-sticky-repo-header="on"] .gh-repo-header, html[data-gh-sticky-toolbar="on"] .gh-file-toolbar { position: static; } } /* ========================================================================== * The left navigation rail costs too much width below the desktop breakpoint, * and everything in it is reachable from Forgejo's own repository tab bar. * ======================================================================== */ @media (max-width: 1011px) { html[data-gh-navrail="on"] #gh-nav-rail { display: none; } html[data-gh-navrail="on"] body { padding-left: 0; } .gh-navrail-toggle { display: none !important; } } /* Restore control for a collapsed navigation rail. */ .gh-navrail-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 690; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gh-border); background: var(--gh-canvas); color: var(--gh-fg); box-shadow: var(--gh-shadow-large); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .gh-navrail-toggle:hover { background: var(--gh-canvas-subtle); } .gh-navrail-toggle:focus-visible { outline: 2px solid var(--gh-accent); outline-offset: 2px; } /* === 12-a11y.css === */ /*! * forgejo-github-theme — 12-a11y * Focus visibility, keyboard affordances, reduced motion, forced colours, * screen-reader helpers. * * Contrast notes (WCAG 2.1 AA, verified against the token values shipped in * themes/github.css and themes/github-dark.css): * light #1f2328 on #ffffff -> 15.3:1 body text (AAA) * light #59636e on #ffffff -> 5.1:1 muted text (AA) * light #6e7781 on #ffffff -> 4.5:1 subtle text (AA, min) * light #0969da on #ffffff -> 4.6:1 links (AA) * light #ffffff on #2da44e -> 3.1:1 primary button — large/bold text * and a 1px dark border carry it * light #cf222e on #ffffff -> 5.1:1 danger text (AA) * light #1a7f37 on #ffffff -> 4.5:1 success text (AA) * light #9a6700 on #ffffff -> 4.6:1 attention text (AA) * dark #e6edf3 on #0d1117 -> 14.7:1 body text (AAA) * dark #9198a1 on #0d1117 -> 6.6:1 muted text (AA) * dark #2f81f7 on #0d1117 -> 5.2:1 links (AA) * dark #f85149 on #0d1117 -> 5.3:1 danger text (AA) * dark #3fb950 on #0d1117 -> 7.7:1 success text (AAA) * dark #d29922 on #0d1117 -> 7.4:1 attention text (AAA) * Never lower --gh-fg-muted below #6e7781 (light) / #8b949e (dark) when * rebranding: that is the AA floor for 14px text on the theme canvases. * * SPDX-License-Identifier: MIT */ /* ========================================================================== * Focus * ======================================================================== */ /* Remove the UA default only where we replace it. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .ui.button:focus-visible, .ui.dropdown:focus-visible, .ui.checkbox input:focus-visible + label::before { outline: 2px solid var(--gh-accent); outline-offset: 2px; border-radius: var(--gh-radius-small); } /* Inputs get the ring rather than an offset outline so they don't jump. */ .ui.form input:focus-visible, .ui.form textarea:focus-visible, .ui.input > input:focus-visible { outline: 2px solid var(--gh-accent); outline-offset: -1px; } /* Anything the theme makes interactive must be reachable. */ #gh-sidebar .gh-resizer, #gh-filetree .gh-tree-resizer { /* focusable via tabindex="0" set in theme.js */ } /* ========================================================================== * Skip link — injected by theme.js as the first focusable element. * ======================================================================== */ .gh-skip-link { position: absolute; left: 8px; top: 8px; z-index: 1000; padding: 8px 16px; background: var(--gh-canvas); border: 1px solid var(--gh-accent); border-radius: var(--gh-radius); color: var(--gh-accent-fg); font-size: 14px; font-weight: 600; box-shadow: var(--gh-shadow-large); transform: translateY(-200%); transition: transform var(--gh-motion) var(--gh-ease); } .gh-skip-link:focus { transform: none; text-decoration: none; } /* ========================================================================== * Screen-reader-only text * ======================================================================== */ .gh-sr-only, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .gh-sr-only:focus-within, .gh-sr-only-focusable:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* ========================================================================== * Keyboard hints * ======================================================================== */ kbd, .gh-kbd { background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border); border-bottom-color: var(--gh-border-strong); border-radius: var(--gh-radius-small); color: var(--gh-fg-muted); display: inline-block; font-family: var(--gh-font-mono); font-size: 11px; line-height: 1; padding: 3px 5px; } /* ========================================================================== * Reduced motion — disable every transition and animation the theme adds. * ======================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .gh-card:hover, .gh-pinned > li:hover, .gh-repo-card:hover, .gh-topic:hover, .gh-avatars a:hover img, .gh-orgs a:hover img, .project-column .card:hover { transform: none; } .gh-check-icon[data-state="pending"] svg { animation: none; } } /* ========================================================================== * Forced colours / Windows high contrast * ======================================================================== */ @media (forced-colors: active) { .ui.button, .gh-card, .gh-panel, #gh-sidebar, .gh-palette-box, .diff-file-box { border: 1px solid CanvasText; } .ui.tabular.menu .item.active::after, .gh-pr-subnav a[aria-current="page"]::after { background: Highlight; forced-color-adjust: none; } :where(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid Highlight; } .gh-langbar span, .gh-dot, .gh-diffstat-blocks i { forced-color-adjust: none; } } /* ========================================================================== * Density / motion preference echo for assistive tech * ======================================================================== */ [aria-busy="true"] { cursor: progress; } [aria-disabled="true"] { opacity: 0.6; pointer-events: none; } /* Live region used by theme.js to announce drawer / density changes. */ #gh-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } /* ========================================================================== * Roving-focus list support (command palette, file tree) * ======================================================================== */ [role="listbox"] [role="option"][aria-selected="true"] { outline: none; } [role="tree"] [role="treeitem"]:focus-visible { outline: 2px solid var(--gh-accent); outline-offset: -2px; } /* Ensure disabled controls still meet 3:1 non-text contrast on both canvases */ :disabled, .disabled { color: var(--gh-fg-subtle); } /* === 13-trim.css === */ /*! * forgejo-github-theme — 13-trim * * Optional removal of interface elements an instance does not want. Every rule * here is gated behind an attribute on , all of which default to "off": * a theme should not delete a forge's features unless it is asked to. * * data-gh-hide-social stars, forks, watchers — counts and the action buttons * data-gh-hide-issues the issue tracker's entry points * data-gh-hide-feeds RSS / Atom subscription links * * Turn them on per instance in gh-theme.config.js, which install.sh creates * once and never overwrites: * * window.GH_THEME.features.hideSocial = "on"; * * These rules only hide the interface. The routes still exist and still work * if someone types the URL. To switch the features off for real, use Forgejo's * own configuration instead — [repository] DISABLE_STARS, DISABLED_REPO_UNITS, * and [other] ENABLE_FEED — and leave these flags off. * * SPDX-License-Identifier: MIT */ /* ========================================================================== * Stars / forks / watchers * ======================================================================== */ html[data-gh-hide-social="on"] .repo-buttons { display: none !important; } /* Anything that survives outside the header block: the counter links and the * star/watch action forms, plus the labelled-button wrappers around them. */ html[data-gh-hide-social="on"] a[href$="/stars"], html[data-gh-hide-social="on"] a[href$="/forks"], html[data-gh-hide-social="on"] a[href$="/watchers"], html[data-gh-hide-social="on"] form[action$="/action/star"], html[data-gh-hide-social="on"] form[action$="/action/watch"], html[data-gh-hide-social="on"] form[action$="/action/unstar"], html[data-gh-hide-social="on"] form[action$="/action/unwatch"] { display: none !important; } html[data-gh-hide-social="on"] .ui.labeled.button:has(> a[href$="/stars"]), html[data-gh-hide-social="on"] .ui.labeled.button:has(> a[href$="/forks"]), html[data-gh-hide-social="on"] .ui.labeled.button:has(> a[href$="/watchers"]), html[data-gh-hide-social="on"] .ui.buttons:has(> form[action$="/action/star"]), html[data-gh-hide-social="on"] .ui.buttons:has(> form[action$="/action/watch"]) { display: none !important; } /* Profile tabs and dashboard entries that only exist to surface stars. */ html[data-gh-hide-social="on"] a[href*="tab=stars"], html[data-gh-hide-social="on"] a[href*="tab=watching"], html[data-gh-hide-social="on"] a[href*="sort=moststars"], html[data-gh-hide-social="on"] a[href*="sort=mostforks"] { display: none !important; } /* ========================================================================== * Issues * ======================================================================== */ html[data-gh-hide-issues="on"] .overflow-menu a.item[href$="/issues"], html[data-gh-hide-issues="on"] .ui.tabular.menu a.item[href$="/issues"], html[data-gh-hide-issues="on"] #navbar a[href$="/issues"], html[data-gh-hide-issues="on"] #gh-nav-rail a[href$="/issues"], html[data-gh-hide-issues="on"] #gh-sidebar a[href$="/issues"], html[data-gh-hide-issues="on"] #gh-sidebar a[href*="/issues?"], html[data-gh-hide-issues="on"] a[href$="/issues/new"], html[data-gh-hide-issues="on"] a[href$="/milestones"], html[data-gh-hide-issues="on"] a[href$="/labels"] { display: none !important; } /* A sidebar block whose only content was issue links collapses entirely. */ html[data-gh-hide-issues="on"] #gh-sidebar .gh-block:has(> h2[id="gh-b-assigned"]), html[data-gh-hide-issues="on"] #gh-sidebar .gh-block:has(> h2[id="gh-b-pinned-issues"]) { display: none !important; } /* ========================================================================== * RSS / Atom * ======================================================================== */ html[data-gh-hide-feeds="on"] a[href$=".rss"], html[data-gh-hide-feeds="on"] a[href$=".atom"], html[data-gh-hide-feeds="on"] a[href*=".rss?"], html[data-gh-hide-feeds="on"] a[href*=".atom?"], html[data-gh-hide-feeds="on"] a[data-tooltip-content="RSS feed"], html[data-gh-hide-feeds="on"] .ui.button:has(> svg.octicon-rss) { display: none !important; } /* ========================================================================== * Left-hand navigation rail: mark the page you are on. * theme.js sets aria-current on the matching entry. * ======================================================================== */ .gh-repo-nav .gh-links > li > a[aria-current="page"] { background: var(--gh-accent-subtle); color: var(--gh-accent-fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--gh-accent); } html[data-gh-sidebar-side="left"] .gh-repo-nav .gh-links > li > a[aria-current="page"] { box-shadow: inset -2px 0 0 var(--gh-accent); } /* ========================================================================== * Commit list grouped by date (GitLab style). * The rows are inserted into Forgejo's own #commits-table by theme.js. * ======================================================================== */ /* Deliberately NOT sticky. * * A sticky inside a table with `border-collapse: collapse` does not paint * reliably: the cell background fails to cover the rows scrolling underneath, * so the date bled straight through the commit messages. GitLab's own date * headings scroll with the list too, so nothing is lost by dropping it. */ tr.gh-commit-date-row > td { background: var(--gh-canvas-subtle); border-top: 1px solid var(--gh-border); border-bottom: 1px solid var(--gh-border-muted); color: var(--gh-fg-muted); font-size: 12px; font-weight: 600; padding: 8px 16px !important; } tr.gh-commit-date-row:first-child > td { border-top: 0; } tr.gh-commit-date-row .gh-commit-date-count { font-weight: 400; color: var(--gh-fg-subtle); margin-left: 6px; } /* The date column on individual rows is redundant once rows are grouped. */ html[data-gh-commit-groups="on"] #commits-table td.text.right.aligned relative-time { color: var(--gh-fg-subtle); } /* ========================================================================== * Repository header band (title + tab bar) * * With the left navigation rail on, Forgejo's own .secondary-nav repeats what * the rail already shows: the repository name and the section tabs. Hiding it * reclaims the whole band. * * Two safety valves, because navigation must never vanish entirely: * * below the desktop breakpoint the rail is hidden, so the band returns * * if the visitor collapses the rail, the band returns too * Both overrides carry an extra attribute so they outrank the rule above. * ======================================================================== */ html[data-gh-hide-repo-tabs="on"] .page-content.repository .secondary-nav { display: none; } html[data-gh-hide-repo-tabs="on"][data-gh-navrail="off"] .page-content.repository .secondary-nav { display: block; } @media (max-width: 1011px) { html[data-gh-hide-repo-tabs="on"] .page-content.repository .secondary-nav { display: block; } } /* Without the band, the page content needs its own breathing room at the top. * * The previous attempt used `.ui.container:first-of-type`, which never matched: * `:first-of-type` selects by element type, not by class, and the first div in * .page-content is .secondary-nav. Padding the content element itself is both * simpler and immune to that class of mistake. The value is the theme's block * rhythm token, so it follows the compact/comfortable density setting. */ html[data-gh-hide-repo-tabs="on"] .page-content.repository { padding-top: var(--gh-block-gap); } /* === fonts.css === */ /*! * forgejo-github-theme — fonts * * The theme ships NO font binaries and makes NO external requests. It uses the * platform UI stack, which is what GitHub itself falls back to and what keeps * the first paint free of layout shift and of any CDN dependency. * * To self-host a webfont instead, drop the .woff2 files next to this file, * uncomment the @font-face blocks below, and set --gh-font-sans / --gh-font-mono * in your branding stylesheet. Nothing else needs to change. * * SPDX-License-Identifier: MIT */ :root { /* Platform UI sans — matches the host OS, zero bytes downloaded. */ --gh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Platform monospace, preferring the compact developer faces. */ --gh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", "DejaVu Sans Mono", monospace; } /* Numerals line up in tables, diffs and counters. */ .gh-kv dd, .gh-langlist .gh-pct, .lines-num, .gh-diffstat, .ui.pagination.menu .item { font-variant-numeric: tabular-nums; } /* * --------------------------------------------------------------------------- * Optional self-hosted webfont example * --------------------------------------------------------------------------- * 1. Place the files here: * assets/fonts/inter-regular.woff2 * assets/fonts/inter-semibold.woff2 * assets/fonts/jetbrains-mono-regular.woff2 * 2. install.sh copies the whole directory to * /public/assets/fonts/ * 3. Uncomment the blocks below and add to your branding CSS: * :root { --gh-font-sans: "Inter", system-ui, sans-serif; } * * @font-face { * font-family: "Inter"; * font-style: normal; * font-weight: 400; * font-display: swap; * src: url("/assets/fonts/inter-regular.woff2") format("woff2"); * } * * @font-face { * font-family: "Inter"; * font-style: normal; * font-weight: 600; * font-display: swap; * src: url("/assets/fonts/inter-semibold.woff2") format("woff2"); * } * * @font-face { * font-family: "JetBrains Mono"; * font-style: normal; * font-weight: 400; * font-display: swap; * src: url("/assets/fonts/jetbrains-mono-regular.woff2") format("woff2"); * } */