chore: 🎨 format, add scss to prettier formatting

packages/client/package.json

@@ -5,7 +5,7 @@
 		"watch": "pnpm vite build --watch --mode development",
 		"build": "pnpm vite build",
 		"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
-		"format": "pnpm prettier --write '**/*.vue'"
+		"format": "pnpm prettier --write '**/*.{scss,vue}'"
 	},
 	"devDependencies": {
 		"@discordapp/twemoji": "14.1.2",

packages/client/src/components/MkReactionsViewer.vue

@@ -37,8 +37,18 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 	overflow-x: auto;
 	margin-inline: -24px;
 	padding-inline: 22px 160px;
-	mask: linear-gradient(to right, transparent, black 24px calc(100% - 160px), transparent);
+	mask: linear-gradient(
-	-webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 160px), transparent);
+		to right,
+		transparent,
+		black 24px calc(100% - 160px),
+		transparent
+	);
+	-webkit-mask: linear-gradient(
+		to right,
+		transparent,
+		black 24px calc(100% - 160px),
+		transparent
+	);
 	scrollbar-width: none;
 	&::-webkit-scrollbar {
 		display: none;

packages/client/src/pages/settings/general.vue

@@ -45,12 +45,18 @@
 				class="_formBlock"
 				>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
 			>
-			<FormSwitch v-if="deviceKind !== 'desktop'" v-model="swipeOnMobile" class="_formBlock">{{
+			<FormSwitch
-				i18n.ts.swipeOnMobile
+				v-if="deviceKind !== 'desktop'"
-			}}</FormSwitch>
+				v-model="swipeOnMobile"
-			<FormSwitch v-if="deviceKind === 'desktop'" v-model="swipeOnDesktop" class="_formBlock">{{
+				class="_formBlock"
-				i18n.ts.swipeOnDesktop
+				>{{ i18n.ts.swipeOnMobile }}</FormSwitch
-			}}</FormSwitch>
+			>
+			<FormSwitch
+				v-if="deviceKind === 'desktop'"
+				v-model="swipeOnDesktop"
+				class="_formBlock"
+				>{{ i18n.ts.swipeOnDesktop }}</FormSwitch
+			>
 			<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
 				i18n.ts.enterSendsMessage
 			}}</FormSwitch>

packages/client/src/style.scss

@@ -13,22 +13,14 @@
 	}
 
 	// https://larsenwork.com/easing-gradients/
-	--gradient: hsl(0, 0%, 0%) 0%,
+	--gradient: hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.987) 8.1%,
-		hsla(0, 0%, 0%, 0.987) 8.1%,
+		hsla(0, 0%, 0%, 0.951) 15.5%, hsla(0, 0%, 0%, 0.896) 22.5%,
-		hsla(0, 0%, 0%, 0.951) 15.5%,
+		hsla(0, 0%, 0%, 0.825) 29%, hsla(0, 0%, 0%, 0.741) 35.3%,
-		hsla(0, 0%, 0%, 0.896) 22.5%,
+		hsla(0, 0%, 0%, 0.648) 41.2%, hsla(0, 0%, 0%, 0.55) 47.1%,
-		hsla(0, 0%, 0%, 0.825) 29%,
+		hsla(0, 0%, 0%, 0.45) 52.9%, hsla(0, 0%, 0%, 0.352) 58.8%,
-		hsla(0, 0%, 0%, 0.741) 35.3%,
+		hsla(0, 0%, 0%, 0.259) 64.7%, hsla(0, 0%, 0%, 0.175) 71%,
-		hsla(0, 0%, 0%, 0.648) 41.2%,
+		hsla(0, 0%, 0%, 0.104) 77.5%, hsla(0, 0%, 0%, 0.049) 84.5%,
-		hsla(0, 0%, 0%, 0.55) 47.1%,
+		hsla(0, 0%, 0%, 0.013) 91.9%, hsla(0, 0%, 0%, 0) 100%;
-		hsla(0, 0%, 0%, 0.45) 52.9%,
-		hsla(0, 0%, 0%, 0.352) 58.8%,
-		hsla(0, 0%, 0%, 0.259) 64.7%,
-		hsla(0, 0%, 0%, 0.175) 71%,
-		hsla(0, 0%, 0%, 0.104) 77.5%,
-		hsla(0, 0%, 0%, 0.049) 84.5%,
-		hsla(0, 0%, 0%, 0.013) 91.9%,
-		hsla(0, 0%, 0%, 0) 100%;
 
 	//--ad: rgb(255 169 0 / 10%);
 }
@@ -56,7 +48,9 @@ html {
 	overflow-x: clip;
 
 	&.useSystemFont {
-		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+			Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+			sans-serif;
 	}
 }
 body::-webkit-scrollbar {
@@ -98,12 +92,16 @@ body::-webkit-scrollbar-thumb {
 }
 
 html._themeChanging_ {
-	&, *, ::before, ::after {
+	&,
+	*,
+	::before,
+	::after {
 		transition: background 1s ease, border 1s ease !important;
 	}
 }
 
-html, body {
+html,
+body {
 	margin: 0;
 	padding: 0;
 }
@@ -111,8 +109,18 @@ html, body {
 .swiper {
 	margin-inline: -24px !important;
 	padding-inline: 24px !important;
-	mask: linear-gradient(to right, transparent, black 24px calc(100% - 24px), transparent);
+	mask: linear-gradient(
-	-webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 24px), transparent);
+		to right,
+		transparent,
+		black 24px calc(100% - 24px),
+		transparent
+	);
+	-webkit-mask: linear-gradient(
+		to right,
+		transparent,
+		black 24px calc(100% - 24px),
+		transparent
+	);
 }
 .swiper-slide {
 	min-height: 100vh;
@@ -129,11 +137,13 @@ a {
 // 	transform: translateY(0.1em);
 // }
 
-textarea, input {
+textarea,
+input {
 	-webkit-tap-highlight-color: transparent;
 }
 
-optgroup, option {
+optgroup,
+option {
 	background: var(--panel);
 	color: var(--fg);
 }
@@ -150,8 +160,12 @@ hr {
 }
 
 @keyframes spin {
-	0% { transform: rotate(0deg); }
+	0% {
-	100% { transform: rotate(360deg); }
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
 ._noSelect {
@@ -161,7 +175,8 @@ hr {
 }
 
 ._ghost {
-	&, * {
+	&,
+	* {
 		@extend ._noSelect;
 		pointer-events: none;
 	}
@@ -201,7 +216,8 @@ hr {
 	font-family: inherit;
 	line-height: inherit;
 
-	&, * {
+	&,
+	* {
 		@extend ._noSelect;
 	}
 
@@ -241,7 +257,9 @@ hr {
 		transition: background 0.2s;
 	}
 
-	&:hover:before, &:focus::before, &.highlighted::before {
+	&:hover:before,
+	&:focus::before,
+	&.highlighted::before {
 		background: var(--buttonBg);
 	}
 	&:focus-visible::before {
@@ -269,7 +287,11 @@ hr {
 ._buttonGradate {
 	@extend ._buttonPrimary;
 	color: var(--fgOnAccent);
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	background: linear-gradient(
+		90deg,
+		var(--buttonGradateA),
+		var(--buttonGradateB)
+	);
 
 	&:not(:disabled):hover {
 		background: linear-gradient(90deg, var(--X8), var(--X8));
@@ -282,7 +304,7 @@ hr {
 
 ._help {
 	color: var(--accent);
-	cursor: help
+	cursor: help;
 }
 
 ._textButton {
@@ -486,7 +508,7 @@ hr {
 			bottom: 0;
 			z-index: -1;
 			background: var(--bg);
-			opacity: .75;
+			opacity: 0.75;
 		}
 	}
 }
@@ -517,7 +539,7 @@ hr {
 ._flexList {
 	display: flex;
 	flex-wrap: wrap;
-	gap: .2em;
+	gap: 0.2em;
 	width: min-content;
 	min-width: 100%;
 	&._center {
@@ -594,7 +616,7 @@ hr {
 	color: var(--link);
 
 	&:after {
-		content: '';
+		content: "";
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -635,9 +657,14 @@ hr {
 }
 
 :not(.noGap):not(._block) > {
-	.note-container, .cmuxhskf > section, ._gap > ._block, ._panel, .noGap, .profile, .card {
+	.note-container,
-		&:not(.caution)
+	.cmuxhskf > section,
-		{
+	._gap > ._block,
+	._panel,
+	.noGap,
+	.profile,
+	.card {
+		&:not(.caution) {
 			box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
 			border-radius: var(--radius);
 			overflow: clip;
@@ -651,21 +678,29 @@ hr {
 ._zoom {
 	transition-duration: 0.5s, 0.5s;
 	transition-property: opacity, transform;
-	transition-timing-function: cubic-bezier(0,.5,.5,1);
+	transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
 }
 
-.zoom-enter-active, .zoom-leave-active {
+.zoom-enter-active,
+.zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }
-.zoom-enter-from, .zoom-leave-to {
+.zoom-enter-from,
+.zoom-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
 
 @keyframes blink {
-	0% { opacity: 1; }
+	0% {
-	70% { opacity: 0; }
+		opacity: 1;
-	100% { opacity: 1; }
+	}
+	70% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 @keyframes tada {
@@ -729,7 +764,7 @@ hr {
 }
 ._anime_bounce_ready {
 	will-change: transform;
-	transform:  scaleX(0.90) scaleY(0.90) ;
+	transform: scaleX(0.9) scaleY(0.9);
 }
 ._anime_bounce_standBy {
 	transition: transform 0.1s ease;
@@ -737,16 +772,16 @@ hr {
 
 @keyframes bounce {
 	0% {
-    transform:  scaleX(0.90) scaleY(0.90) ;
+		transform: scaleX(0.9) scaleY(0.9);
 	}
 	19% {
-    transform:  scaleX(1.10) scaleY(1.10) ;
+		transform: scaleX(1.1) scaleY(1.1);
 	}
 	48% {
 		transform: scaleX(0.95) scaleY(0.95);
 	}
 	100% {
-    transform:  scaleX(1.00) scaleY(1.00) ;
+		transform: scaleX(1) scaleY(1);
 	}
 }
 
@@ -870,7 +905,7 @@ hr {
 	}
 	@keyframes scaleInSmall {
 		from {
-			transform: scale(.8);
+			transform: scale(0.8);
 			opacity: 0;
 		}
 	}