diff options
Diffstat (limited to 'web_src/css/form.css')
| -rw-r--r-- | web_src/css/form.css | 547 |
1 files changed, 547 insertions, 0 deletions
diff --git a/web_src/css/form.css b/web_src/css/form.css new file mode 100644 index 0000000000..e325a377f8 --- /dev/null +++ b/web_src/css/form.css @@ -0,0 +1,547 @@ +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.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 { + 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.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, + .repository.new.fork 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; + } +} |