From 3bc327d5926eb368ae3e6f8b10b8c0b28931ffd9 Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 16:21:42 +0200 Subject: [PATCH] Editor: Move the markdown editor styles into a common component The editor rules lived in the issue styles of the theme files although they also serve the release form, and counted against the theme size limit. They move, unchanged, to components/common/editor/editor.css with the other common components. The largest theme file drops from 208.0 KB to 205.4 KB. No visual change. Co-Authored-By: Claude Opus 5.5 --- components/common/editor/editor.css | 147 +++++++++++++++++++++++++++ styles/components/issues/editor.ts | 147 --------------------------- styles/components/issues/index.ts | 2 - templates/base/component_assets.tmpl | 1 + 4 files changed, 148 insertions(+), 149 deletions(-) create mode 100644 components/common/editor/editor.css delete mode 100644 styles/components/issues/editor.ts diff --git a/components/common/editor/editor.css b/components/common/editor/editor.css new file mode 100644 index 0000000..f49c51a --- /dev/null +++ b/components/common/editor/editor.css @@ -0,0 +1,147 @@ +/* + * Markdown editor: GitHub's comment editor, written once for every place Forgejo renders its own + * markdown editor: a bordered box whose toolbar carries the Write/Preview tabs, and a plain + * attachment line instead of a dashed drop area. To style another editor, add its container to + * the list. The release form keeps Forgejo's drop area and only takes the editor. + */ +:is( + .page-content.repository.view.issue.github-conversation .comment.form, + .page-content.repository.new.issue.github-issue-new, + .review-box-panel, + .comment-code-cloud, + .page-content.repository.new.release + ) + .combo-markdown-editor { + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + background: var(--color-body); + & markdown-toolbar { + background: var(--color-box-header); + border-bottom: 1px solid var(--color-light-border); + } + & .markdown-toolbar-button { + color: var(--color-text-light-1); + width: 28px; + height: 28px; + padding: 6px; + border: 0; + background: transparent; + } + & textarea { + background: var(--color-body); + font-size: 14px; + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + box-shadow: none; + } + overflow: visible; + + & markdown-toolbar { + border-radius: var(--border-radius) var(--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: var(--color-text-light-1); + font-size: 14px; + line-height: 21px; + font-weight: 400; + } + & .switch .item:not(.active):hover { + color: var(--color-text); + } + & .switch .item.active { + border-right-color: var(--color-light-border); + border-left-color: var(--color-light-border); + border-bottom-color: var(--color-body); + background: var(--color-body) !important; + color: var(--color-text); + } + /* 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: var(--border-radius); + } + & .switch .item:focus-visible { + outline: 2px solid var(--github-fgColor-accent); + outline-offset: -2px; + } + & .switch .item.active::before, + & .switch .item.active::after { + display: none; + } + } + & > .ui.tab.markup { + background: var(--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; + } +} +:is( + .page-content.repository.view.issue.github-conversation .comment.form, + .page-content.repository.new.issue.github-issue-new, + .review-box-panel, + .comment-code-cloud + ) + .ui.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: var(--color-text-light-1); + background: transparent; + border: 0; + box-shadow: none; + } + border: 0 !important; + & .dz-button { + color: var(--color-text-light-1) !important; + } +} diff --git a/styles/components/issues/editor.ts b/styles/components/issues/editor.ts deleted file mode 100644 index f3484a2..0000000 --- a/styles/components/issues/editor.ts +++ /dev/null @@ -1,147 +0,0 @@ -import { css, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core"; - -/** - * GitHub's comment editor, written once for every place Forgejo renders its markdown editor in an - * issue or pull request: a bordered box whose toolbar carries the Write/Preview tabs, and a plain - * attachment line instead of a dashed drop area. To style another editor, add its container here. - */ -const hosts = `:is( - .page-content.repository.view.issue.github-conversation .comment.form, - .page-content.repository.new.issue.github-issue-new, - .review-box-panel, - .comment-code-cloud -)`; - -/** Pages that keep Forgejo's drop area for attachments and only take the editor. */ -const editorOnlyHosts = `.page-content.repository.new.release`; - -export default css` - :is(${hosts}, ${editorOnlyHosts}) .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; - } - } - ${hosts} .ui.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; - } - border: 0 !important; - & .dz-button { - color: ${themeVars.color.text.light.num1} !important; - } - } -`; diff --git a/styles/components/issues/index.ts b/styles/components/issues/index.ts index 03a60fc..bb1ef60 100644 --- a/styles/components/issues/index.ts +++ b/styles/components/issues/index.ts @@ -18,7 +18,6 @@ */ import { cssCombine } from "@lutinglt/gitea-github-theme/core"; -import editor from "./editor"; import issue from "./issue"; import issueComment from "./issue_comment"; import issueConversation from "./issue_conversation"; @@ -36,7 +35,6 @@ export default cssCombine( issueList, issueOverview, issueConversation, - editor, issueNew, pullReview, pullFilesReview, diff --git a/templates/base/component_assets.tmpl b/templates/base/component_assets.tmpl index c7cf804..0dc5201 100644 --- a/templates/base/component_assets.tmpl +++ b/templates/base/component_assets.tmpl @@ -1,5 +1,6 @@ +