mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 14:30:25 +00:00
6b75654cc2
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581 This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
172 lines
3.7 KiB
CSS
172 lines
3.7 KiB
CSS
#navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--color-nav-bg);
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
margin: 0 !important;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#navbar .navbar-left,
|
|
#navbar .navbar-right {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
}
|
|
|
|
#navbar-logo {
|
|
margin: 0;
|
|
}
|
|
|
|
#navbar .item {
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
display: flex;
|
|
}
|
|
|
|
#navbar .dropdown .item {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
#navbar a.item:hover, #navbar a.item:focus,
|
|
#navbar details.dropdown > summary:is(:hover, :focus),
|
|
#navbar details.dropdown[open] > summary,
|
|
#navbar button.item:hover, #navbar button.item:focus {
|
|
background: var(--color-nav-hover-bg);
|
|
}
|
|
|
|
#navbar .secondary.menu > .item > .svg,
|
|
#navbar .right.menu > .item > .svg {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
/* icon with notification counter - positioned relative container */
|
|
#navbar .notification-icon-relative {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
#navbar {
|
|
align-items: stretch;
|
|
}
|
|
/* hide all items */
|
|
#navbar .item {
|
|
display: none;
|
|
}
|
|
#navbar #navbar-logo {
|
|
display: flex;
|
|
}
|
|
/* show the first navbar item (logo and its mobile right items) */
|
|
#navbar .navbar-left {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#navbar .navbar-mobile-right {
|
|
display: flex;
|
|
margin-inline-start: auto !important;
|
|
width: auto !important;
|
|
}
|
|
#navbar .navbar-mobile-right > .item {
|
|
display: flex;
|
|
width: auto !important;
|
|
}
|
|
/* show items if the navbar is open */
|
|
#navbar.navbar-menu-open {
|
|
padding-bottom: 8px;
|
|
gap: .35714286em;
|
|
}
|
|
#navbar.navbar-menu-open,
|
|
#navbar.navbar-menu-open .navbar-right {
|
|
flex-direction: column;
|
|
}
|
|
#navbar.navbar-menu-open .navbar-left {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#navbar.navbar-menu-open .item {
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
#navbar details.dropdown {
|
|
display: none;
|
|
}
|
|
#navbar.navbar-menu-open details.dropdown {
|
|
display: block;
|
|
width: 100%;
|
|
> summary {
|
|
width: 100%;
|
|
justify-content: start;
|
|
}
|
|
> .content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#navbar.navbar-menu-open .navbar-left #navbar-logo {
|
|
justify-content: flex-start;
|
|
width: auto;
|
|
}
|
|
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
|
justify-content: flex-end;
|
|
width: 50%;
|
|
min-height: 48px;
|
|
}
|
|
#navbar #mobile-notifications-icon {
|
|
margin-inline-end: 6px !important;
|
|
}
|
|
}
|
|
|
|
#navbar details.dropdown summary {
|
|
padding-inline-start: 0.75rem;
|
|
/* The min height is dictated by the largest dropdown, which is the one that has an avatar in the opener */
|
|
min-height: 38px;
|
|
}
|
|
|
|
#navbar details.dropdown .dropdown-icon {
|
|
display: contents;
|
|
}
|
|
|
|
#navbar a.item .notification_count {
|
|
color: var(--color-nav-bg);
|
|
padding: 0 3.75px;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
#navbar a.item:hover .notification_count,
|
|
#navbar a.item:hover .header-stopwatch-dot {
|
|
border-color: var(--color-nav-hover-bg);
|
|
}
|
|
|
|
#navbar a.item .notification_count,
|
|
#navbar a.item .header-stopwatch-dot {
|
|
background: var(--color-primary);
|
|
border: 2px solid var(--color-nav-bg);
|
|
position: absolute;
|
|
inset-inline-start: 6px;
|
|
top: -9px;
|
|
min-width: 17px;
|
|
height: 17px;
|
|
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1; /* prevent menu button background from overlaying icon */
|
|
}
|
|
|
|
.secondary-nav {
|
|
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
|
}
|
|
|
|
.issue-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|