Create Custom Themed Right-Side Scrollbar

[AntonCSalvador]

Title: Create Custom Themed Right-Side Scrollbar

Description:
The current right-side scrollbar on the BytesOfLove website is using the default browser styling, which doesn't align with the overall theme of the website and the game. A custom scrollbar that reflects the visual aesthetics of the BytesOfLove theme would enhance the user experience and maintain design consistency.

Task:
Design and implement a custom right-side scrollbar for the BytesOfLove website that fits the theme of the website and game. The custom scrollbar should feel integrated with the overall design language, incorporating colors, textures, and styles that are consistent with the rest of the UI.

Requirements:

• The scrollbar should be visually appealing and match the color scheme of the BytesOfLove theme.
• It should maintain usability standards, with clear indications for scrolling and user interaction.
• The width and design of the scrollbar should not disrupt the layout or content visibility.
• Ensure the scrollbar works smoothly across different browsers and devices.
• Test the implementation to verify it does not impact website performance or accessibility.

Design Suggestions:

• Consider using a slim, sleek design with colors that match the BytesOfLove game’s palette.
• Add subtle hover effects or animations to enhance user interaction.
• The scrollbar thumb could incorporate a gradient or subtle texture to give it a more polished look.

Steps to Implement:

1. Design the custom scrollbar using CSS. Utilize properties like ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track for WebKit-based browsers, and appropriate fallbacks for others.
2. Implement the scrollbar in a test environment and verify its appearance and functionality across different browsers and devices.
3. Adjust the design as necessary based on feedback or testing results.
4. Merge the custom scrollbar into the main branch once finalized.

Browser/Device:

• Browser: Please test on multiple browsers

Screenshots:

[annikasingh03]

claimed

[AntonCSalvador]

@annikasingh03 Thanks for the work! I will assign the issue now.

[veronikamgithub]

Hi, is this issue still available to work on?