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
+50 -18008
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -219,6 +219,7 @@
"sass": "^1.49.11",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"tailwind-scrollbar": "^1.3.1",
"tailwindcss": "^3.0.24",
"terser-webpack-plugin": "^5.3.1",
"ts-jest": "^27.1.4",
+1 -10
View File
@@ -1,14 +1,5 @@
{
"name": "electron-react-boilerplate",
"version": "4.5.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "electron-react-boilerplate",
"version": "4.5.0",
"hasInstallScript": true,
"license": "MIT"
}
}
"lockfileVersion": 1
}
@@ -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);
+4 -1
View File
@@ -1,5 +1,8 @@
module.exports = {
content: ['./src/renderer/**/*.tsx'],
mode: 'jit',
plugins: [require('tailwind-scrollbar-hide')],
plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')],
variants: {
scrollbar: ['rounded']
}
};