83 lines
1.9 KiB
CSS
83 lines
1.9 KiB
CSS
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f4f4f4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#chatbox {
|
|
width: calc(50% - 60px); /* Adjust width for input and button */
|
|
/* max-width: 500px; */
|
|
height: 80px;
|
|
background-color: #e1dcccb8;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
overflow: auto; /* Allow horizontal and vertical scrolling of the chatbox */
|
|
resize: both; /* Allow resizing vertically */
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.user-message {
|
|
background-color: #9cc1ecbb;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
text-align: left; /* Align user messages to the left */
|
|
}
|
|
|
|
.ai-response {
|
|
/* background-color: #f0f8ff; */
|
|
background-color: #e1dcccb8;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
text-align: left; /* Align AI responses to the left */
|
|
}
|
|
|
|
#userInput {
|
|
width: calc(50% - 60px); /* Adjust width for input and button */
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
font-family: 'Courier New', Courier, monospace; /* Fixed width typeface */
|
|
}
|
|
|
|
#userInput:focus {
|
|
outline: none;
|
|
border-color: #66afe9; /* Blue outline on focus */
|
|
}
|
|
|
|
button[onclick="sendMessage()"] {
|
|
background-color: #4CAF50; /* Green */
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s; /* Smooth transition effect */
|
|
}
|
|
|
|
button[onclick="sendMessage()"]:hover {
|
|
background-color: #b2b2b2; /* Light Grey on hover */
|
|
}
|
|
|
|
button[onclick="sendMessage()"]:active {
|
|
background-color: #6f6f6f; /* Dark Grey when clicked */
|
|
}
|
|
|