🎨

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: "タイムライン上部に投稿フォームを表示する"

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

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>

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

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>

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

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: {

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
 

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

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

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

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

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

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
 

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)

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 }); }

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>
 

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

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

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

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
 
 		&, *

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
 

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)

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

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);

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

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

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

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,

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);
 	}