From c11ff13015cd752cf24c90fac247aea1ad5dcccf Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 00:08:09 +0200 Subject: [PATCH 1/7] Improve notification count icon --- web_src/css/base.css | 28 ++++++++++++++++++-------- web_src/css/themes/theme-arc-green.css | 1 + 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index b352e6d98e18..69c9b5f604d8 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -196,6 +196,7 @@ --color-input-border-hover: #cecece; --color-navbar: #f8f8f8; --color-navbar-transparent: #f8f8f800; + --color-navbar-hover: #ebebeb; --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; @@ -976,6 +977,10 @@ img.ui.avatar, min-height: 52px; } +.following.bar #navbar a.item:hover { + background: var(--color-navbar-hover); +} + .following.bar #navbar .dropdown .avatar { margin-right: 0 !important; } @@ -2129,19 +2134,26 @@ a.ui.basic.label:hover { } .notification_count { + display: flex; + align-items: center; + justify-content: center; position: absolute; - left: 7px; - top: -9px; - min-width: 1.5em; - text-align: center; + left: 5px; + 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-radius: 17px; + padding: 0 3.5px; + font-size: 12px; + line-height: 12px; font-weight: var(--font-weight-bold); - line-height: .7; +} + +.item:hover .notification_count { + border-color: var(--color-navbar-hover);; } .rss-icon { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index f6321c9ed779..39f5231ca2a8 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -182,6 +182,7 @@ --color-input-border-hover: #505667; --color-navbar: #2a2e3a; --color-navbar-transparent: #2a2e3a00; + --color-navbar-hover: #434651; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; From 1d4850c156181340e28a925e59377380b2590f7a Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 00:22:49 +0200 Subject: [PATCH 2/7] rename color --- web_src/css/base.css | 6 +++--- web_src/css/themes/theme-arc-green.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 69c9b5f604d8..7544ffde09c3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -196,7 +196,6 @@ --color-input-border-hover: #cecece; --color-navbar: #f8f8f8; --color-navbar-transparent: #f8f8f800; - --color-navbar-hover: #ebebeb; --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; @@ -224,6 +223,7 @@ --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-header-bar: #ffffff; + --color-header-bar-hover-bg: #ebebeb; --color-label-text: #232323; --color-label-bg: #cacaca5b; --color-label-hover-bg: #cacacaa0; @@ -978,7 +978,7 @@ img.ui.avatar, } .following.bar #navbar a.item:hover { - background: var(--color-navbar-hover); + background: var(--color-header-bar-hover-bg); } .following.bar #navbar .dropdown .avatar { @@ -2153,7 +2153,7 @@ a.ui.basic.label:hover { } .item:hover .notification_count { - border-color: var(--color-navbar-hover);; + border-color: var(--color-header-bar-hover-bg); } .rss-icon { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 39f5231ca2a8..82e5596d6800 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -182,7 +182,6 @@ --color-input-border-hover: #505667; --color-navbar: #2a2e3a; --color-navbar-transparent: #2a2e3a00; - --color-navbar-hover: #434651; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; @@ -209,6 +208,7 @@ --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-header-bar: #2e323e; + --color-header-bar-hover-bg: #434651; --color-label-text: #dfe3ec; --color-label-bg: #7c84974b; --color-label-hover-bg: #7c8497a0; From 7e112fdc87de5046326fbbae2a5423e91e91076a Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 00:25:17 +0200 Subject: [PATCH 3/7] fix selector --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 7544ffde09c3..d53487293453 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2152,7 +2152,7 @@ a.ui.basic.label:hover { font-weight: var(--font-weight-bold); } -.item:hover .notification_count { +.following.bar #navbar a.item:hover .notification_count { border-color: var(--color-header-bar-hover-bg); } From af4f6cefd1713dc975a0c2c5ad5e4b065262525c Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 00:35:28 +0200 Subject: [PATCH 4/7] tweak menu margins --- templates/base/head_navbar.tmpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index a61c62396402..353ec068e8a1 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -78,7 +78,7 @@ {{else if .IsSigned}} -
+
{{if EnableTimetracking}} @@ -125,7 +125,7 @@ -
+
{{svg "octicon-plus"}} {{.locale.Tr "create_new"}} @@ -148,7 +148,7 @@
-
+
{{avatar $.Context .SignedUser 24 "tiny"}} {{.locale.Tr "user_profile_and_more"}} From 8332fee4b6b5ed32b96de3d6d5df1bd54ed2bef6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 16:35:58 +0200 Subject: [PATCH 5/7] rename --color-navbar to --color-header-wrapper --- web_src/css/base.css | 8 ++++---- web_src/css/explore.css | 2 +- web_src/css/repo.css | 2 +- web_src/css/themes/theme-arc-green.css | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index d53487293453..dcdec2a8bc2b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -194,8 +194,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; @@ -1579,7 +1579,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; } @@ -1594,7 +1594,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; diff --git a/web_src/css/explore.css b/web_src/css/explore.css index ee05918e77d7..f4d1eed96081 100644 --- a/web_src/css/explore.css +++ b/web_src/css/explore.css @@ -1,6 +1,6 @@ .explore .navbar { margin-bottom: 15px !important; - background-color: var(--color-navbar) !important; + background-color: var(--color-header-wrapper) !important; border-width: 1px !important; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4e300be87879..c6655a8fc95b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -132,7 +132,7 @@ } .repository .header-wrapper { - background-color: var(--color-navbar); + background-color: var(--color-header-wrapper); } .repository .header-wrapper .ui.tabs.divider { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 82e5596d6800..2d007b98f37c 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -180,8 +180,8 @@ --color-input-toggle-background: #454a57; --color-input-border: #454a57; --color-input-border-hover: #505667; - --color-navbar: #2a2e3a; - --color-navbar-transparent: #2a2e3a00; + --color-header-wrapper: #2a2e3a; + --color-header-wrapper-transparent: #2a2e3a00; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; From 640092e50a1d428f4555d3753e38236f20f582ef Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 16:39:38 +0200 Subject: [PATCH 6/7] rename --color-header-bar to --color-nav-bg and --color-header-bar-hover-bg to --color-nav-hover-bg --- web_src/css/base.css | 16 ++++++++-------- web_src/css/themes/theme-arc-green.css | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index dcdec2a8bc2b..dd6e69ecb5e4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -222,8 +222,8 @@ --color-reaction-active-bg: var(--color-primary-light-6); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-header-bar: #ffffff; - --color-header-bar-hover-bg: #ebebeb; + --color-nav-bg: #ffffff; + --color-nav-hover-bg: #ebebeb; --color-label-text: #232323; --color-label-bg: #cacaca5b; --color-label-hover-bg: #cacacaa0; @@ -950,7 +950,7 @@ img.ui.avatar, } .following.bar.light { - background: var(--color-header-bar); + background: var(--color-nav-bg); border-bottom: 1px solid var(--color-secondary); } @@ -978,7 +978,7 @@ img.ui.avatar, } .following.bar #navbar a.item:hover { - background: var(--color-header-bar-hover-bg); + background: var(--color-nav-hover-bg); } .following.bar #navbar .dropdown .avatar { @@ -2129,7 +2129,7 @@ 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%; } @@ -2143,8 +2143,8 @@ a.ui.basic.label:hover { min-width: 17px; min-height: 17px; background: var(--color-primary); - border: 2px solid var(--color-header-bar); - color: var(--color-header-bar); + border: 2px solid var(--color-nav-bg); + color: var(--color-nav-bg); border-radius: 17px; padding: 0 3.5px; font-size: 12px; @@ -2153,7 +2153,7 @@ a.ui.basic.label:hover { } .following.bar #navbar a.item:hover .notification_count { - border-color: var(--color-header-bar-hover-bg); + border-color: var(--color-nav-hover-bg); } .rss-icon { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 2d007b98f37c..b07a171b5299 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -207,8 +207,8 @@ --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-header-bar: #2e323e; - --color-header-bar-hover-bg: #434651; + --color-nav-bg: #2e323e; + --color-nav-hover-bg: #434651; --color-label-text: #dfe3ec; --color-label-bg: #7c84974b; --color-label-hover-bg: #7c8497a0; From 2da43497ab064b545a2472db69b3e2161f299400 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 7 Jun 2023 16:57:15 +0200 Subject: [PATCH 7/7] remove the 'following bar' wrapper --- templates/base/head.tmpl | 4 +--- templates/base/head_navbar.tmpl | 2 +- templates/status/500.tmpl | 2 +- web_src/css/base.css | 34 +++++++++++++++------------------ 4 files changed, 18 insertions(+), 24 deletions(-) diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index a233865a3db9..4858d0b7ded9 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -73,9 +73,7 @@ {{template "custom/body_inner_pre" .}} {{if not .PageIsInstall}} -
- {{template "base/head_navbar" .}} -
+ {{template "base/head_navbar" .}} {{end}} {{if false}} diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 353ec068e8a1..e435fd67ca0d 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -1,4 +1,4 @@ -