93 lines
2.1 KiB
CSS
93 lines
2.1 KiB
CSS
body {
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
|
|
#chatbox {
|
|
overflow: auto;
|
|
border: 1px solid #fff;
|
|
padding: 10px;
|
|
}
|
|
|
|
#chatMessages p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
#formContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
/* Add margin-top and margin-bottom to create space above and below the form */
|
|
margin: 20px 0;
|
|
}
|
|
|
|
form {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
display: flex;
|
|
flex-direction: column; /* Align the form elements in a column */
|
|
align-items: center;
|
|
}
|
|
|
|
/* Adjust the width of the form elements for better fit on mobile */
|
|
input[type="text"],
|
|
input[type="submit"] {
|
|
width: 100%; /* Make the form elements full width on mobile */
|
|
max-width: 400px; /* Set a maximum width to avoid excessive stretching */
|
|
padding: 10px; /* Increase the padding for better touch interaction */
|
|
margin-bottom: 10px; /* Add some margin between form elements */
|
|
box-sizing: border-box; /* Include padding and border in the total width */
|
|
background-color: #000; /* Set the background color to black */
|
|
color: #fff; /* Set the text color to white */
|
|
}
|
|
|
|
/* Set a width for the nickname input to ensure it's visible */
|
|
input[type="text"][name="name"] {
|
|
width: 100%; /* Adjust the width to your preference */
|
|
max-width: 300px; /* Set a maximum width to avoid excessive stretching */
|
|
}
|
|
|
|
/* Set the send button to black */
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
background-color: #000; /* Set the background color to black */
|
|
color: #fff; /* Set the text color to white */
|
|
border: none; /* Remove the border */
|
|
}
|
|
|
|
#chatbox::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
#chatbox::-webkit-scrollbar-thumb {
|
|
background-color: #666;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#chatbox::-webkit-scrollbar-thumb:hover {
|
|
background-color: #555;
|
|
}
|
|
|
|
/* Media query for mobile devices */
|
|
@media (max-width: 600px) {
|
|
body {
|
|
font-size: 16px; /* Adjust the font size for better readability on smaller screens */
|
|
}
|
|
|
|
#chatbox {
|
|
height: 200px; /* Adjust the height for a better chat experience on smaller screens */
|
|
}
|
|
}
|