1 files changed, 472 insertions, 0 deletions
diff --git a/web_src/css/form.css b/web_src/css/form.css
new file mode 100644
index 00000000..d8239c5d
--- /dev/null
+++ b/web_src/css/form.css
@@ -0,0 +1,472 @@
+.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 {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border);
+  color: var(--color-input-text);
+}
+
+/* fix fomantic small dropdown having inconsistent padding with input */
+.ui.small.selection.dropdown {
+  padding: .67857143em 1.6em .67857143em 1em;
+}
+
+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 {
+  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 {
+  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 {
+  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 label.required::after {
+  color: var(--color-red);
+}
+
+.ui.input {
+  color: var(--color-input-text);
+}
+
+/* match <select> padding to <input> */
+.ui.form select {
+  padding: 0.67857143em 1em;
+}
+
+.form .help {
+  color: var(--color-secondary-dark-8);
+  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 {
+    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: 767.98px) {
+  #create-page-form form .optional .title {
+    margin-left: 15px;
+  }
+  #create-page-form form .inline.field > label {
+    display: block;
+  }
+}
+
+.m-captcha-style {
+  width: 100%;
+  height: 5em;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+@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: var(--border-radius) !important;
+    width: 302px !important;
+    height: 76px !important;
+  }
+  .m-captcha-style {
+    width: 50%;
+  }
+}
+
+@media (max-height: 575px) {
+  #rc-imageselect,
+  .g-recaptcha-style,
+  .h-captcha-style {
+    transform: scale(0.77);
+    transform-origin: 0 0;
+  }
+}
+
+.user.forgot.password form,
+.user.reset.password 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 {
+    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;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .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: 767.98px) {
+  .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: 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;
+}
+
+.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 {
+    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: 767.98px) {
+  .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: 767.98px) {
+  .repository.new.repo form label,
+  .repository.new.migrate form label,
+  .repository.new.fork form label,
+  .repository.new.repo form .inline.field > input,
+  .repository.new.migrate form .inline.field > input,
+  .repository.new.fork form .inline.field > 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: 767.98px) {
+  .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: 767.98px) {
+  .new.org .ui.form .field button,
+  .new.org .ui.form .field a {
+    margin-bottom: 1em;
+    width: 100%;
+  }
+  .new.org .ui.form .field input:not([type="checkbox"], [type="radio"]) {
+    width: 100% !important;
+  }
+}