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 @@
+