chore: 🎨 format, add scss to prettier formatting

This commit is contained in:
ThatOneCalculator 2023-06-27 19:32:17 -07:00
parent 23da13edac
commit 5c10b18014
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
4 changed files with 156 additions and 105 deletions

View File

@ -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",

View File

@ -7,7 +7,7 @@
:count="count"
:is-initial="initialReactions.has(reaction)"
:note="note"
@reacted="reactionsEl.scrollTo(0,0)"
@reacted="reactionsEl.scrollTo(0, 0)"
/>
</div>
</template>
@ -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;

View File

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

View File

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