Adjust entry highlights of navigation and menus based on Vue component style

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

2 files changed, 30 insertions, 28 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 420e5bb4a04..cb2b32611b1 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -152,16 +152,20 @@ kbd {
 				padding-left: 38px !important;
 			}
 
-			&.active,
 			a:hover,
-			a:focus,
+			a:focus {
+				&,
+				> a {
+					background-color: var(--color-background-hover);
+				}
+			}
+			&.active,
 			a:active,
 			a.selected ,
 			a.active {
 				&,
 				> a {
-					opacity: 1;
-					box-shadow: inset 4px 0 var(--color-primary-element);
+					background-color: var(--color-primary-light);
 				}
 			}
 
@@ -186,8 +190,6 @@ kbd {
 				padding: 0 44px;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				// !important to overwrite specific hover and focus
-				opacity: .7;
 				box-shadow: none !important;
 				user-select: none;
 				pointer-events:none;
@@ -207,19 +209,20 @@ kbd {
 					flex-wrap: wrap;
 					padding-left: 44px;
 					&:hover,
-					&:focus,
+					&:focus {
+						&,
+						> a {
+							background-color: var(--color-background-hover);
+						}
+					}
 					&.active,
 					a.selected {
 						&,
 						> a {
-							opacity: 1;
+							background-color: var(--color-primary-light);
 						}
 					}
 
-					&.active {
-						box-shadow: inset 4px 0 var(--color-primary-element);
-					}
-
 					/* align loader */
 					&.icon-loading-small:after {
 						left: 22px; /* 44px / 2 */
@@ -270,7 +273,7 @@ kbd {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				color: var(--color-main-text);
-				opacity: .57;
+				opacity: .8;
 				flex: 1 1 0px;
 				z-index: 100; /* above the bullet to allow click*/
 				/* TODO: forbid using img as icon in menu? */
@@ -384,7 +387,8 @@ kbd {
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
 			z-index: 105; // above a, under button
-			background-color: var(--color-main-background);
+			background-color: var(--color-background-hover);
+			border-radius: 50%;
 			transition: opacity $animation-quick ease-in-out;
 		}
 
@@ -730,17 +734,14 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 
 	/* like app-navigation a */
 	color: var(--color-main-text);
-	opacity: .57;
 
 	&.opened {
 		border-top: solid 1px var(--color-border);
+		background-color: var(--color-main-background);
 	}
 	&:hover,
-	&:focus,
-	&.opened {
-		background-color: var(--color-main-background);
-		opacity: 1;
-		box-shadow: inset 4px 0 var(--color-primary-element);
+	&:focus {
+		background-color: var(--color-background-hover);
 	}
 }
 
@@ -953,8 +954,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 			width: 100%;
 			color: var(--color-main-text);
 			white-space: nowrap;
-			/* Override the app-navigation li opacity */
-			opacity: .7 !important;
+
 			span[class^='icon-'],
 			span[class*=' icon-'],
 			&[class^='icon-'],
@@ -985,9 +985,11 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 				padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
 			}
 			&:hover,
-			&:focus,
+			&:focus {
+				background-color: var(--color-background-hover);
+			}
 			&.active {
-				opacity: 1 !important;
+				background-color: var(--color-primary-light);
 			}
 			/* prevent .action class to break the design */
 			&.action {
diff --git a/core/css/header.scss b/core/css/header.scss
index 1851695f1ea..e4a22141b06 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -135,16 +135,16 @@
 					color: var(--color-main-text);
 					padding: 10px 12px;
 					box-sizing: border-box;
-					opacity: .7;
 					white-space: nowrap;
 					position: relative;
 					width: 100%;
 					&:hover,
-					&:focus,
+					&:focus {
+						background-color: var(--color-background-hover);
+					}
 					&:active,
 					&.active {
-						opacity: 1;
-						box-shadow: inset 4px 0 var(--color-primary-element);
+						background-color: var(--color-primary-light);
 					}
 					span {
 						display: inline-block;