Adapt focus-visible styles for checkboxes on images

Signed-off-by: julia.kirschenheuter <[email protected]>
nextcloud · Dec 18, 2023 · 4d77706 · 4d77706
1 parent ab8cc60
commit 4d77706
Show file tree

Hide file tree

Showing 25 changed files with 44 additions and 38 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-sidebar.js b/js/photos-sidebar.js
diff --git a/js/photos-sidebar.js.map b/js/photos-sidebar.js.map
diff --git a/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js b/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js
diff --git a/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map b/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map
diff --git a/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js b/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js
diff --git a/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map b/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map
diff --git a/js/photos-src_views_FaceContent_vue.js b/js/photos-src_views_FaceContent_vue.js
diff --git a/js/photos-src_views_FaceContent_vue.js.map b/js/photos-src_views_FaceContent_vue.js.map
diff --git a/...odules_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js b/...odules_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js
diff --git a/...es_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js.map b/...es_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js.map
diff --git a/src/components/File.vue b/src/components/File.vue
@@ -332,11 +332,17 @@ export default {
 		z-index: 1;
 		width: fit-content;
 
-		// Make the checkbox background round on hover.
+		:deep .checkbox-radio-switch__input:focus-visible + .checkbox-radio-switch__content,
+		.checkbox-radio-switch__input:focus-visible {
+			outline: 2px solid var(--color-main-text);
+			box-shadow: 0 0 0 3px var(--color-main-background);
+			outline-offset: 0px;
+		}
+
 		:deep .checkbox-radio-switch__content {
 			padding: 10px;
 			box-sizing: border-box;
-			background: var(--color-primary-element-light);
+			background: var(--color-main-background);
 
 			// Add a background to the checkbox so we do not see the image through it.
 			&::after {