forgejo/web_src/css/repo/header.css
silverwind 1ee494a045
[Port] gitea#29982 Introduce .secondary-nav and handle .page-content spacing universally
Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.

If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:

- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

---

Conflict resolution: Trivial conflict & changed selector to reflect new
classes.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)
2024-03-28 16:43:09 +01:00

70 lines
1.3 KiB
CSS

.repository .secondary-nav {
padding-top: 12px;
}
.repository .secondary-nav .fork-flag {
margin-top: 0.5rem;
font-size: 12px;
}
.repo-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 4px;
}
.repo-header .flex-item {
padding: 0;
}
.repo-header .flex-item-main {
flex: 0;
flex-basis: unset;
}
.repo-header .flex-item-trailing {
flex-wrap: nowrap;
}
.repo-buttons {
align-items: center;
display: flex;
flex-flow: row wrap;
word-break: keep-all;
gap: 0.25em;
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-primary-light-2);
background: var(--color-light);
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}