Skip to content

Commit f15c8cc

Browse files
hideki0403hideki0403
committed
refactor: 4a356f1 に対応
1 parent 14ec718 commit f15c8cc

File tree

11 files changed

+159
-90
lines changed

11 files changed

+159
-90
lines changed

‎packages/frontend/src/components/MkDeleteScheduleEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ watch([expiration, atDate, atTime, after, unit, isValid], () => {
240240
}
241241
242242
.withAccent {
243-
color: var(--accent);
243+
color: var(--MI_THEME-accent);
244244
}
245245
246246
.chevronOpening {

‎packages/frontend/src/components/MkPostFormDrafts.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@ onMounted(async () => {
109109
padding: 10px;
110110
gap: 6px;
111111
flex-grow: 1;
112-
background-color: var(--buttonBg);
112+
background-color: var(--MI_THEME-buttonBg);
113113
114114
&:hover:not([aria-disabled="true"]) {
115-
background-color: var(--buttonHoverBg);
115+
background-color: var(--MI_THEME-buttonHoverBg);
116116
}
117117
118118
&[aria-disabled="true"] {
@@ -145,11 +145,11 @@ onMounted(async () => {
145145
align-items: center;
146146
justify-content: center;
147147
padding: 16px;
148-
background-color: var(--buttonBg);
149-
color: var(--error);
148+
background-color: var(--MI_THEME-buttonBg);
149+
color: var(--MI_THEME-error);
150150
151151
&:hover {
152-
background-color: var(--error);
152+
background-color: var(--MI_THEME-error);
153153
color: white;
154154
}
155155
}

‎packages/frontend/src/components/MkReactionsViewer.reaction.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,11 +215,11 @@ if (!mock) {
215215
216216
&.canToggleFallback:not(.canToggle):not(.reacted) {
217217
box-sizing: border-box;
218-
border: 2px dashed var(--switchBg);
218+
border: 2px dashed var(--MI_THEME-switchBg);
219219
220220
&.small {
221221
border-width: 1px;
222-
border-color: var(--buttonBgSub);
222+
border-color: var(--MI_THEME-buttonBgSub);
223223
}
224224
225225
&:hover {

‎packages/frontend/src/components/MkSignupDialog.choice.vue

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,24 @@ SPDX-License-Identifier: AGPL-3.0-only
1010
</div>
1111
<MkSpacer :marginMin="20" :marginMax="28">
1212
<div class="_gaps_m" :class="$style.root">
13-
<MkInfo info>{{ i18n.tsx.registrationLimitDetails({ limit: instance.registrationLimitCooldown, count: instance.registrationLimit }) }}</MkInfo>
13+
<MkInfo info>
14+
{{ i18n.tsx.registrationLimitDetails({ limit: instance.registrationLimitCooldown, count:
15+
instance.registrationLimit }) }}
16+
</MkInfo>
1417
<div>{{ i18n.ts.doYouHaveInviteCode }}</div>
1518
<div class="_buttonsCenter">
16-
<MkButton :class="$style.choiceButton" inline large style="color: var(--success);" @click="doneWithCode"><i class="ti ti-circle-check-filled"></i> {{ i18n.ts.hasInviteCode }}</MkButton>
17-
<MkButton :class="$style.choiceButton" inline large style="color: var(--error);" @click="doneWithoutCode"><i class="ti ti-circle-x-filled"></i> {{ i18n.ts.doesNotHaveInviteCode }}</MkButton>
19+
<MkButton
20+
:class="$style.choiceButton" inline large style="color: var(--MI_THEME-success);"
21+
@click="doneWithCode"
22+
>
23+
<i class="ti ti-circle-check-filled"></i> {{ i18n.ts.hasInviteCode }}
24+
</MkButton>
25+
<MkButton
26+
:class="$style.choiceButton" inline large style="color: var(--MI_THEME-error);"
27+
@click="doneWithoutCode"
28+
>
29+
<i class="ti ti-circle-x-filled"></i> {{ i18n.ts.doesNotHaveInviteCode }}
30+
</MkButton>
1831
</div>
1932
<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
2033
</div>
@@ -66,8 +79,8 @@ async function doneWithoutCode() {
6679
padding: 16px;
6780
text-align: center;
6881
font-size: 26px;
69-
background-color: var(--accentedBg);
70-
color: var(--accent);
82+
background-color: var(--MI_THEME-accentedBg);
83+
color: var(--MI_THEME-accent);
7184
}
7285
7386
.rules {
@@ -92,8 +105,8 @@ async function doneWithoutCode() {
92105
width: 32px;
93106
height: 32px;
94107
line-height: 32px;
95-
background-color: var(--accentedBg);
96-
color: var(--accent);
108+
background-color: var(--MI_THEME-accentedBg);
109+
color: var(--MI_THEME-accent);
97110
font-size: 13px;
98111
font-weight: bold;
99112
align-items: center;
@@ -104,4 +117,5 @@ async function doneWithoutCode() {
104117
105118
.ruleText {
106119
padding-top: 6px;
107-
}</style>
120+
}
121+
</style>

‎packages/frontend/src/components/MkSignupDialog.rules.vue

Lines changed: 67 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,49 +24,103 @@ SPDX-License-Identifier: AGPL-3.0-only
2424

2525
<MkFolder v-if="availableServerRules" :defaultOpen="true">
2626
<template #label>{{ i18n.ts.serverRules }}</template>
27-
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
27+
<template #suffix>
28+
<i
29+
v-if="agreeServerRules" class="ti ti-check"
30+
style="color: var(--MI_THEME-success)"
31+
></i>
32+
</template>
2833

2934
<ol class="_gaps_s" :class="$style.rules">
30-
<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
35+
<li v-for="item in instance.serverRules" :class="$style.rule">
36+
<div :class="$style.ruleText" v-html="item"></div>
37+
</li>
3138
</ol>
3239

33-
<MkSwitch :modelValue="agreeServerRules" style="margin-top: 16px;" @update:modelValue="updateAgreeServerRules">{{ i18n.ts.agree }}</MkSwitch>
40+
<MkSwitch
41+
:modelValue="agreeServerRules" style="margin-top: 16px;"
42+
@update:modelValue="updateAgreeServerRules"
43+
>
44+
{{ i18n.ts.agree }}
45+
</MkSwitch>
3446
</MkFolder>
3547

3648
<MkFolder v-if="availableTos || availablePrivacyPolicy" :defaultOpen="true">
3749
<template #label>{{ tosPrivacyPolicyLabel }}</template>
38-
<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
50+
<template #suffix>
51+
<i
52+
v-if="agreeTosAndPrivacyPolicy" class="ti ti-check"
53+
style="color: var(--MI_THEME-success)"
54+
></i>
55+
</template>
3956
<div class="_gaps_s">
40-
<div v-if="availableTos"><a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a></div>
41-
<div v-if="availablePrivacyPolicy"><a :href="instance.privacyPolicyUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a></div>
57+
<div v-if="availableTos">
58+
<a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{
59+
i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a>
60+
</div>
61+
<div v-if="availablePrivacyPolicy">
62+
<a
63+
:href="instance.privacyPolicyUrl ?? undefined" class="_link"
64+
target="_blank"
65+
>{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a>
66+
</div>
4267
</div>
4368

44-
<MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch>
69+
<MkSwitch
70+
:modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;"
71+
@update:modelValue="updateAgreeTosAndPrivacyPolicy"
72+
>
73+
{{ i18n.ts.agree }}
74+
</MkSwitch>
4575
</MkFolder>
4676

4777
<MkFolder :defaultOpen="true">
4878
<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
49-
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
79+
<template #suffix>
80+
<i
81+
v-if="agreeNote" class="ti ti-check"
82+
style="color: var(--MI_THEME-success)"
83+
></i>
84+
</template>
5085

51-
<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
86+
<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{
87+
i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
5288

53-
<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
89+
<MkSwitch
90+
:modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree
91+
@update:modelValue="updateAgreeNote"
92+
>
93+
{{ i18n.ts.agree }}
94+
</MkSwitch>
5495
</MkFolder>
5596

5697
<MkFolder v-if="instance.enableAgeRestriction" :defaultOpen="true">
5798
<template #label>{{ i18n.ts.ageCheck }}</template>
58-
<template #suffix><i v-if="ageLimitAgreement" class="ti ti-check" style="color: var(--success)"></i></template>
99+
<template #suffix>
100+
<i
101+
v-if="ageLimitAgreement" class="ti ti-check"
102+
style="color: var(--MI_THEME-success)"
103+
></i>
104+
</template>
59105

60106
<span>{{ i18n.tsx.ageCheckDescription({ age: instance.ageRestrictionThreshold }) }}</span>
61107

62-
<MkSwitch v-model="ageLimitAgreement" style="margin-top: 16px;">{{ i18n.tsx.ageCheckYes({ age: instance.ageRestrictionThreshold }) }}</MkSwitch>
108+
<MkSwitch v-model="ageLimitAgreement" style="margin-top: 16px;">
109+
{{ i18n.tsx.ageCheckYes({ age:
110+
instance.ageRestrictionThreshold }) }}
111+
</MkSwitch>
63112
</MkFolder>
64113

65114
<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
66115

67116
<div class="_buttonsCenter">
68117
<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
69-
<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
118+
<MkButton
119+
inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue
120+
@click="emit('done')"
121+
>
122+
{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i>
123+
</MkButton>
70124
</div>
71125
</div>
72126
</MkSpacer>

‎packages/frontend/src/pages/admin/supporter.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ definePageMetadata({
8585

8686
<style lang="scss" module>
8787
.footer {
88-
-webkit-backdrop-filter: var(--blur, blur(15px));
89-
backdrop-filter: var(--blur, blur(15px));
88+
-webkit-backdrop-filter: var(--MI_THEME-blur, blur(15px));
89+
backdrop-filter: var(--MI_THEME-blur, blur(15px));
9090
}
9191
</style>

‎packages/frontend/src/pages/settings/notifications.note.vue

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
<template>
2-
<div class="_gaps_m">
3-
<MkPagination :pagination="noteNotificationPagination">
4-
<template #empty>
5-
<div class="_fullinfo">
6-
<img src="/static-assets/aira/info.png" class="_ghost"/>
7-
<div>{{ i18n.ts.noUsers }}</div>
8-
</div>
9-
</template>
10-
11-
<template #default="{ items }">
12-
<div class="_gaps_s">
13-
<div v-for="item in items" :key="item.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedNoteNotificationItems.includes(item.id) }]">
14-
<div :class="$style.userItemMain">
15-
<MkA :class="$style.userItemMainBody" :to="userPage(item.user)">
16-
<MkUserCardMini :user="item.user"/>
17-
</MkA>
18-
<button class="_button" :class="$style.userToggle" @click="toggleNoteNotificationItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
19-
<button class="_button" :class="$style.remove" @click="noteUnsubscribe(item.userId, $event)"><i class="ti ti-x"></i></button>
20-
</div>
21-
<div v-if="expandedNoteNotificationItems.includes(item.id)" :class="$style.userItemSub">
22-
<div>
23-
Created at:
24-
<MkTime :time="item.createdAt" mode="detail"/>
25-
</div>
2+
<div class="_gaps_m">
3+
<MkPagination :pagination="noteNotificationPagination">
4+
<template #empty>
5+
<div class="_fullinfo">
6+
<img src="/static-assets/aira/info.png" class="_ghost"/>
7+
<div>{{ i18n.ts.noUsers }}</div>
8+
</div>
9+
</template>
10+
11+
<template #default="{ items }">
12+
<div class="_gaps_s">
13+
<div v-for="item in items" :key="item.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedNoteNotificationItems.includes(item.id) }]">
14+
<div :class="$style.userItemMain">
15+
<MkA :class="$style.userItemMainBody" :to="userPage(item.user)">
16+
<MkUserCardMini :user="item.user"/>
17+
</MkA>
18+
<button class="_button" :class="$style.userToggle" @click="toggleNoteNotificationItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
19+
<button class="_button" :class="$style.remove" @click="noteUnsubscribe(item.userId, $event)"><i class="ti ti-x"></i></button>
20+
</div>
21+
<div v-if="expandedNoteNotificationItems.includes(item.id)" :class="$style.userItemSub">
22+
<div>
23+
Created at:
24+
<MkTime :time="item.createdAt" mode="detail"/>
2625
</div>
2726
</div>
2827
</div>
29-
</template>
30-
</MkPagination>
31-
</div>
28+
</div>
29+
</template>
30+
</MkPagination>
31+
</div>
3232
</template>
3333

3434
<script lang="ts" setup>
@@ -83,7 +83,7 @@ definePageMetadata({
8383
.userItemSub {
8484
padding: 6px 12px;
8585
font-size: 85%;
86-
color: var(--fgTransparentWeak);
86+
color: var(--MI_THEME-fgTransparentWeak);
8787
}
8888
8989
.userItemMainBody {
@@ -112,4 +112,5 @@ definePageMetadata({
112112
.chevron {
113113
transform: rotateX(180deg);
114114
}
115-
}</style>
115+
}
116+
</style>

‎packages/frontend/src/pages/settings/post-form.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ definePageMetadata(() => ({
162162
border-radius: 6px;
163163
164164
&:hover {
165-
background: var(--X5);
165+
background: var(--MI_THEME-X5);
166166
}
167167
}
168168

‎packages/frontend/src/pages/supporter.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232

3333
<script lang="ts" setup>
3434
import { onMounted, ref, computed } from 'vue';
35+
import { host } from '@@/js/config.js';
3536
import FormSection from '@/components/form/section.vue';
3637
import { i18n } from '@/i18n.js';
37-
import { host } from '@@/js/config.js';
3838
import { misskeyApi } from '@/scripts/misskey-api.js';
3939
import { instance } from '@/instance.js';
4040
import { userPage } from '@/filters/user.js';
@@ -81,12 +81,12 @@ definePageMetadata({
8181
display: flex;
8282
align-items: center;
8383
padding: 12px;
84-
background: var(--buttonBg);
84+
background: var(--MI_THEME-buttonBg);
8585
border-radius: 6px;
8686
8787
&:hover {
8888
text-decoration: none;
89-
background: var(--buttonHoverBg);
89+
background: var(--MI_THEME-buttonHoverBg);
9090
}
9191
}
9292

‎packages/frontend/src/ui/_common_/connection-status.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ onUnmounted(() => {
6060
display: flex;
6161
gap: 4px;
6262
z-index: v-bind(zIndex);
63-
bottom: calc(var(--minBottomSpacing) + var(--margin));
63+
bottom: calc(var(--MI_THEME-minBottomSpacing) + var(--margin));
6464
right: var(--margin);
6565
margin: 0;
6666
padding: 6px 8px;
@@ -75,11 +75,11 @@ onUnmounted(() => {
7575
}
7676
7777
.online {
78-
color: var(--accent);
78+
color: var(--MI_THEME-accent);
7979
}
8080
8181
.offline {
82-
color: var(--fg);
82+
color: var(--MI_THEME-fg);
8383
}
8484
8585
.icon {

0 commit comments

Comments
 (0)