diff --git a/src/components/NavBar/HorizontalNavBar/styles.less b/src/components/NavBar/HorizontalNavBar/styles.less index 512788855..78414ce64 100644 --- a/src/components/NavBar/HorizontalNavBar/styles.less +++ b/src/components/NavBar/HorizontalNavBar/styles.less @@ -69,7 +69,7 @@ width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; - opacity: 0.4; + opacity: 0.6; .icon { flex: none; @@ -79,7 +79,7 @@ opacity: 0.6; } - &:hover, &:global(.active) { + .active() { background-color: var(--overlay-color); opacity: 1; @@ -88,6 +88,16 @@ opacity: 0.8; } } + + &:global(.active) { + .active(); + } + + @media (pointer: fine) { + &:hover { + .active(); + } + } } } diff --git a/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less index 99592189d..8b3b3e5d1 100644 --- a/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -18,12 +18,21 @@ .label { opacity: 0.6; } + + &:global(.selected) { + .label { + opacity: 1; + } + } } } &:global(.selected) { .icon { opacity: 1; + } + + .icon, .label { color: var(--primary-accent-color); } } @@ -37,7 +46,7 @@ .icon { color: var(--primary-foreground-color); - opacity: 0.2; + opacity: 0.5; } .label { @@ -61,12 +70,12 @@ @media only screen and (max-width: @minimum) { .nav-tab-button-container { .label { - opacity: 0.2; + opacity: 0.6; } &:global(.selected) { .label { - opacity: 0.6; + opacity: 1; } } }