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")