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

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

3 files changed, 45 insertions, 40 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index e875e0da29a..e47e47d7f4b 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -21,9 +21,11 @@
 .actions input, .actions button, .actions .button { margin:0; float:left; }
 .actions .button a { color: #555; }
 .actions .button a:hover,
-.actions .button a:focus,
+.actions .button a:focus {
+	background-color: var(--color-background-hover);
+}
 .actions .button a:active {
-	color: #333;
+	background-color: var(--color-primary-light);
 }
 
 .actions.creatable {
@@ -107,14 +109,12 @@
 }
 
 .app-files #app-content {
-	transition: background-color 0.3s ease;
 	// force  the width to be the full width to not go bigger than the screen
 	// flex will grow for the mobile view if necessary
 	width: calc(100% - 300px);
 }
 
 .file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover {
-	transition: background-color 0.3s ease!important;
 	background-color: var(--color-primary-light) !important;
 }
 
@@ -186,22 +186,23 @@
 }
 
 #filestable tbody tr {
-	transition: background-color 0.3s ease;
 	height: 51px;
 }
 #filestable tbody tr:hover,
 #filestable tbody tr:focus,
 #filestable tbody .name:focus,
+#filestable tbody tr:hover .filename form,
+table tr.mouseOver td {
+	background-color: var(--color-background-hover);
+}
 #filestable tbody tr:active,
 #filestable tbody tr.highlighted,
 #filestable tbody tr.highlighted .name:focus,
 #filestable tbody tr.selected,
-#filestable tbody tr.searchresult,
-#filestable tbody tr:hover .filename form,
-table tr.mouseOver td {
-	transition: background-color 0.3s ease;
-	background-color: var(--color-background-dark);
+#filestable tbody tr.searchresult {
+	background-color: var(--color-primary-light);
 }
+
 tbody a { color: var(--color-main-text); }
 
 span.conflict-path, span.extension, span.uploading, td.date {
@@ -625,6 +626,9 @@ a.action > img {
 	.fileActionsMenu a.action, a.action.action-share.shared-style {
 		opacity: .7;
 	}
+	.fileActionsMenu .action.permanent {
+		opacity: 1;
+	}
 }
 
 // Ellipsize long sharer names
@@ -878,8 +882,7 @@ table.dragshadow td.size {
 				.thumbnail-wrapper,
 				.nametext,
 				.fileactions {
-					transition: background-color 0.3s ease;
-					background-color: var(--color-background-dark);
+					background-color: var(--color-background-hover);
 				}
 			}
 		}
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;