From 4d6ea433e62c9b1e0bc3cc685ed1e93b879f3191 Mon Sep 17 00:00:00 2001 From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:51:06 +0100 Subject: [PATCH 1/3] Feat: Add background color change on hover to nav links --- src/layouts/Layout.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 610681835..56e35a6e9 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -211,6 +211,10 @@ export default { @import "../assets/vars.scss"; .nav-link { + &:hover { + background-color: rgba($primary, 0.2); + } + &.status-page { background-color: rgba(255, 255, 255, 0.1); } From 94154c49aabc22019ec814cea274226030ca6467 Mon Sep 17 00:00:00 2001 From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com> Date: Thu, 15 Feb 2024 08:21:43 +0100 Subject: [PATCH 2/3] Feat: Change hover colors to shades of gray --- src/layouts/Layout.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 56e35a6e9..94eaa7310 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -212,7 +212,11 @@ export default { .nav-link { &:hover { - background-color: rgba($primary, 0.2); + background-color: rgba(0, 0, 0, 0.05); + + .dark & { + background-color: rgba(255, 255, 255, 0.05); + } } &.status-page { From 17dfdacd933c62cbadc04d4afb473ce63b223c6d Mon Sep 17 00:00:00 2001 From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:52:59 +0100 Subject: [PATCH 3/3] Fix: Correct colors --- src/layouts/Layout.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 94eaa7310..9faedf589 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -212,10 +212,16 @@ export default { .nav-link { &:hover { - background-color: rgba(0, 0, 0, 0.05); + background-color: $primary; + color: #fff; .dark & { - background-color: rgba(255, 255, 255, 0.05); + background-color: $primary; + color: #000; + } + + &.active { + background-color: $highlight; } }