From 53602913f5550e35097c5726038d8411488e39c1 Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 16:23:20 +0200 Subject: [PATCH] Buttons: Size Forgejo's native form buttons from one list The review panel, the diff comment forms, the new issue page and the release form each repeated the same six declarations to bring Forgejo's own buttons to the 32px control size, because those buttons cannot take the theme-control class. The button component now carries one rule for a list of native buttons; the three copies are removed. No visual change. Co-Authored-By: Claude Opus 5.5 --- components/common/button/button.css | 19 +++++++++++++++++++ styles/components/issues/issue_new.ts | 8 -------- styles/components/issues/pull_files_review.ts | 17 +++-------------- styles/pages/releases.css | 8 -------- 4 files changed, 22 insertions(+), 30 deletions(-) diff --git a/components/common/button/button.css b/components/common/button/button.css index 4c93ac1..1438331 100644 --- a/components/common/button/button.css +++ b/components/common/button/button.css @@ -77,3 +77,22 @@ outline: 2px solid var(--github-fgColor-accent); outline-offset: 2px; } + +/* + * Native controls: Forgejo's own buttons that cannot take the theme-control class get the same + * 32px control size here. To size another native button, add it to the list. + */ +:is( + .review-box-panel form > .ui.ui.ui.button, + .comment-code-cloud .field.footer .ui.ui.ui.button, + .comment-code-cloud :is(.button-row, .button-sequence):has(.comment-form-reply) .ui.ui.ui.button, + .page-content.repository.new.issue.github-issue-new .issue-content-left .text.right .ui.ui.ui.button, + .page-content.repository.new.release .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; +} diff --git a/styles/components/issues/issue_new.ts b/styles/components/issues/issue_new.ts index 65c856e..8b10318 100644 --- a/styles/components/issues/issue_new.ts +++ b/styles/components/issues/issue_new.ts @@ -58,14 +58,6 @@ export default css` & .combo-markdown-editor textarea { min-height: 300px !important; } - & .issue-content-left .text.right .ui.ui.ui.button { - height: 32px; - min-height: 32px; - padding: 5px 12px; - font-size: 14px; - font-weight: 500; - line-height: 20px; - } /* Sidebar: muted bold headings with the gear at the right edge, as on an issue page. */ & .issue-content-right.ui.segment { padding: 0; diff --git a/styles/components/issues/pull_files_review.ts b/styles/components/issues/pull_files_review.ts index 26b7ebf..c607c19 100644 --- a/styles/components/issues/pull_files_review.ts +++ b/styles/components/issues/pull_files_review.ts @@ -1,16 +1,5 @@ import { css, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core"; -/** Buttons that close a review form, at GitHub's 32px control height. */ -const reviewButton = ` - height: 32px; - min-height: 32px; - margin: 0; - padding: 5px 12px; - font-size: 14px; - font-weight: 500; - line-height: 20px; -`; - export default css` /* "Finish review" opens Forgejo's form in a popup; GitHub shows it as a 640px dialog. */ .tippy-box[data-theme="menu"]:has(.review-box-panel) { @@ -98,7 +87,7 @@ export default css` border-color: ${themeVars.color.light.border}; } & form > .ui.ui.ui.button { - ${reviewButton} + /* Sized by the native control list in the button component. */ margin: 16px 0; } & form > .ui.ui.ui.button:last-of-type { @@ -137,7 +126,7 @@ export default css` gap: 8px; } & .ui.ui.ui.button { - ${reviewButton} + margin: 0; } } /* The row under a posted conversation, in the diff and on the Conversation tab: Previous / Next, Resolve, Reply */ @@ -145,7 +134,7 @@ export default css` gap: 8px; margin-top: 8px; & .ui.ui.ui.button { - ${reviewButton} + margin: 0; display: inline-flex; align-items: center; gap: 8px; diff --git a/styles/pages/releases.css b/styles/pages/releases.css index af02c94..c2badd4 100644 --- a/styles/pages/releases.css +++ b/styles/pages/releases.css @@ -720,14 +720,6 @@ body:has(.page-content.repository.new.release) .repository-content-header { 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;