diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 917c4028d..a38845109 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -878,6 +878,10 @@ desktop/views/components/settings.vue: dark-mode: "ダークモード" use-shadow: "UIに影を使用" rounded-corners: "UIの角を丸める" + line-width: "線の太さ" + line-width-thin: "細い" + line-width-normal: "普通" + line-width-thick: "太い" circle-icons: "円形のアイコンを使用" contrasted-acct: "ユーザー名にコントラストを付ける" post-form-on-timeline: "タイムライン上部に投稿フォームを表示する" diff --git a/src/client/app/common/views/components/mention.vue b/src/client/app/common/views/components/mention.vue index 6fbf8c47f..11dddbd52 100644 --- a/src/client/app/common/views/components/mention.vue +++ b/src/client/app/common/views/components/mention.vue @@ -54,13 +54,13 @@ export default Vue.extend({ user-select none padding 0 4px background var(--mfmMention) - border solid 1px var(--mfmMention) + border solid var(--lineWidth) var(--mfmMention) border-radius 4px 0 0 4px color var(--mfmMentionForeground) & + .main padding 0 4px - border solid 1px var(--mfmMention) + border solid var(--lineWidth) var(--mfmMention) border-radius 0 4px 4px 0 > .main diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue index 447e42e42..eebc0a4d6 100644 --- a/src/client/app/common/views/components/menu.vue +++ b/src/client/app/common/views/components/menu.vue @@ -186,7 +186,7 @@ export default Vue.extend({ > div margin 8px 0 - height 1px + height var(--lineWidth) background var(--faceDivider) diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index 50835eedc..6515f9fd2 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -254,7 +254,7 @@ export default Vue.extend({ padding 8px 10px font-size 14px color var(--popupFg) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) > div padding 4px diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue index 2b421bffb..1a2381e56 100644 --- a/src/client/app/common/views/components/theme.vue +++ b/src/client/app/common/views/components/theme.vue @@ -342,7 +342,7 @@ export default Vue.extend({ margin-bottom 16px > details - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) > summary padding 16px 0 @@ -353,5 +353,5 @@ export default Vue.extend({ > .creator > div padding 16px 0 - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue index 21ccf95aa..f08085ec0 100644 --- a/src/client/app/common/views/components/ui/card.vue +++ b/src/client/app/common/views/components/ui/card.vue @@ -41,7 +41,7 @@ export default Vue.extend({ > section padding 20px 16px - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) @media (min-width 500px) padding 32px diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue index 868a339aa..8e2b12905 100644 --- a/src/client/app/common/views/components/ui/radio.vue +++ b/src/client/app/common/views/components/ui/radio.vue @@ -29,7 +29,6 @@ export default Vue.extend({ required: false }, value: { - type: String, required: false }, disabled: { diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index a12db9806..038541ba0 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -207,7 +207,7 @@ export default Vue.extend({ > a display block font-size 14px - border solid 1px var(--urlPreviewBorder) + border solid var(--lineWidth) var(--urlPreviewBorder) border-radius 4px overflow hidden diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue index d47257d22..75a775d77 100644 --- a/src/client/app/common/views/widgets/memo.vue +++ b/src/client/app/common/views/widgets/memo.vue @@ -72,7 +72,7 @@ export default define({ color var(--inputText) background var(--face) border none - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) border-radius 0 > button diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue index 05b01a705..107c49adb 100644 --- a/src/client/app/common/views/widgets/rss.vue +++ b/src/client/app/common/views/widgets/rss.vue @@ -77,7 +77,7 @@ export default define({ display block padding 4px 0 color var(--text) - border-bottom dashed 1px var(--faceDivider) + border-bottom dashed var(--lineWidth) var(--faceDivider) &:last-child border-bottom none diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue index fda984bd2..06517ee09 100644 --- a/src/client/app/desktop/views/components/calendar.vue +++ b/src/client/app/desktop/views/components/calendar.vue @@ -151,7 +151,7 @@ export default Vue.extend({ font-weight bold color var(--faceHeaderText) background var(--faceHeader) - box-shadow 0 1px rgba(#000, 0.07) + box-shadow 0 var(--lineWidth) rgba(#000, 0.07) > [data-icon] margin-right 4px @@ -199,11 +199,11 @@ export default Vue.extend({ color var(--calendarSaturdayOrSunday) &[data-today] - box-shadow 0 0 0 1px var(--calendarWeek) inset + box-shadow 0 0 0 var(--lineWidth) var(--calendarWeek) inset border-radius 6px &[data-is-donichi] - box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset + box-shadow 0 0 0 var(--lineWidth) var(--calendarSaturdayOrSunday) inset &.day cursor pointer diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue index fae7811ea..1ae3c85d5 100644 --- a/src/client/app/desktop/views/components/context-menu.menu.vue +++ b/src/client/app/desktop/views/components/context-menu.menu.vue @@ -46,7 +46,7 @@ export default Vue.extend({ &.divider margin-top $padding padding-top $padding - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) &.nest > p diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue index 1953888c0..a52eaac7e 100644 --- a/src/client/app/desktop/views/components/note.vue +++ b/src/client/app/desktop/views/components/note.vue @@ -140,7 +140,7 @@ export default Vue.extend({ margin 0 padding 0 background var(--face) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) &.mini font-size 13px @@ -261,7 +261,7 @@ export default Vue.extend({ > * padding 16px - border dashed 1px var(--quoteBorder) + border dashed var(--lineWidth) var(--quoteBorder) border-radius 8px > footer diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue index eb108e4e5..da1189322 100644 --- a/src/client/app/desktop/views/components/notes.vue +++ b/src/client/app/desktop/views/components/notes.vue @@ -209,7 +209,7 @@ export default Vue.extend({ text-align center color var(--dateDividerFg) background var(--dateDividerBg) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) span margin 0 16px @@ -233,7 +233,7 @@ export default Vue.extend({ text-align center color #ccc background var(--face) - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) border-bottom-left-radius 6px border-bottom-right-radius 6px diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue index ccd82a92e..a9c73bf02 100644 --- a/src/client/app/desktop/views/components/notifications.vue +++ b/src/client/app/desktop/views/components/notifications.vue @@ -248,7 +248,7 @@ export default Vue.extend({ padding 16px overflow-wrap break-word font-size 12px - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) &:last-child border-bottom none @@ -332,7 +332,7 @@ export default Vue.extend({ font-size 0.8em color var(--dateDividerFg) background var(--dateDividerBg) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) span margin 0 16px @@ -345,7 +345,7 @@ export default Vue.extend({ width 100% padding 16px color var(--text) - border-top solid 1px rgba(#000, 0.05) + border-top solid var(--lineWidth) rgba(#000, 0.05) &:hover background rgba(#000, 0.025) diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index 073ab0e71..8bdf1b19b 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -97,6 +97,12 @@ {{ $t('use-shadow') }} {{ $t('rounded-corners') }} {{ $t('circle-icons') }} +
+
{{ $t('line-width') }}
+ {{ $t('line-width-thin') }} + {{ $t('line-width-normal') }} + {{ $t('line-width-thick') }} +
{{ $t('@.reduce-motion') }} {{ $t('contrasted-acct') }} {{ $t('@.show-full-acct') }} @@ -405,6 +411,11 @@ export default Vue.extend({ set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); } }, + lineWidth: { + get() { return this.$store.state.settings.lineWidth; }, + set(value) { this.$store.dispatch('settings/set', { key: 'lineWidth', 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/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue index 9662157e3..63bc20dc2 100644 --- a/src/client/app/desktop/views/components/timeline.core.vue +++ b/src/client/app/desktop/views/components/timeline.core.vue @@ -173,7 +173,7 @@ export default Vue.extend({ diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue index f6d272c06..46d0a0915 100644 --- a/src/client/app/desktop/views/components/timeline.vue +++ b/src/client/app/desktop/views/components/timeline.vue @@ -187,7 +187,7 @@ export default Vue.extend({ padding 0 8px z-index 10 background var(--faceHeader) - box-shadow 0 1px var(--desktopTimelineHeaderShadow) + box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow) > .buttons position absolute diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index 7fe95a293..bc7a8b223 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -227,7 +227,7 @@ export default Vue.extend({ font-size 0.8em background $bgcolor border-radius 4px - box-shadow 0 1px 4px rgba(#000, 0.25) + box-shadow 0 var(--lineWidth) 4px rgba(#000, 0.25) &:before content "" @@ -261,7 +261,7 @@ export default Vue.extend({ & + ul padding-top 10px - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) > li display block diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue index c14f5f551..13a460c92 100644 --- a/src/client/app/desktop/views/components/widget-container.vue +++ b/src/client/app/desktop/views/components/widget-container.vue @@ -46,7 +46,7 @@ export default Vue.extend({ font-size 0.9em font-weight bold color var(--faceHeaderText) - box-shadow 0 1px rgba(#000, 0.07) + box-shadow 0 var(--lineWidth) rgba(#000, 0.07) > [data-icon] margin-right 6px diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue index 6678a3c88..2acd2d0ed 100644 --- a/src/client/app/desktop/views/pages/deck/deck.column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.column.vue @@ -373,7 +373,7 @@ export default Vue.extend({ font-size 14px color var(--faceHeaderText) background var(--faceHeader) - box-shadow 0 1px rgba(#000, 0.15) + box-shadow 0 var(--lineWidth) rgba(#000, 0.15) cursor pointer &, * diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue index 1960983ae..994e12a04 100644 --- a/src/client/app/desktop/views/pages/deck/deck.notes.vue +++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue @@ -214,7 +214,7 @@ export default Vue.extend({ text-align center color var(--dateDividerFg) background var(--dateDividerBg) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) span margin 0 16px @@ -231,7 +231,7 @@ export default Vue.extend({ text-align center color #ccc background var(--face) - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) border-bottom-left-radius 6px border-bottom-right-radius 6px diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue index efa4ecd53..4eec65778 100644 --- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue +++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue @@ -177,7 +177,7 @@ export default Vue.extend({ > .notifications > .notification:not(:last-child) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) > .date display block @@ -187,7 +187,7 @@ export default Vue.extend({ font-size 12px color var(--dateDividerFg) background var(--dateDividerBg) - border-bottom solid 1px var(--faceDivider) + border-bottom solid var(--lineWidth) var(--faceDivider) span margin 0 16px @@ -200,7 +200,7 @@ export default Vue.extend({ width 100% padding 16px color #555 - border-top solid 1px rgba(#000, 0.05) + border-top solid var(--lineWidth) rgba(#000, 0.05) &:hover background rgba(#000, 0.025) diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue index 31e58264c..0ed7916a4 100644 --- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue @@ -462,7 +462,7 @@ export default Vue.extend({ display grid grid-template-columns 2fr 2fr 2fr 1fr margin-top 8px - border-top solid 1px var(--faceDivider) + border-top solid var(--lineWidth) var(--faceDivider) > div padding 8px 8px 0 8px diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 36a9c7b24..af9e5f6e0 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -413,6 +413,15 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void, }); //#endregion + //#region line width + document.documentElement.style.setProperty('--lineWidth', `${os.store.state.settings.lineWidth}px`); + os.store.watch(s => { + return s.settings.lineWidth; + }, v => { + document.documentElement.style.setProperty('--lineWidth', `${os.store.state.settings.lineWidth}px`); + }); + //#endregion + // Navigation hook router.beforeEach((to, from, next) => { next(os.store.state.navHook && os.store.state.navHook(to) ? false : undefined); diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index 09e55a9b9..57d8fb2a0 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -98,7 +98,7 @@ export default Vue.extend({