mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-06-22 10:02:15 +00:00
373c876db6
Reviewing https://codeberg.org/forgejo/forgejo/pulls/12928 inspired me to bridge the gap between our highly advanced markup checkboxes and our other inconsistent UI checkboxes. This PR does exactly that: it re-uses most of already developed code from markup in our regular UI checkboxes. This not only makes them look much better but also brings us closer to getting rid of Fomantic checkboxes. In fact, removing `ui checkbox` from such checkboxes keeps them looking well, and only breaks Fomantic scripts related to them. Some notable changes: - Better vertical alignment - More consistent gap distance between the box and the text - Removed obsolete vendor prefixes in properties - In UI, everything is actually styled by Forgejo now instead of being a mismatch with browser's default styling. Dark theme + Firefox looks a lot better now - In UI, checkmarks are now consistent across browsers ## Preview |Before|After| |-|-| |Markup|Slightly increased gap| ||| |UI|Fixed vert. alignment| ||| ||| |UI dark|Properly styled now| ||| ## Testing No bugs found to fix and automated testing for yet. I went manually through many areas and found none. There's one bad margin in Migrate repo - LFS advanced settings, but it's consistent with mainline. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13016 Reviewed-by: Gusted <gusted@noreply.codeberg.org>
179 lines
4 KiB
CSS
179 lines
4 KiB
CSS
:is(form, .markup) input[type="checkbox"] {
|
|
appearance: none;
|
|
position: relative;
|
|
border: 1px solid var(--color-secondary-dark-4);
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-input-background);
|
|
height: var(--checkbox-size);
|
|
width: var(--checkbox-size);
|
|
opacity: 1 !important; /* override fomantic on edit preview */
|
|
pointer-events: auto !important; /* override fomantic on edit preview */
|
|
print-color-adjust: exact;
|
|
margin-block-start: 0 !important; /* override form.css rule applying to all inputs */
|
|
margin-inline-end: 0.5rem;
|
|
|
|
&:not([disabled]):hover,
|
|
&:not([disabled]):active {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
mask-size: cover;
|
|
}
|
|
|
|
&:checked::after {
|
|
content: "";
|
|
mask-image: var(--checkbox-mask-checked);
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
&:indeterminate::after {
|
|
content: "";
|
|
mask-image: var(--checkbox-mask-indeterminate);
|
|
}
|
|
}
|
|
|
|
form input[type="checkbox"] {
|
|
vertical-align: center !important; /* override fomantic */
|
|
|
|
&:checked {
|
|
background: var(--color-accent);
|
|
border: none;
|
|
|
|
&::after {
|
|
background: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.markup input[type="checkbox"] {
|
|
vertical-align: middle !important; /* override fomantic on edit preview */
|
|
|
|
&:checked::after {
|
|
background: var(--color-text);
|
|
}
|
|
}
|
|
|
|
/* Legacy part based on Fomantic UI checkbox module, with just the parts extracted that we use.
|
|
If you find any unused rules here after refactoring, please remove them. */
|
|
|
|
input[type="radio"] {
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
}
|
|
|
|
.ui.checkbox {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
min-height: var(--checkbox-size);
|
|
line-height: var(--checkbox-size);
|
|
min-width: var(--checkbox-size);
|
|
padding: 1px;
|
|
}
|
|
|
|
.ui.checkbox input[type="checkbox"],
|
|
.ui.checkbox input[type="radio"] {
|
|
position: absolute;
|
|
top: 1px;
|
|
inset-inline-start: 0;
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
}
|
|
|
|
.ui.checkbox input[type="checkbox"]:enabled,
|
|
.ui.checkbox input[type="radio"]:enabled,
|
|
.ui.checkbox label:enabled {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui.checkbox label {
|
|
cursor: auto;
|
|
position: relative;
|
|
display: block;
|
|
user-select: none;
|
|
}
|
|
|
|
.ui.checkbox label,
|
|
.ui.radio.checkbox label {
|
|
margin-inline-start: 1.85714em;
|
|
}
|
|
|
|
.ui.checkbox + label {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui.disabled.checkbox label,
|
|
.ui.checkbox input[disabled] ~ label {
|
|
cursor: default !important;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui.radio.checkbox {
|
|
min-height: var(--checkbox-size);
|
|
}
|
|
|
|
/* "switch" styled checkbox */
|
|
|
|
.ui.toggle.checkbox {
|
|
min-height: 1.5rem;
|
|
}
|
|
.ui.toggle.checkbox input {
|
|
width: 3.5rem;
|
|
height: 21px;
|
|
opacity: 0;
|
|
z-index: 3;
|
|
}
|
|
.ui.toggle.checkbox label {
|
|
min-height: 1.5rem;
|
|
padding-inline-start: 4.5rem;
|
|
padding-top: 0.15em;
|
|
}
|
|
.ui.toggle.checkbox label::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: "";
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 49px;
|
|
height: 21px;
|
|
border-radius: 500rem;
|
|
inset-inline-start: 0;
|
|
}
|
|
.ui.toggle.checkbox label::after {
|
|
background: var(--color-white);
|
|
box-shadow: 1px 1px 4px 1px var(--color-shadow);
|
|
position: absolute;
|
|
content: "";
|
|
opacity: 1;
|
|
z-index: 2;
|
|
width: 18px;
|
|
height: 18px;
|
|
top: 1.5px;
|
|
inset-inline-start: 1.5px;
|
|
border-radius: 500rem;
|
|
transition: background 0.3s ease, left 0.3s ease;
|
|
}
|
|
.ui.toggle.checkbox input ~ label::after {
|
|
inset-inline-start: 1.5px;
|
|
}
|
|
.ui.toggle.checkbox input:checked ~ label::after {
|
|
inset-inline-start: 29px;
|
|
}
|
|
.ui.toggle.checkbox input:focus ~ label::before,
|
|
.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;
|
|
}
|