Förbättrat det visuella genom att ändra färg på knapp och ta bort storleksbegränsning på chatt-rutan

This commit is contained in:
2024-07-30 00:14:54 +02:00
parent 854ebbdd94
commit 9f5bdddb8f
+17 -4
View File
@@ -14,9 +14,10 @@ h1 {
} }
#chatbox { #chatbox {
width: 80%; width: calc(50% - 60px); /* Adjust width for input and button */
max-width: 500px; /* max-width: 500px; */
background-color: #fff; height: 80px;
background-color: #e1dcccb8;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -36,7 +37,8 @@ h1 {
} }
.ai-response { .ai-response {
background-color: #f0f8ff; /* background-color: #f0f8ff; */
background-color: #e1dcccb8;
padding: 10px 15px; padding: 10px 15px;
border-radius: 10px; border-radius: 10px;
text-align: left; /* Align AI responses to the left */ text-align: left; /* Align AI responses to the left */
@@ -48,6 +50,7 @@ h1 {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
font-family: 'Courier New', Courier, monospace; /* Fixed width typeface */
} }
#userInput:focus { #userInput:focus {
@@ -66,4 +69,14 @@ button[onclick="sendMessage()"] {
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; 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 */
}