diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 65f70614d7..50a055a126 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -27,9 +27,7 @@
@click="pickFile"
@keyup.enter="pickFile"
@keyup.space="pickFile">
-
- {{ t('dashboard', 'Pick from files') }}
-
+ {{ t('dashboard', 'Pick from files') }}
-
- {{ t('dashboard', 'Default images') }}
-
+ {{ t('dashboard', 'Default images') }}
-
- {{ t('dashboard', 'Plain background') }}
-
+ {{ t('dashboard', 'Plain background') }}
-
-
+ @keyup.space="setShipped(background.name)" />
@@ -148,7 +141,10 @@ export default {
.background {
width: 176px;
+ height: 96px;
margin: 8px;
+ background-size: cover;
+ background-position: center center;
text-align: center;
border-radius: var(--border-radius-large);
border-radius: var(--border-radius-large);
@@ -159,21 +155,12 @@ export default {
background-image: var(--color-background-dark);
}
- &--preview {
- width: 100%;
- height: 96px;
- background-size: cover;
- background-position: center center;
- }
-
&.filepicker, &.default, &.color {
- border: 2px solid var(--color-border);
- .background--preview {
- line-height: 100px;
- }
+ border-color: var(--color-border);
+ line-height: 96px;
}
- &.color .background--preview {
+ &.color {
background-color: var(--color-primary);
color: var(--color-primary-text);
}