diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-06-28 15:59:49 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-06-28 15:59:49 +0900 |
| commit | 270e1212aca2931f8c01d43c187106b988fa2c49 (patch) | |
| tree | c95c503e3279c9771f181441ab086efdbcd92741 /packages/client/src/pages | |
| parent | refactor(client): use setup syntax (diff) | |
| download | misskey-270e1212aca2931f8c01d43c187106b988fa2c49.tar.gz misskey-270e1212aca2931f8c01d43c187106b988fa2c49.tar.bz2 misskey-270e1212aca2931f8c01d43c187106b988fa2c49.zip | |
chore(client): refactor and style tweaks
Diffstat (limited to 'packages/client/src/pages')
| -rw-r--r-- | packages/client/src/pages/settings/theme.vue | 45 |
1 files changed, 18 insertions, 27 deletions
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue index db4262ba7e..ddffe08225 100644 --- a/packages/client/src/pages/settings/theme.vue +++ b/packages/client/src/pages/settings/theme.vue @@ -1,5 +1,5 @@ <template> -<div class="_formRoot"> +<div class="_formRoot root"> <div v-adaptive-border class="rfqxtzch _panel _formBlock"> <div class="toggle"> <div class="toggleWrapper"> @@ -26,30 +26,8 @@ </div> </div> - <template v-if="darkMode"> - <FormSelect v-model="darkThemeId" class="_formBlock"> - <template #label>{{ $ts.themeForDarkMode }}</template> - <template #prefix><i class="fas fa-moon"></i></template> - <optgroup :label="$ts.darkThemes"> - <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> - </optgroup> - <optgroup :label="$ts.lightThemes"> - <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> - </optgroup> - </FormSelect> - <FormSelect v-model="lightThemeId" class="_formBlock"> - <template #label>{{ $ts.themeForLightMode }}</template> - <template #prefix><i class="fas fa-sun"></i></template> - <optgroup :label="$ts.lightThemes"> - <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> - </optgroup> - <optgroup :label="$ts.darkThemes"> - <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> - </optgroup> - </FormSelect> - </template> - <template v-else> - <FormSelect v-model="lightThemeId" class="_formBlock"> + <div class="selects _formBlock"> + <FormSelect v-model="lightThemeId" large class="select"> <template #label>{{ $ts.themeForLightMode }}</template> <template #prefix><i class="fas fa-sun"></i></template> <optgroup :label="$ts.lightThemes"> @@ -59,7 +37,7 @@ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - <FormSelect v-model="darkThemeId" class="_formBlock"> + <FormSelect v-model="darkThemeId" large class="select"> <template #label>{{ $ts.themeForDarkMode }}</template> <template #prefix><i class="fas fa-moon"></i></template> <optgroup :label="$ts.darkThemes"> @@ -69,7 +47,7 @@ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - </template> + </div> <FormSection> <div class="_formLinksGrid"> @@ -406,4 +384,17 @@ definePageMetadata({ border-top: solid 0.5px var(--divider); } } + +.root { + > .selects { + display: flex; + gap: var(--margin); + flex-wrap: wrap; + + > .select { + flex: 1; + min-width: 280px; + } + } +} </style> |