f71a240239
Currently the collapsed sections on the installation page have bad visibility, clickability and don't look good. This commit attempts to improve this. It is also worth noting that the amount of these sections might increase.
### Changes
* make custom style for these collapsible sections of the form. This is not a standard design to Forgejo, but we also don't have forms this large anywhere else, and it's fit in a few small CSS rules, so I think that's justified. I'm curious how it looks to others visually, good or bad.
* improve the positioning of the installation location hint.
* remove very rare occasion of dashed horizontal divider as this rule is no longer needed with the new borders. It was [added](c16ae1ab39 (diff-f8dad1e2c95a9e959d4688c763f3e02d1878c8e0)) just a month ago and had a visual bug with duplicated dividers.
### Preview
|Before|After|
|-|-|
|||
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4062
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
.page-content.install .install-config-container {
|
|
max-width: 900px;
|
|
margin: auto;
|
|
}
|
|
|
|
.page-content.install form.ui.form .inline.field > label {
|
|
text-align: right;
|
|
width: 30%;
|
|
padding-right: 10px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.page-content.install .ui.form .field > .help,
|
|
.page-content.install .ui.form .field > .ui.checkbox:first-child,
|
|
.page-content.install .ui.form .field > .right-content {
|
|
margin-left: calc(30% + 5px);
|
|
width: auto;
|
|
}
|
|
|
|
.page-content.install form.ui.form input:not([type="checkbox"],[type="radio"]),
|
|
.page-content.install form.ui.form .ui.selection.dropdown {
|
|
width: 60%;
|
|
}
|
|
|
|
.page-content.install form.ui.form details.optional.field[open] {
|
|
padding-bottom: 10px;
|
|
}
|
|
.page-content.install form.ui.form details.optional.field[open] summary {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-content.install form.ui.form details.optional.field * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page-content.install form.ui.form .field {
|
|
text-align: left;
|
|
}
|
|
|
|
.page-content.install .ui .reinstall-message {
|
|
width: 70%;
|
|
margin: 20px auto;
|
|
color: var(--color-red);
|
|
text-align: left;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.page-content.install .ui .reinstall-confirm {
|
|
width: 70%;
|
|
text-align: left;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.page-content.install details.collapsible {
|
|
border: 1px solid var(--color-light-border);
|
|
border-radius: 0.28571429rem;
|
|
}
|
|
.page-content.install .collapsible summary {
|
|
background: transparent;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|