summaryrefslogtreecommitdiffstats
path: root/web_src/css/modules/navbar.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-10-11 10:27:00 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-10-11 10:27:00 +0000
commit65aa53fc52ff15efe54df4147564828d535837f8 (patch)
tree31c51dad04fdcca80e6d3043c8bd49d2f1a51f83 /web_src/css/modules/navbar.css
parentInitial commit. (diff)
downloadforgejo-65aa53fc52ff15efe54df4147564828d535837f8.tar.xz
forgejo-65aa53fc52ff15efe54df4147564828d535837f8.zip
Adding upstream version 8.0.3.HEADupstream/8.0.3upstreamdebian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web_src/css/modules/navbar.css')
-rw-r--r--web_src/css/modules/navbar.css147
1 files changed, 147 insertions, 0 deletions
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
new file mode 100644
index 00000000..02d470f5
--- /dev/null
+++ b/web_src/css/modules/navbar.css
@@ -0,0 +1,147 @@
+#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 .navbar-left,
+#navbar .navbar-right {
+ min-height: 49px; /* +1px border-bottom */
+}
+
+#navbar .navbar-left,
+#navbar .navbar-right {
+ margin: 0;
+ display: flex;
+ align-items: center;
+}
+
+#navbar-logo {
+ margin: 0;
+}
+
+#navbar .item {
+ min-height: 36px;
+ min-width: 36px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ display: flex;
+}
+
+#navbar > .menu > .item {
+ color: var(--color-nav-text);
+}
+
+#navbar .dropdown .item {
+ justify-content: stretch;
+}
+
+#navbar a.item:hover, #navbar a.item:focus,
+#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-right: 0;
+}
+
+@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-left: 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;
+ }
+ #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.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-right: 6px !important;
+ }
+}
+
+#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;
+ left: 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;
+}