diff --git a/packages/client/package.json b/packages/client/package.json
index 4cb60bbc4..4858ad1f0 100644
--- a/packages/client/package.json
+++ b/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",
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index f5a9a6cb2..b60c53df6 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -7,7 +7,7 @@
:count="count"
:is-initial="initialReactions.has(reaction)"
:note="note"
- @reacted="reactionsEl.scrollTo(0,0)"
+ @reacted="reactionsEl.scrollTo(0, 0)"
/>
@@ -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);
- -webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 160px), transparent);
+ mask: linear-gradient(
+ 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;
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 0add2b9df..3a3bf6bb1 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -45,12 +45,18 @@
class="_formBlock"
>{{ i18n.ts.useReactionPickerForContextMenu }}
- {{
- i18n.ts.swipeOnMobile
- }}
- {{
- i18n.ts.swipeOnDesktop
- }}
+ {{ i18n.ts.swipeOnMobile }}
+ {{ i18n.ts.swipeOnDesktop }}
{{
i18n.ts.enterSendsMessage
}}
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index d110e516e..8ce3d56d2 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -13,22 +13,14 @@
}
// https://larsenwork.com/easing-gradients/
- --gradient: hsl(0, 0%, 0%) 0%,
- 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.825) 29%,
- hsla(0, 0%, 0%, 0.741) 35.3%,
- hsla(0, 0%, 0%, 0.648) 41.2%,
- hsla(0, 0%, 0%, 0.55) 47.1%,
- 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%;
+ --gradient: hsl(0, 0%, 0%) 0%, 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.825) 29%, hsla(0, 0%, 0%, 0.741) 35.3%,
+ hsla(0, 0%, 0%, 0.648) 41.2%, hsla(0, 0%, 0%, 0.55) 47.1%,
+ 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);
- -webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 24px), transparent);
+ mask: linear-gradient(
+ 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); }
- 100% { transform: rotate(360deg); }
+ 0% {
+ 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,10 +657,15 @@ hr {
}
:not(.noGap):not(._block) > {
- .note-container, .cmuxhskf > section, ._gap > ._block, ._panel, .noGap, .profile, .card {
- &:not(.caution)
- {
- box-shadow: 0 4px 25px rgba(0,0,0,0.04);
+ .note-container,
+ .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; }
- 70% { opacity: 0; }
- 100% { opacity: 1; }
+ 0% {
+ opacity: 1;
+ }
+ 70% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
@keyframes tada {
@@ -696,7 +731,7 @@ hr {
}
}
-@media(prefers-reduced-motion) {
+@media (prefers-reduced-motion) {
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
@@ -723,101 +758,101 @@ hr {
._anime_bounce {
will-change: transform;
- animation: bounce ease 0.7s;
- animation-iteration-count: 1;
- transform-origin: 50% 50%;
+ animation: bounce ease 0.7s;
+ animation-iteration-count: 1;
+ transform-origin: 50% 50%;
}
._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;
}
-@keyframes bounce{
- 0% {
- transform: scaleX(0.90) scaleY(0.90) ;
- }
- 19% {
- transform: scaleX(1.10) scaleY(1.10) ;
- }
- 48% {
- transform: scaleX(0.95) scaleY(0.95) ;
- }
- 100% {
- transform: scaleX(1.00) scaleY(1.00) ;
- }
+@keyframes bounce {
+ 0% {
+ transform: scaleX(0.9) scaleY(0.9);
+ }
+ 19% {
+ transform: scaleX(1.1) scaleY(1.1);
+ }
+ 48% {
+ transform: scaleX(0.95) scaleY(0.95);
+ }
+ 100% {
+ transform: scaleX(1) scaleY(1);
+ }
}
.ph-xxs {
- font-size: 0.5em;
+ font-size: 0.5em;
}
.ph-xs {
- font-size: 0.75em;
+ font-size: 0.75em;
}
.ph-sm {
- font-size: 0.875em;
+ font-size: 0.875em;
}
.ph-lg {
- font-size: 1.3333em;
- line-height: 0.75em;
- vertical-align: -0.0667em;
+ font-size: 1.3333em;
+ line-height: 0.75em;
+ vertical-align: -0.0667em;
justify-content: center;
}
.ph-xl {
- font-size: 1.5em;
- line-height: 0.6666em;
- vertical-align: -0.075em;
+ font-size: 1.5em;
+ line-height: 0.6666em;
+ vertical-align: -0.075em;
}
.ph-1x {
- font-size: 1em;
+ font-size: 1em;
}
.ph-2x {
- font-size: 2em;
+ font-size: 2em;
}
.ph-3x {
- font-size: 3em;
+ font-size: 3em;
}
.ph-4x {
- font-size: 4em;
+ font-size: 4em;
}
.ph-5x {
- font-size: 5em;
+ font-size: 5em;
}
.ph-6x {
- font-size: 6em;
+ font-size: 6em;
}
.ph-7x {
- font-size: 7em;
+ font-size: 7em;
}
.ph-8x {
- font-size: 8em;
+ font-size: 8em;
}
.ph-9x {
- font-size: 9em;
+ font-size: 9em;
}
.ph-10x {
- font-size: 10em;
+ font-size: 10em;
}
.ph-fw {
- text-align: center;
- width: 1.25em;
+ text-align: center;
+ width: 1.25em;
display: inline-flex;
}
@@ -831,24 +866,24 @@ hr {
}
._otp_input {
- width: 30px;
- height: 30px;
- padding: 5px;
- margin: 1rem 7px auto;
- font-size: 20px;
- border-radius: 4px;
- border: 2px solid var(--accent);
+ width: 30px;
+ height: 30px;
+ padding: 5px;
+ margin: 1rem 7px auto;
+ font-size: 20px;
+ border-radius: 4px;
+ border: 2px solid var(--accent);
background-color: var(--accentedBg);
color: var(--fg);
- text-align: center;
+ text-align: center;
}
._otp_input.error {
- border-color: var(--error) !important;
+ border-color: var(--error) !important;
}
._otp_input::-webkit-inner-spin-button,
._otp_input::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
+ -webkit-appearance: none;
+ margin: 0;
}
@keyframes reset {
@@ -861,7 +896,7 @@ hr {
animation-duration: 0s !important;
}
-@media(prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
@keyframes scaleIn {
from {
transform: scale(0);
@@ -870,7 +905,7 @@ hr {
}
@keyframes scaleInSmall {
from {
- transform: scale(.8);
+ transform: scale(0.8);
opacity: 0;
}
}