remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-10-19 22:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(global-css): enhance scrollbar

Browse Source
This commit is contained in:
ItzCrazyKns
2025-10-19 13:56:27 +05:30
parent e471cb5da1
commit 3564bcc48c
1 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/globals.css
View File

@@ -5,7 +5,7 @@
@font-face {
font-family: 'PP Editorial';
src: url('/fonts/pp-ed-ul.otf') format('opentype');
font-weight: 200;
font-weight: 300;
font-style: normal;
font-display: swap;
}
@@ -18,6 +18,66 @@
.overflow-hidden-scrollable::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: thin;
scrollbar-color: #e8edf1 transparent; /* light-200 */
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: #e8edf1; /* light-200 */
border-radius: 3px;
transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
background: #d0d7de; /* light-300 */
}
@media (prefers-color-scheme: dark) {
* {
scrollbar-color: #21262d transparent; /* dark-200 */
}
*::-webkit-scrollbar-thumb {
background: #21262d; /* dark-200 */
}
*::-webkit-scrollbar-thumb:hover {
background: #30363d; /* dark-300 */
}
}
:root.dark *,
html.dark *,
body.dark * {
scrollbar-color: #21262d transparent; /* dark-200 */
}
:root.dark *::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb,
body.dark *::-webkit-scrollbar-thumb {
background: #21262d; /* dark-200 */
}
:root.dark *::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover,
body.dark *::-webkit-scrollbar-thumb:hover {
background: #30363d; /* dark-300 */
}
html {
scroll-behavior: smooth;
}
}
@layer utilities {
@@ -25,6 +85,7 @@
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
}