aniani/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-12-04 14:46:57 -05:00
Code
02bf0a8cd7
gitea/web_src/css/form.css
Giteabot 591759fdfa
Remove fomantic checkbox module (#30162) (#30168) 
Backport #30162 by @silverwind

CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on
admin page also still work. The only necessary JS is the one that links
`input` and `label` so that it can be toggled via label. All checkboxes
except the markdown ones render at `--checkbox-size: 16px` now.

<img width="174" alt="Screenshot 2024-03-28 at 22 15 10"
src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db">

<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce">

<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474">

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
2024-03-29 17:44:22 +00:00

495 lines
13 KiB
CSS
Raw Blame History

.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 3.2em .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-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 {
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;
}
.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 {
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;
}
}
View Git Blame Copy Permalink