13.0.0-rc.3

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (Thai)

* New translations ja-JP.yml (Italian)

* New translations ja-JP.yml (Italian)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (Thai)

* New translations ja-JP.yml (Chinese Traditional)

* New translations ja-JP.yml (Chinese Traditional)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Chinese Simplified)

* New translations ja-JP.yml (Chinese Traditional)

locales/de-DE.yml

@@ -931,12 +931,20 @@ undefined: "Undefiniert"
 assign: "Zuweisen"
 unassign: "Entfernen"
 color: "Farbe"
+manageCustomEmojis: "Benutzerdefinierte Emojis verwalten"
 _role:
   new: "Rolle erstellen"
   edit: "Rolle bearbeiten"
   name: "Rollenname"
   description: "Rollenbeschreibung"
   permission: "Rollenberechtigungen"
+  descriptionOfPermission: "<b>Moderatoren</b> können grundlegende Verwaltungsaufgaben erledigen.\n<b>Administratoren</b> können alle Einstellungen der Instanz verwalten."
+  assignTarget: "Zuweisungsart"
+  descriptionOfAssignTarget: "<b>Manuell</b> bedeutet, dass die Liste der Benutzer einer Rolle manuell verwaltet wird.\n<b>Konditionell</b> bedeutet, dass die Liste der Benutzer einer Rolle durch eine Liste an Konditionen automatisch verwaltet wird."
+  manual: "Manuell"
+  conditional: "Konditional"
+  condition: "Konditionen"
+  isConditionalRole: "Dies ist eine konditionale Rolle."
   isPublic: "Öffentliche Rolle"
   descriptionOfIsPublic: "Ist dies aktiviert, so kann jeder die Liste der Benutzer, die dieser Rolle zugewiesen sind, einsehen. Zusätzlich wird diese Rolle im Profil zugewiesener Benutzer angezeigt."
   options: "Optionen"
@@ -949,8 +957,16 @@ _role:
     gtlAvailable: "Kann auf die globale Chronik zugreifen"
     ltlAvailable: "Kann auf die lokale Chronik zugreifen"
     canPublicNote: "Kann öffentliche Notizen erstellen"
+    canInvite: "Einladungscodes für diese Instanz erstellen"
+    canManageCustomEmojis: "Benutzerdefinierte Emojis verwalten"
     driveCapacity: "Drive-Kapazität"
     antennaMax: "Maximale Anzahl an Antennen"
+  _condition:
+    isLocal: "Lokaler Benutzer"
+    isRemote: "Benutzer fremder Instanz"
+    and: "UND"
+    or: "ODER"
+    not: "NICHT"
 _sensitiveMediaDetection:
   description: "Ermöglicht eine Erleichterung der Servermoderation durch die automatische Erkennungen von NSFW-Medien unter Verwendung von Machine Learning. Hierdurch wird die Serverlast etwas erhöht."
   sensitivity: "Erkennungssensitivität"

locales/en-US.yml

@@ -931,12 +931,20 @@ undefined: "Undefined"
 assign: "Assign"
 unassign: "Unassign"
 color: "Color"
+manageCustomEmojis: "Manage Custom Emojis"
 _role:
   new: "New role"
   edit: "Edit role"
   name: "Role name"
   description: "Role description"
   permission: "Role permissions"
+  descriptionOfPermission: "<b>Moderators</b> can perform basic moderation operations.\n<b>Administrators</b> can change all settings of the instance."
+  assignTarget: "Assign target"
+  descriptionOfAssignTarget: "<b>Manual</b> to manually change who is part of this role and who is not.\n<b>Conditional</b> to have users be automatically assigned and removed from this role based on a set of conditions."
+  manual: "Manual"
+  conditional: "Conditional"
+  condition: "Conditions"
+  isConditionalRole: "This is a conditional role."
   isPublic: "Public role"
   descriptionOfIsPublic: "Anyone will be able to view a list of users assigned to this role. In addition, this role will be displayed in the profiles of assigned users."
   options: "Role options"
@@ -949,8 +957,23 @@ _role:
     gtlAvailable: "Viewing the global timeline"
     ltlAvailable: "Viewing the local timeline"
     canPublicNote: "Can send public notes"
+    canInvite: "Create instance invite codes"
+    canManageCustomEmojis: "Manage Custom Emojis"
     driveCapacity: "Drive capacity"
     antennaMax: "Maximum number of antennas"
+    wordMuteMax: "Maximum number of characters allowed in the word mute string"
+  _condition:
+    isLocal: "Local user"
+    isRemote: "Remote user"
+    createdLessThan: "Created less than"
+    createdMoreThan: "Created more than"
+    followersLessThanOrEq: "The number of followers is less than or equal to"
+    followersMoreThanOrEq: "The number of followers is greater than or equal to"
+    followingLessThanOrEq: "The number of accounts following is less than or equal to"
+    followingMoreThanOrEq: "The number of accounts following is greater than or equal to"
+    and: "AND"
+    or: "OR"
+    not: "NOT"
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."
   sensitivity: "Detection sensitivity"

locales/it-IT.yml

@@ -924,7 +924,51 @@ neverShow: "Non mostrare più"
 remindMeLater: "Rimanda"
 didYouLikeMisskey: "Ti piace Misskey?"
 pleaseDonate: "Misskey è il software libero utilizzato su {host}. Offrendo una donazione è più facile continuare a svilupparlo!"
+roles: "Ruoli"
+role: "Ruolo"
+normalUser: "Profilo standard"
+undefined: "Indefinito"
+assign: "Assegna"
+unassign: "Disassegna"
 color: "Colore"
+manageCustomEmojis: "Gestisci le emoji personalizzate"
+_role:
+  new: "Nuovo ruolo"
+  edit: "Modifica ruolo"
+  name: "Nome del ruolo"
+  description: "Descrizione del ruolo"
+  permission: "Permessi del ruolo"
+  descriptionOfPermission: "<b>Moderatori</b> possono svolgere le attività di moderazione basilari.\n<b>Amministratori</b> possono modificare la configurazione dell'istanza."
+  assignTarget: "Assegna il target"
+  descriptionOfAssignTarget: "<b>Manuale</b> per assegnare manualmente questo ruolo ai profili.\n<b>Condizionale</b> per assegnare o rimuovere automaticamente questo ruolo ai profili, secondo determinate condizioni."
+  manual: "Manuale"
+  conditional: "Condizionale"
+  condition: "Condizioni"
+  isConditionalRole: "Questo è un ruolo condizionato"
+  isPublic: "Ruolo pubblico"
+  descriptionOfIsPublic: "La lista di profili assegnati a questo ruolo è visibile a chiunque. Inoltre, il ruolo verrà mostrato nei relativi profili."
+  options: "Opzioni del ruolo"
+  baseRole: "Ruolo di base"
+  useBaseValue: "Eredita dal ruolo base"
+  chooseRoleToAssign: "Seleziona il ruolo da assegnare"
+  canEditMembersByModerator: "Consenti ai Moderatori di modificare i membri di questo ruolo"
+  descriptionOfCanEditMembersByModerator: "Se attivo, anche i Moderatori potranno assegnare o togliere questo ruolo. Altrimenti, se disattivo, potranno solo gli Amministratori."
+  _options:
+    gtlAvailable: "Disponibilità della Timeline Federata"
+    ltlAvailable: "Disponibilità della Timeline Locale"
+    canPublicNote: "Può scrivere Note con Visibilità Pubblica"
+    canInvite: "Genera codici di invito all'istanza"
+    canManageCustomEmojis: "Gestire le emoji personalizzate"
+    driveCapacity: "Capienza del Drive"
+    antennaMax: "Numero massimo di Antenne"
+  _condition:
+    isLocal: "Profilo locale"
+    isRemote: "Profilo remoto"
+    createdLessThan: "Creato meno di"
+    createdMoreThan: "Creato più di"
+    and: "E"
+    or: "O"
+    not: "NON"
 _sensitiveMediaDetection:
   description: "L'apprendimento automatico può essere utilizzato per individuare automaticamente i media sensibili da moderare. Il carico del server aumenta leggermente."
   sensitivity: "Sensibilità di rilevamento"

locales/th-TH.yml

@@ -926,15 +926,25 @@ didYouLikeMisskey: "คุณเคยชอบ Misskey ไหม?"
 pleaseDonate: "{host} ใช้ซอฟต์แวร์ฟรี Misskey เราขอขอบคุณการบริจาคของคุณอย่างสูงเพื่อให้การพัฒนา Misskey สามารถดำเนินต่อไปได้นะ!"
 roles: "บทบาท"
 role: "บทบาท"
+normalUser: "ผู้ใช้มาตรฐาน"
 undefined: "ไม่ได้กำหนด"
 assign: "กำหนด"
 unassign: "ยังไม่มอบหมาย"
 color: "สี"
+manageCustomEmojis: "จัดการอีโมจิแบบกำหนดเอง"
 _role:
   new: "บทบาทใหม่"
   edit: "แก้ไขบทบาท"
   name: "ชื่อบทบาท"
   description: "คำอธิบายบทบาท"
+  permission: "สิทธิ์ตามบทบาท"
+  descriptionOfPermission: "<b>ผู้ดูแลกลั่นกรองเนื้อหา</b> สามารถดำเนินการดูแลขั้นพื้นฐานได้นะ\n<b>ผู้ดูแลระบบ</b> สามารถเปลี่ยนการตั้งค่าทั้งหมดของอินสแตนซ์ได้นะ"
+  assignTarget: "กำหนดเป้าหมาย"
+  descriptionOfAssignTarget: "<b>แมนนวล</b> เพื่อเปลี่ยนผู้ที่เป็นส่วนหนึ่งของบทบาทนี้และใครที่ไม่ใช่ด้วยตนเอง\n<b>เงื่อนไข</b> เพื่อให้ผู้ใช้ได้รับการกำหนดและนำออกจากบทบาทนี้โดยอัตโนมัติตามเงื่อนไขชุดหนึ่ง"
+  manual: "ปรับเอง"
+  conditional: "มีเงื่อนไข"
+  condition: "เงื่อนไข"
+  isConditionalRole: "นี่คือบทบาทที่มีเงื่อนไข"
   isPublic: "บทบาทสาธารณะ"
   descriptionOfIsPublic: "ทุกคนสามารถดูได้ว่าผู้ใช้งานนั้นได้รับมอบหมายบทบาทด้วยหรือไม่ \n\nบทบาทจะแสดงในโปรไฟล์ของผู้ใช้ด้วย"
   options: "ตัวเลือกบทบาท"
@@ -947,8 +957,18 @@ _role:
     gtlAvailable: "การดูไทม์ไลน์ทั่วโลก"
     ltlAvailable: "การดูไทม์ไลน์ในท้องถิ่น"
     canPublicNote: "สามารถส่งโน้ตสาธารณะ"
+    canInvite: "สร้างรหัสเชิญอินสแตนซ์"
+    canManageCustomEmojis: "จัดการอีโมจิแบบกำหนดเอง"
     driveCapacity: "ความจุของไดรฟ์"
     antennaMax: "จำนวนสูงสุดของเสาอากาศ"
+  _condition:
+    isLocal: "ผู้ใช้ภายใน"
+    isRemote: "ผู้ใช้ระยะไกล"
+    createdLessThan: "สร้างน้อยกว่า"
+    createdMoreThan: "สร้างมากกว่า"
+    and: "และ"
+    or: "หรือ"
+    not: "ไม่"
 _sensitiveMediaDetection:
   description: "ลดความพยายามในการดูแลเซิร์ฟเวอร์ผ่านการจดจำสื่อ NSFW โดยอัตโนมัติผ่านการเรียนรู้ของเครื่อง การทำสิ่งนี้อาจจะเพิ่มภาระบนเซิร์ฟเวอร์เล็กน้อย"
   sensitivity: "การตรวจจับความไว"

locales/zh-CN.yml

@@ -931,41 +931,50 @@ undefined: "未定义"
 assign: "分配"
 unassign: "取消分配"
 color: "颜色"
+manageCustomEmojis: "管理自定义表情符号"
 _role:
   new: "创建角色"
   edit: "编辑角色"
-  name: "用户组名称"
-  description: "用户组的描述"
-  permission: "用户组的权限"
+  name: "角色名称"
+  description: "角色描述"
+  permission: "角色权限"
   descriptionOfPermission: "<b>监察员</b>可以执行基本的审核操作。\n<b>管理员</b>可以更改实例的所有设置。"
   assignTarget: "授权对象"
-  descriptionOfAssignTarget: "<b>手动</b>指手动选择谁被包括在这个用户组中。\n<b>符合条件</b>指设置条件以自动包括符合条件的用户。"
+  descriptionOfAssignTarget: "<b>手动</b>指手动选择谁被包括在这个角色中。\n<b>符合条件</b>指设置条件以自动包括符合条件的用户。"
   manual: "手动"
   conditional: "符合条件"
   condition: "条件"
-  isConditionalRole: "这是一个条件控制的用户组。"
-  isPublic: "公开用户组"
-  descriptionOfIsPublic: "任何人都可以看到分配该用户组的用户，用户的个人资料也将显示该用户组。"
+  isConditionalRole: "这是一个条件控制的角色。"
+  isPublic: "角色公开"
+  descriptionOfIsPublic: "任何人都可以看到分配该角色的用户。而用户的个人资料也将显示该角色。"
   options: "选项"
   baseRole: "基本角色"
   useBaseValue: "使用基本角色的值"
   chooseRoleToAssign: "选择要分配的角色"
-  canEditMembersByModerator: "允许版主编辑成员"
-  descriptionOfCanEditMembersByModerator: "如果选中，版主和管理员都能够为用户分配/取消分配角色。如果未选中，则只有管理员可以执行此操作。"
+  canEditMembersByModerator: "允许监察者编辑成员"
+  descriptionOfCanEditMembersByModerator: "如果选中，监察者和管理员都能够为用户分配/取消分配角色。如果未选中，则只有管理员可以执行此操作。"
   _options:
     gtlAvailable: "查看全局时间线"
     ltlAvailable: "查看本地时间线"
     canPublicNote: "允许公开发帖"
+    canInvite: "发放实例邀请码"
+    canManageCustomEmojis: "管理自定义表情符号"
     driveCapacity: "网盘容量"
     antennaMax: "可创建的最大天线数量"
+    wordMuteMax: "屏蔽词的字数限制"
+    webhookMax: "Webhook 创建数量限制"
   _condition:
     isLocal: "是本地用户"
     isRemote: "是远程用户"
     createdLessThan: "账户创建时间少于"
     createdMoreThan: "账户创建时间超过"
-    and: "全部符合"
-    or: "任一符合"
-    not: "不符合"
+    followersLessThanOrEq: "关注者不多于"
+    followersMoreThanOrEq: "关注者不少于"
+    followingLessThanOrEq: "关注中不多于"
+    followingMoreThanOrEq: "关注中不少于"
+    and: "符合以下全部条件"
+    or: "符合以下任一条件"
+    not: "不符合以下任何条件"
 _sensitiveMediaDetection:
   description: "可以使用机器学习技术自动检测敏感媒体，以便进行审核。服务器负载将略微增加。"
   sensitivity: "检测敏感度"

locales/zh-TW.yml

@@ -324,7 +324,7 @@ integration: "整合"
 connectService: "己連結"
 disconnectService: "己斷開 "
 enableLocalTimeline: "開啟本地時間軸"
-enableGlobalTimeline: "啟用公開時間軸"
+enableGlobalTimeline: "啟用全域時間軸"
 disablingTimelinesInfo: "為了方便，即使您關閉了時間線功能，管理員和審核員仍可以繼續使用。"
 registration: "註冊"
 enableRegistration: "開啟新使用者註冊"
@@ -388,7 +388,7 @@ aboutMisskey: "關於 Misskey"
 administrator: "管理員"
 token: "權杖"
 twoStepAuthentication: "兩階段驗證"
-moderator: "審核員"
+moderator: "監察員"
 moderation: "言論調節"
 nUsersMentioned: "提到了{n}"
 securityKey: "安全金鑰"
@@ -869,7 +869,7 @@ recommended: "推薦"
 check: "檢查"
 driveCapOverrideLabel: "更改這個使用者的雲端硬碟容量上限"
 driveCapOverrideCaption: "如果指定0以下的值，就會被取消。"
-requireAdminForView: "必須以管理者帳號登入才可以檢視。"
+requireAdminForView: "必須以管理員帳號登入才可以檢視。"
 isSystemAccount: "由系統自動建立與管理的帳號。"
 typeToConfirm: "要執行這項操作，請輸入 {x} "
 deleteAccount: "刪除帳號"
@@ -931,29 +931,49 @@ undefined: "未定義"
 assign: "指派"
 unassign: "取消指派"
 color: "顏色"
+manageCustomEmojis: "管理自訂表情符號"
 _role:
   new: "建立角色"
   edit: "編輯角色"
   name: "角色名稱"
   description: "角色描述 "
   permission: "角色的權限"
-  descriptionOfPermission: "<b>審核員</b>執行與審核相關的基本操作。\n<b>管理者</b>能變更實例的全部設定。"
+  descriptionOfPermission: "<b>審核員</b>執行與審核相關的基本操作。\n<b>管理員</b>能變更實例的全部設定。"
   assignTarget: "指派目標"
+  descriptionOfAssignTarget: "<b>手動</b>是以手動管理這個角色包含的人員。\n<b>符合條件</b>是設定條件以自動包含符合條件的使用者。"
   manual: "手動"
+  conditional: "符合條件"
   condition: "條件"
   isConditionalRole: "這是條件角色。"
   isPublic: "角色為公開"
+  descriptionOfIsPublic: "任何人都可以看到被指派了角色的使用者。此外，使用者的個人檔案將顯示這個角色。"
   options: "選項"
   baseRole: "基本角色"
   useBaseValue: "使用基本角色的值"
   chooseRoleToAssign: "選擇要指派的角色"
+  canEditMembersByModerator: "允許編輯監察員的成員"
+  descriptionOfCanEditMembersByModerator: "如果開啟，管理員與監察員都可以為使用者指派/解除指派該角色。如果關閉，則只有管理員可以執行。"
   _options:
+    gtlAvailable: "瀏覽全域時間軸"
+    ltlAvailable: "瀏覽本地時間軸"
+    canPublicNote: "允許公開貼文"
+    canInvite: "發行實例邀請碼"
+    canManageCustomEmojis: "管理自訂表情符號"
     driveCapacity: "雲端硬碟容量"
+    antennaMax: "可建立的天線數量"
+    webhookMax: "可建立的Webhook數"
   _condition:
     isLocal: "本地使用者"
     isRemote: "遠端使用者"
     createdLessThan: "自建立帳戶開始～以內"
     createdMoreThan: "自建立帳戶開始～經過"
+    followersLessThanOrEq: "追隨者人數在～以下"
+    followersMoreThanOrEq: "追隨者人數在～以上"
+    followingLessThanOrEq: "追隨人數在～以下"
+    followingMoreThanOrEq: "追隨人數在～以上"
+    and: "～和～"
+    or: "～或～"
+    not: "～否"
 _sensitiveMediaDetection:
   description: "您可以使用機器學習自動檢測敏感媒體並將其用於審核。 伺服器的負荷會稍微增加。"
   sensitivity: "檢測敏感度"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.0.0-rc.2",
+	"version": "13.0.0-rc.3",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

packages/frontend/src/components/MkPagination.vue

@@ -1,5 +1,11 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+<Transition
+	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+	mode="out-in"
+>
 	<MkLoading v-if="fetching"/>
 
 	<MkError v-else-if="error" @retry="init()"/>
@@ -14,15 +20,15 @@
 	</div>
 
 	<div v-else ref="rootEl">
-		<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
-			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+		<div v-show="pagination.reversed && more" key="_more_" class="_margin">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
 		<slot :items="items" :fetching="fetching || moreFetching"></slot>
-		<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
-			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+		<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
@@ -95,7 +101,7 @@ const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
 const {
-	enableInfiniteScroll
+	enableInfiniteScroll,
 } = defaultStore.reactiveState;
 
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
@@ -292,7 +298,7 @@ const prepend = (item: MisskeyEntity): void => {
 
 function unshiftItems(newItems: MisskeyEntity[]) {
 	const length = newItems.length + items.value.length;
-	items.value = [ ...newItems, ...items.value ].slice(0, props.displayLimit);
+	items.value = [...newItems, ...items.value].slice(0, props.displayLimit);
 
 	if (length >= props.displayLimit) more.value = true;
 }
@@ -331,7 +337,7 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
-	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl?.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
+	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
 });
 
 function toBottom() {
@@ -372,20 +378,18 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
+<style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
 	transition: opacity 0.125s ease;
 }
-.fade-enter-from,
-.fade-leave-to {
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
 	opacity: 0;
 }
 
-.cxiknjgy {
-	> .button {
-		margin-left: auto;
-		margin-right: auto;
-	}
+.more {
+	margin-left: auto;
+	margin-right: auto;
 }
 </style>

packages/frontend/src/components/MkPopupMenu.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="modal.close()"/>
 </MkModal>
 </template>
 
@@ -26,12 +26,10 @@ const emit = defineEmits<{
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss" scoped>
-.sfhdhdhq {
-	&.drawer {
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-	}
+<style lang="scss" module>
+.drawer {
+	border-radius: 24px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
 }
 </style>

packages/frontend/src/components/MkPostForm.vue

@@ -1,66 +1,65 @@
 <template>
 <div
-	class="gafaadew"
-	:class="{ modal, _popup: modal }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
+	<header :class="$style.header">
+		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
+			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
 		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
+		<div :class="$style.headerRight">
+			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
+			<span v-if="localOnly" :class="$style.localOnly"><i class="ti ti-world-off"></i></span>
+			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
 				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
 				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
 				<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<button v-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div class="inner">
+			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.previewButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
 					<template v-else>{{ submitText }}</template>
-					<i :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
 				</div>
 			</button>
 		</div>
 	</header>
-	<div class="form" :class="{ fixed }">
-		<MkNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<MkNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
+	<div :class="[$style.form]">
+		<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
+		<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
+		<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
+		<div v-if="visibility === 'specified'" :class="$style.toSpecified">
 			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
+			<div :class="$style.visibleUsers">
+				<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+					<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
 				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+				<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 			</div>
 		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+		<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+		<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 		<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
-		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
+		<XNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+		<footer :class="$style.footer">
+			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-tooltip="i18n.ts.emoji" class="_button" :class="$style.footerButton" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
 		</footer>
 		<datalist id="hashtags">
 			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
@@ -742,306 +741,275 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.gafaadew {
+<style lang="scss" module>
+.root {
 	position: relative;
 
 	&.modal {
 		width: 100%;
 		max-width: 520px;
 	}
+}
 
-	> header {
-		z-index: 1000;
-		height: 66px;
+.header {
+	z-index: 1000;
+	height: 66px;
+}
 
-		> .cancel {
-			padding: 0;
-			font-size: 1em;
-			width: 64px;
-			line-height: 66px;
-		}
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	width: 64px;
+	line-height: 66px;
+}
 
-		> .account {
-			height: 100%;
-			aspect-ratio: 1/1;
-			display: inline-flex;
-			vertical-align: bottom;
+.account {
+	height: 100%;
+	aspect-ratio: 1/1;
+	display: inline-flex;
+	vertical-align: bottom;
+}
 
-			> .avatar {
-				width: 28px;
-				height: 28px;
-				margin: auto;
-			}
-		}
+.avatar {
+	width: 28px;
+	height: 28px;
+	margin: auto;
+}
 
-		> .right {
-			position: absolute;
-			top: 0;
-			right: 0;
+.headerRight {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
 
-			> .text-count {
-				opacity: 0.7;
-				line-height: 66px;
-			}
+.textCount {
+	opacity: 0.7;
+	line-height: 66px;
+}
 
-			> .visibility {
-				height: 34px;
-				width: 34px;
-				margin: 0 0 0 8px;
+.visibility {
+	height: 34px;
+	width: 34px;
+	margin: 0 0 0 8px;
 
-				& + .localOnly {
-					margin-left: 0 !important;
-				}
-			}
+	& + .localOnly {
+		margin-left: 0 !important;
+	}
+}
 
-			> .local-only {
-				margin: 0 0 0 12px;
-				opacity: 0.7;
-			}
+.localOnly {
+	margin: 0 0 0 12px;
+	opacity: 0.7;
+}
 
-			> .preview {
-				display: inline-block;
-				padding: 0;
-				margin: 0 8px 0 0;
-				font-size: 16px;
-				width: 34px;
-				height: 34px;
-				border-radius: 6px;
+.previewButton {
+	display: inline-block;
+	padding: 0;
+	margin: 0 8px 0 0;
+	font-size: 16px;
+	width: 34px;
+	height: 34px;
+	border-radius: 6px;
 
-				&:hover {
-					background: var(--X5);
-				}
+	&:hover {
+		background: var(--X5);
+	}
 
-				&.active {
-					color: var(--accent);
-				}
-			}
+	&.previewButtonActive {
+		color: var(--accent);
+	}
+}
 
-			> .submit {
-				margin: 16px 16px 16px 0;
-				vertical-align: bottom;
+.submit {
+	margin: 16px 16px 16px 0;
+	vertical-align: bottom;
 
-				&:disabled {
-					opacity: 0.7;
-				}
+	&:disabled {
+		opacity: 0.7;
+	}
 
-				&.posting {
-					cursor: wait;
-				}
+	&.posting {
+		cursor: wait;
+	}
 
-				&:not(:disabled):hover {
-					> .inner {
-						background: linear-gradient(90deg, var(--X8), var(--X8));
-					}
-				}
-
-				&:not(:disabled):active {
-					> .inner {
-						background: linear-gradient(90deg, var(--X8), var(--X8));
-					}
-				}
-
-				> .inner {
-					padding: 0 12px;
-					line-height: 34px;
-					font-weight: bold;
-					border-radius: 4px;
-					font-size: 0.9em;
-					min-width: 90px;
-					box-sizing: border-box;
-					color: var(--fgOnAccent);
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-
-					> i {
-						margin-left: 6px;
-					}
-				}
-			}
+	&:not(:disabled):hover {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
 	}
 
-	> .form {
-		> .preview {
-			padding: 16px;
+	&:not(:disabled):active {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
+	}
+}
 
-		> .with-quote {
-			margin: 0 0 8px 0;
-			color: var(--accent);
+.submitInner {
+	padding: 0 12px;
+	line-height: 34px;
+	font-weight: bold;
+	border-radius: 4px;
+	font-size: 0.9em;
+	min-width: 90px;
+	box-sizing: border-box;
+	color: var(--fgOnAccent);
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+}
 
-			> button {
-				padding: 4px 8px;
-				color: var(--accentAlpha04);
+.form {
+}
 
-				&:hover {
-					color: var(--accentAlpha06);
-				}
+.preview {
+	padding: 16px 20px 0 20px;
+}
 
-				&:active {
-					color: var(--accentDarken30);
-				}
-			}
-		}
+.targetNote {
+	padding: 0 20px 16px 20px;
+}
 
-		> .to-specified {
-			padding: 6px 24px;
-			margin-bottom: 8px;
-			overflow: auto;
-			white-space: nowrap;
+.withQuote {
+	margin: 0 0 8px 0;
+	color: var(--accent);
+}
 
-			> .visibleUsers {
-				display: inline;
-				top: -1px;
-				font-size: 14px;
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
 
-				> button {
-					padding: 4px;
-					border-radius: 8px;
-				}
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
 
-				> span {
-					margin-right: 14px;
-					padding: 8px 0 8px 8px;
-					border-radius: 8px;
-					background: var(--X4);
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
 
-					> button {
-						padding: 4px 8px;
-					}
-				}
-			}
-		}
+.hasNotSpecifiedMentions {
+	margin: 0 20px 16px 20px;
+}
 
-		> .hasNotSpecifiedMentions {
-			margin: 0 20px 16px 20px;
-		}
+.cw,
+.hashtags,
+.text {
+	display: block;
+	box-sizing: border-box;
+	padding: 0 24px;
+	margin: 0;
+	width: 100%;
+	font-size: 16px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: var(--fg);
+	font-family: inherit;
 
-		> .cw,
-		> .hashtags,
-		> .text {
-			display: block;
-			box-sizing: border-box;
-			padding: 0 24px;
-			margin: 0;
-			width: 100%;
-			font-size: 16px;
-			border: none;
-			border-radius: 0;
-			background: transparent;
-			color: var(--fg);
-			font-family: inherit;
+	&:focus {
+		outline: none;
+	}
 
-			&:focus {
-				outline: none;
-			}
+	&:disabled {
+		opacity: 0.5;
+	}
+}
 
-			&:disabled {
-				opacity: 0.5;
-			}
-		}
+.cw {
+	z-index: 1;
+	padding-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
 
-		> .cw {
-			z-index: 1;
-			padding-bottom: 8px;
-			border-bottom: solid 0.5px var(--divider);
-		}
+.hashtags {
+	z-index: 1;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-top: solid 0.5px var(--divider);
+}
 
-		> .hashtags {
-			z-index: 1;
-			padding-top: 8px;
-			padding-bottom: 8px;
-			border-top: solid 0.5px var(--divider);
-		}
+.text {
+	max-width: 100%;
+	min-width: 100%;
+	min-height: 90px;
 
-		> .text {
-			max-width: 100%;
-			min-width: 100%;
-			min-height: 90px;
+	&.withCw {
+		padding-top: 8px;
+	}
+}
 
-			&.withCw {
-				padding-top: 8px;
-			}
-		}
+.footer {
+	padding: 0 16px 16px 16px;
+}
 
-		> footer {
-			padding: 0 16px 16px 16px;
+.footerButton {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	font-size: 1em;
+	width: 46px;
+	height: 46px;
+	border-radius: 6px;
 
-			> button {
-				display: inline-block;
-				padding: 0;
-				margin: 0;
-				font-size: 1em;
-				width: 46px;
-				height: 46px;
-				border-radius: 6px;
+	&:hover {
+		background: var(--X5);
+	}
 
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-		}
+	&.footerButtonActive {
+		color: var(--accent);
 	}
 }
 
 @container (max-width: 500px) {
-	.gafaadew {
-		> header {
-			height: 50px;
+	.header {
+		height: 50px;
 
-			> .cancel {
-				width: 50px;
+		> .cancel {
+			width: 50px;
+			line-height: 50px;
+		}
+
+		> .headerRight {
+			> .textCount {
 				line-height: 50px;
 			}
 
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
-
-				> .submit {
-					margin: 8px;
-				}
+			> .submit {
+				margin: 8px;
 			}
 		}
+	}
 
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
+	.toSpecified {
+		padding: 6px 16px;
+	}
 
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
+	.cw,
+	.hashtags,
+	.text {
+		padding: 0 16px;
+	}
 
-			> .text {
-				min-height: 80px;
-			}
+	.text {
+		min-height: 80px;
+	}
 
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
+	.footer {
+		padding: 0 8px 8px 8px;
 	}
 }
 
 @container (max-width: 310px) {
-	.gafaadew {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-					height: 44px;
-				}
-			}
-		}
+	.footerButton {
+		font-size: 14px;
+		width: 44px;
+		height: 44px;
 	}
 }
 </style>

packages/frontend/src/components/MkSubNoteContent.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed }">
-	<div class="body">
+<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
+	<div :class="$style.body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
-		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
@@ -15,8 +15,8 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<MkPoll :note="note"/>
 	</details>
-	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
-		<span>{{ i18n.ts.showMore }}</span>
+	<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
+		<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
 	</button>
 </div>
 </template>
@@ -39,23 +39,10 @@ const collapsed = $ref(
 	));
 </script>
 
-<style lang="scss" scoped>
-.wrmlmaau {
+<style lang="scss" module>
+.root {
 	overflow-wrap: break-word;
 
-	> .body {
-		> .reply {
-			margin-right: 6px;
-			color: var(--accent);
-		}
-
-		> .rp {
-			margin-left: 4px;
-			font-style: oblique;
-			color: var(--renote);
-		}
-	}
-
 	&.collapsed {
 		position: relative;
 		max-height: 9em;
@@ -70,7 +57,7 @@ const collapsed = $ref(
 			height: 64px;
 			background: linear-gradient(0deg, var(--panel), var(--X15));
 
-			> span {
+			> .fadeLabel {
 				display: inline-block;
 				background: var(--panel);
 				padding: 6px 10px;
@@ -80,11 +67,26 @@ const collapsed = $ref(
 			}
 
 			&:hover {
-				> span {
+				> .fadeLabel {
 					background: var(--panelHighlight);
 				}
 			}
 		}
 	}
 }
+
+.body {
+
+}
+
+.reply {
+	margin-right: 6px;
+	color: var(--accent);
+}
+
+.rp {
+	margin-left: 4px;
+	font-style: oblique;
+	color: var(--renote);
+}
 </style>

packages/frontend/src/components/MkToast.vue

@@ -49,7 +49,7 @@ onMounted(() => {
 	transform: translateY(-100%);
 }
 
-> .root {
+.root {
 	position: fixed;
 	left: 0;
 	right: 0;