forgejo/web_src/css/form.css
Giteabot 18093d4c9a
Fix mobile navbar and misc cleanups (#25134) (#25169)
Backport #25134 by @silverwind

- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">
2023-06-11 09:50:39 +08:00

547 lines
16 KiB
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: 767.98px) {
#create-page-form form .optional .title {
margin-left: 15px;
}
#create-page-form form .inline.field > label {
display: 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: 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,
.oauth-login-link {
width: 50%;
}
}
@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,
.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,
.oauth-login-link {
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,
.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: 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 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: 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 {
width: 100% !important;
}
}