12.41.2

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

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (English)

* New translations ja-JP.yml (Spanish)

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

* New translations ja-JP.yml (Spanish)

* New translations ja-JP.yml (Korean)

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

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

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

* New translations ja-JP.yml (Arabic)

* New translations ja-JP.yml (Arabic)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (Arabic)

* New translations ja-JP.yml (French)

* New translations ja-JP.yml (German)

* New translations ja-JP.yml (English)

locales/ar-SA.yml

@@ -33,6 +33,7 @@ copyLink: "انسخ الرابط"
 delete: "حذف"
 deleteAndEdit: "إزالة وإعادة الصياغة"
 addToList: "أضفه إلى قائمة"
+sendMessage: "أرسل رسالة"
 copyUsername: "انسخ اسم المستخدم"
 reply: "رد"
 loadMore: "عرض المزيد"
@@ -57,17 +58,20 @@ retry: "حاول مجددًا"
 enterListName: "اسم القائمة"
 privacy: "الخصوصية"
 makeFollowManuallyApprove: "القبول يدويا طلبات الإشتراك"
+defaultNoteVisibility: "مدى الرؤية الافتراضي"
 follow: "تابِع"
 followRequest: "طلب اشتراك"
 followRequests: "طلبات الإشتراك"
 unfollow: "إلغاء الاشتراك"
 followRequestPending: "طلبات الإشتراك المعلّقة"
+unrenote: "إلغاء مشاركة الملاحظة"
 quote: "اقتبس"
 pinnedNote: "ملاحظة مدبسة"
 you: "أنت"
 clickToShow: "اضغط للعرض"
 sensitive: "محتوى حساس"
 add: "إضافة"
+rememberNoteVisibility: "تذكر إعدادت مدى رؤية الملاحظات"
 enterFileName: "ادخل اسم الملف"
 mute: "اكتم"
 unmute: "إلغاء الكتم"
@@ -227,6 +231,7 @@ manageAntennas: "إدارة الهوائيات"
 name: "الإسم"
 antennaSource: "مصدر الهوائي"
 antennaKeywords: "الكلمات المفتاحية للإستقبال"
+withReplies: "بالردود"
 notesAndReplies: "الملاحظات والردود"
 withFiles: "بالمرفقات"
 silence: "اكتم"
@@ -250,6 +255,7 @@ unregister: "إلغاء التسجيل"
 passwordLessLogin: "لِج مِن دون كلمة سرية"
 resetPassword: "أعد تعيين كلمتك السرية"
 newPasswordIs: "كلمتك السرية الجديدة هي {password}"
+autoNoteWatch: "راقب الملاحظات تلقائيا"
 share: "شارِك"
 notFound: "غير موجود"
 help: "المساعدة"
@@ -271,6 +277,8 @@ next: "التالية"
 retype: "أعد الكتابة"
 noteOf: "ملاحظات {user}"
 inviteToGroup: "دعوة إلى فريق"
+noMessagesYet: "ليس هناك رسائل بعد"
+newMessageExists: "لقد تلقيت رسالة جديدة"
 invitationCode: "رمز الدعوة"
 checking: "التحقق جارٍ"
 available: "متوفر"
@@ -288,6 +296,7 @@ uiLanguage: "لغة واجهة المستخدم"
 aboutX: "عن {x}"
 useOsNativeEmojis: "استخدم الإيموجيات الخاصة بنظام التشغيل"
 youHaveNoGroups: "لا تمتلك أية فِرَق"
+noHistory: "السجل فارغ"
 doing: "انتظر لحظة"
 category: "الفئات"
 tags: "الوسوم"
@@ -330,10 +339,15 @@ rooms: "الغرفة"
 relays: "المُرَحلات"
 addRelay: "إضافة مُرحّل"
 addedRelays: "المرحلات التي تم إضافتها"
+deletedNote: "ملاحظة محذوفة"
+invisibleNote: "ملاحظة مخفية"
 _theme:
   explore: "استكشف قوالب المظهر"
+  keys:
+    messageBg: "خلفية الدردشة"
 _sfx:
   note: "الملاحظات"
+  noteMy: "ملاحظتي"
   notification: "الإشعارات"
   chat: "الدردشة"
 _ago:
@@ -409,6 +423,7 @@ _profile:
   username: "اسم المستخدم"
   youCanIncludeHashtags: "يمكنك أيضًا إضافة وسوم إلى نبذتك التعريفية."
 _exportOrImport:
+  allNotes: "كل الملاحظات"
   followingList: "المتابَعون"
   muteList: "اكتم"
   blockingList: "احجب"
@@ -426,6 +441,7 @@ _rooms:
     default: "افتراضي"
   _furnitures:
     monitor: "شاشة التحكم"
+    banknote: "أوراق نقدية"
 _pages:
   blocks:
     image: "الصور"
@@ -453,6 +469,8 @@ _pages:
     types:
       array: "القوائم"
 _notification:
+  youGotMessagingMessageFromUser: "لقد تلقيت رسالة مِن {name}"
+  youGotMessagingMessageFromGroup: "لقد أرسِلَت رسالة إلى الفريق {name}"
   youWereFollowed: "يتابعك"
 _deck:
   _columns:

locales/de-DE.yml

@@ -523,6 +523,9 @@ themeEditor: "Farbthemen-Editor"
 description: "Beschreibung"
 author: "Autor"
 leaveConfirm: "Es gibt unspeicherte Änderungen. Möchtest du diese verwerfen?"
+manage: "Verwaltung"
+plugins: "Plugins"
+pluginInstallWarn: "Installiere nur vertrauenswürdige Plugins."
 deck: "Deck"
 undeck: "Deck verlassen"
 _theme:
@@ -1166,6 +1169,7 @@ _notification:
 _deck:
   alwaysShowMainColumn: "Hauptspalte immer zeigen"
   columnAlign: "Spalten ausrichten"
+  addColumn: "Spalte hinzufügen"
   _columns:
     widgets: "Widgets"
     notifications: "Benachrichtigungen"

locales/en-US.yml

@@ -523,6 +523,9 @@ themeEditor: "Theme editor"
 description: "Description"
 author: "Author"
 leaveConfirm: "There are unsaved changes. Do you want to discard them?"
+manage: "Management"
+plugins: "Plugins"
+pluginInstallWarn: "Please do not install untrustworthy plugins."
 deck: "Deck"
 undeck: "Leave Deck"
 _theme:
@@ -1166,6 +1169,7 @@ _notification:
 _deck:
   alwaysShowMainColumn: "Always show main column"
   columnAlign: "Align columns"
+  addColumn: "Add column"
   _columns:
     widgets: "Widgets"
     notifications: "Notifications"

locales/es-ES.yml

@@ -523,6 +523,9 @@ themeEditor: "Editor de temas"
 description: "Descripción"
 author: "Autor"
 leaveConfirm: "Hay modificaciones sin guardar. ¿Desea descartarlas?"
+manage: "Administrar"
+plugins: "Plugins"
+pluginInstallWarn: "Por favor no instale plugins que no son de confianza"
 _theme:
   explore: "Explorar temas"
   install: "Instalar tema"
@@ -573,6 +576,27 @@ _theme:
     divider: "Divisor"
     scrollbarHandle: "Cuadro de la barra de desplazamiento"
     scrollbarHandleHover: "Cuadro de la barra de desplazamiento (hover)"
+    dateLabelFg: "Texto de la etiqueta de fecha"
+    infoBg: "Fondo de información"
+    infoFg: "Texto de información"
+    infoWarnBg: "Fondo de advertencias"
+    infoWarnFg: "Texto de advertencias"
+    cwBg: "Fondo del botón CW"
+    cwFg: "Texto del botón CW"
+    cwHoverBg: "Fondo del botón CW (hover)"
+    toastBg: "Fondo de notificaciones"
+    toastFg: "Texto de notificaciones"
+    buttonBg: "Fondo de botón"
+    buttonHoverBg: "Fondo de botón (hover)"
+    inputBorder: "Borde de los campos de entrada"
+    listItemHoverBg: "Fondo de elemento de listas (hover)"
+    driveFolderBg: "Fondo de capeta del drive"
+    wallpaperOverlay: "Transparencia del fondo de pantalla"
+    badge: "Medalla"
+    messageBg: "Fondo de chat"
+    accentDarken: "Acento (oscuro)"
+    accentLighten: "Acento (claro)"
+    fgHighlighted: "Texto resaltado"
 _sfx:
   note: "Notas"
   noteMy: "Nota (a mí mismo)"
@@ -686,6 +710,7 @@ _widgets:
   rss: "Lector RSS"
   activity: "Actividad"
   photos: "Fotos"
+  digitalClock: "Reloj digital"
 _cw:
   hide: "Ocultar"
   show: "Ver más"
@@ -1140,7 +1165,10 @@ _notification:
   yourFollowRequestAccepted: "Tu solicitud de seguimiento fue aceptada"
   youWereInvitedToGroup: "Invitado al grupo"
 _deck:
+  alwaysShowMainColumn: "Siempre mostrar la columna principal"
+  columnAlign: "Alinear columnas"
   _columns:
+    widgets: "Widgets"
     notifications: "Notificaciones"
     tl: "Linea de tiempo"
     antenna: "Antenas"

locales/fr-FR.yml

@@ -516,6 +516,14 @@ visibility: "Visibilité"
 poll: "Sondage"
 useCw: "Masquer le contenu"
 fixedWidgetsPosition: "Rendre la position du widget fixe"
+enablePlayer: "Activer le lecteur vidéo"
+disablePlayer: "Désactiver le lecteur vidéo"
+expandTweet: "Étendre le tweet"
+themeEditor: "Éditeur de thèmes"
+description: "Description"
+author: "Auteur·rice"
+manage: "Gestion"
+plugins: "Extensions"
 _theme:
   explore: "Explorer les thèmes"
   install: "Installer un thème"
@@ -524,12 +532,28 @@ _theme:
   installed: "{name} a été installé"
   alreadyInstalled: "Ce thème est déjà installé"
   invalid: "Le format du thème n'est pas valide"
+  make: "Créer un thème"
+  base: "Base"
   defaultValue: "Valeur par défaut"
+  color: "Couleur"
   func: "Fonction"
+  argument: "Argument"
+  alpha: "Transparence"
+  darken: "Assombrir"
   keys:
+    bg: "Arrière-plan"
+    fg: "Texte"
+    focus: "Mise au point"
+    indicator: "Indicateur"
+    panel: "Panneau"
+    shadow: "Ombre"
+    header: "Entête"
+    navBg: "Fond de la barre latérale"
+    hashtag: "Hashtags"
     mention: "Mentionner"
     renote: "Renote"
     divider: "Séparateur"
+    messageBg: "Arrière plan de la discussion"
 _sfx:
   note: "Nouvelle note"
   noteMy: "Ma note"
@@ -891,7 +915,7 @@ _pages:
         pushEvent: "Envoyer un évènement"
         _pushEvent:
           event: "Nom de l’évènement"
-          message: "Message à afficher lorsque appuyé"
+          message: "Message à afficher lorsqu’il est activé"
           variable: "Variable à envoyer"
           no-variable: "Rien"
         callAiScript: "Appeler AiScript"
@@ -1097,7 +1121,10 @@ _notification:
   yourFollowRequestAccepted: "Votre demande d’abonnement a été accepté"
   youWereInvitedToGroup: "Invité au groupe"
 _deck:
+  alwaysShowMainColumn: "Toujours afficher la colonne principale"
+  columnAlign: "Aligner les colonnes"
   _columns:
+    widgets: "Widgets"
     notifications: "Notifications"
     tl: "Fil"
     antenna: "Antennes"

locales/ja-JP.yml

@@ -528,6 +528,7 @@ plugins: "プラグイン"
 pluginInstallWarn: "信頼できないプラグインはインストールしないでください。"
 deck: "デッキ"
 undeck: "デッキ解除"
+useBlurEffectForModal: "モーダルにぼかし効果を使用"
 
 _theme:
   explore: "テーマを探す"
@@ -1206,6 +1207,7 @@ _notification:
 _deck:
   alwaysShowMainColumn: "常にメインカラムを表示"
   columnAlign: "カラムの寄せ"
+  addColumn: "カラムを追加"
 
   _columns:
     widgets: "ウィジェット"

locales/ko-KR.yml

@@ -511,9 +511,23 @@ addedRelays: "추가된 릴레이"
 serviceworkerInfo: "푸시 알림을 수행하려면 활성화해야 합니다."
 deletedNote: "삭제된 노트"
 invisibleNote: "비공개 노트"
+enableInfiniteScroll: "자동으로 좀 더 보기"
 visibility: "공개 범위"
 poll: "투표"
 useCw: "내용 숨기기"
+fixedWidgetsPosition: "위젯의 위치 고정"
+enablePlayer: "플레이어 열기"
+disablePlayer: "플레이어 닫기"
+expandTweet: "트윗 확장하기"
+themeEditor: "테마 에디터"
+description: "설명"
+author: "작성자"
+leaveConfirm: "저장하지 않은 변경사항이 있습니다. 취소하시겠습니까?"
+manage: "관리"
+plugins: "플러그인"
+pluginInstallWarn: "신뢰할 수 없는 플러그인은 설치하지 마십시오."
+deck: "덱"
+undeck: "덱 해제"
 _theme:
   explore: "테마 찾아보기"
   install: "테마 설치"
@@ -522,8 +536,18 @@ _theme:
   installed: "{name} 테마가 설치되었습니다"
   alreadyInstalled: "이미 설치된 테마입니다"
   invalid: "테마 형식이 올바르지 않습니다"
+  make: "테마 만들기"
+  base: "베이스"
+  addConstant: "상수 추가"
+  constant: "상수"
   defaultValue: "기본값"
+  color: "색"
+  refProp: "프로퍼티를 참조"
+  refConst: "상수를 참조"
+  key: "키"
   func: "함수"
+  funcKind: "함수 종류"
+  argument: "매개변수"
   keys:
     mention: "멘션"
     renote: "Renote"

locales/zh-CN.yml

@@ -46,7 +46,7 @@ youGotNewFollower: "你有新的关注者"
 receiveFollowRequest: "您收到了关注请求"
 followRequestAccepted: "您的关注请求被通过了"
 mention: "提及"
-mentions: "提到我的"
+mentions: "提及"
 directNotes: "私信"
 importAndExport: "导入和导出"
 import: "导入"
@@ -523,6 +523,9 @@ themeEditor: "主题编辑器"
 description: "描述"
 author: "作者"
 leaveConfirm: "存在未保存的更改。要放弃更改吗？"
+manage: "管理"
+plugins: "插件"
+pluginInstallWarn: "请不要安装不明来源的插件"
 deck: "Deck"
 undeck: "取消Deck"
 _theme:
@@ -534,17 +537,66 @@ _theme:
   alreadyInstalled: "此主题已经安装"
   invalid: "主题格式错误"
   make: "主题制作"
+  base: "基于"
+  addConstant: "添加常量"
   constant: "常量"
   defaultValue: "默认值"
   color: "颜色"
+  refProp: "查看属性"
+  refConst: "查看常量"
+  key: "主要"
   func: "函数"
+  funcKind: "功能类型"
+  argument: "参数"
+  basedProp: "基于的属性名称"
   alpha: "不透明度"
+  darken: "暗色"
+  lighten: "亮色"
+  inputConstantName: "请输入常量名称"
+  importInfo: "您可以在此处粘贴主题代码，将其导入到编辑器中"
+  deleteConstantConfirm: "确定要删除常量{const}吗?"
   keys:
-    header: "页眉"
+    accent: "强调色"
+    bg: "背景"
+    fg: "文本"
+    focus: "聚焦"
+    indicator: "标记"
+    panel: "面板"
+    shadow: "阴影"
+    header: "顶栏"
     navBg: "侧边栏背景"
+    navFg: "侧栏文本"
+    navHoverFg: "侧栏文本（悬停）"
+    navActive: "侧栏文本（活动）"
+    navIndicator: "侧栏标记"
+    link: "链接"
+    hashtag: "话题标签"
     mention: "提及"
+    mentionMe: "提及"
     renote: "转发"
+    modalBg: "模块背景"
     divider: "分割线"
+    scrollbarHandle: "滚动条"
+    scrollbarHandleHover: "滚动条（悬停）"
+    dateLabelFg: "日期标签文字"
+    infoBg: "信息背景"
+    infoFg: "信息文本"
+    infoWarnBg: "警告背景"
+    infoWarnFg: "警告文本"
+    cwBg: "CW 按钮背景"
+    cwFg: "CW 按钮文本"
+    cwHoverBg: "CW 按钮背景（悬停）"
+    toastBg: "吐司提示背景"
+    toastFg: "土司提示文本"
+    buttonBg: "按钮背景"
+    buttonHoverBg: "按钮背景（悬停）"
+    inputBorder: "输入框边框"
+    listItemHoverBg: "下拉列表项目背景（悬停）"
+    driveFolderBg: "驱动器文件夹背景"
+    wallpaperOverlay: "壁纸叠加层"
+    badge: "徽章"
+    messageBg: "聊天背景"
+    fgHighlighted: "高亮显示文本"
 _sfx:
   note: "帖子"
   noteMy: "我的帖子"
@@ -1121,5 +1173,5 @@ _deck:
     tl: "时间线"
     antenna: "天线"
     list: "列表"
-    mentions: "提到我的"
+    mentions: "提及"
     direct: "指定用户"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.41.1",
+	"version": "12.41.2",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -45,7 +45,7 @@
 		"@fortawesome/vue-fontawesome": "0.1.10",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
-		"@koa/router": "9.3.1",
+		"@koa/router": "9.0.1",
 		"@sinonjs/fake-timers": "6.0.1",
 		"@syuilo/aiscript": "0.7.2",
 		"@types/bcryptjs": "2.4.2",

src/client/components/deck/tl-column.vue

@@ -95,7 +95,7 @@ export default Vue.extend({
 			});
 			if (canceled) {
 				if (this.column.tl == null) {
-					this.setType();
+					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
 				}
 				return;
 			}

src/client/components/dialog.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-dialog" :class="{ iconOnly }">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="onBgClick" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
 		<div class="main" ref="main" v-if="show">
@@ -245,16 +245,6 @@ export default Vue.extend({
 		width: initial;
 	}
 
-	> .bg {
-		display: block;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0,0,0,0.7);
-	}
-
 	> .main {
 		display: block;
 		position: fixed;

src/client/components/modal.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-modal" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
@@ -60,13 +60,7 @@ export default Vue.extend({
 
 .mk-modal {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}
 
 	> .content {

src/client/components/popup.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-popup" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="close()" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
@@ -128,13 +128,7 @@ export default Vue.extend({
 
 .mk-popup {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}
 
 	> .content {

src/client/components/post-form-dialog.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+<div class="ulveipgl">
 	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
-		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
 	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
 		<transition :name="$store.state.device.animation ? 'form' : ''" appear
@@ -119,16 +119,9 @@ export default Vue.extend({
 	opacity: 0;
 }
 
-.ulveipglmagnxfgvitaxyszerjwiqmwl {
+.ulveipgl {
 	> .bg {
-		display: block;
-		position: fixed;
 		z-index: 10000;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(#000, 0.7);
 	}
 
 	> .main {

src/client/components/sidebar.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mvcprjjd">
 	<transition name="nav-back">
-		<div class="nav-back"
+		<div class="nav-back _modalBg"
 			v-if="showing"
 			@click="showing = false"
 			@touchstart="showing = false"
@@ -320,13 +320,7 @@ export default Vue.extend({
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
 	> .nav-back {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 1001;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg);
 	}
 
 	> .nav {

src/client/components/url-preview-popup.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }">
+<div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
 	<mk-url-preview :url="url"/>
 </div>
 </template>

src/client/components/user-preview.vue

@@ -1,6 +1,6 @@
 <template>
 <transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-	<div v-if="show" class="fxxzrfni _panel" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
+	<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
 		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">

src/client/init.ts

@@ -98,44 +98,22 @@ const html = document.documentElement;
 html.setAttribute('lang', lang);
 //#endregion
 
-// http://qiita.com/junya/items/3ff380878f26ca447f85
-document.body.setAttribute('ontouchstart', '');
-
 // アプリ基底要素マウント
 document.body.innerHTML = '<div id="app"></div>';
 
 const store = createStore();
 
+window.addEventListener('storage', e => {
+	if (e.key === 'vuex') {
+		store.replaceState(JSON.parse(localStorage['vuex']));
+	} else if (e.key === 'i') {
+		location.reload();
+	}
+}, false);
+
 const os = new MiOS(store);
 
 os.init(async () => {
-	window.addEventListener('storage', e => {
-		if (e.key === 'vuex') {
-			store.replaceState(JSON.parse(localStorage['vuex']));
-		} else if (e.key === 'i') {
-			location.reload();
-		}
-	}, false);
-
-	store.watch(state => state.device.darkMode, darkMode => {
-		import('./scripts/theme').then(({ builtinThemes }) => {
-			const themes = builtinThemes.concat(store.state.device.themes);
-			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
-		});
-	});
-
-	//#region Sync dark mode
-	if (store.state.device.syncDeviceDarkMode) {
-		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
-	}
-
-	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-		if (store.state.device.syncDeviceDarkMode) {
-			store.commit('device/set', { key: 'darkMode', value: mql.matches });
-		}
-	});
-	//#endregion
-
 	//#region Fetch locale data
 	const i18n = new VueI18n();
 
@@ -148,13 +126,6 @@ os.init(async () => {
 	});
 	//#endregion
 
-	if ('Notification' in window && store.getters.isSignedIn) {
-		// 許可を得ていなかったらリクエスト
-		if (Notification.permission === 'default') {
-			Notification.requestPermission();
-		}
-	}
-
 	const app = new Vue({
 		store: store,
 		i18n,
@@ -228,6 +199,29 @@ os.init(async () => {
 	// マウント
 	app.$mount('#app');
 
+	store.watch(state => state.device.darkMode, darkMode => {
+		import('./scripts/theme').then(({ builtinThemes }) => {
+			const themes = builtinThemes.concat(store.state.device.themes);
+			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
+		});
+	});
+
+	//#region Sync dark mode
+	if (store.state.device.syncDeviceDarkMode) {
+		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+		if (store.state.device.syncDeviceDarkMode) {
+			store.commit('device/set', { key: 'darkMode', value: mql.matches });
+		}
+	});
+	//#endregion
+
+	store.watch(state => state.device.useBlurEffectForModal, v => {
+		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+	}, { immediate: true });
+
 	os.stream.on('emojiAdded', data => {
 		// TODO
 		//store.commit('instance/set', );
@@ -263,6 +257,13 @@ os.init(async () => {
 	}
 
 	if (store.getters.isSignedIn) {
+		if ('Notification' in window) {
+			// 許可を得ていなかったらリクエスト
+			if (Notification.permission === 'default') {
+				Notification.requestPermission();
+			}
+		}
+
 		const main = os.stream.useSharedConnection('main');
 
 		// 自分の情報が更新されたとき

src/client/pages/index.home.vue

@@ -30,6 +30,7 @@ import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
 import XTimeline from '../components/timeline.vue';
 import XPostForm from '../components/post-form.vue';
+import { scroll } from '../scripts/scroll';
 
 export default Vue.extend({
 	metaInfo() {
@@ -120,7 +121,7 @@ export default Vue.extend({
 		},
 
 		top() {
-			window.scroll({ top: 0, behavior: 'instant' });
+			scroll(this.$el, 0);
 		},
 
 		async choose(ev) {
@@ -223,7 +224,7 @@ export default Vue.extend({
 
 	> i {
 		position: absolute;
-		top: 16px;
+		top: initial;
 		right: 8px;
 		color: var(--indicator);
 		font-size: 12px;

src/client/pages/messaging/index.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging">
+<div class="mk-messaging" v-size="[{ max: 400 }]">
 	<portal to="icon"><fa :icon="faComments"/></portal>
 	<portal to="title">{{ $t('messaging') }}</portal>
 
@@ -168,18 +168,14 @@ export default Vue.extend({
 .mk-messaging {
 
 	> .start {
-		margin: 0 auto 16px auto;
+		margin: 0 auto var(--margin) auto;
 	}
 
 	> .history {
 		> .message {
 			display: block;
 			text-decoration: none;
-			margin-bottom: 16px;
+			margin-bottom: var(--margin);
-
-			@media (max-width: 500px) {
-				margin-bottom: 8px;
-			}
 
 			* {
 				pointer-events: none;
@@ -284,7 +280,7 @@ export default Vue.extend({
 		}
 	}
 
-	@media (max-width: 400px) {
+	&.max-width_400px {
 		> .history {
 			> .message {
 				&:not([data-is-me]):not([data-is-read]) {

src/client/pages/preferences/index.vue

@@ -78,6 +78,7 @@
 			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
 			<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
 			<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
+			<mk-switch v-model="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</mk-switch>
 			<mk-switch v-model="useOsNativeEmojis">
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
@@ -178,6 +179,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
 		},
 
+		useBlurEffectForModal: {
+			get() { return this.$store.state.device.useBlurEffectForModal; },
+			set(value) { this.$store.commit('device/set', { key: 'useBlurEffectForModal', value: value }); }
+		},
+
 		disableAnimatedMfm: {
 			get() { return !this.$store.state.device.animatedMfm; },
 			set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); }

src/client/pages/theme-editor.vue

@@ -9,7 +9,7 @@
 			<mk-input v-model="author" required><span>{{ $t('author') }}</span></mk-input>
 			<mk-textarea v-model="description"><span>{{ $t('description') }}</span></mk-textarea>
 			<div class="_inputs">
-				<div v-text="$t('_theme.baseTheme')" />
+				<div v-text="$t('_theme.base')" />
 				<mk-radio v-model="baseTheme" value="light">{{ $t('light') }}</mk-radio>
 				<mk-radio v-model="baseTheme" value="dark">{{ $t('dark') }}</mk-radio>
 			</div>

src/client/scripts/scroll.ts

@@ -25,3 +25,12 @@ export function onScrollTop(el: Element, cb) {
 	};
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
+
+export function scroll(el: Element, top: number) {
+	const container = getScrollContainer(el);
+	if (container == null) {
+		window.scroll({ top: top, behavior: 'instant' });
+	} else {
+		container.scrollTop = top;
+	}
+}

src/client/store.ts

@@ -68,6 +68,7 @@ export const defaultDeviceSettings = {
 	disablePagesScript: true,
 	enableInfiniteScroll: true,
 	fixedWidgetsPosition: false,
+	useBlurEffectForModal: true,
 	roomGraphicsQuality: 'medium',
 	roomUseOrthographicCamera: true,
 	deckColumnAlign: 'left',

src/client/style.scss

@@ -197,6 +197,20 @@ hr {
 	}
 }
 
+._modalBg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--modalBg);
+	backdrop-filter: var(--modalBgFilter);
+}
+
+._shadow {
+	box-shadow: 0px 4px 32px var(--shadow) !important;
+}
+
 ._button {
 	appearance: none;
 	padding: 0;

src/client/themes/_dark.json5

@@ -23,7 +23,7 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: 'rgba(0, 0, 0, 0)',
-		shadow: 'rgba(0, 0, 0, 0.1)',
+		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@bg',
 		navBg: '@bg',
 		navFg: '@fg',
@@ -57,6 +57,7 @@
 		badge: '#31b1ce',
 		messageBg: ':lighten<5<@bg',
 		deckColumnBorder: ':lighten<10<@panel',
+		htmlThemeColor: '@bg',
 		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(255, 255, 255, 0.05)',

src/client/themes/_light.json5

@@ -57,6 +57,7 @@
 		badge: '#31b1ce',
 		messageBg: '@panel',
 		deckColumnBorder: ':darken<20<@panel',
+		htmlThemeColor: '@bg',
 		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(0, 0, 0, 0.05)',

src/client/themes/black.json5

@@ -12,6 +12,8 @@
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
 		panelBorder: '@divider',
+		shadow: 'rgba(255, 255, 255, 0.05)',
+		modalBg: 'rgba(255, 255, 255, 0.1)',
 		messageBg: '#1d1d1d',
 		deckColumnBorder: '@divider',
 	},

src/server/web/views/base.pug

@@ -40,7 +40,7 @@ html
 			if (theme) {
 				for (const [k, v] of Object.entries(JSON.parse(theme))) {
 					document.documentElement.style.setProperty(`--${k}`, v.toString());
-					if (k === 'html') {
+					if (k === 'htmlThemeColor') {
 						for (const tag of document.head.children) {
 							if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
 								tag.setAttribute('content', v);
@@ -61,7 +61,8 @@ html
 				document.documentElement.style.backgroundImage = `url(${wallpaper})`;
 			}
 
-	body
+	//- https://qiita.com/junya/items/3ff380878f26ca447f85
+	body(ontouchstart='')
 		noscript: p
 			| JavaScriptを有効にしてください
 			br

yarn.lock

@@ -160,10 +160,10 @@
   resolved "https://registry.yarnpkg.com/@koa/multer/-/multer-3.0.0.tgz#439777949f28097d7b329c0b4ce3048074c862f8"
   integrity sha512-y+OQBmex5D1jIl723gAEUYcAWPEicIXppaAKw/zCMfpllQ08ZNweDPwoCLxEoatqd5pCu2XG6V8dl67JRq3RJw==
 
-"@koa/router@9.3.1":
+"@koa/router@9.0.1":
-  version "9.3.1"
+  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/@koa/router/-/router-9.3.1.tgz#814b0f357da616b99ee22259644cd928f2c9e60e"
+  resolved "https://registry.yarnpkg.com/@koa/router/-/router-9.0.1.tgz#4090a14223ea7e78aa13b632761209cba69acd95"
-  integrity sha512-OOy4pOEO+Zz5vy+zqc8mWRGKYIpDqjgbVTF/U41fCwBwVWHGmkedvcJ9V5MLI7Ivy0iTv8o0XLDtGWtYHquvxg==
+  integrity sha512-OI+OU49CJV4px0WkIMmayBeqVXB/JS1ZMq7UoGlTZt6Y7ijK7kdeQ18+SEHHJPytmtI1y6Hf8XLrpxva3mhv5Q==
   dependencies:
     debug "^4.1.1"
     http-errors "^1.7.3"