From c389019aad7b11c74e8cb013dc1d81a381ed342a Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 16:18:47 +0200 Subject: [PATCH] Pull request: Define the merge box section row's measurements once The scheduled-merge notice is styled as a merge box section in the page stylesheet and repeated the section row's numbers by hand: 64px height, 16px padding, a 32px icon and the divider colour. The merge box now declares them as custom properties where its rows are styled, and both the rows and the notice read them. No visual change. Co-Authored-By: Claude Opus 5.5 --- styles/components/issues/pull_review.ts | 19 ++++++++++++------- styles/pages/pull-request.css | 19 ++++++++++--------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/styles/components/issues/pull_review.ts b/styles/components/issues/pull_review.ts index 29cded9..291815c 100644 --- a/styles/components/issues/pull_review.ts +++ b/styles/components/issues/pull_review.ts @@ -1,11 +1,11 @@ import { css, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core"; import { primaryButtonHoverStyle, primaryButtonStyle } from "@lutinglt/gitea-github-theme/styles/common"; -/** The 32px round status icon that starts a merge box section; the section sets its background. */ +/** The round status icon that starts a merge box section; the section sets its background. */ const mergeSectionIcon = ` - flex: 0 0 32px; - width: 32px; - height: 32px; + flex: 0 0 var(--merge-section-icon); + width: var(--merge-section-icon); + height: var(--merge-section-icon); padding: 8px; border-radius: 50%; color: ${themeVars.github.fgColor.onEmphasis}; @@ -285,6 +285,11 @@ export default css` border-right-color: color-mix(in srgb, ${themeVars.color.body}, ${themeVars.github.bgColor.accent.emphasis} 10%); } & .merge.box { + /* One section row's measurements, also used by rows styled outside this file. */ + --merge-section-height: 64px; + --merge-section-padding: 16px; + --merge-section-icon: 32px; + --merge-section-divider: color-mix(in srgb, ${themeVars.color.light.border} 70%, transparent); z-index: 2; margin-left: 0; & > .content { @@ -339,15 +344,15 @@ export default css` display: none; } & > :is(.item, details, .pull-merge-actions):not(:first-child) { - border-top: 1px solid color-mix(in srgb, ${themeVars.color.light.border} 70%, transparent); + border-top: 1px solid var(--merge-section-divider); } & > .item { display: flex; align-items: center; gap: 8px; - min-height: 64px; + min-height: var(--merge-section-height); margin: 0; - padding: 16px; + padding: var(--merge-section-padding); border-right: 0; border-bottom: 0; border-left: 0; diff --git a/styles/pages/pull-request.css b/styles/pages/pull-request.css index e670fe3..f319c2e 100644 --- a/styles/pages/pull-request.css +++ b/styles/pages/pull-request.css @@ -3,7 +3,8 @@ /* * A merge scheduled for when checks succeed. Forgejo prints a blue notice above the merge button; * here it is one more section of the merge box, like the rows above it: a round status icon, the - * sentence, and the bar with the merge button and "Cancel" below. + * sentence, and the bar with the merge button and "Cancel" below. Its measurements are the merge + * box's own (--merge-section-*), set where the other rows are styled. */ .github-pull-review .pull-merge-actions > #pull-request-merge-form:has(.ui.info.message) { flex: 0 0 100%; @@ -12,11 +13,11 @@ .github-pull-review .pull-merge-actions .ui.info.message { position: relative; display: block; - min-height: 64px; - margin: -16px -16px 16px; - padding: 20px 16px 20px 56px; + min-height: var(--merge-section-height); + margin: calc(-1 * var(--merge-section-padding)) calc(-1 * var(--merge-section-padding)) var(--merge-section-padding); + padding: 20px var(--merge-section-padding) 20px calc(var(--merge-section-padding) + var(--merge-section-icon) + 8px); border: 0; - border-bottom: 1px solid color-mix(in srgb, var(--color-light-border) 70%, transparent); + border-bottom: 1px solid var(--merge-section-divider); border-radius: 0; background: var(--color-body); box-shadow: none; @@ -30,10 +31,10 @@ .github-pull-review .pull-merge-actions .ui.info.message::before { content: ""; position: absolute; - top: 16px; - left: 16px; - width: 32px; - height: 32px; + top: var(--merge-section-padding); + left: var(--merge-section-padding); + width: var(--merge-section-icon); + height: var(--merge-section-icon); border-radius: 50%; background: var(--github-bgColor-accent-emphasis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E")