ajout scroll bar

This commit is contained in:
MathieuG-P
2022-05-13 20:48:07 +02:00
parent 29cb5f45af
commit a6910dbbbf
8 changed files with 97 additions and 18042 deletions
@@ -21,3 +21,9 @@
background-blend-mode: luminosity;
background-size: 100%;
}
#versions{
scrollbar-gutter: stable;
}
@@ -5,65 +5,66 @@ import './nav-bar.component.css'
export function NavBar() {
return (
<div className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
<div id='nav-bar' className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
<div className='w-full flex items-start content-start justify-center relative mb-3'>
<div className='relative aspect-square w-16'>
<span id='logo-bottom' className='bg-green-400 aspect-square w-16'> </span>
<span id='logo-top' className='bg-purple-500 aspect-square w-16'> </span>
<span id='logo-bottom' className='bg-blue-500 aspect-square w-16'> </span>
<span id='logo-top' className='bg-red-500 aspect-square w-16'> </span>
</div>
</div>
<div className='grow overflow-y-scroll scrollbar-hide'>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div id='versions' className='relative left-1 w-full grow overflow-y-hidden scrollbar-th scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div><div className='grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<div className='grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
<div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
<span className='font-bold text-gray-200'>1.19.0</span>
</div>
+10
View File
@@ -0,0 +1,10 @@
::-webkit-scrollbar {
width: 4px !important;
padding: 0;
margin: 0;
display: inline;
}
::-webkit-scrollbar-thumb {
border-radius: 20px;
}
+1
View File
@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
import { InitDownloadInfoInterface } from 'main/ipcs/bs-download-ipcs';
import App from './App';
import 'tailwindcss/tailwind.css';
import './index.css'
const container = document.getElementById('root')!;
const root = createRoot(container);