diff options
author | silverwind <me@silverwind.io> | 2023-06-08 00:21:57 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-06-07 22:21:57 +0000 |
commit | b6bcb79987ae3c9095fe2b2c7c0a3e4b42cdebba (patch) | |
tree | ced486a2323f742d68f678fdf1fdc62ad73db234 /web_src/css/base.css | |
parent | eac1bddb8da2e26a3f6d6678b9888c65418cf318 (diff) | |
download | gitea-b6bcb79987ae3c9095fe2b2c7c0a3e4b42cdebba.tar.gz gitea-b6bcb79987ae3c9095fe2b2c7c0a3e4b42cdebba.zip |
Improve notification icon and navbar (#25111)v1.21.0-dev
Improvements to the notification icon and `<nav>`:
- Add a opaque color for header hover and use it, allowing the border to
be the right color on hover (sadly, not otherwise possible with CSS, not
even `color-mix`).
- Increase font size by 1px
- Use flexbox for slightly better text centering
- Reduce padding of user and add repo button, add margin on right side
of user menu
- Remove the `following bar` wrapper on navbar
<img width="176" alt="Screenshot 2023-06-07 at 00 07 08"
src="https://github.com/go-gitea/gitea/assets/115237/23cdc3d6-7f63-49df-bec3-f2e75e32a304">
<img width="63" alt="Screenshot 2023-06-07 at 00 07 14"
src="https://github.com/go-gitea/gitea/assets/115237/fae602c2-4467-4d50-b1ec-56317843f9a2">
<img width="84" alt="Screenshot 2023-06-07 at 00 07 36"
src="https://github.com/go-gitea/gitea/assets/115237/c48141b8-0b3c-48cc-846a-3a272524dbdb">
<img width="329" alt="Screenshot 2023-06-07 at 00 25 10"
src="https://github.com/go-gitea/gitea/assets/115237/cda612f1-426e-466b-a351-fc992bfd18fd">
<img width="186" alt="Screenshot 2023-06-07 at 00 35 45"
src="https://github.com/go-gitea/gitea/assets/115237/04484a2e-9bbf-493c-aa26-8e936da008fa">
<img width="797" alt="Screenshot 2023-06-07 at 16 57 40"
src="https://github.com/go-gitea/gitea/assets/115237/e7ccb672-5807-4cb6-b306-b18ae0c7e321">
Diffstat (limited to 'web_src/css/base.css')
-rw-r--r-- | web_src/css/base.css | 70 |
1 files changed, 39 insertions, 31 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index a35eccb26b..b56e7b68d6 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -195,8 +195,8 @@ --color-input-toggle-background: #dedede; --color-input-border: #dedede; --color-input-border-hover: #cecece; - --color-navbar: #f8f8f8; - --color-navbar-transparent: #f8f8f800; + --color-header-wrapper: #f8f8f8; + --color-header-wrapper-transparent: #f8f8f800; --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; @@ -223,7 +223,8 @@ --color-reaction-active-bg: var(--color-primary-light-6); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-header-bar: #ffffff; + --color-nav-bg: #ffffff; + --color-nav-hover-bg: #ebebeb; --color-label-text: #232323; --color-label-bg: #cacaca5b; --color-label-hover-bg: #cacacaa0; @@ -946,44 +947,44 @@ img.ui.avatar, } } -.following.bar { - margin: 0 !important; -} - -.following.bar.light { - background: var(--color-header-bar); +#navbar { + display: flex; + align-items: center; + background: var(--color-nav-bg); border-bottom: 1px solid var(--color-secondary); + width: 100vw; + min-height: 52px; + margin: 0 !important; } -.following.bar .column .menu { +#navbar .column .menu { margin-top: 0; } -.following.bar .fitted .svg { +#navbar .fitted .svg { margin-right: 0; vertical-align: middle; } -.following.bar .searchbox { +#navbar .searchbox { background-color: var(--color-input-background) !important; } -.following.bar .text .svg { +#navbar .text .svg { width: 16px; text-align: center; } -.following.bar #navbar { - width: 100vw; - min-height: 52px; +#navbar a.item:hover { + background: var(--color-nav-hover-bg); } -.following.bar #navbar .dropdown .avatar { +#navbar .dropdown .avatar { margin-right: 0 !important; } @media (max-width: 767px) { - .following.bar #navbar:not(.shown) > *:not(:first-child) { + #navbar:not(.shown) > *:not(:first-child) { display: none; } } @@ -1576,7 +1577,7 @@ img.ui.avatar, .ui.menu.new-menu { margin-bottom: 15px; - background: var(--color-navbar); + background: var(--color-header-wrapper); border-bottom: 1px solid var(--color-secondary) !important; overflow: auto; } @@ -1591,7 +1592,7 @@ img.ui.avatar, .ui.menu.new-menu::after { position: absolute; display: block; - background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%); + background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%); content: ''; right: 0; height: 39px; @@ -2126,24 +2127,31 @@ a.ui.basic.label:hover { width: 13px; height: 13px; background: var(--color-primary); - border: 2px solid var(--color-header-bar); + border: 2px solid var(--color-nav-bg); border-radius: 100%; } .notification_count { + display: flex; + align-items: center; + justify-content: center; position: absolute; - left: 7px; - top: -9px; - min-width: 1.5em; - text-align: center; + left: 6px; + top: -8px; + min-width: 17px; + min-height: 17px; background: var(--color-primary); - border: 2px solid var(--color-header-bar); - color: var(--color-header-bar); - padding: 2.75px; - border-radius: 1em; - font-size: 11px; + border: 2px solid var(--color-nav-bg); + color: var(--color-nav-bg); + border-radius: 17px; + padding: 0 3.5px; + font-size: 12px; + line-height: 12px; font-weight: var(--font-weight-bold); - line-height: .7; +} + +#navbar a.item:hover .notification_count { + border-color: var(--color-nav-hover-bg); } .rss-icon { |