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/components/mentions/MentionsView.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const MentionsView: FC<MentionsViewProps> = props =>
const hasAny = groups.length > 0;
return (
<NitroCardView className="w-[360px] h-[440px]" theme="primary-slim" uniqueKey="mentions">
<NitroCardView className="w-[360px] h-[440px] has-classic-scrollbar" theme="primary-slim" uniqueKey="mentions">
<NitroCardHeaderView headerText={ LocalizeText('mentions.window.title') } onCloseClick={ onClose } />
<NitroCardContentView gap={ 1 }>
<Flex alignItems="center" className="flex-wrap" gap={ 1 }>
src/components/navigator/NavigatorView.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export const NavigatorView: FC<{}> = props =>
<>
{ isVisible &&
<NitroCard
className={ `${ isOpenSavesSearches ? 'w-[600px] sm:min-w-[600px]' : 'w-navigator-w sm:min-w-navigator-w' } max-w-[calc(100vw-1rem)] h-navigator-h min-h-navigator-h` }
className={ `${ isOpenSavesSearches ? 'w-[600px] sm:min-w-[600px]' : 'w-navigator-w sm:min-w-navigator-w' } max-w-[calc(100vw-1rem)] h-navigator-h min-h-navigator-h has-classic-scrollbar` }
uniqueKey="navigator">
<NitroCard.Header
headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
src/components/room/widgets/chat-input/ChatInputCommandSelectorView.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export const ChatInputCommandSelectorView: FC<ChatInputCommandSelectorViewProps>
<span className="chat-input-command-popover-header-dot" aria-hidden />
<span>: Command</span>
</div>
<div ref={ listRef } className="chat-input-command-popover-list">
<div ref={ listRef } className="chat-input-command-popover-list has-classic-scrollbar">
{ commands.map((cmd, index) =>
{
const isSelected = (index === selectedIndex);
src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ export const ChatInputMentionSelectorView: FC<ChatInputMentionSelectorViewProps>
<span className="chat-input-mention-popover-header-dot" aria-hidden />
<span>@ Mention</span>
</div>
<div ref={ listRef } className="chat-input-mention-popover-list">
<div ref={ listRef } className="chat-input-mention-popover-list has-classic-scrollbar">
{ suggestions.map((suggestion, index) =>
{
const isSelected = (index === selectedIndex);
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 {
src/css/chat/ChatInputMentionSelectorView.css
-55
View File
@@ -1,13 +1,3 @@
/* ============================================================================
Chat-bar @-mention autocomplete - Habbo style
----------------------------------------------------------------------------
Mirrors the NitroCard look (cream cardstock, habbo-blue header, black 2px
border, drop shadow) and the in-room infostand row chrome. The popover
appears above the chat input, anchored to its bottom-left and the same
width as the input, with the bottom corners flush so it visually merges
with the input edge.
============================================================================ */
.chat-input-mention-popover {
position: absolute;
bottom: 100%;
@@ -186,32 +176,6 @@
color: #4a2b00;
}
/* Habbo-style scrollbar, matching NitroCardContentView scroll chrome. */
.chat-input-mention-popover-list::-webkit-scrollbar {
width: 8px;
}
.chat-input-mention-popover-list::-webkit-scrollbar-track {
background: #d8d8cf;
border-left: 1px solid #000;
}
.chat-input-mention-popover-list::-webkit-scrollbar-thumb {
background: #30728c;
border: 1px solid #000;
border-radius: 3px;
}
.chat-input-mention-popover-list::-webkit-scrollbar-thumb:hover {
background: #3c88a6;
}
/* ============================================================================
:command popover - same Habbo NitroCard chrome as the @-mention picker.
Header is green to distinguish it visually from the mention popover,
which uses the standard habbo-blue.
============================================================================ */
.chat-input-command-popover {
position: absolute;
bottom: 100%;
@@ -345,22 +309,3 @@
.chat-input-command-row.is-selected .chat-input-command-row-desc {
color: #d9efde;
}
.chat-input-command-popover-list::-webkit-scrollbar {
width: 8px;
}
.chat-input-command-popover-list::-webkit-scrollbar-track {
background: #d8d8cf;
border-left: 1px solid #000;
}
.chat-input-command-popover-list::-webkit-scrollbar-thumb {
background: #2f8d4a;
border: 1px solid #000;
border-radius: 3px;
}
.chat-input-command-popover-list::-webkit-scrollbar-thumb:hover {
background: #3aa55b;
}
src/css/common/ClassicScrollbar.css
+127
View File
@@ -0,0 +1,127 @@
.has-classic-scrollbar {
scrollbar-color: auto !important;
scrollbar-width: auto;
}
.has-classic-scrollbar *::-webkit-scrollbar,
.has-classic-scrollbar::-webkit-scrollbar {
width: 18px !important;
height: 18px !important;
background-color: #bdbbb3 !important;
}
.has-classic-scrollbar *::-webkit-scrollbar-track,
.has-classic-scrollbar::-webkit-scrollbar-track {
background-color: #bdbbb3 !important;
box-shadow: inset 1px 0 0 #000000 !important;
border: 0 !important;
}
.has-classic-scrollbar *::-webkit-scrollbar-thumb,
.has-classic-scrollbar::-webkit-scrollbar-thumb {
min-height: 24px !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;
}
.has-classic-scrollbar *::-webkit-scrollbar-thumb:hover,
.has-classic-scrollbar::-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;
}
.has-classic-scrollbar *::-webkit-scrollbar-thumb:active,
.has-classic-scrollbar::-webkit-scrollbar-thumb:active {
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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:decrement,
.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:decrement:active,
.has-classic-scrollbar::-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,
#bcbcbc !important;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:increment,
.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:increment:active,
.has-classic-scrollbar::-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,
#bcbcbc !important;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:decrement,
.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement {
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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:decrement:active,
.has-classic-scrollbar::-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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:increment,
.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:increment {
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;
}
.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:increment:active,
.has-classic-scrollbar::-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;
}
src/index.tsx
+1
View File
@@ -27,6 +27,7 @@ import './css/chat/ChatInputMentionSelectorView.css';
import './css/mentions/MentionToasts.css';
import './css/common/Buttons.css';
import './css/common/ClassicScrollbar.css';
import './css/forms/form_select.css';