mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-22 15:40:07 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix scroll styles

Browse Source
This commit is contained in:
Jamie Pine
2022-04-27 10:50:49 -07:00
parent f8190914e4
commit e0a66ebbd5
5 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/interface/src/screens/Content.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react';
export const ContentScreen: React.FC<{}> = (props) => {
return (
<div className="flex flex-col w-full h-screen p-5 overflow-x-scroll">
<div className="flex flex-col w-full h-screen p-5 custom-scrollbar page-scroll">
<div className="flex flex-col space-y-5 pb-7">
<h1 className="text-lg font-bold ">Content</h1>
</div>

2
packages/interface/src/screens/Debug.tsx
View File

@@ -17,7 +17,7 @@ export const DebugScreen: React.FC<{}> = (props) => {
// });
const { mutate: identifyFiles } = useBridgeCommand('IdentifyUniqueFiles');
return (
<div className="flex flex-col w-full h-screen p-5 overflow-x-scroll">
<div className="flex flex-col w-full h-screen p-5 custom-scrollbar page-scroll">
<div className="flex flex-col space-y-5 pb-7">
<h1 className="text-lg font-bold ">Developer Debugger</h1>
<div className="flex flex-row pb-4 space-x-2">

2
packages/interface/src/screens/Overview.tsx
View File

@@ -30,7 +30,7 @@ export const OverviewScreen: React.FC<{}> = (props) => {
}
return (
<div className="flex flex-col w-full h-screen overflow-x-hidden overflow-y-scroll no-scrollbar">
<div className="flex flex-col w-full h-screen overflow-x-hidden custom-scroll page-scroll">
<div data-tauri-drag-region className="flex flex-shrink-0 w-full h-7" />
<div className="flex flex-col w-full h-screen px-3">
<div className="flex items-center w-full">

2
packages/interface/src/screens/Settings.tsx
View File

@@ -75,7 +75,7 @@ export const SettingsScreen: React.FC<{}> = () => {
Contacts
</SidebarLink>
</div>
<div className="flex flex-grow-0 w-full h-full max-h-screen overflow-y-scroll">
<div className="flex flex-grow-0 w-full h-full max-h-screen custom-scrollbar page-scroll">
<div className="flex flex-grow px-12 py-5">
<Outlet />
<div className="block h-20" />

31
packages/interface/src/style.scss
View File

@@ -14,6 +14,13 @@ body { font-family: "InterVariable", sans-serif; }
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.custom-scroll {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
.explorer-scroll {
&::-webkit-scrollbar {
height: 6px;
@@ -26,3 +33,27 @@ body { font-family: "InterVariable", sans-serif; }
@apply rounded-[6px] bg-gray-300 dark:bg-gray-550;
}
}
.default-scroll {
&::-webkit-scrollbar {
height: 6px;
width: 8px;
}
&::-webkit-scrollbar-track {
@apply bg-transparent rounded-[6px];
}
&::-webkit-scrollbar-thumb {
@apply rounded-[6px] bg-gray-300 dark:bg-gray-550;
}
}
.page-scroll {
&::-webkit-scrollbar {
height: 6px;
width: 8px;
}
&::-webkit-scrollbar-track {
@apply bg-transparent rounded-[6px] my-[10px]
}
&::-webkit-scrollbar-thumb {
@apply rounded-[6px] bg-gray-300 dark:bg-gray-550;
}
}