diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkChannelFollowButton.vue | 22 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkFollowButton.vue | 26 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/drive.vue | 29 |
3 files changed, 35 insertions, 42 deletions
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue index 9e275d6172..7b7bef4787 100644 --- a/packages/frontend/src/components/MkChannelFollowButton.vue +++ b/packages/frontend/src/components/MkChannelFollowButton.vue @@ -1,20 +1,20 @@ <template> <button - class="hdcaacmi _button" - :class="{ wait, active: isFollowing, full }" + class="_button" + :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full }]" :disabled="wait" @click="onClick" > <template v-if="!wait"> <template v-if="isFollowing"> - <span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i> </template> <template v-else> - <span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i> </template> </template> <template v-else> - <span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/> + <span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true"/> </template> </button> </template> @@ -57,8 +57,8 @@ async function onClick() { } </script> -<style lang="scss" scoped> -.hdcaacmi { +<style lang="scss" module> +.root { position: relative; display: inline-block; font-weight: bold; @@ -103,7 +103,7 @@ async function onClick() { } &.active { - color: #fff; + color: var(--fgOnAccent); background: var(--accent); &:hover { @@ -121,9 +121,9 @@ async function onClick() { cursor: wait !important; opacity: 0.7; } +} - > span { - margin-right: 6px; - } +.text { + margin-right: 6px; } </style> diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index 7d066fd033..c4e13441e0 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -1,30 +1,30 @@ <template> <button - class="kpoogebi _button" - :class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }" + class="_button" + :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]" :disabled="wait" @click="onClick" > <template v-if="!wait"> <template v-if="hasPendingFollowRequestFromYou && user.isLocked"> - <span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i> </template> <template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 --> - <span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> + <span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> </template> <template v-else-if="isFollowing"> - <span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i> </template> <template v-else-if="!isFollowing && user.isLocked"> - <span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i> </template> <template v-else-if="!isFollowing && !user.isLocked"> - <span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i> + <span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i> </template> </template> <template v-else> - <span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> + <span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> </template> </button> </template> @@ -126,8 +126,8 @@ onBeforeUnmount(() => { }); </script> -<style lang="scss" scoped> -.kpoogebi { +<style lang="scss" module> +.root { position: relative; display: inline-block; font-weight: bold; @@ -196,9 +196,9 @@ onBeforeUnmount(() => { cursor: wait !important; opacity: 0.7; } +} - > span { - margin-right: 6px; - } +.text { + margin-right: 6px; } </style> diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index 6ff98bc977..6fa3871205 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -4,8 +4,8 @@ <template #label>{{ i18n.ts.usageAmount }}</template> <div class="_gaps_m"> - <div class="uawsfosz"> - <div class="meter"><div :style="meterStyle"></div></div> + <div> + <div :class="$style.meter"><div :class="$style.meterValue" :style="meterStyle"></div></div> </div> <FormSplit> <MkKeyValue> @@ -139,22 +139,15 @@ definePageMetadata({ }); </script> -<style lang="scss" scoped> - -@use "sass:math"; - -.uawsfosz { - - > .meter { - $size: 12px; - background: rgba(0, 0, 0, 0.1); - border-radius: math.div($size, 2); - overflow: hidden; +<style lang="scss" module> +.meter { + background: rgba(0, 0, 0, 0.1); + border-radius: 999px; + overflow: clip; +} - > div { - height: $size; - border-radius: math.div($size, 2); - } - } +.meterValue { + height: 100%; + border-radius: 999px; } </style> |