From 6d9609b4557defbe767532cd305ecd454b281190 Mon Sep 17 00:00:00 2001
From: whereareiam <mmm.g032@gmail.com>
Date: Sun, 4 Oct 2026 10:14:20 +0200
Subject: [PATCH] Pull request: Restyle the review panel and diff comment
 forms, keep primary buttons green on focus

The "Finish review" panel, the comment form opened on a diff line and
the reply form under a conversation used Forgejo's stock editor. The
conversation editor's rules move into a shared fragment and apply to all
of them; the panel becomes GitHub's 640px dialog with a title row, the
editor box and a footer.

Forgejo paints a focused primary button with its blue accent, so every
green button turned blue after a click once the pointer left it. Focused
primary buttons now keep the primary colours.

The button row under a diff conversation is aligned at 32px with a plain
reply icon, and the pending comment count uses GitHub's counter inside a
primary button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 styles/components/issues/editor.ts            | 129 +++++++++++++
 styles/components/issues/index.ts             |   2 +
 .../components/issues/issue_conversation.ts   | 123 +------------
 styles/components/issues/pull_files_review.ts | 173 ++++++++++++++++++
 styles/public/button.ts                       |   7 +
 5 files changed, 314 insertions(+), 120 deletions(-)
 create mode 100644 styles/components/issues/editor.ts
 create mode 100644 styles/components/issues/pull_files_review.ts

diff --git a/styles/components/issues/editor.ts b/styles/components/issues/editor.ts
new file mode 100644
index 00000000..1ec71f33
--- /dev/null
+++ b/styles/components/issues/editor.ts
@@ -0,0 +1,129 @@
+import { otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
+
+/** GitHub's comment editor, for the rules of a `.combo-markdown-editor`: a bordered box whose toolbar carries the Write/Preview tabs. */
+export const markdownEditor = `
+  border: 1px solid ${themeVars.color.light.border};
+  border-radius: ${otherThemeVars.border.radius};
+  background: ${themeVars.color.body};
+  & markdown-toolbar {
+    background: ${themeVars.color.box.header};
+    border-bottom: 1px solid ${themeVars.color.light.border};
+  }
+  & .markdown-toolbar-button {
+    color: ${themeVars.color.text.light.num1};
+    width: 28px;
+    height: 28px;
+    padding: 6px;
+    border: 0;
+    background: transparent;
+  }
+  & textarea {
+    background: ${themeVars.color.body};
+    font-size: 14px;
+    border: 1px solid ${themeVars.color.light.border};
+    border-radius: ${otherThemeVars.border.radius};
+    box-shadow: none;
+  }
+  overflow: visible;
+
+  & markdown-toolbar {
+    border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
+    min-height: 38px;
+    padding: 0 8px 0 0;
+    gap: 8px;
+
+    & .markdown-toolbar-group {
+      flex: 0 0 auto;
+    }
+    & .switch {
+      border: 0;
+      background: transparent;
+      border-radius: 0;
+      margin: 0 auto -1px 0;
+      min-height: 38px;
+    }
+    /* Forgejo overlaps neighbouring switch items with negative margins and paints the first one. */
+    & .switch .item {
+      height: 38px;
+      min-height: 38px;
+      margin: 0 !important;
+      padding: 8px 16px !important;
+      border: 1px solid transparent;
+      border-radius: 0;
+      background: transparent !important;
+      box-shadow: none;
+      outline: 0;
+      color: ${themeVars.color.text.light.num1};
+      font-size: 14px;
+      line-height: 21px;
+      font-weight: 400;
+    }
+    & .switch .item:not(.active):hover {
+      color: ${themeVars.color.text.self};
+    }
+    & .switch .item.active {
+      border-right-color: ${themeVars.color.light.border};
+      border-left-color: ${themeVars.color.light.border};
+      border-bottom-color: ${themeVars.color.body};
+      background: ${themeVars.color.body} !important;
+      color: ${themeVars.color.text.self};
+    }
+    /* The editor's own border already draws the first tab's left edge. */
+    & .switch .item.active:first-child {
+      border-left-color: transparent;
+      border-top-left-radius: ${otherThemeVars.border.radius};
+    }
+    & .switch .item:focus-visible {
+      outline: 2px solid ${themeVars.github.fgColor.accent};
+      outline-offset: -2px;
+    }
+    & .switch .item.active::before,
+    & .switch .item.active::after {
+      display: none;
+    }
+  }
+  & > .ui.tab.markup {
+    background: ${themeVars.color.body};
+    padding: 16px;
+    min-height: 136px;
+    font-size: 14px;
+    line-height: 21px;
+  }
+  & textarea {
+    margin: 8px;
+    width: calc(100% - 16px);
+    height: auto;
+    min-height: 123px;
+    max-height: calc(35lh + 18px);
+    field-sizing: content;
+    line-height: 21px;
+    font-family: var(--fonts-proportional);
+    padding: 8px;
+  }
+`;
+
+/** The attachment line under an editor, for the rules of its `.dropzone`: a plain text button instead of a dashed drop area. */
+export const attachmentDropzone = `
+  min-height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  & .dz-message {
+    margin: 0;
+    text-align: left;
+  }
+  & .dz-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    min-height: 32px;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 400;
+    color: ${themeVars.color.text.light.num1};
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+  }
+`;
diff --git a/styles/components/issues/index.ts b/styles/components/issues/index.ts
index 63360f16..ecb72751 100644
--- a/styles/components/issues/index.ts
+++ b/styles/components/issues/index.ts
@@ -25,6 +25,7 @@ import issueList from "./issue_list";
 import issueOverview from "./issue_overview";
 import issueSidebar from "./issue_sidebar";
 import issueTimeline from "./issue_timeline";
+import pullFilesReview from "./pull_files_review";
 import pullReview from "./pull_review";
 
 export default cssCombine(
@@ -34,6 +35,7 @@ export default cssCombine(
   issueOverview,
   issueConversation,
   pullReview,
+  pullFilesReview,
   issueSidebar,
   issueTimeline
 );
diff --git a/styles/components/issues/issue_conversation.ts b/styles/components/issues/issue_conversation.ts
index 5e96000a..5227cefa 100644
--- a/styles/components/issues/issue_conversation.ts
+++ b/styles/components/issues/issue_conversation.ts
@@ -1,4 +1,5 @@
 import { css, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
+import { attachmentDropzone, markdownEditor } from "./editor";
 
 export default css`
   .page-content.repository.view.issue.github-conversation {
@@ -453,128 +454,10 @@ export default css`
         }
       }
       & .combo-markdown-editor {
-        border: 1px solid ${themeVars.color.light.border};
-        border-radius: ${otherThemeVars.border.radius};
-        background: ${themeVars.color.body};
-        & markdown-toolbar {
-          background: ${themeVars.color.box.header};
-          border-bottom: 1px solid ${themeVars.color.light.border};
-        }
-        & .markdown-toolbar-button {
-          color: ${themeVars.color.text.light.num1};
-          width: 28px;
-          height: 28px;
-          padding: 6px;
-          border: 0;
-          background: transparent;
-        }
-        & textarea {
-          background: ${themeVars.color.body};
-          font-size: 14px;
-          border: 1px solid ${themeVars.color.light.border};
-          border-radius: ${otherThemeVars.border.radius};
-          box-shadow: none;
-        }
-        overflow: visible;
-
-        & markdown-toolbar {
-          border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
-          min-height: 38px;
-          padding: 0 8px 0 0;
-          gap: 8px;
-
-          & .markdown-toolbar-group {
-            flex: 0 0 auto;
-          }
-          & .switch {
-            border: 0;
-            background: transparent;
-            border-radius: 0;
-            margin: 0 auto -1px 0;
-            min-height: 38px;
-          }
-          /* Forgejo overlaps neighbouring switch items with negative margins and paints the first one. */
-          & .switch .item {
-            height: 38px;
-            min-height: 38px;
-            margin: 0 !important;
-            padding: 8px 16px !important;
-            border: 1px solid transparent;
-            border-radius: 0;
-            background: transparent !important;
-            box-shadow: none;
-            outline: 0;
-            color: ${themeVars.color.text.light.num1};
-            font-size: 14px;
-            line-height: 21px;
-            font-weight: 400;
-          }
-          & .switch .item:not(.active):hover {
-            color: ${themeVars.color.text.self};
-          }
-          & .switch .item.active {
-            border-right-color: ${themeVars.color.light.border};
-            border-left-color: ${themeVars.color.light.border};
-            border-bottom-color: ${themeVars.color.body};
-            background: ${themeVars.color.body} !important;
-            color: ${themeVars.color.text.self};
-          }
-          /* The editor's own border already draws the first tab's left edge. */
-          & .switch .item.active:first-child {
-            border-left-color: transparent;
-            border-top-left-radius: ${otherThemeVars.border.radius};
-          }
-          & .switch .item:focus-visible {
-            outline: 2px solid ${themeVars.github.fgColor.accent};
-            outline-offset: -2px;
-          }
-          & .switch .item.active::before,
-          & .switch .item.active::after {
-            display: none;
-          }
-        }
-        & > .ui.tab.markup {
-          background: ${themeVars.color.body};
-          padding: 16px;
-          min-height: 136px;
-          font-size: 14px;
-          line-height: 21px;
-        }
-        & textarea {
-          margin: 8px;
-          width: calc(100% - 16px);
-          height: auto;
-          min-height: 123px;
-          max-height: calc(35lh + 18px);
-          field-sizing: content;
-          line-height: 21px;
-          font-family: var(--fonts-proportional);
-          padding: 8px;
-        }
+        ${markdownEditor}
       }
       & .dropzone {
-        min-height: 32px;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        & .dz-message {
-          margin: 0;
-          text-align: left;
-        }
-        & .dz-button {
-          display: inline-flex;
-          align-items: center;
-          gap: 4px;
-          padding: 6px 8px;
-          min-height: 32px;
-          font-size: 12px;
-          line-height: 18px;
-          font-weight: 400;
-          color: ${themeVars.color.text.light.num1};
-          background: transparent;
-          border: 0;
-          box-shadow: none;
-        }
+        ${attachmentDropzone}
       }
     }
 
diff --git a/styles/components/issues/pull_files_review.ts b/styles/components/issues/pull_files_review.ts
new file mode 100644
index 00000000..6827d769
--- /dev/null
+++ b/styles/components/issues/pull_files_review.ts
@@ -0,0 +1,173 @@
+import { css, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
+import { attachmentDropzone, markdownEditor } from "./editor";
+
+/** 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) {
+    width: 640px;
+    max-width: calc(100vw - 32px) !important;
+    & > .tippy-content {
+      padding: 0;
+    }
+  }
+  /* The pending comment count on the green button: GitHub's counter inside a primary button. */
+  #review-box .js-btn-review .review-comments-counter {
+    min-width: 20px;
+    padding: 0 6px;
+    background: rgb(0 0 0 / 0.2);
+    color: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+  }
+  .review-box-panel {
+    display: block;
+    & > .ui.segment {
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    & form {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 0 8px;
+      & > :is(.field, .divider) {
+        flex: 0 0 100%;
+        min-width: 0;
+        margin: 0;
+      }
+    }
+    /* Title row */
+    & form > .field:has(> .close) {
+      min-height: 48px;
+      padding: 8px 8px 8px 16px;
+      border-bottom: 1px solid ${themeVars.color.light.border};
+      font-size: 14px;
+      font-weight: 600;
+      & .close {
+        display: grid;
+        place-items: center;
+        width: 32px;
+        height: 32px;
+        border-radius: ${otherThemeVars.border.radius};
+        color: ${themeVars.color.text.light.num1};
+        &:hover {
+          background: ${themeVars.github.control.transparent.bgColor.hover};
+        }
+      }
+    }
+    & form > .field:has(.combo-markdown-editor) {
+      padding: 16px 16px 0;
+    }
+    & form > .field:has(.dropzone) {
+      padding: 4px 16px 8px;
+    }
+    & form > .divider {
+      border-color: ${themeVars.color.light.border};
+    }
+    & form > .ui.ui.ui.button {
+      ${reviewButton}
+      margin: 16px 0;
+    }
+    & form > .ui.ui.ui.button:last-of-type {
+      margin-right: 16px;
+    }
+    & .combo-markdown-editor {
+      ${markdownEditor}
+      /* Forgejo fixes this editor at 730px; it fills the dialog instead. */
+      width: auto;
+      max-width: none;
+      /* The dialog is narrower than the toolbar's buttons at their usual spacing. */
+      & markdown-toolbar {
+        gap: 0;
+        padding-right: 4px;
+      }
+      & .markdown-toolbar-group {
+        gap: 0;
+      }
+    }
+    & .ui.dropzone {
+      ${attachmentDropzone}
+      border: 0 !important;
+      & .dz-button {
+        color: ${themeVars.color.text.light.num1} !important;
+      }
+    }
+  }
+  /* The comment form opened on a diff line */
+  .comment-code-cloud {
+    & .combo-markdown-editor {
+      ${markdownEditor}
+    }
+    & .field:has(> .dropzone) {
+      margin: 4px 0 0;
+    }
+    & .ui.dropzone {
+      ${attachmentDropzone}
+      border: 0 !important;
+      & .dz-button {
+        color: ${themeVars.color.text.light.num1} !important;
+      }
+    }
+    & .field.footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      padding-top: 8px;
+      & .markup-info {
+        margin: 0;
+      }
+      & .button-sequence {
+        flex: 1;
+        gap: 8px;
+      }
+      & .ui.ui.ui.button {
+        ${reviewButton}
+      }
+    }
+    /* The row under a posted conversation, in the diff and on the Conversation tab: Previous / Next, Resolve, Reply */
+    & :is(.button-row, .button-sequence):has(.comment-form-reply) {
+      gap: 8px;
+      margin-top: 8px;
+      & .ui.ui.ui.button {
+        ${reviewButton}
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      & .ui.buttons > .ui.ui.ui.button:not(:first-child) {
+        margin-left: -1px;
+      }
+      /* Fomantic's labelled icon sits in an absolutely placed box; show a plain icon beside the text. */
+      & .ui.ui.ui.labeled.icon.button {
+        padding: 5px 12px !important;
+      }
+      & .ui.ui.ui.labeled.icon.button > .icon {
+        position: static;
+        width: 16px;
+        height: 16px;
+        margin: 0 !important;
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        opacity: 1;
+      }
+    }
+  }
+`;
diff --git a/styles/public/button.ts b/styles/public/button.ts
index c2e74a4a..8bb42809 100644
--- a/styles/public/button.ts
+++ b/styles/public/button.ts
@@ -43,6 +43,10 @@ const baseButton = css`
     /* 按钮组, PR 里的压缩合并按钮 */
     &.buttons .button {
       ${primaryButtonStyle}
+      /* Forgejo paints a focused primary button with its blue accent; keep it green after a click. */
+      &:focus {
+        ${primaryButtonStyle}
+      }
       &:hover {
         ${primaryButtonHoverStyle}
       }
@@ -66,6 +70,9 @@ const baseButton = css`
   .button.primary:not(.ui) {
     ${primaryButtonStyle}
     border: 1px solid ${themeVars.github.button.primary.borderColor.rest};
+    &:focus {
+      ${primaryButtonStyle}
+    }
     &:is(:hover, :focus-visible) {
       ${primaryButtonHoverStyle}
     }