ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove "circle reveal" animation on load of sign-in page (#3802)

Browse Source 
* Remove "circle reveal" animation on load of sign-in page

* Remove CSS selector that broke text rendering when OS was dark and app theme is light
This commit is contained in:
Frank Noirot
2024-09-05 21:59:20 -04:00
committed by GitHub
parent 9538ffb8ec
commit 11ebe11111
2 changed files with 10 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/index.css
View File

@ -56,11 +56,6 @@ body.dark {
.dark .body-bg {
@apply bg-chalkboard-100;
}
body {
scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
@apply text-chalkboard-10;
}
}
select {
@ -300,32 +295,11 @@ code {
}
@layer utilities {
/* Modified from the very helpful https://www.transition.style/#in:circle:hesitate */
@keyframes circle-in-hesitate {
0% {
clip-path: circle(
var(--circle-size-start, 0%) at var(--circle-x, 50%)
var(--circle-y, 50%)
);
}
40% {
clip-path: circle(
var(--circle-size-mid, 40%) at var(--circle-x, 50%) var(--circle-y, 50%)
);
}
100% {
clip-path: circle(
var(--circle-size-end, 125%) at var(--circle-x, 50%)
var(--circle-y, 50%)
);
}
}
.in-circle-hesitate {
animation: var(--circle-duration, 2.5s)
var(--circle-timing, cubic-bezier(0.25, 1, 0.3, 1)) circle-in-hesitate
both;
}
/*
This is where your own custom Tailwind utility classes can go,
which lets you use them with @apply in your CSS, and get
autocomplete in classNames in your JSX.
*/
}
#code-mirror-override .cm-scroller,

16
src/routes/SignIn.tsx
View File

@ -70,17 +70,11 @@ const SignIn = () => {
>
<div
style={
{
height: 'calc(100vh - 16px)',
'--circle-x': '14%',
'--circle-y': '12%',
'--circle-size-mid': '15%',
'--circle-size-end': '200%',
'--circle-timing': 'cubic-bezier(0.25, 1, 0.4, 0.9)',
...(isDesktop() ? { '-webkit-app-region': 'no-drag' } : {}),
} as CSSProperties
isDesktop()
? ({ '-webkit-app-region': 'no-drag' } as CSSProperties)
: {}
}
className="in-circle-hesitate body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"
className="body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"
>
<div className="max-w-7xl grid gap-5 grid-cols-3 xl:grid-cols-4 xl:grid-rows-5">
<div className="col-span-2 xl:col-span-3 xl:row-span-3 max-w-3xl mr-8 mb-8">
@ -204,7 +198,7 @@ const SignIn = () => {
<div className="flex gap-4 flex-wrap items-center">
<ActionButton
Element="externalLink"
to="https://zoo.dev/docs/kcl-samples/ball-bearing"
to="https://zoo.dev/docs/kcl-samples/a-parametric-bearing-pillow-block"
iconStart={{ icon: 'settings' }}
className="border-chalkboard-30 dark:border-chalkboard-80"
>