:art:

14 files changed, 34 insertions, 23 deletions

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