From e8bc145a022f2532bc51536e76e508e96e63a2f6 Mon Sep 17 00:00:00 2001
From: Adrian Dimitrov <dimitrov.adrian@gmail.com>
Date: Thu, 7 Oct 2021 07:36:19 -0700
Subject: [PATCH] Show file-image actions button upon focus; Use hover style
 for focused buttons (#8614)

---
 app/src/components/v-button/v-button.vue     | 2 ++
 app/src/interfaces/file-image/file-image.vue | 1 +
 2 files changed, 3 insertions(+)

diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index af17e05c6b..4518658de2 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -300,6 +300,7 @@ export default defineComponent({
 	transition-property: background-color border;
 }
 
+.button:focus,
 .button:hover {
 	color: var(--v-button-color-hover);
 	background-color: var(--v-button-background-color-hover);
@@ -339,6 +340,7 @@ export default defineComponent({
 	background-color: transparent;
 }
 
+.outlined:not(.active):focus,
 .outlined:not(.active):hover {
 	color: var(--v-button-background-color-hover);
 	background-color: transparent;
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index a84cb550f8..b34f98b7b2 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -369,6 +369,7 @@ img {
 	transition: max-height var(--fast) var(--transition);
 }
 
+.image-preview:focus-within,
 .image-preview:hover {
 	.shadow {
 		height: 100%;