Reduce table padding globally (#25568) (#25577)

Backport #25568 by @silverwind

Fomantic's tables have too much padding. Reduce it so we have more
information density in them. Especially the admin tables need this
because they are bursting already because of column count.

## Admin repolist before and after

<img width="909" alt="Screenshot 2023-06-28 at 20 27 55"
src="https://github.com/go-gitea/gitea/assets/115237/954c925c-8db5-47ce-ae51-a2168b857014">
<img width="897" alt="Screenshot 2023-06-28 at 20 36 03"
src="https://github.com/go-gitea/gitea/assets/115237/0bddc09a-9117-48b3-a17e-3d34c58d8d3d">

## Other tables

<img width="1230" alt="Screenshot 2023-06-28 at 20 36 22"
src="https://github.com/go-gitea/gitea/assets/115237/38f555b6-a7ce-416a-9f1f-706eaf18863b">
<img width="1236" alt="Screenshot 2023-06-28 at 20 26 37"
src="https://github.com/go-gitea/gitea/assets/115237/82b2878e-358c-4dc2-a6b4-c66e43cd2dfb">
<img width="1231" alt="Screenshot 2023-06-28 at 20 59 30"
src="https://github.com/go-gitea/gitea/assets/115237/c6a92e55-a3a3-4c80-9a0d-50aebb49886c">

Files table is unaffected because it has custom padding already.

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2023-06-29 05:24:02 -04:00 committed by GitHub
parent 51b6a78791
commit 2390a46d0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -881,6 +881,24 @@ a.label,
color: var(--color-text); color: var(--color-text);
} }
/* reduce table padding, needed especially for dense admin tables */
.ui.table > thead > tr > th,
.ui.table > tbody > tr > td,
.ui.table > tr > td {
padding: 6px 3px;
}
/* use more horizontal padding on first and last items for visuals */
.ui.table > thead > tr > th:first-of-type,
.ui.table > tbody > tr > td:first-of-type,
.ui.table > tr > td:first-of-type {
padding-left: 10px;
}
.ui.table > thead > tr > th:last-of-type,
.ui.table > tbody > tr > td:last-of-type,
.ui.table > tr > td:last-of-type {
padding-right: 10px;
}
img.ui.avatar, img.ui.avatar,
.ui.avatar img, .ui.avatar img,
.ui.avatar svg { .ui.avatar svg {