diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkVisibilityPicker.vue | 40 |
1 files changed, 20 insertions, 20 deletions
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue index 99b5d93d5f..4c78659f5c 100644 --- a/packages/frontend/src/components/MkVisibilityPicker.vue +++ b/packages/frontend/src/components/MkVisibilityPicker.vue @@ -1,42 +1,42 @@ <template> <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')"> <div class="gqyayizv _popup"> - <button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')"> - <div><i class="ti ti-world"></i></div> - <div> + <button key="public" class="_button item" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')"> + <div class="icon"><i class="ti ti-world"></i></div> + <div class="body"> <span>{{ i18n.ts._visibility.public }}</span> <span>{{ i18n.ts._visibility.publicDescription }}</span> </div> </button> - <button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')"> - <div><i class="ti ti-home"></i></div> - <div> + <button key="home" class="_button item" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')"> + <div class="icon"><i class="ti ti-home"></i></div> + <div class="body"> <span>{{ i18n.ts._visibility.home }}</span> <span>{{ i18n.ts._visibility.homeDescription }}</span> </div> </button> - <button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')"> - <div><i class="ti ti-lock-open"></i></div> - <div> + <button key="followers" class="_button item" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')"> + <div class="icon"><i class="ti ti-lock-open"></i></div> + <div class="body"> <span>{{ i18n.ts._visibility.followers }}</span> <span>{{ i18n.ts._visibility.followersDescription }}</span> </div> </button> - <button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')"> - <div><i class="ti ti-mail"></i></div> - <div> + <button key="specified" :disabled="localOnly" class="_button item" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')"> + <div class="icon"><i class="ti ti-mail"></i></div> + <div class="body"> <span>{{ i18n.ts._visibility.specified }}</span> <span>{{ i18n.ts._visibility.specifiedDescription }}</span> </div> </button> <div class="divider"></div> - <button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly"> - <div><i class="ti ti-world-off"></i></div> - <div> + <button key="localOnly" class="_button item localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly"> + <div class="icon"><i class="ti ti-world-off"></i></div> + <div class="body"> <span>{{ i18n.ts._visibility.localOnly }}</span> <span>{{ i18n.ts._visibility.localOnlyDescription }}</span> </div> - <div><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div> + <div class="toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div> </button> </div> </MkModal> @@ -89,7 +89,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void { border-top: solid 0.5px var(--divider); } - > button { + > .item { display: flex; padding: 8px 14px; font-size: 12px; @@ -115,7 +115,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void { background: inherit; } - > *:nth-child(1) { + > .icon { display: flex; justify-content: center; align-items: center; @@ -127,7 +127,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void { margin-bottom: auto; } - > *:nth-child(2) { + > .body { flex: 1 1 auto; white-space: nowrap; overflow: hidden; @@ -143,7 +143,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void { } } - > *:nth-child(3) { + > .toggle { display: flex; justify-content: center; align-items: center; |