search

dvlsc000 / EmergingTechnologies

0 stars 0 forks source link

DESIGN THE INTERFACE #22

Open dvlsc000 opened 6 days ago

dvlsc000 commented 6 days ago

style.css

Style the interface with CSS for readability and simplicity.

dvlsc000 commented 2 days ago

Global and Body Styling

  1. *Global reset ( )**

    • The universal selector ( * ) sets margin and padding to zero and applies box-sizing.
    • Specifies a modern, sans-serif font stack and ensuring a professional look.

  2. Body Style

    • Centers the chat interface using display: flex, justify-content: center, and align-items: center. Set a light background and applies dark gray text color for comfort reading.
dvlsc000 commented 2 days ago

Chat Container

  1. Container Styling

    • Sets a fixed width, with responsive max-width for smaller screens.
    • Gives container white background, padding, and a rounded border radius.

  2. Title (h1)

    • Increases font size and centers text.
    • Uses blue color to match the branding color of buttons and user messages.
dvlsc000 commented 2 days ago

Chat Box

  1. Chat Box Container

    • Fixed height with vertical scroll to handle long conversations.
    • Adds padding and a light background color with rounded corners.

  2. Message Styling

    • Each message is styled as a p tag, with padding and rounded corners for chat bubble effect.
    • Sets line height and gives different color for user and eliza's messages.
    • use nth-child(odd) and nth-child(even) to alternate message background colors automatically.
dvlsc000 commented 2 days ago

User Input Area

Input Box

dvlsc000 commented 2 days ago

Buttons

  1. General Button Styling

    • Applies a blue background, white text, padding and rounded corners.
    • Sets cursor: pointer for interactivity and a smooth transition effect on hover.
    • Hover state: changes background to darker blue.

  2. Reset Button

    • Applies rounded styling for a circular appearance.
dvlsc000 commented 2 days ago

Scrollbar Customization

Scrollbar Styling