Use background to increase overlay contrast

And limit it to files Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Nov 13, 2023 · dc16a74 · dc16a74
1 parent eaaf954
commit dc16a74
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue
@@ -53,7 +53,7 @@
 
 		<OverlayIcon :is="fileOverlay"
 			v-if="fileOverlay"
-			class="files-list__row-icon-overlay" />
+			class="files-list__row-icon-overlay files-list__row-icon-overlay--file" />
 	</span>
 </template>
 

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
@@ -519,16 +519,11 @@ export default Vue.extend({
 				// better alignment with the folder icon
 				margin-top: 2px;
 
-				svg {
+				// Improve icon contrast with a background for files
+				&--file {
+					color: var(--color-main-text);
+					background: var(--color-main-background);
 					border-radius: 100%;
-
-					// Sow a border around the icon for better contrast
-					path {
-						stroke: var(--color-main-background);
-						stroke-width: 8px;
-						stroke-linejoin: round;
-						paint-order: stroke;
-					}
 				}
 			}
 		}