forgejo/web_src/css/form.css

.ui.input textarea,
.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
  transition: none;
}

input,
textarea,
.ui.input > input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.selection.dropdown,
.ui.checkbox label::before,
.ui.checkbox input:checked ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
  background: var(--color-input-background);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
}

input:hover,
textarea:hover,
.ui.input input:hover,
.ui.form input:not([type]):hover,
.ui.form select:hover,
.ui.form textarea:hover,
.ui.form input[type="date"]:hover,
.ui.form input[type="datetime-local"]:hover,
.ui.form input[type="email"]:hover,
.ui.form input[type="file"]:hover,
.ui.form input[type="number"]:hover,
.ui.form input[type="password"]:hover,
.ui.form input[type="search"]:hover,
.ui.form input[type="tel"]:hover,
.ui.form input[type="text"]:hover,
.ui.form input[type="time"]:hover,
.ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover,
.ui.checkbox label:hover::before,
.ui.checkbox label:active::before,
.ui.radio.checkbox label::after,
.ui.radio.checkbox input:focus ~ label::before,
.ui.radio.checkbox input:checked ~ label::before {
  background: var(--color-input-background);
  border-color: var(--color-input-border-hover);
  color: var(--color-input-text);
}

input:focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:not([type]):focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus,
.ui.checkbox input:focus ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
.ui.checkbox input:checked:focus ~ label::before,
.ui.radio.checkbox input:focus:checked ~ label::before {
  background: var(--color-input-background);
  border-color: var(--color-primary);
  color: var(--color-input-text);
}

.ui.form .field > label,
.ui.form .inline.fields > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.checkbox label,
.ui.checkbox + label,
.ui.checkbox label:hover,
.ui.checkbox + label:hover,
.ui.checkbox input:focus ~ label,
.ui.checkbox input:active ~ label {
  color: var(--color-text);
}

.ui.form .required.fields:not(.grouped) > .field > label::after,
.ui.form .required.fields.grouped > label::after,
.ui.form .required.field > label::after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
.ui.form .required.field > .checkbox::after,
.ui.form label.required::after {
  color: var(--color-red);
}

.ui.input,
.ui.checkbox input:focus ~ label::after,
.ui.checkbox input:checked ~ label::after,
.ui.checkbox label:active::after,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
.ui.checkbox input:checked:focus ~ label::after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
  color: var(--color-input-text);
}

.ui.radio.checkbox input:focus ~ label::after,
.ui.radio.checkbox input:checked ~ label::after,
.ui.radio.checkbox input:focus:checked ~ label::after {
  background: var(--color-input-text);
}

.ui.toggle.checkbox label::before {
  background: var(--color-input-toggle-background);
}

.ui.toggle.checkbox label,
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: var(--color-text) !important;
}

.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
  background: var(--color-primary) !important;
}

/* match <select> padding to <input> */
.ui.form select {
  padding: 0.67857143em 1em;
}

.form .help {
  color: var(--color-secondary-dark-5);
  padding-bottom: 0.6em;
  display: inline-block;
}

#create-page-form form {
  margin: auto;
}

#create-page-form form .ui.message {
  text-align: center;
}

@media (min-width: 768px) {
  #create-page-form form {
    width: 800px !important;
  }
  #create-page-form form .header {
    padding-left: 280px !important;
  }
  #create-page-form form .inline.field > label,
  #create-page-form form .inline.field.captcha-field > span {
    text-align: right;
    width: 250px !important;
    word-wrap: break-word;
  }
  #create-page-form form .help {
    margin-left: 265px !important;
  }
  #create-page-form form .optional .title {
    margin-left: 250px !important;
  }
  #create-page-form form .inline.field > input,
  #create-page-form form .inline.field > textarea {
    width: 50%;
  }
}

@media (max-width: 767px) {
  #create-page-form form .optional .title {
    margin-left: 15px;
  }
  #create-page-form form .inline.field > label {
    display: block;
  }
}

.signin .oauth2 div {
  display: inline-block;
}

.signin .oauth2 div p {
  margin: 10px 5px 0 0;
  float: left;
}

.signin .oauth2 a {
  margin-right: 3px;
}

.signin .oauth2 a:last-child {
  margin-right: 0;
}

.signin .oauth2 img {
  width: 32px;
  height: 32px;
}

.signin .oauth2 img.openidConnect {
  width: auto;
}

@media (min-width: 768px) {
  .g-recaptcha-style,
  .h-captcha-style {
    margin: 0 auto !important;
    width: 304px;
    padding-left: 30px;
  }
  .g-recaptcha-style iframe,
  .h-captcha-style iframe {
    border-radius: 5px !important;
    width: 302px !important;
    height: 76px !important;
  }
}

@media (max-height: 575px) {
  #rc-imageselect,
  .g-recaptcha-style,
  .h-captcha-style {
    transform: scale(0.77);
    transform-origin: 0 0;
  }
}

.user.activate form,
.user.forgot.password form,
.user.reset.password form,
.user.link-account form,
.user.signin form,
.user.signup form {
  margin: auto;
  width: 700px !important;
}

.user.activate form .ui.message,
.user.forgot.password form .ui.message,
.user.reset.password form .ui.message,
.user.link-account form .ui.message,
.user.signin form .ui.message,
.user.signup form .ui.message {
  text-align: center;
}

@media (min-width: 768px) {
  .user.activate form,
  .user.forgot.password form,
  .user.reset.password form,
  .user.link-account form,
  .user.signin form,
  .user.signup form {
    width: 800px !important;
  }
  .user.activate form .header,
  .user.forgot.password form .header,
  .user.reset.password form .header,
  .user.link-account form .header,
  .user.signin form .header,
  .user.signup form .header {
    padding-left: 280px !important;
  }
  .user.activate form .inline.field > label,
  .user.forgot.password form .inline.field > label,
  .user.reset.password form .inline.field > label,
  .user.link-account form .inline.field > label,
  .user.signin form .inline.field > label,
  .user.signup form .inline.field > label,
  .user.activate form .inline.field.captcha-field > span,
  .user.forgot.password form .inline.field.captcha-field > span,
  .user.reset.password form .inline.field.captcha-field > span,
  .user.link-account form .inline.field.captcha-field > span,
  .user.signin form .inline.field.captcha-field > span,
  .user.signup form .inline.field.captcha-field > span {
    text-align: right;
    width: 250px !important;
    word-wrap: break-word;
  }
  .user.activate form .help,
  .user.forgot.password form .help,
  .user.reset.password form .help,
  .user.link-account form .help,
  .user.signin form .help,
  .user.signup form .help {
    margin-left: 265px !important;
  }
  .user.activate form .optional .title,
  .user.forgot.password form .optional .title,
  .user.reset.password form .optional .title,
  .user.link-account form .optional .title,
  .user.signin form .optional .title,
  .user.signup form .optional .title {
    margin-left: 250px !important;
  }
  .user.activate form .inline.field > input,
  .user.forgot.password form .inline.field > input,
  .user.reset.password form .inline.field > input,
  .user.link-account form .inline.field > input,
  .user.signin form .inline.field > input,
  .user.signup form .inline.field > input,
  .user.activate form .inline.field > textarea,
  .user.forgot.password form .inline.field > textarea,
  .user.reset.password form .inline.field > textarea,
  .user.link-account form .inline.field > textarea,
  .user.signin form .inline.field > textarea,
  .user.signup form .inline.field > textarea {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .user.activate form .optional .title,
  .user.forgot.password form .optional .title,
  .user.reset.password form .optional .title,
  .user.link-account form .optional .title,
  .user.signin form .optional .title,
  .user.signup form .optional .title {
    margin-left: 15px;
  }
  .user.activate form .inline.field > label,
  .user.forgot.password form .inline.field > label,
  .user.reset.password form .inline.field > label,
  .user.link-account form .inline.field > label,
  .user.signin form .inline.field > label,
  .user.signup form .inline.field > label {
    display: block;
  }
}

.user.activate form .header,
.user.forgot.password form .header,
.user.reset.password form .header,
.user.link-account form .header,
.user.signin form .header,
.user.signup form .header {
  padding-left: 0 !important;
  text-align: center;
}

.user.activate form .inline.field > label,
.user.forgot.password form .inline.field > label,
.user.reset.password form .inline.field > label,
.user.link-account form .inline.field > label,
.user.signin form .inline.field > label,
.user.signup form .inline.field > label {
  width: 200px;
}

@media (max-width: 767px) {
  .user.activate form .inline.field > label,
  .user.forgot.password form .inline.field > label,
  .user.reset.password form .inline.field > label,
  .user.link-account form .inline.field > label,
  .user.signin form .inline.field > label,
  .user.signup form .inline.field > label,
  .user.activate form input,
  .user.forgot.password form input,
  .user.reset.password form input,
  .user.link-account form input,
  .user.signin form input,
  .user.signup form input {
    width: 100% !important;
  }
}

.user.activate form input[type="number"],
.user.forgot.password form input[type="number"],
.user.reset.password form input[type="number"],
.user.link-account form input[type="number"],
.user.signin form input[type="number"],
.user.signup form input[type="number"] {
  -moz-appearance: textfield;
}

.user.activate form input::-webkit-outer-spin-button,
.user.forgot.password form input::-webkit-outer-spin-button,
.user.reset.password form input::-webkit-outer-spin-button,
.user.link-account form input::-webkit-outer-spin-button,
.user.signin form input::-webkit-outer-spin-button,
.user.signup form input::-webkit-outer-spin-button,
.user.activate form input::-webkit-inner-spin-button,
.user.forgot.password form input::-webkit-inner-spin-button,
.user.reset.password form input::-webkit-inner-spin-button,
.user.link-account form input::-webkit-inner-spin-button,
.user.signin form input::-webkit-inner-spin-button,
.user.signup form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.user.signin.webauthn-prompt {
  margin-top: 15px;
}

.repository.new.repo form,
.repository.new.migrate form,
.repository.new.fork form {
  margin: auto;
}

.repository.new.repo form .ui.message,
.repository.new.migrate form .ui.message,
.repository.new.fork form .ui.message {
  text-align: center;
}

@media (min-width: 768px) {
  .repository.new.repo form,
  .repository.new.migrate form,
  .repository.new.fork form {
    width: 800px !important;
  }
  .repository.new.repo form .header,
  .repository.new.migrate form .header,
  .repository.new.fork form .header {
    padding-left: 280px !important;
  }
  .repository.new.repo form .inline.field > label,
  .repository.new.migrate form .inline.field > label,
  .repository.new.fork form .inline.field > label,
  .repository.new.repo form .inline.field.captcha-field > span,
  .repository.new.migrate form .inline.field.captcha-field > span,
  .repository.new.fork form .inline.field.captcha-field > span {
    text-align: right;
    width: 250px !important;
    word-wrap: break-word;
  }
  .repository.new.repo form .help,
  .repository.new.migrate form .help,
  .repository.new.fork form .help {
    margin-left: 265px !important;
  }
  .repository.new.repo form .optional .title,
  .repository.new.migrate form .optional .title,
  .repository.new.fork form .optional .title {
    margin-left: 250px !important;
  }
  .repository.new.repo form .inline.field > input,
  .repository.new.migrate form .inline.field > input,
  .repository.new.fork form .inline.field > input,
  .repository.new.repo form .inline.field > textarea,
  .repository.new.migrate form .inline.field > textarea,
  .repository.new.fork form .inline.field > textarea {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .repository.new.repo form .optional .title,
  .repository.new.migrate form .optional .title,
  .repository.new.fork form .optional .title {
    margin-left: 15px;
  }
  .repository.new.repo form .inline.field > label,
  .repository.new.migrate form .inline.field > label,
  .repository.new.fork form .inline.field > label {
    display: block;
  }
}

.repository.new.repo form .dropdown .text,
.repository.new.migrate form .dropdown .text,
.repository.new.fork form .dropdown .text {
  margin-right: 0 !important;
}

.repository.new.repo form .header,
.repository.new.migrate form .header,
.repository.new.fork form .header {
  padding-left: 0 !important;
  text-align: center;
}

.repository.new.repo form .selection.dropdown,
.repository.new.migrate form .selection.dropdown,
.repository.new.fork form .selection.dropdown,
.repository.new.fork form .field a {
  vertical-align: middle;
  width: 50% !important;
}

@media (max-width: 767px) {
  .repository.new.repo form label,
  .repository.new.migrate form label,
  .repository.new.fork form label,
  .repository.new.repo form input,
  .repository.new.migrate form input,
  .repository.new.fork form input,
  .repository.new.fork form .field a,
  .repository.new.repo form .selection.dropdown,
  .repository.new.migrate form .selection.dropdown,
  .repository.new.fork form .selection.dropdown {
    width: 100% !important;
  }
  .repository.new.repo form .field button,
  .repository.new.migrate form .field button,
  .repository.new.fork form .field button,
  .repository.new.repo form .field a,
  .repository.new.migrate form .field a {
    margin-bottom: 1em;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .repository.new.repo .ui.form #auto-init {
    margin-left: 265px !important;
  }
}

.repository.new.repo .ui.form .selection.dropdown:not(.owner) {
  width: 50% !important;
}

@media (max-width: 767px) {
  .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
    width: 100% !important;
  }
}

.new.webhook form .help {
  margin-left: 25px;
}

.new.webhook .events.fields .column {
  padding-left: 40px;
}

.githook textarea {
  font-family: var(--fonts-monospace);
}

@media (max-width: 767px) {
  .new.org .ui.form .field button,
  .new.org .ui.form .field a {
    margin-bottom: 1em;
    width: 100%;
  }
  .new.org .ui.form .field input {
    width: 100% !important;
  }
}