From 43dc0fafbafb58fcea13c88dc7ce0188c8e29043 Mon Sep 17 00:00:00 2001 From: whereareiam Date: Thu, 22 Oct 2026 22:33:09 +0200 Subject: [PATCH] feat(forms): GitHub's create pages for repositories, organizations and migrations The new repository, new organization, migration, fork and milestone forms drop Forgejo's centred box. GitHub's page is an 800px column with the title as a 24px heading over a divider, and sections divided by lines. Their fields get the form groups the settings pages use: label above the control, 32px controls up to 440px, muted notes, and GitHub's checkbox and radio lists. Those form styles move from the settings component into their own (common/form). Forgejo's right-aligned 250px label column (set with !important) and the empty labels that kept controls in it are undone. The migration chooser becomes one box with a row per service instead of a gallery of 184px logos. The theme's old boxed style for these pages goes, and two rules that targeted Gitea's new-repo class now use Forgejo's new repo. Co-Authored-By: Claude Opus 5.5 --- components/common/form/form.css | 319 +++++++++++++++++++ components/common/settings/settings.css | 305 ------------------ scripts/assembleForgejo.ts | 1 + src/build-output.test.ts | 14 + styles/components/newrepo.ts | 2 +- styles/pages/create.css | 190 +++++++++++ styles/public/attached.ts | 8 +- styles/public/dropdown/selection_dropdown.ts | 2 +- templates/base/component_assets.tmpl | 2 + 9 files changed, 529 insertions(+), 314 deletions(-) create mode 100644 components/common/form/form.css create mode 100644 styles/pages/create.css diff --git a/components/common/form/form.css b/components/common/form/form.css new file mode 100644 index 00000000..297a8e0e --- /dev/null +++ b/components/common/form/form.css @@ -0,0 +1,319 @@ +/* GitHub's form groups, in settings and on the create pages (repository, organization, migration, fork, milestone), whose + templates stay Forgejo's. The label sits on its own line (14px semibold, 6px above the control), controls are 32px + and no wider than 440px with an inset shadow and an accent focus ring, notes are muted 12px. Forgejo writes fields + as .field with a label beside the control, or as a label wrapping its control inside a fieldset or straight in the + form; all get the same look. */ +:is( + .page-content > .ui.container.flex-container.theme-settings > .flex-container-main, + .page-content.new:is(.repo, .org, .migrate, .fork, .milestone) + ) + .ui.form { + & .field, + & fieldset > label, + & > label { + margin: 0 0 15px; + } + & .field > label, + & fieldset > label, + & > label { + display: block; + color: var(--color-text); + font-size: 14px; + font-weight: 600; + line-height: 21px; + } + & .field > label { + margin-bottom: 6px; + } + & + :is(.field, fieldset > label) + > :is( + input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), + select, + textarea, + .ui.selection.dropdown + ), + & + > label + > :is( + input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), + select, + textarea, + .ui.selection.dropdown + ) { + display: block; + width: 100%; + max-width: 440px; + font-weight: 400; + } + & + fieldset + > label + > :is( + input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), + select, + textarea, + .ui.selection.dropdown + ) { + margin-top: 6px; + } + & + :is( + input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), + select, + textarea + ) { + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + background: var(--color-input-background); + box-shadow: inset 0 1px 0 rgb(1 4 9 / 24%); + color: var(--color-text); + font-size: 14px; + &:focus { + border-color: var(--github-bgColor-accent-emphasis); + outline: none; + box-shadow: inset 0 0 0 1px var(--github-bgColor-accent-emphasis); + } + } + & input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]) { + height: 32px; + min-height: 32px; + padding: 5px 12px; + line-height: 20px; + } + & textarea { + padding: 8px 12px; + line-height: 21px; + } + + /* Selects look like GitHub's: the default button surface with a caret. Fomantic sizes its selection dropdown with + a more specific rule. */ + & select, + & .ui.selection.dropdown { + min-height: 32px; + padding: 5px 24px 5px 12px; + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + background-color: var(--color-button); + box-shadow: inset 0 1px 0 rgb(1 4 9 / 24%); + font-size: 14px; + line-height: 20px; + } + /* Fields wrapped in Fomantic's search or input containers get the same 440px limit. */ + & .field > :is(.ui.search, .ui.input) { + max-width: 440px; + & .ui.input, + & input { + width: 100%; + } + } + /* Multiple-choice dropdowns (allowed users and teams) are 32px until they hold chosen items. */ + & .ui.multiple.selection.dropdown { + min-height: 32px !important; + padding: 2px 24px 2px 8px !important; + & > input.search, + & > .default.text { + margin: 3px 0 3px 4px; + padding: 0; + line-height: 20px; + } + } + & .ui.selection.dropdown:not(.multiple) { + padding: 5px 24px 5px 12px !important; + line-height: 20px !important; + & > .dropdown.icon { + right: 8px; + } + } + + & :is(.help, p.help) { + display: block; + margin: 4px 0 2px; + color: var(--color-text-light-1); + font-size: 12px; + font-weight: 400; + line-height: 18px; + } + + /* Checkboxes and radios: the browser's own 13px box in a 20px gutter, a semibold title beside it and any note + beneath the title. Fomantic's drawn box and check mark go. */ + & input[type="checkbox"] { + appearance: auto; + flex: none; + width: 13px; + height: 13px; + margin: 4px 7px 0 0; + /* Forgejo zeroes the top margin with !important; the box lines up with the 21px title line. */ + margin-block-start: 4px !important; + border-radius: 3px; + accent-color: var(--github-bgColor-accent-emphasis); + vertical-align: top; + } + /* Forgejo draws its own check mark as the input's ::after; the browser's box draws it instead. */ + & input:is([type="checkbox"], [type="radio"])::after { + display: none; + } + /* A label wrapping its checkbox (the hidden comment types): the box in the gutter, the text beside it, the note + under the text. */ + & label:has(> input[type="checkbox"]) { + display: grid; + grid-template-columns: 20px minmax(0, 1fr); + align-items: start; + font-weight: 600; + & > input[type="checkbox"] { + grid-column: 1; + grid-row: 1; + margin: 4px 0 0; + } + & > :not(input) { + grid-column: 2; + } + & > .help { + display: block; + } + & + .help { + margin-left: 20px; + } + } + & .ui.checkbox { + display: grid; + grid-template-columns: 20px minmax(0, 1fr); + align-items: start; + & > input { + position: static; + grid-column: 1; + grid-row: 1; + width: 13px; + height: 13px; + margin: 4px 0 0; + opacity: 1; + } + & > label { + grid-column: 2; + grid-row: 1; + margin: 0; + padding: 0; + color: var(--color-text); + font-size: 14px; + font-weight: 600; + line-height: 21px; + &::before, + &::after { + display: none; + } + } + &.disabled > label { + color: var(--color-text-light-1); + } + /* Notes Forgejo puts inside the checkbox (the signing trust models) sit under the title, not in the box's + gutter. */ + & > :not(input, label) { + grid-column: 2; + margin: 0; + } + } + + /* A field that only shows a value (Forgejo's repository size) keeps label and value on one line. */ + & .inline.field:not(:has(input, select, textarea, .ui.checkbox, .ui.dropdown)) { + display: flex; + align-items: baseline; + gap: 8px; + & > label { + margin: 0; + } + } + /* Forgejo separates some labels from their choices with a line break; the field spacing does that. */ + & .field > br { + display: none; + } + + /* Radio groups Forgejo lays out in a row (.inline.fields) become GitHub's list: the group label above, one choice + per line. */ + & .inline.fields { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + margin: 0 0 15px; + & > label { + margin: 0; + color: var(--color-text); + font-size: 14px; + font-weight: 600; + line-height: 21px; + } + & > .field { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0 8px; + margin: 0; + padding: 0; + } + } + + /* Forgejo keeps an empty label in front of some controls to line them up with its label column (the migration + items, the create buttons); the stacked layout has no such column. */ + & .inline.field > label:first-child:empty { + display: none; + } + + /* Forgejo's checkbox fields join one grid without changing their markup (scripts rely on it): the box in the + gutter, the title beside it, notes beneath. A field label in front of the checkbox (Forgejo's "Issues" before + "Enable repository issues") becomes the title and the checkbox's own label its note, as in GitHub's feature + list. */ + & .inline.field:has(> label:first-child + .ui.checkbox), + & .field:has(> .ui.checkbox:first-child) { + display: grid; + grid-template-columns: 20px minmax(0, 1fr); + align-items: start; + margin: 15px 0; + & > .ui.checkbox { + display: contents; + } + & > *:not(.ui.checkbox) { + grid-column: 2; + } + & > .help { + margin: 0; + } + } + & .inline.field:has(> label:first-child:not(:empty) + .ui.checkbox) { + & > label:first-child { + grid-row: 1; + width: auto; + margin: 0; + padding: 0; + } + & > .ui.checkbox > label { + grid-row: 2; + color: var(--color-text-light-1); + font-size: 12px; + font-weight: 400; + line-height: 18px; + } + } +} + +/* Choices inside a radio group sit 8px apart; the checkbox-field margin above does not apply to them. */ +:is( + .page-content > .ui.container.flex-container.theme-settings > .flex-container-main, + .page-content.new:is(.repo, .org, .migrate, .fork, .milestone) + ) + .ui.form + .inline.fields + > .field:has(> .ui.checkbox) { + margin: 0; +} + +@media (max-width: 767.98px) { + :is( + .page-content > .ui.container.flex-container.theme-settings > .flex-container-main, + .page-content.new:is(.repo, .org, .migrate, .fork, .milestone) + ) + .ui.form + .field + > :is(input, select, textarea, .ui.selection.dropdown) { + max-width: none; + } +} diff --git a/components/common/settings/settings.css b/components/common/settings/settings.css index 0670ea57..0bab3365 100644 --- a/components/common/settings/settings.css +++ b/components/common/settings/settings.css @@ -549,302 +549,6 @@ } } -/* Forms: GitHub's form groups. The label sits on its own line (14px semibold, 6px above the control), controls are - 32px and no wider than 440px with an inset shadow and an accent focus ring, notes are muted 12px. Forgejo writes - fields as .field with a label beside the control, or as a label wrapping its control inside a fieldset or straight - in the form; all get the same look. */ -.page-content > .ui.container.flex-container.theme-settings > .flex-container-main .ui.form { - & .field, - & fieldset > label, - & > label { - margin: 0 0 15px; - } - & .field > label, - & fieldset > label, - & > label { - display: block; - color: var(--color-text); - font-size: 14px; - font-weight: 600; - line-height: 21px; - } - & .field > label { - margin-bottom: 6px; - } - & - :is(.field, fieldset > label) - > :is( - input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), - select, - textarea, - .ui.selection.dropdown - ), - & - > label - > :is( - input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), - select, - textarea, - .ui.selection.dropdown - ) { - display: block; - width: 100%; - max-width: 440px; - font-weight: 400; - } - & - fieldset - > label - > :is( - input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), - select, - textarea, - .ui.selection.dropdown - ) { - margin-top: 6px; - } - & - :is( - input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]), - select, - textarea - ) { - border: 1px solid var(--color-light-border); - border-radius: var(--border-radius); - background: var(--color-input-background); - box-shadow: inset 0 1px 0 rgb(1 4 9 / 24%); - color: var(--color-text); - font-size: 14px; - &:focus { - border-color: var(--github-bgColor-accent-emphasis); - outline: none; - box-shadow: inset 0 0 0 1px var(--github-bgColor-accent-emphasis); - } - } - & input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]) { - height: 32px; - min-height: 32px; - padding: 5px 12px; - line-height: 20px; - } - & textarea { - padding: 8px 12px; - line-height: 21px; - } - - /* Selects look like GitHub's: the default button surface with a caret. Fomantic sizes its selection dropdown with - a more specific rule. */ - & select, - & .ui.selection.dropdown { - min-height: 32px; - padding: 5px 24px 5px 12px; - border: 1px solid var(--color-light-border); - border-radius: var(--border-radius); - background-color: var(--color-button); - box-shadow: inset 0 1px 0 rgb(1 4 9 / 24%); - font-size: 14px; - line-height: 20px; - } - /* Fields wrapped in Fomantic's search or input containers get the same 440px limit. */ - & .field > :is(.ui.search, .ui.input) { - max-width: 440px; - & .ui.input, - & input { - width: 100%; - } - } - /* Multiple-choice dropdowns (allowed users and teams) are 32px until they hold chosen items. */ - & .ui.multiple.selection.dropdown { - min-height: 32px !important; - padding: 2px 24px 2px 8px !important; - & > input.search, - & > .default.text { - margin: 3px 0 3px 4px; - padding: 0; - line-height: 20px; - } - } - & .ui.selection.dropdown:not(.multiple) { - padding: 5px 24px 5px 12px !important; - line-height: 20px !important; - & > .dropdown.icon { - right: 8px; - } - } - - & :is(.help, p.help) { - display: block; - margin: 4px 0 2px; - color: var(--color-text-light-1); - font-size: 12px; - font-weight: 400; - line-height: 18px; - } - - /* Checkboxes and radios: the browser's own 13px box in a 20px gutter, a semibold title beside it and any note - beneath the title. Fomantic's drawn box and check mark go. */ - & input[type="checkbox"] { - appearance: auto; - flex: none; - width: 13px; - height: 13px; - margin: 4px 7px 0 0; - /* Forgejo zeroes the top margin with !important; the box lines up with the 21px title line. */ - margin-block-start: 4px !important; - border-radius: 3px; - accent-color: var(--github-bgColor-accent-emphasis); - vertical-align: top; - } - /* Forgejo draws its own check mark as the input's ::after; the browser's box draws it instead. */ - & input:is([type="checkbox"], [type="radio"])::after { - display: none; - } - /* A label wrapping its checkbox (the hidden comment types): the box in the gutter, the text beside it, the note - under the text. */ - & label:has(> input[type="checkbox"]) { - display: grid; - grid-template-columns: 20px minmax(0, 1fr); - align-items: start; - font-weight: 600; - & > input[type="checkbox"] { - grid-column: 1; - grid-row: 1; - margin: 4px 0 0; - } - & > :not(input) { - grid-column: 2; - } - & > .help { - display: block; - } - & + .help { - margin-left: 20px; - } - } - & .ui.checkbox { - display: grid; - grid-template-columns: 20px minmax(0, 1fr); - align-items: start; - & > input { - position: static; - grid-column: 1; - grid-row: 1; - width: 13px; - height: 13px; - margin: 4px 0 0; - opacity: 1; - } - & > label { - grid-column: 2; - grid-row: 1; - margin: 0; - padding: 0; - color: var(--color-text); - font-size: 14px; - font-weight: 600; - line-height: 21px; - &::before, - &::after { - display: none; - } - } - &.disabled > label { - color: var(--color-text-light-1); - } - /* Notes Forgejo puts inside the checkbox (the signing trust models) sit under the title, not in the box's - gutter. */ - & > :not(input, label) { - grid-column: 2; - margin: 0; - } - } - - /* A field that only shows a value (Forgejo's repository size) keeps label and value on one line. */ - & .inline.field:not(:has(input, select, textarea, .ui.checkbox, .ui.dropdown)) { - display: flex; - align-items: baseline; - gap: 8px; - & > label { - margin: 0; - } - } - /* Forgejo separates some labels from their choices with a line break; the field spacing does that. */ - & .field > br { - display: none; - } - - /* Radio groups Forgejo lays out in a row (.inline.fields) become GitHub's list: the group label above, one choice - per line. */ - & .inline.fields { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - margin: 0 0 15px; - & > label { - margin: 0; - color: var(--color-text); - font-size: 14px; - font-weight: 600; - line-height: 21px; - } - & > .field { - display: flex; - flex-wrap: wrap; - align-items: baseline; - gap: 0 8px; - margin: 0; - padding: 0; - } - } - - /* Forgejo's checkbox fields join one grid without changing their markup (scripts rely on it): the box in the - gutter, the title beside it, notes beneath. A field label in front of the checkbox (Forgejo's "Issues" before - "Enable repository issues") becomes the title and the checkbox's own label its note, as in GitHub's feature - list. */ - & .inline.field:has(> label:first-child + .ui.checkbox), - & .field:has(> .ui.checkbox:first-child) { - display: grid; - grid-template-columns: 20px minmax(0, 1fr); - align-items: start; - margin: 15px 0; - & > .ui.checkbox { - display: contents; - } - & > *:not(.ui.checkbox) { - grid-column: 2; - } - & > .help { - margin: 0; - } - } - & .inline.field:has(> label:first-child + .ui.checkbox) { - & > label:first-child { - grid-row: 1; - width: auto; - margin: 0; - padding: 0; - } - & > .ui.checkbox > label { - grid-row: 2; - color: var(--color-text-light-1); - font-size: 12px; - font-weight: 400; - line-height: 18px; - } - } -} - -/* Choices inside a radio group sit 8px apart; the checkbox-field margin above does not apply to them. */ -.page-content - > .ui.container.flex-container.theme-settings - > .flex-container-main - .ui.form - .inline.fields - > .field:has(> .ui.checkbox) { - margin: 0; -} - @media (max-width: 767.98px) { .ui.container.flex-container.theme-settings { gap: 24px; @@ -861,15 +565,6 @@ grid-template-columns: minmax(0, 1fr); } - .page-content - > .ui.container.flex-container.theme-settings - > .flex-container-main - .ui.form - .field - > :is(input, select, textarea, .ui.selection.dropdown) { - max-width: none; - } - .theme-settings-context { flex-wrap: wrap; } diff --git a/scripts/assembleForgejo.ts b/scripts/assembleForgejo.ts index 61a19ab4..a8dfd761 100644 --- a/scripts/assembleForgejo.ts +++ b/scripts/assembleForgejo.ts @@ -45,6 +45,7 @@ for (const directory of readdirSync(join(root, "components"))) { for (const file of [ "commits.css", + "create.css", "dashboard-lists.css", "insights.css", "organization.css", diff --git a/src/build-output.test.ts b/src/build-output.test.ts index 8f1661b2..4e37f4f7 100644 --- a/src/build-output.test.ts +++ b/src/build-output.test.ts @@ -610,6 +610,20 @@ describe("Forgejo 15 native integration", () => { ).toBe(true); }); + it("gives the create pages GitHub's page heading and the settings form groups", () => { + const read = (...parts: string[]) => fs.readFileSync(path.join(ROOT_DIR, ...parts), "utf-8"); + const form = read("components", "common", "form", "form.css"); + expect(form).toContain(".page-content.new:is(.repo, .org, .migrate, .fork, .milestone)"); + expect(form).toContain(".inline.field > label:first-child:empty"); + expect(read("components", "common", "settings", "settings.css")).not.toContain("& .ui.checkbox {"); + const create = read("styles", "pages", "create.css"); + expect(create).toContain(".page-content.new:is(.repo, .org, .migrate, .fork) .ui.form > .ui.top.attached.header"); + expect(create).toContain(".page-content.repository.new.migrate .migrate-entries"); + // The theme's boxed create pages are gone, and its rules use Forgejo's classes, not Gitea's new-repo. + expect(read("styles", "public", "attached.ts")).not.toContain("new.migrate"); + expect(read("styles", "components", "newrepo.ts")).toContain(".page-content.repository.new.repo {"); + }); + it("matches GitHub's repository About, visibility, and code-search details", () => { const headerStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "header.ts"), "utf-8"); const headerTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "home_header.tmpl"), "utf-8"); diff --git a/styles/components/newrepo.ts b/styles/components/newrepo.ts index d4321ef0..0296b17b 100644 --- a/styles/components/newrepo.ts +++ b/styles/components/newrepo.ts @@ -22,7 +22,7 @@ import { activeItemAfterStyle } from "@lutinglt/gitea-github-theme/styles/common // 新建仓库页面下拉菜单 const newRepo = css` - .page-content.repository.new-repo { + .page-content.repository.new.repo { .ui.dropdown .menu { .item:hover:after { ${activeItemAfterStyle} diff --git a/styles/pages/create.css b/styles/pages/create.css new file mode 100644 index 00000000..e33125ae --- /dev/null +++ b/styles/pages/create.css @@ -0,0 +1,190 @@ +/* Create pages (repository, organization, migration, fork, milestone): GitHub's page instead of Forgejo's box. An + 800px column, the title as a 24px heading over a divider and the introduction, then the form with its sections + divided by lines. Kept as a page stylesheet, outside the size-limited theme files. */ +.page-content.new:is(.repo, .org, .migrate, .fork) > .ui.grid { + box-sizing: border-box; + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 32px 16px; +} + +.page-content.new:is(.repo, .org, .migrate, .fork) > .ui.grid > .column { + width: 100% !important; + padding: 0 !important; +} + +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form > .ui.top.attached.header { + margin: 0; + padding: 0 0 8px; + border: 0; + background: transparent; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; +} + +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form > .ui.attached.segment { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +/* Forgejo's introduction (Migrate repository) follows the divider, muted. */ +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form > .ui.top.attached.header { + margin-bottom: 16px; + border-bottom: 1px solid var(--color-light-border); +} + +.page-content.new.repo .ui.form > .ui.attached.segment > p.center { + margin: 0 0 8px; + color: var(--color-text-light-1); + text-align: left; +} + +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form fieldset { + margin: 0; + padding: 16px 0 0; + border: 0; +} + +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form fieldset + fieldset, +.page-content.new.repo #non_template > fieldset:first-child { + margin-top: 16px; + border-top: 1px solid var(--color-light-border); +} + +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form fieldset > legend { + margin-bottom: 8px; + padding: 0; + font-size: 16px; + font-weight: 600; + line-height: 24px; +} + +/* The submit sits after a divider, as GitHub's Create repository does. */ +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form > .ui.attached.segment > .ui.primary.button { + margin-top: 16px; +} + +/* Forgejo lays these forms out with right-aligned labels in a 250px column and indents the header and notes to match, + all with !important; GitHub stacks the label over the control. */ +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form { + width: 100% !important; + & .header { + padding-inline-start: 0 !important; + } + & .inline.field > label { + width: auto !important; + text-align: start; + } + & .help { + margin-inline-start: 0 !important; + } + & .optional .title { + margin-inline-start: 0 !important; + } + & .inline.field > :is(input, textarea) { + width: 100%; + } +} + +/* The legend sits inside the divided section instead of cutting through its line. */ +.page-content.new:is(.repo, .org, .migrate, .fork) .ui.form fieldset > legend { + float: left; + width: 100%; + /* Forgejo divides sections on the legend; the fieldset draws the divider here. */ + border: 0; + & + * { + clear: both; + } +} + +/* Migration chooser: GitHub has no gallery of large logos; the services become one box with a row per service, its + 32px logo beside the name and description. */ +.page-content.repository.new.migrate > .ui.container { + box-sizing: border-box; + width: 100% !important; + max-width: 800px; + margin: 0 auto; + padding: 32px 16px; +} + +.page-content.repository.new.migrate > .ui.container > h2 { + margin: 0 0 16px !important; + padding-bottom: 8px; + border-bottom: 1px solid var(--color-light-border); + font-size: 24px; + font-weight: 600; + line-height: 36px; +} + +.page-content.repository.new.migrate .migrate-entries { + display: block; + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); +} + +.page-content.repository.new.migrate .migrate-entry { + flex-direction: row; + align-items: center; + gap: 16px; + padding: 16px; + border: 0; + border-radius: 0; + background: transparent; + transition: none; + & + .migrate-entry { + border-top: 1px solid var(--color-light-border); + } + &:hover { + transform: none; + box-shadow: none; + background: var(--color-hover); + } + & svg { + flex: none; + width: 32px; + height: 32px; + padding: 0; + } + & .content { + margin: 0; + padding: 0; + border: 0; + background: transparent; + text-align: start; + } + & h3 { + margin: 0; + font-size: 16px; + font-weight: 600; + line-height: 24px; + } + & .description { + margin-top: 2px; + color: var(--color-text-light-1); + font-size: 12px; + line-height: 18px; + text-wrap: wrap; + } +} + +/* New and edit milestone: GitHub's subhead, the title over its note and a divider. */ +.page-content.new.milestone .ui.dividing.header { + margin: 0 0 16px; + padding-bottom: 8px; + border-bottom: 1px solid var(--color-light-border); + font-size: 24px; + font-weight: 600; + line-height: 36px; + & > .sub.header { + margin: 0; + color: var(--color-text-light-1); + font-size: 14px; + font-weight: 400; + line-height: 21px; + } +} diff --git a/styles/public/attached.ts b/styles/public/attached.ts index 0c0a9ec2..70abda90 100644 --- a/styles/public/attached.ts +++ b/styles/public/attached.ts @@ -25,13 +25,7 @@ const attached = css` .repo-setting-content, .user-setting-content, .org-setting-content, - .admin-setting-content, - /* 仓库动态页面 */ - /* 新建页面内容 */ - .page-content.repository.new-repo, - .page-content.repository.new.migrate, - .page-content.repository.new.fork, - .page-content.organization.new.org { + .admin-setting-content { .ui.top.attached.header { border: 0; font-size: 20px; diff --git a/styles/public/dropdown/selection_dropdown.ts b/styles/public/dropdown/selection_dropdown.ts index 93f5f4f1..747d83ce 100644 --- a/styles/public/dropdown/selection_dropdown.ts +++ b/styles/public/dropdown/selection_dropdown.ts @@ -116,7 +116,7 @@ const selectionDropdown = css` /* 标签页面的标签选择框 */ .page-content.repository.labels .ui.selection.dropdown.active, /* 创建仓库页面的标签选择框 */ - .page-content.repository.new-repo .ui.search.selection.dropdown { + .page-content.repository.new.repo .ui.search.selection.dropdown { > .menu > .item { flex-direction: column; align-items: flex-start; diff --git a/templates/base/component_assets.tmpl b/templates/base/component_assets.tmpl index 7f8d7210..feccfb07 100644 --- a/templates/base/component_assets.tmpl +++ b/templates/base/component_assets.tmpl @@ -3,6 +3,7 @@ + @@ -27,6 +28,7 @@ +