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

Merge pull request #232 from duckietm/Dev

Browse Source 
🆙 Fix scrollbar
This commit is contained in:
DuckieTM
2026-06-11 10:31:41 +02:00
committed by GitHub
parent c4d7070316 40864cf880
commit 69b643761c
1 changed files with 79 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/index.css
+79 -60
View File
@@ -116,97 +116,128 @@ body {
}
*::-webkit-scrollbar {
width: 17px !important;
height: 17px !important;
width: 18px !important;
height: 18px !important;
background-color: #bdbbb3 !important;
}
*::-webkit-scrollbar:horizontal {
height: 17px !important;
height: 18px !important;
}
*::-webkit-scrollbar:not(:horizontal) {
width: 17px !important;
width: 18px !important;
}
/* App-wide Habbo scrollbar (sprites cropped from catalog_skin1.png).
Thumb sprite is 17x34 with caps + grip baked in; stretched full
height via background-size: 17px 100%. Arrow buttons are natural
17x16 sprites. */
*::-webkit-scrollbar-track {
background-color: #e7e5d8 !important;
background-image: none !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;
border-radius: 0 !important;
}
*::-webkit-scrollbar-thumb {
min-height: 24px !important;
background-color: transparent !important;
background-image: url("../assets/images/catalog/scrollbar/scroll_v_thumb.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 17px 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background:
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;
image-rendering: pixelated !important;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
background:
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;
}
*::-webkit-scrollbar-thumb:active {
background-image: url("../assets/images/catalog/scrollbar/scroll_v_thumb_pressed.png") !important;
background:
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;
}
*::-webkit-scrollbar-corner {
background: transparent !important;
}
*::-webkit-scrollbar-button:single-button {
display: block !important;
width: 17px !important;
height: 16px !important;
/* Cream fill so the arrow sprite's transparent rounded corners
paint over the track colour, not whatever is behind the
scrollbar (which can render black). */
background-color: #e7e5d8 !important;
background-repeat: no-repeat !important;
background-position: center !important;
border: 0 !important;
image-rendering: pixelated !important;
}
*::-webkit-scrollbar-button:single-button:vertical:decrement {
background-image: url("../assets/images/catalog/scrollbar/scroll_v_up.png") !important;
display: block !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='%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 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
*::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("../assets/images/catalog/scrollbar/scroll_v_up_pressed.png") !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='%23000'/></svg>") center center / 9px 6px no-repeat,
#bcbcbc !important;
}
*::-webkit-scrollbar-button:single-button:vertical:increment {
background-image: url("../assets/images/catalog/scrollbar/scroll_v_down.png") !important;
display: block !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='%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 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
*::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("../assets/images/catalog/scrollbar/scroll_v_down_pressed.png") !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='%23000'/></svg>") center center / 9px 6px no-repeat,
#bcbcbc !important;
}
*::-webkit-scrollbar-button:single-button:horizontal:decrement {
width: 16px !important;
height: 17px !important;
background-image: url("../assets/images/catalog/scrollbar/scroll_h_left.png") !important;
display: block !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='%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 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
*::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url("../assets/images/catalog/scrollbar/scroll_h_left_pressed.png") !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='%23000'/></svg>") center center / 6px 9px no-repeat,
#bcbcbc !important;
}
*::-webkit-scrollbar-button:single-button:horizontal:increment {
width: 16px !important;
height: 17px !important;
background-image: url("../assets/images/catalog/scrollbar/scroll_h_right.png") !important;
display: block !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='%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 #ffffff,
inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
}
*::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url("../assets/images/catalog/scrollbar/scroll_h_right_pressed.png") !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='%23000'/></svg>") center center / 6px 9px no-repeat,
#bcbcbc !important;
}
@layer components {
@@ -822,8 +853,6 @@ body {
}
}
/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */
.nitro-avatar-editor-wardrobe-figure-preview {
background-color: #677181;
overflow: hidden;
@@ -946,10 +975,9 @@ body {
}
}
/* Font Size */
.fs-custom {
font-size: var(--font-size, 16px); /* Fallback to 16px if not set */
font-size: var(--font-size, 16px);
}
.nitro-wired {
@@ -1904,8 +1932,6 @@ body {
box-shadow: none !important;
}
/* ── Avatar Editor ─────────────────────────────────────────────────────── */
.color-picker-frame {
border-image-source: url('@/assets/images/avatareditor/color_frame.png');
border-image-slice: 6 6 6 6 fill;
@@ -1983,8 +2009,6 @@ body {
gap: 5px;
}
/* ── Avatar Editor tab icons ───────────────────────────────────────────── */
.avatar-editor-tabs {
position: relative;
@@ -2051,11 +2075,6 @@ body {
box-shadow: none !important;
}
/* ── Avatar Editor misc ─────────────────────────────────────────────────── */
/* ── Pet Companion ─────────────────────────────────────────────────────── */
.pet-equipped-bar {
display: flex;
align-items: center;