🆙 Scrollbar 100% habbo

src/components/mentions/MentionsView.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
+    width: 18px;
-    height: 17px;
+    height: 18px;
 }
 
 .nitro-catalog-classic-window * {
@@ -1363,116 +1363,120 @@
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar {
-    width: 17px !important;
+    width: 18px !important;
-    height: 17px !important;
+    height: 18px !important;
-    background-color: #e7e5d8 !important;
+    background-color: #bdbbb3 !important;
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar-track {
     background-image: none !important;
-    background-color: #e7e5d8 !important;
+    background-color: #bdbbb3 !important;
-    box-shadow: inset 1px 0 0 #b9b6a5, inset -1px 0 0 #ffffff !important;
+    box-shadow: inset 1px 0 0 #000000 !important;
     border: 0 !important;
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar-thumb {
-    min-height: 28px !important;
+    /* Grip: a single 2px #a0a0a0 stripe in an 8px-wide centered band,
-    border: 1px solid #2a2a26 !important;
+       repeated every 5px (2px stripe + 3px body gap).
-    border-radius: 2px !important;
+       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,
+        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,
-        linear-gradient(180deg, #d6d6cc 0%, #b4b4aa 30%, #9a9a90 50%, #b4b4aa 70%, #d6d6cc 100%) !important;
+        #d9d9d9 !important;
-    background-color: #a8a89e !important;
+    border: 1px solid #000000 !important;
-    box-shadow:
+    border-radius: 3px !important;
-        inset 0 1px 0 rgba(255, 255, 255, 0.55),
+    box-shadow: inset 0 0 0 2px #ffffff !important;
-        inset 0 -1px 0 rgba(255, 255, 255, 0.4) !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,
+        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,
-        linear-gradient(180deg, #e0e0d6 0%, #bebeb4 30%, #a4a49a 50%, #bebeb4 70%, #e0e0d6 100%) !important;
+        #e3e3e3 !important;
-    background-color: #b2b2a8 !important;
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar-thumb:active {
     background:
-        linear-gradient(180deg, #c6c6bc 0%, #a4a49a 30%, #8a8a82 50%, #a4a49a 70%, #c6c6bc 100%) !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,
-    background-color: #9a9a90 !important;
+        #bcbcbc !important;
-    box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.35),
-        inset 0 -1px 0 rgba(255, 255, 255, 0.25) !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;
+    width: 18px !important;
-    height: 16px !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,
+        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,
-        linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
+        #d9d9d9 !important;
-    background-color: #e7e5d8 !important;
+    border: 1px solid #000000 !important;
-    border: 1px solid #0b2d3a !important;
+    border-radius: 3px 3px 0 0 !important;
-    border-radius: 2px !important;
     box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.7),
+        inset 0 1px 0 #ffffff,
-        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
+        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;
+        #bcbcbc !important;
-    background-color: #c7c5b8 !important;
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:increment {
     display: block !important;
-    width: 17px !important;
+    width: 18px !important;
-    height: 16px !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,
+        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,
-        linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
+        #d9d9d9 !important;
-    background-color: #e7e5d8 !important;
+    border: 1px solid #000000 !important;
-    border: 1px solid #0b2d3a !important;
+    border-radius: 0 0 3px 3px !important;
-    border-radius: 2px !important;
     box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.7),
+        inset 0 1px 0 #ffffff,
-        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
+        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;
+        #bcbcbc !important;
-    background-color: #c7c5b8 !important;
 }
 
 .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:decrement {
     display: block !important;
-    width: 16px !important;
+    width: 18px !important;
-    height: 17px !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,
+        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,
-        linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
+        #d9d9d9 !important;
-    background-color: #e7e5d8 !important;
+    border: 1px solid #000000 !important;
-    border: 1px solid #0b2d3a !important;
+    border-radius: 3px 0 0 3px !important;
-    border-radius: 2px !important;
     box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.7),
+        inset 0 1px 0 #ffffff,
-        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
+        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;
+    width: 18px !important;
-    height: 17px !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,
+        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,
-        linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important;
+        #d9d9d9 !important;
-    background-color: #e7e5d8 !important;
+    border: 1px solid #000000 !important;
-    border: 1px solid #0b2d3a !important;
+    border-radius: 0 3px 3px 0 !important;
-    border-radius: 2px !important;
     box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.7),
+        inset 0 1px 0 #ffffff,
-        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
+        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

@@ -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%;
@@ -344,23 +308,4 @@
 
 .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

@@ -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

@@ -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';