natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/package.json
View File

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

16
packages/client/src/components/MkReactionsViewer.vue
View File

@ -7,7 +7,7 @@
:count="count" :count="count"
:is-initial="initialReactions.has(reaction)" :is-initial="initialReactions.has(reaction)"
:note="note" :note="note"
@reacted="reactionsEl.scrollTo(0,0)" @reacted="reactionsEl.scrollTo(0, 0)"
/> />
</div> </div>
</template> </template>
@ -37,8 +37,18 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
overflow-x: auto; overflow-x: auto;
margin-inline: -24px; margin-inline: -24px;
padding-inline: 22px 160px; 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; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

18
packages/client/src/pages/settings/general.vue
View File

@ -45,12 +45,18 @@
class="_formBlock" class="_formBlock"
>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch >{{ 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">{{ <FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
i18n.ts.enterSendsMessage i18n.ts.enterSendsMessage
}}</FormSwitch> }}</FormSwitch>

225
packages/client/src/style.scss
View File

@ -13,22 +13,14 @@
} }
// https://larsenwork.com/easing-gradients/ // 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%); //--ad: rgb(255 169 0 / 10%);
} }
@ -56,7 +48,9 @@ html {
overflow-x: clip; overflow-x: clip;
&.useSystemFont { &.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 { body::-webkit-scrollbar {
@ -98,12 +92,16 @@ body::-webkit-scrollbar-thumb {
} }
html._themeChanging_ { html._themeChanging_ {
&, *, ::before, ::after { &,
*,
::before,
::after {
transition: background 1s ease, border 1s ease !important; transition: background 1s ease, border 1s ease !important;
} }
} }
html, body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -111,8 +109,18 @@ html, body {
.swiper { .swiper {
margin-inline: -24px !important; margin-inline: -24px !important;
padding-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 { .swiper-slide {
min-height: 100vh; min-height: 100vh;
@ -129,11 +137,13 @@ a {
// transform: translateY(0.1em); // transform: translateY(0.1em);
// } // }
textarea, input { textarea,
input {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
optgroup, option { optgroup,
option {
background: var(--panel); background: var(--panel);
color: var(--fg); color: var(--fg);
} }
@ -150,8 +160,12 @@ hr {
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
._noSelect { ._noSelect {
@ -161,7 +175,8 @@ hr {
} }
._ghost { ._ghost {
&, * { &,
* {
@extend ._noSelect; @extend ._noSelect;
pointer-events: none; pointer-events: none;
} }
@ -201,7 +216,8 @@ hr {
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
&, * { &,
* {
@extend ._noSelect; @extend ._noSelect;
} }
@ -241,7 +257,9 @@ hr {
transition: background 0.2s; transition: background 0.2s;
} }
&:hover:before, &:focus::before, &.highlighted::before { &:hover:before,
&:focus::before,
&.highlighted::before {
background: var(--buttonBg); background: var(--buttonBg);
} }
&:focus-visible::before { &:focus-visible::before {
@ -269,7 +287,11 @@ hr {
._buttonGradate { ._buttonGradate {
@extend ._buttonPrimary; @extend ._buttonPrimary;
color: var(--fgOnAccent); color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(
90deg,
var(--buttonGradateA),
var(--buttonGradateB)
);
&:not(:disabled):hover { &:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
@ -282,7 +304,7 @@ hr {
._help { ._help {
color: var(--accent); color: var(--accent);
cursor: help cursor: help;
} }
._textButton { ._textButton {
@ -486,7 +508,7 @@ hr {
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
background: var(--bg); background: var(--bg);
opacity: .75; opacity: 0.75;
} }
} }
} }
@ -517,7 +539,7 @@ hr {
._flexList { ._flexList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .2em; gap: 0.2em;
width: min-content; width: min-content;
min-width: 100%; min-width: 100%;
&._center { &._center {
@ -594,7 +616,7 @@ hr {
color: var(--link); color: var(--link);
&:after { &:after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -635,10 +657,15 @@ hr {
} }
:not(.noGap):not(._block) > { :not(.noGap):not(._block) > {
.note-container, .cmuxhskf > section, ._gap > ._block, ._panel, .noGap, .profile, .card { .note-container,
&:not(.caution) .cmuxhskf > section,
{ ._gap > ._block,
box-shadow: 0 4px 25px rgba(0,0,0,0.04); ._panel,
.noGap,
.profile,
.card {
&:not(.caution) {
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
border-radius: var(--radius); border-radius: var(--radius);
overflow: clip; overflow: clip;
} }
@ -651,21 +678,29 @@ hr {
._zoom { ._zoom {
transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s;
transition-property: opacity, transform; 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; transition: opacity 0.5s, transform 0.5s !important;
} }
.zoom-enter-from, .zoom-leave-to { .zoom-enter-from,
.zoom-leave-to {
opacity: 0; opacity: 0;
transform: scale(0.9); transform: scale(0.9);
} }
@keyframes blink { @keyframes blink {
0% { opacity: 1; } 0% {
70% { opacity: 0; } opacity: 1;
100% { opacity: 1; } }
70% {
opacity: 0;
}
100% {
opacity: 1;
}
} }
@keyframes tada { @keyframes tada {
@ -696,7 +731,7 @@ hr {
} }
} }
@media(prefers-reduced-motion) { @media (prefers-reduced-motion) {
@keyframes tada { @keyframes tada {
from { from {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
@ -723,101 +758,101 @@ hr {
._anime_bounce { ._anime_bounce {
will-change: transform; will-change: transform;
animation: bounce ease 0.7s; animation: bounce ease 0.7s;
animation-iteration-count: 1; animation-iteration-count: 1;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
._anime_bounce_ready { ._anime_bounce_ready {
will-change: transform; will-change: transform;
transform: scaleX(0.90) scaleY(0.90) ; transform: scaleX(0.9) scaleY(0.9);
} }
._anime_bounce_standBy { ._anime_bounce_standBy {
transition: transform 0.1s ease; transition: transform 0.1s ease;
} }
@keyframes bounce{ @keyframes bounce {
0% { 0% {
transform: scaleX(0.90) scaleY(0.90) ; transform: scaleX(0.9) scaleY(0.9);
} }
19% { 19% {
transform: scaleX(1.10) scaleY(1.10) ; transform: scaleX(1.1) scaleY(1.1);
} }
48% { 48% {
transform: scaleX(0.95) scaleY(0.95) ; transform: scaleX(0.95) scaleY(0.95);
} }
100% { 100% {
transform: scaleX(1.00) scaleY(1.00) ; transform: scaleX(1) scaleY(1);
} }
} }
.ph-xxs { .ph-xxs {
font-size: 0.5em; font-size: 0.5em;
} }
.ph-xs { .ph-xs {
font-size: 0.75em; font-size: 0.75em;
} }
.ph-sm { .ph-sm {
font-size: 0.875em; font-size: 0.875em;
} }
.ph-lg { .ph-lg {
font-size: 1.3333em; font-size: 1.3333em;
line-height: 0.75em; line-height: 0.75em;
vertical-align: -0.0667em; vertical-align: -0.0667em;
justify-content: center; justify-content: center;
} }
.ph-xl { .ph-xl {
font-size: 1.5em; font-size: 1.5em;
line-height: 0.6666em; line-height: 0.6666em;
vertical-align: -0.075em; vertical-align: -0.075em;
} }
.ph-1x { .ph-1x {
font-size: 1em; font-size: 1em;
} }
.ph-2x { .ph-2x {
font-size: 2em; font-size: 2em;
} }
.ph-3x { .ph-3x {
font-size: 3em; font-size: 3em;
} }
.ph-4x { .ph-4x {
font-size: 4em; font-size: 4em;
} }
.ph-5x { .ph-5x {
font-size: 5em; font-size: 5em;
} }
.ph-6x { .ph-6x {
font-size: 6em; font-size: 6em;
} }
.ph-7x { .ph-7x {
font-size: 7em; font-size: 7em;
} }
.ph-8x { .ph-8x {
font-size: 8em; font-size: 8em;
} }
.ph-9x { .ph-9x {
font-size: 9em; font-size: 9em;
} }
.ph-10x { .ph-10x {
font-size: 10em; font-size: 10em;
} }
.ph-fw { .ph-fw {
text-align: center; text-align: center;
width: 1.25em; width: 1.25em;
display: inline-flex; display: inline-flex;
} }
@ -831,24 +866,24 @@ hr {
} }
._otp_input { ._otp_input {
width: 30px; width: 30px;
height: 30px; height: 30px;
padding: 5px; padding: 5px;
margin: 1rem 7px auto; margin: 1rem 7px auto;
font-size: 20px; font-size: 20px;
border-radius: 4px; border-radius: 4px;
border: 2px solid var(--accent); border: 2px solid var(--accent);
background-color: var(--accentedBg); background-color: var(--accentedBg);
color: var(--fg); color: var(--fg);
text-align: center; text-align: center;
} }
._otp_input.error { ._otp_input.error {
border-color: var(--error) !important; border-color: var(--error) !important;
} }
._otp_input::-webkit-inner-spin-button, ._otp_input::-webkit-inner-spin-button,
._otp_input::-webkit-outer-spin-button { ._otp_input::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
@keyframes reset { @keyframes reset {
@ -861,7 +896,7 @@ hr {
animation-duration: 0s !important; animation-duration: 0s !important;
} }
@media(prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@keyframes scaleIn { @keyframes scaleIn {
from { from {
transform: scale(0); transform: scale(0);
@ -870,7 +905,7 @@ hr {
} }
@keyframes scaleInSmall { @keyframes scaleInSmall {
from { from {
transform: scale(.8); transform: scale(0.8);
opacity: 0; opacity: 0;
} }
} }