oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat: overlay scrollbars

Browse source
This commit is contained in:
LynithDev 2025-05-26 16:58:25 +02:00
parent eebd4e90c2
commit 9e860c77f8
5 changed files with 47 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/onelauncher/frontend/index.html
View file

@ -11,7 +11,7 @@
/> />
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>OneClient</title> <title>OneLauncher</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
apps/onelauncher/frontend/src/main.tsx
View file

@ -8,6 +8,7 @@ import { routeTree } from './routeTree.gen';
import './fonts'; import './fonts';
import './utils/nativeExperience'; import './utils/nativeExperience';
import './utils/devExperience'; import './utils/devExperience';
import 'overlayscrollbars/overlayscrollbars.css';
import './styles/global.css'; import './styles/global.css';
export * as bindings from './bindings.gen'; export * as bindings from './bindings.gen';

4
apps/onelauncher/frontend/src/routes/__root.tsx
View file

@ -29,13 +29,13 @@ function RootRoute() {
navigate={(to, options) => router.navigate({ to, ...options })} navigate={(to, options) => router.navigate({ to, ...options })}
useHref={to => router.buildLocation({ to }).href} useHref={to => router.buildLocation({ to }).href}
> >
<main className='max-h-screen min-h-screen flex flex-col'> <div className="h-screen flex flex-col overflow-hidden px-0.5">
<WindowFrame /> <WindowFrame />
<Outlet /> <Outlet />
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</main> </div>
</RouterProvider> </RouterProvider>
</AnimatedOutletProvider> </AnimatedOutletProvider>
); );

42
apps/onelauncher/frontend/src/routes/app/route.tsx
View file

@ -9,33 +9,33 @@ export const Route = createFileRoute('/app')({
function RouteComponent() { function RouteComponent() {
return ( return (
<div className="h-full flex flex-col"> <>
<div className="flex flex-col px-4"> <div className="flex flex-col px-4">
<Navbar /> <Navbar />
</div> </div>
<div className="h-full w-full overflow-hidden"> <div className="flex-1 overflow-hidden">
<div className="relative h-full w-full flex flex-col overflow-x-hidden pb-8"> <OverlayScrollbarsComponent
<OverlayScrollbarsComponent className="h-full w-full flex flex-col overflow-x-hidden overflow-y-auto"> className="h-full w-full overflow-auto overflow-x-hidden"
<div className="h-full flex-1 px-4"> >
<div className="pb-4 px-4">
<AnimatedOutlet <AnimatedOutlet
enter={{ enter={{
initial: { opacity: 0, transform: 'translateX(-20%)' }, initial: { opacity: 0, transform: 'translateX(-20%)' },
animate: { opacity: 1, transform: 'translateX(0)' }, animate: { opacity: 1, transform: 'translateX(0)' },
}} }}
exit={{ exit={{
initial: { opacity: 1, transform: 'translateX(0)' }, initial: { opacity: 1, transform: 'translateX(0)' },
animate: { opacity: 0, transform: 'translateX(-20%)' }, animate: { opacity: 0, transform: 'translateX(-20%)' },
}} }}
from={Route.id} from={Route.id}
transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }} transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }}
/> />
</div> </div>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</div>
</div> </div>
</div> </>
); );
} }

22
apps/onelauncher/frontend/src/styles/global.css
View file

@ -60,6 +60,10 @@
--color-ghost-overlay: rgba(255, 255, 255, 0.05); --color-ghost-overlay: rgba(255, 255, 255, 0.05);
--color-ghost-overlay-hover: rgba(255, 255, 255, 0.10); --color-ghost-overlay-hover: rgba(255, 255, 255, 0.10);
--color-scrollbar-bg: rgba(255, 255, 255, 0.05);
--color-scrollbar-bg-hover: rgba(255, 255, 255, 0.10);
--color-scrollbar-bg-pressed: rgba(255, 255, 255, 0.15);
/* other */ /* other */
--font-sans: "Poppins", sans-serif; --font-sans: "Poppins", sans-serif;
--text-xs: 0.688rem; --text-xs: 0.688rem;
@ -83,3 +87,21 @@ body {
@apply bg-page text-fg-primary text-base; @apply bg-page text-fg-primary text-base;
} }
.os-scrollbar {
--os-size: 10px;
--os-track-border-radius: var(--border-radius-lg);
--os-handle-bg: var(--color-scrollbar-bg);
--os-handle-bg-hover: var(--color-scrollbar-bg-hover);
--os-handle-bg-active: var(--color-scrollbar-bg-pressed);
--os-handle-perpendicular-size-hover: 140%;
--os-handle-perpendicular-size-active: 140%;
--os-handle-interactive-area-offset: 4px;
}
.os-scrollbar-offset-right {
--os-padding-axis: 10;
}
.os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
display: none;
}