diff options
author | silverwind <me@silverwind.io> | 2024-03-23 00:54:09 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-03-22 23:54:09 +0000 |
commit | 3ccda41a539b8ba7841919ee12dc2877ddc03818 (patch) | |
tree | 0cadb8a2d0b1804d72c92e1c41c84d06ee2e156f /web_src | |
parent | bc92478575d9c1e84aa4ba4052dffcdc109a0323 (diff) | |
download | gitea-3ccda41a539b8ba7841919ee12dc2877ddc03818.tar.gz gitea-3ccda41a539b8ba7841919ee12dc2877ddc03818.zip |
Introduce `.secondary-nav` and handle `.page-content` spacing universally (#29982)
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>
Diffstat (limited to 'web_src')
-rw-r--r-- | web_src/css/base.css | 19 | ||||
-rw-r--r-- | web_src/css/dashboard.css | 7 | ||||
-rw-r--r-- | web_src/css/explore.css | 6 | ||||
-rw-r--r-- | web_src/css/modules/navbar.css | 4 | ||||
-rw-r--r-- | web_src/css/repo.css | 10 | ||||
-rw-r--r-- | web_src/css/repo/header.css | 11 | ||||
-rw-r--r-- | web_src/css/themes/theme-gitea-dark.css | 2 | ||||
-rw-r--r-- | web_src/css/themes/theme-gitea-light.css | 2 | ||||
-rw-r--r-- | web_src/css/user.css | 4 |
9 files changed, 30 insertions, 35 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index 71e61eeb41..dba379e7c8 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -738,10 +738,16 @@ img.ui.avatar, padding-bottom: 80px; } -.page-content.new:is(.repo,.migrate,.org), -.page-content.profile:is(.user,.organization), -.page-content.user:is(.settings,.notification) { - padding-top: 15px; +/* add margin below .secondary nav when it is the first child */ +.page-content > :first-child.secondary-nav { + margin-bottom: 14px; +} + +/* add padding to all content when there is no .secondary.nav. this uses padding instead of + margin because with the negative margin on .ui.grid we would have to set margin-top: 0, + but that does not work universally for all pages */ +.page-content > :first-child:not(.secondary-nav) { + padding-top: 14px; } /* overwrite semantic width of containers inside the main page content div (div with class "page-content") */ @@ -1323,7 +1329,6 @@ strong.attention-caution, svg.attention-caution { } overflow-menu { - margin-bottom: 15px !important; border-bottom: 1px solid var(--color-secondary) !important; display: flex; } @@ -1337,6 +1342,10 @@ overflow-menu .overflow-menu-items .item { margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ } +overflow-menu .ui.label { + margin-left: 7px !important; /* save some space */ +} + .activity-bar-graph { background-color: var(--color-primary); color: var(--color-primary-contrast); diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 0fa81b1c2a..e50f1abf42 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -77,15 +77,14 @@ margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */ } -.dashboard .dashboard-navbar { +.dashboard .secondary-nav { padding: 1px 12px; /* match .overflow-menu-items in height */ - background: var(--color-header-wrapper); } -.dashboard .dashboard-navbar .org-visibility .label { +.dashboard .secondary-nav .org-visibility .label { margin-left: 5px; } -.dashboard .dashboard-navbar .ui.dropdown { +.dashboard .secondary-nav .ui.dropdown { max-width: 100%; } diff --git a/web_src/css/explore.css b/web_src/css/explore.css index 08858337c0..5cdee823c0 100644 --- a/web_src/css/explore.css +++ b/web_src/css/explore.css @@ -1,10 +1,8 @@ -.explore .navbar { - margin-bottom: 15px !important; - background-color: var(--color-header-wrapper) !important; +.explore .secondary-nav { border-width: 1px !important; } -.explore .navbar .svg { +.explore .secondary-nav .svg { width: 16px; text-align: center; margin-right: 5px; diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 88f4c57043..f8553d7cf0 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -136,3 +136,7 @@ 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 */ +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4503bd69e3..ca8de42a06 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -4,16 +4,6 @@ user-select: none; } -.repository .navbar { - display: flex; - justify-content: space-between; -} - -.repository .navbar .ui.label { - margin-left: 7px; - padding: 3px 5px; -} - .repository .owner.dropdown { min-width: 40% !important; } diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 13fb40e35d..55e704ed10 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -1,4 +1,8 @@ -.header-wrapper .fork-flag { +.repository .secondary-nav { + padding-top: 12px; +} + +.repository .secondary-nav .fork-flag { margin-top: 0.5rem; font-size: 12px; } @@ -63,8 +67,3 @@ .repo-buttons .ui.labeled.button.disabled > .button { pointer-events: none !important; } - -.repository .header-wrapper { - padding-top: 12px; - background-color: var(--color-header-wrapper); -} diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 9cf8907e45..c769c51cdc 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -197,7 +197,6 @@ --color-input-toggle-background: #2e353b; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #181c20; --color-light: #00001728; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #e8e8ff28; @@ -227,6 +226,7 @@ --color-nav-bg: #16191c; --color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #181c20; --color-label-text: var(--color-text); --color-label-bg: #73828e4b; --color-label-hover-bg: #73828ea0; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 2ac83eefed..2d9ab8e721 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -197,7 +197,6 @@ --color-input-toggle-background: #d0d7de; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #f9fafb; --color-light: #00001706; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000171d; @@ -227,6 +226,7 @@ --color-nav-bg: #f6f7fa; --color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #f9fafb; --color-label-text: var(--color-text); --color-label-bg: #949da64b; --color-label-hover-bg: #949da6a0; diff --git a/web_src/css/user.css b/web_src/css/user.css index 4267ca0b7d..af8a2f5adc 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -112,10 +112,6 @@ border: 1px solid var(--color-secondary); } -#notification_div { - padding-top: 15px; -} - #notification_table { background: var(--color-box-body); border: 1px solid var(--color-secondary); |