forgejo/web_src/css/modules/flexcontainer.css
Giteabot 7dfe3fe2cb
Add --page-spacing variable, fix admin dashboard notice (#30302) (#30323)
Backport #30302 by @silverwind

Fixes https://github.com/go-gitea/gitea/issues/30293 and introduce the
`--page-spacing` variable which holds the spacing between the elements
on the page. This is working vertically for all pages, including ones
that have fomantic grid, and horizontally for all that use
`flex-container`.

The `.page-content > :first-child:not(.secondary-nav)` selector uses
margin which in some cases enables to adjacent margins to overlap, which
is nice.

<img width="1320" alt="Screenshot 2024-04-06 at 01 35 19"
src="https://github.com/go-gitea/gitea/assets/115237/3e81e707-e9ff-4b7f-a211-3d98f4f85353">
---
<img width="1327" alt="Screenshot 2024-04-06 at 01 35 45"
src="https://github.com/go-gitea/gitea/assets/115237/aad196c0-9e21-4c06-ae59-7e33a76c61e1">
---
<img width="1321" alt="Screenshot 2024-04-06 at 01 35 31"
src="https://github.com/go-gitea/gitea/assets/115237/785f6c5d-08b6-4e66-aa16-aeca7cfed3ad">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit db370c47a69b2fb17d8b16c8025451efde5c33b6)
2024-04-15 16:16:37 +02:00

26 lines
500 B
CSS

/* container for full-page content with sidebar on left */
.flex-container {
display: flex !important;
gap: var(--page-spacing);
margin-top: var(--page-spacing);
}
.flex-container-nav {
width: 240px;
}
.flex-container-main {
flex: 1;
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
}
@media (max-width: 767.98px) {
.flex-container {
flex-direction: column;
}
.flex-container-nav {
width: auto;
}
}