From 196b62bc1da6e96ef55d45865489cdad7aed4f31 Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Tue, 27 Jun 2023 19:32:17 -0700 Subject: [PATCH] chore: :art: format, add scss to prettier formatting --- packages/client/package.json | 2 +- .../src/components/MkReactionsViewer.vue | 16 +- .../client/src/pages/settings/general.vue | 18 +- packages/client/src/style.scss | 225 ++++++++++-------- 4 files changed, 156 insertions(+), 105 deletions(-) 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; } }