diff --git a/src/App.scss b/src/App.scss index 2426b99823..9f7ef860fb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -142,6 +142,14 @@ input, textarea, .select { color: $fallback--fg; color: var(--fg, $fallback--fg); } + &:disabled, + { + &, + & + label, + & + label::before { + opacity: .5; + } + } + label::before { display: inline-block; content: '✔'; diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index a26111d6bf..e5f4b001ab 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -10,6 +10,7 @@ const settings = { muteWordsString: this.$store.state.config.muteWords.join('\n'), autoLoadLocal: this.$store.state.config.autoLoad, streamingLocal: this.$store.state.config.streaming, + pauseOnUnfocused: this.$store.state.config.pauseOnUnfocused, hoverPreviewLocal: this.$store.state.config.hoverPreview, stopGifs: this.$store.state.config.stopGifs } @@ -38,6 +39,9 @@ const settings = { streamingLocal (value) { this.$store.dispatch('setOption', { name: 'streaming', value }) }, + pauseOnUnfocusedLocal (value) { + this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value }) + }, hoverPreviewLocal (value) { this.$store.dispatch('setOption', { name: 'hoverPreview', value }) }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6245e7584c..d6dbab271b 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -1,53 +1,64 @@