:art:

29 files changed, 63 insertions, 43 deletions

diff --git a/src/client/app/common/views/components/mention.vue b/src/client/app/common/views/components/mention.vue
index 6fbf8c47fd..11dddbd52a 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 447e42e42b..eebc0a4d6a 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)
 
 </style>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 50835eedc5..6515f9fd27 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 2b421bffb7..1a2381e563 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)
 </style>
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 21ccf95aaf..f08085ec0b 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 868a339aa4..8e2b12905d 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 a12db98068..038541ba05 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 d47257d22d..75a775d77e 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 05b01a7055..107c49adb1 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 fda984bd25..06517ee097 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 fae7811ea4..1ae3c85d57 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 1953888c02..a52eaac7e9 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 eb108e4e5e..da11893225 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 ccd82a92ed..a9c73bf02a 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 073ab0e712..8bdf1b19bd 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -97,6 +97,12 @@
 				<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
 				<ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch>
 				<ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch>
+				<section>
+					<header>{{ $t('line-width') }}</header>
+					<ui-radio v-model="lineWidth" :value="0.5">{{ $t('line-width-thin') }}</ui-radio>
+					<ui-radio v-model="lineWidth" :value="1">{{ $t('line-width-normal') }}</ui-radio>
+					<ui-radio v-model="lineWidth" :value="2">{{ $t('line-width-thick') }}</ui-radio>
+				</section>
 				<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
 				<ui-switch v-model="contrastedAcct">{{ $t('contrasted-acct') }}</ui-switch>
 				<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
@@ -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 9662157e30..63bc20dc28 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({
 <style lang="stylus" scoped>
 .mk-timeline-core
 	> .mk-friends-maker
-		border-bottom solid 1px #eee
+		border-bottom solid var(--lineWidth) #eee
 
 </style>
 
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index f6d272c06f..46d0a0915a 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 7fe95a293b..bc7a8b2231 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 c14f5f5511..13a460c921 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 6678a3c886..2acd2d0eda 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 1960983ae8..994e12a04b 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 efa4ecd534..4eec65778b 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 31e58264c8..0ed7916a4b 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 36a9c7b24c..af9e5f6e08 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 09e55a9b99..57d8fb2a08 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({
 <style lang="stylus" scoped>
 .note
 	font-size 12px
-	border-bottom solid 1px var(--faceDivider)
+	border-bottom solid var(--lineWidth) var(--faceDivider)
 
 	&:focus
 		z-index 1
@@ -231,7 +231,7 @@ export default Vue.extend({
 
 						> *
 							padding 16px
-							border dashed 1px var(--quoteBorder)
+							border dashed var(--lineWidth) var(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 088ecd5de0..fe88fee84d 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -210,7 +210,7 @@ export default Vue.extend({
 			font-size 0.9em
 			color var(--dateDividerFg)
 			background var(--dateDividerBg)
-			border-bottom solid 1px var(--faceDivider)
+			border-bottom solid var(--lineWidth) var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -240,7 +240,7 @@ export default Vue.extend({
 
 	> footer
 		text-align center
-		border-top solid 1px var(--faceDivider)
+		border-top solid var(--lineWidth) var(--faceDivider)
 
 		&:empty
 			display none
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index e931b74355..fa247caeab 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -152,7 +152,7 @@ export default Vue.extend({
 	> .notifications
 
 		> .mk-notification:not(:last-child)
-			border-bottom solid 1px var(--faceDivider)
+			border-bottom solid var(--lineWidth) var(--faceDivider)
 
 		> .date
 			display block
@@ -162,7 +162,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
@@ -175,7 +175,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)
 
 		> [data-icon]
 			margin-right 4px
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 5d5eece2a0..c372343a36 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -21,6 +21,7 @@ const defaultSettings = {
 	showClockOnHeader: true,
 	useShadow: true,
 	roundedCorners: false,
+	lineWidth: 1,
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 39537da36f..5653573c1d 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -99,12 +99,12 @@ function compile(theme: Theme): { [key: string]: string } {
 		props['primaryAlpha0' + i] = genValue(color);
 	}
 
-	for (let i = 1; i < 100; i++) {
+	for (let i = 5; i < 100; i += 5) {
 		const color = primary.clone().lighten(i);
 		props['primaryLighten' + i] = genValue(color);
 	}
 
-	for (let i = 1; i < 100; i++) {
+	for (let i = 5; i < 100; i += 5) {
 		const color = primary.clone().darken(i);
 		props['primaryDarken' + i] = genValue(color);
 	}