duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Scrollbar 100% habbo

Browse Source
This commit is contained in:
DuckieTM
2026-06-06 18:58:23 +02:00
parent 0a6aeafe11
commit 110363ab1c
8 changed files with 201 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/catalog/CatalogClassicView.css
+68 -64
View File
@@ -1353,8 +1353,8 @@
.nitro-catalog-classic-window .nitro-catalog-classic-grid-shell::-webkit-scrollbar,
.nitro-catalog-classic-window .nitro-catalog-classic-grid::-webkit-scrollbar,
.nitro-catalog-classic-window .nitro-catalog-classic-layout-container::-webkit-scrollbar {
width: 17px;
height: 17px;
width: 18px;
height: 18px;
}
.nitro-catalog-classic-window * {
@@ -1363,116 +1363,120 @@
}
.nitro-catalog-classic-window *::-webkit-scrollbar {
width: 17px !important;
height: 17px !important;
background-color: #e7e5d8 !important;
width: 18px !important;
height: 18px !important;
background-color: #bdbbb3 !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-track {
background-image: none !important;
background-color: #e7e5d8 !important;
box-shadow: inset 1px 0 0 #b9b6a5, inset -1px 0 0 #ffffff !important;
background-color: #bdbbb3 !important;
box-shadow: inset 1px 0 0 #000000 !important;
border: 0 !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-thumb {
min-height: 28px !important;
border: 1px solid #2a2a26 !important;
border-radius: 2px !important;
/* Grip: a single 2px #a0a0a0 stripe in an 8px-wide centered band,
repeated every 5px (2px stripe + 3px body gap).
Outline: 1px black border, then a 2px white inset frame inside it. */
min-height: 24px !important;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><line x1='1' y1='1' x2='9' y2='1' stroke='%23dcdcd2' stroke-width='1'/><line x1='1' y1='3' x2='9' y2='3' stroke='%235e5e58' stroke-width='1'/><line x1='1' y1='5' x2='9' y2='5' stroke='%23dcdcd2' stroke-width='1'/><line x1='1' y1='7' x2='9' y2='7' stroke='%235e5e58' stroke-width='1'/></svg>") center center / 10px 9px no-repeat,
linear-gradient(180deg, #d6d6cc 0%, #b4b4aa 30%, #9a9a90 50%, #b4b4aa 70%, #d6d6cc 100%) !important;
background-color: #a8a89e !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23a0a0a0'/></svg>") center top / 8px 5px repeat-y,
#d9d9d9 !important;
border: 1px solid #000000 !important;
border-radius: 3px !important;
box-shadow: inset 0 0 0 2px #ffffff !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-thumb:hover {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><line x1='1' y1='1' x2='9' y2='1' stroke='%23ececea' stroke-width='1'/><line x1='1' y1='3' x2='9' y2='3' stroke='%235e5e58' stroke-width='1'/><line x1='1' y1='5' x2='9' y2='5' stroke='%23ececea' stroke-width='1'/><line x1='1' y1='7' x2='9' y2='7' stroke='%235e5e58' stroke-width='1'/></svg>") center center / 10px 9px no-repeat,
linear-gradient(180deg, #e0e0d6 0%, #bebeb4 30%, #a4a49a 50%, #bebeb4 70%, #e0e0d6 100%) !important;
background-color: #b2b2a8 !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23ababab'/></svg>") center top / 8px 5px repeat-y,
#e3e3e3 !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-thumb:active {
background:
linear-gradient(180deg, #c6c6bc 0%, #a4a49a 30%, #8a8a82 50%, #a4a49a 70%, #c6c6bc 100%) !important;
background-color: #9a9a90 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(255, 255, 255, 0.25) !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><rect x='0' y='0' width='8' height='2' fill='%23606060'/></svg>") center top / 8px 5px repeat-y,
#bcbcbc !important;
}
/* Arrow buttons: light grey cap with rounded OUTER corners (up button
rounded at the top, down button rounded at the bottom), 1px black
border, dark chevron via inline SVG. */
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:decrement {
display: block !important;
width: 17px !important;
height: 16px !important;
width: 18px !important;
height: 18px !important;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='4.5,0 9,6 0,6' fill='%23142536'/></svg>") center center / 9px 6px no-repeat,
linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
background-color: #e7e5d8 !important;
border: 1px solid #0b2d3a !important;
border-radius: 2px !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='4.5,0 9,6 0,6' fill='%23222'/></svg>") center center / 9px 6px no-repeat,
#d9d9d9 !important;
border: 1px solid #000000 !important;
border-radius: 3px 3px 0 0 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
inset 0 1px 0 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='4.5,0 9,6 0,6' fill='%23000'/></svg>") center center / 9px 6px no-repeat,
linear-gradient(180deg, #c7c5b8 0%, #aeaca0 100%) !important;
background-color: #c7c5b8 !important;
#bcbcbc !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:increment {
display: block !important;
width: 17px !important;
height: 16px !important;
width: 18px !important;
height: 18px !important;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='0,0 9,0 4.5,6' fill='%23142536'/></svg>") center center / 9px 6px no-repeat,
linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
background-color: #e7e5d8 !important;
border: 1px solid #0b2d3a !important;
border-radius: 2px !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='0,0 9,0 4.5,6' fill='%23222'/></svg>") center center / 9px 6px no-repeat,
#d9d9d9 !important;
border: 1px solid #000000 !important;
border-radius: 0 0 3px 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
inset 0 1px 0 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:increment:active {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><polygon points='0,0 9,0 4.5,6' fill='%23000'/></svg>") center center / 9px 6px no-repeat,
linear-gradient(180deg, #c7c5b8 0%, #aeaca0 100%) !important;
background-color: #c7c5b8 !important;
#bcbcbc !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:decrement {
display: block !important;
width: 16px !important;
height: 17px !important;
width: 18px !important;
height: 18px !important;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='0,4.5 6,0 6,9' fill='%23142536'/></svg>") center center / 6px 9px no-repeat,
linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
background-color: #e7e5d8 !important;
border: 1px solid #0b2d3a !important;
border-radius: 2px !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='0,4.5 6,0 6,9' fill='%23222'/></svg>") center center / 6px 9px no-repeat,
#d9d9d9 !important;
border: 1px solid #000000 !important;
border-radius: 3px 0 0 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
inset 0 1px 0 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='0,4.5 6,0 6,9' fill='%23000'/></svg>") center center / 6px 9px no-repeat,
#bcbcbc !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:increment {
display: block !important;
width: 16px !important;
height: 17px !important;
width: 18px !important;
height: 18px !important;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='6,4.5 0,0 0,9' fill='%23142536'/></svg>") center center / 6px 9px no-repeat,
linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
background-color: #e7e5d8 !important;
border: 1px solid #0b2d3a !important;
border-radius: 2px !important;
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='6,4.5 0,0 0,9' fill='%23222'/></svg>") center center / 6px 9px no-repeat,
#d9d9d9 !important;
border: 1px solid #000000 !important;
border-radius: 0 3px 3px 0 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
inset 0 1px 0 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9'><polygon points='6,4.5 0,0 0,9' fill='%23000'/></svg>") center center / 6px 9px no-repeat,
#bcbcbc !important;
}
.nitro-catalog-classic-breadcrumb {