[FEATURE] Implement a Scrollbar for Info & Edit Panel of SocialRepo

[Param302]

Implement a Scrollbar for Info & Edit Panel of SocialRepo

Overview

Implement a modern design scrollbar for Info & Edit Panel of SocialRepo using HTML/CSS only.

Details:

1. Scrollbar Track: ::-webkit-scrollbar: The main scrollbar container in WebKit-based browsers like Chrome. ::-webkit-scrollbar-track: Represents the track (background) of the scrollbar.

2. Scrollbar Thumb (or Handle): ::-webkit-scrollbar-thumb: Represents the draggable thumb of the scrollbar.

3. Scrollbar Buttons (Arrows): ::-webkit-scrollbar-button: Represents the buttons (arrows) at the ends of the scrollbar.

4. Scrollbar Corner: ::-webkit-scrollbar-corner: Represents the corner where vertical and horizontal scrollbars meet.

Requirements

• Use HTML/CSS for creating and designing the container.
• There should NOT be any Scrollbar Buttons in scrollbar.
• Color of Scrollbar Track must be same as background color of main element.
• Scrollbar Thumb should be a little curved, align with logos and container's border radius.
• Color of Scrollbar Thumb should be same as the background color of header.
• Must follow the Code Guidelines provided.

• Edit the scrollbar design under section element and inside style.css.

  section {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding: 1rem 2rem;
  
      // Add scrollbar design here
  
  }

• To test the code, setup the extension by following these steps.
• Use the Color Palette provided.

Additional

• Apply focus, hover effect.
• Add padding for better visual.

P.S: This is just the designing part, no need to add any functionality as of now.

If you have any suggestion or idea, you're welcome to share.

Let's design the SocialRepo's Scrollbar 🙌

[ronakptl996]

Hey @Param302, Please assign me this task

[aayushwrld]

Hey! @Param302, Can you assign me the task so I can start working on this?

[Param302]

Hey! @Param302, Can you assign me the task so I can start working on this?

Yes @aayushwrld ,

You can work on it, I am assigning you this issue. If you need any help, feel free to reply.

Happy Contributing!