summaryrefslogtreecommitdiffstats
path: root/web_src/css/form.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
committerDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
commitdd136858f1ea40ad3c94191d647487fa4f31926c (patch)
tree58fec94a7b2a12510c9664b21793f1ed560c6518 /web_src/css/form.css
parentInitial commit. (diff)
downloadforgejo-debian.tar.xz
forgejo-debian.zip
Adding upstream version 9.0.0.upstream/9.0.0upstreamdebian
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/css/form.css')
-rw-r--r--web_src/css/form.css534
1 files changed, 534 insertions, 0 deletions
diff --git a/web_src/css/form.css b/web_src/css/form.css
new file mode 100644
index 0000000..a886700
--- /dev/null
+++ b/web_src/css/form.css
@@ -0,0 +1,534 @@
+fieldset {
+ margin: 0.5em 0 1em;
+ padding: 0;
+}
+
+fieldset legend {
+ font-weight: var(--font-weight-medium);
+ margin-bottom: 0.75em;
+}
+
+fieldset label {
+ display: block;
+ margin-bottom: 0.6em;
+}
+
+fieldset label:has(input[type="text"]),
+fieldset label:has(input[type="number"]) {
+ font-weight: var(--font-weight-medium);
+}
+
+fieldset .help {
+ font-weight: var(--font-weight-normal);
+}
+
+.form fieldset .help { /* overrides other .form .help rules in this file, remove when obsolete */
+ display: block !important;
+ padding-bottom: 0;
+}
+
+fieldset input[type="checkbox"],
+fieldset input[type="radio"] {
+ margin-right: 0.75em;
+ vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
+}
+
+@media (min-width: 768px) {
+ .optionmatrix input[type="radio"] {
+ margin: 0;
+ }
+
+ /* center columns except first */
+ .optionmatrix td + td, .optionmatrix th + th {
+ min-width: 10em;
+ text-align: center !important; /* overrides table.css "inherit" rule */
+ }
+}
+
+/* if an element with class "hide-unless-checked" follows a label
+ * that has no checked input, it will be hidden.*/
+label:not(:has(input:checked)) + .hide-unless-checked {
+ display: none;
+}
+
+.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 > .field > 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;
+ }
+}
+
+/* form fields with additional content besides their label, used on login form
+ * use like <div class="field"><label/><a/><input/></div> */
+.form-field-content-aside-label {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
+.form-field-content-aside-label > *:nth-child(2) {
+ text-align: right;
+ margin-bottom: 4px;
+}
+.form-field-content-aside-label input {
+ grid-column: span 2;
+}
+
+.ui.form .field > .selection.dropdown {
+ min-width: 14em; /* matches the default min width */
+}
+
+.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;
+ }
+}