diff options
Diffstat (limited to 'src/components/settings_modal/tabs/appearance_tab.vue')
| -rw-r--r-- | src/components/settings_modal/tabs/appearance_tab.vue | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 0954d3a7..748a69ce 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -3,14 +3,24 @@ <div class="setting-item"> <h2>{{ $t('settings.theme') }}</h2> <ul - class="input theme-list" + class="theme-list" ref="themeList" > <button + v-if="isCustomThemeUsed" + disabled + class="button-default theme-preview" + > + <preview /> + <h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4> + </button> + <button v-for="style in availableStyles" :data-theme-key="style.key" :key="style.key" class="button-default theme-preview" + :class="{ toggled: isThemeActive(style.key) }" + @click="setTheme(style.key)" > <!-- eslint-disable vue/no-v-text-v-html-on-component --> <component @@ -260,14 +270,17 @@ list-style: none; display: flex; flex-wrap: wrap; - margin: 0 -0.5em; - height: 15em; + margin: -0.5em 0; + height: 25em; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; + border-radius: var(--roundness); + border: 1px solid var(--border); + padding: 0; .theme-preview { - width: 21rem; + width: 19rem; display: flex; flex-direction: column; align-items: center; @@ -278,9 +291,11 @@ } .preview-container { + pointer-events: none; zoom: 0.5; border: none; border-radius: var(--roundness); + text-align: left; } } } |