shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

scrollbar

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-27 14:22:36 +05:30
parent af896fed6e
commit ef8f075689
1 changed files with 148 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/index.css
View File

@@ -20,22 +20,83 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
overflow-y: scroll; overflow-y: auto;
} -ms-overflow-style: none; /* IE and Edge */
.scrollbar-visible { scrollbar-width: none; /* Firefox */
scrollbar-width: auto;
scrollbar-color: #888 #333;
}
.scrollbar-visible::-webkit-scrollbar {
width: 20px;
} }
.scrollbar-visible::-webkit-scrollbar-thumb { body::-webkit-scrollbar {
background-color: #888; display: none; /* Chrome, Safari and Opera */
}
/* Hide default scrollbar completely */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #201f31; /* Match the page background color */
}
::-webkit-scrollbar-track {
background-color: #201f31; /* Match the page background color */
}
::-webkit-scrollbar-thumb {
background-color: #404040;
border-radius: 20px;
border: 2px solid #201f31; /* Match the page background color */
}
::-webkit-scrollbar-thumb:hover {
background: #4d4d4d;
}
/* Hide scrollbar buttons */
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background-color: #201f31; /* Match the page background color */
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #404040 #201f31; /* Match the page background color */
}
/* Hide default scrollbar for .scrollbar-visible class */
.scrollbar-visible {
scrollbar-width: thin;
scrollbar-color: #404040 #201f31; /* Match the page background color */
}
.scrollbar-visible::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #201f31; /* Match the page background color */
} }
.scrollbar-visible::-webkit-scrollbar-track { .scrollbar-visible::-webkit-scrollbar-track {
background: black; background-color: #201f31; /* Match the page background color */
}
.scrollbar-visible::-webkit-scrollbar-thumb {
background-color: #404040;
border-radius: 20px;
border: 2px solid #201f31; /* Match the page background color */
}
/* Hide scrollbar buttons for .scrollbar-visible */
.scrollbar-visible::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
.scrollbar-visible::-webkit-scrollbar-corner {
background-color: #201f31; /* Match the page background color */
} }
.scrollbar-hide { .scrollbar-hide {
-ms-overflow-style: none; -ms-overflow-style: none;
@@ -124,3 +185,79 @@ body {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
display: inline-block; display: inline-block;
} }
/* Modern Scrollbar Styling */
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.02);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Hide scrollbar buttons */
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.02);
}
/* Scrollbar visible class with modern styling */
.scrollbar-visible {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.02);
}
.scrollbar-visible::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
.scrollbar-visible::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.02);
border-radius: 10px;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.scrollbar-visible::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
.scrollbar-visible::-webkit-scrollbar-corner {
background-color: transparent;
}