luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-01 20:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Clean up formatting on install page (#21668)

Browse source 
The install page has been somewhat inconsistently styled for a while.
This PR simplifies and standardises the styling of these fields makes
things line up better across widths.

Replace #21660

Signed-off-by: Andrew Thornton <art27@cantab.net>

Old:
![Screenshot from 2022-11-02
23-07-05](https://user-images.githubusercontent.com/1824502/199619007-4a6b66c5-e19c-4d29-b71b-9aa73f2789ca.png)


New:
![Screenshot from 2022-11-02
23-04-28](https://user-images.githubusercontent.com/1824502/199618779-370f88e7-b590-4abd-afb9-b66cc3194a5d.png)

Signed-off-by: Andrew Thornton <art27@cantab.net>
This commit is contained in:
zeripath 2022-11-03 20:41:01 +00:00 • committed by GitHub
parent b6e81357bd
commit 3e8618949e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

53
web_src/less/_install.less
View file

@ -1,36 +1,57 @@
.page-content.install {
padding-top: 45px;
form {
@input-padding: 320px !important;
form.ui.form {
@input-padding: 30%;
.inline.field label {
.inline.field > label {
text-align: right;
width: @input-padding;
padding-right: 10px;
margin-right: 0;
}
.inline.field > .ui.checkbox:first-child {
margin-left: @input-padding;
padding-left: 5px;
label {
width: auto;
}
}
.title {
margin-left: @input-padding;
padding-left: 5px;
}
input {
width: 35% !important;
width: 60%;
}
details.optional.field {
&[open] {
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 10px;
summary {
margin-bottom: 10px;
}
}
* {
box-sizing: border-box;
}
}
.field {
text-align: left;
.help {
margin-left: @input-padding+15px;
margin-left: @input-padding;
padding-left: 5px;
width: 60%;
}
&.optional {
.title {
margin-left: 38%;
}
.checkbox {
margin-left: 40% !important;
label {
width: auto !important;
}
}
}
}
}