diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 0fb6fcc0..2214959f 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -49,6 +49,7 @@ label.Select {
option {
background-color: transparent;
+ &:checked,
&.-active {
color: var(--selectionText);
background-color: var(--selectionBackground);
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index b6fc841d..6c1ef28a 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -33,7 +33,13 @@ import {
} from 'src/services/export_import/export_import.js'
import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFloppyDisk, faFolderOpen, faFile, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+import {
+ faFloppyDisk,
+ faFolderOpen,
+ faFile,
+ faArrowsRotate,
+ faCheck
+} from '@fortawesome/free-solid-svg-icons'
// helper for debugging
// eslint-disable-next-line no-unused-vars
@@ -46,7 +52,8 @@ library.add(
faFile,
faFloppyDisk,
faFolderOpen,
- faArrowsRotate
+ faArrowsRotate,
+ faCheck
)
export default {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 3d33d35e..33b00ec6 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -66,14 +66,14 @@
&.heading {
display: grid;
grid-template:
- "meta meta preview"
- "meta meta preview"
- "meta meta preview"
- "meta meta preview"
- "new new preview"
- "load save refresh";
+ "meta meta preview preview"
+ "meta meta preview preview"
+ "meta meta preview preview"
+ "meta meta preview preview"
+ "new new preview preview"
+ "load save refresh apply";
grid-gap: 0.5em;
- grid-template-columns: min-content min-content 6fr;
+ grid-template-columns: min-content min-content 6fr max-content;
grid-template-rows: repeat(4, min-content) repeat(2, 2em);
ul.setting-list {
@@ -116,6 +116,10 @@
.button-refresh {
grid-area: refresh;
}
+
+ .button-apply {
+ grid-area: apply;
+ }
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 30920292..b934fa44 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -39,6 +39,13 @@