diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ddc953a056..599a71fc75 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -156,6 +156,12 @@ common:
line-width-thin: "細い"
line-width-normal: "普通"
line-width-thick: "太い"
+ font-size: "文字の大きさ"
+ font-size-x-small: "小さい"
+ font-size-small: "少し小さい"
+ font-size-medium: "普通"
+ font-size-large: "少し大きい"
+ font-size-x-large: "大きい"
hide-password: "パスワードを隠す"
show-password: "パスワードを表示する"
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 127fea12f5..7018c20b9d 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -58,4 +58,8 @@ export default Vue.extend({
margin-bottom 16px
font-weight bold
color var(--faceText)
+
+ > section
+ margin 16px 0
+
diff --git a/src/client/app/desktop/views/components/note.sub.vue b/src/client/app/desktop/views/components/note.sub.vue
index bd2dd1bc08..bfecef3eb2 100644
--- a/src/client/app/desktop/views/components/note.sub.vue
+++ b/src/client/app/desktop/views/components/note.sub.vue
@@ -97,6 +97,7 @@ export default Vue.extend({
margin 0
padding 0
color var(--subNoteText)
+ font-size calc(1em + var(--fontSize))
pre
max-height 120px
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index bc9ac8f0b0..90454dbad9 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -238,6 +238,7 @@ export default Vue.extend({
padding 0
overflow-wrap break-word
color var(--noteText)
+ font-size calc(1em + var(--fontSize))
> .reply
margin-right 8px
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4ec4916e38..da5489ec4e 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -97,6 +97,14 @@
{{ $t('@.line-width-normal') }}
{{ $t('@.line-width-thick') }}
+
+
+ {{ $t('@.font-size-x-small') }}
+ {{ $t('@.font-size-small') }}
+ {{ $t('@.font-size-medium') }}
+ {{ $t('@.font-size-large') }}
+ {{ $t('@.font-size-x-large') }}
+
{{ $t('@.reduce-motion') }}
{{ $t('@.contrasted-acct') }}
{{ $t('@.show-full-acct') }}
@@ -401,6 +409,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
},
+ fontSize: {
+ get() { return this.$store.state.device.fontSize; },
+ set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+ },
+
fetchOnScroll: {
get() { return this.$store.state.settings.fetchOnScroll; },
set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 7edb5b8c16..d13861080c 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -410,6 +410,15 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
});
//#endregion
+ //#region fontSize
+ document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
+ os.store.watch(s => {
+ return s.device.fontSize;
+ }, v => {
+ document.documentElement.style.setProperty('--fontSize', `${os.store.state.device.fontSize}px`);
+ });
+ //#endregion
+
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
os.store.commit('clearBehindNotes');
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 0f7363b2aa..b951947f2a 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -115,6 +115,7 @@ export default Vue.extend({
margin 0
padding 0
color var(--subNoteText)
+ font-size calc(1em + var(--fontSize))
pre
max-height 120px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index e1a7aeb935..1d056c126d 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -192,6 +192,7 @@ export default Vue.extend({
padding 0
overflow-wrap break-word
color var(--noteText)
+ font-size calc(1em + var(--fontSize))
> .reply
margin-right 8px
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index aec06adee5..6f5d0ec486 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -24,6 +24,14 @@
{{ $t('@.line-width-normal') }}
{{ $t('@.line-width-thick') }}
+
+
+ {{ $t('@.font-size-x-small') }}
+ {{ $t('@.font-size-small') }}
+ {{ $t('@.font-size-medium') }}
+ {{ $t('@.font-size-large') }}
+ {{ $t('@.font-size-x-large') }}
+
{{ $t('@.reduce-motion') }}
{{ $t('@.contrasted-acct') }}
{{ $t('@.show-full-acct') }}
@@ -319,6 +327,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
},
+ fontSize: {
+ get() { return this.$store.state.device.fontSize; },
+ set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+ },
+
contrastedAcct: {
get() { return this.$store.state.settings.contrastedAcct; },
set(value) {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index d25a577dab..b79a32b3da 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -54,6 +54,7 @@ const defaultDeviceSettings = {
darkTheme: 'dark',
lightTheme: 'light',
lineWidth: 1,
+ fontSize: 0,
themes: [],
enableSounds: true,
soundVolume: 0.5,