Spaces:
Paused
Paused
File size: 1,553 Bytes
c983fb1 0cff269 dd35d4d c983fb1 0cff269 dd35d4d c983fb1 0cff269 c983fb1 0cff269 c983fb1 0cff269 c983fb1 0cff269 c983fb1 dd35d4d c983fb1 0cff269 c983fb1 dd35d4d 0cff269 c983fb1 0cff269 dd35d4d 0cff269 c983fb1 0cff269 dd35d4d 0cff269 c983fb1 0cff269 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
/* Base styles */
body {
font-family: sans-serif;
background: #f0f0f0;
padding: 10px;
margin: 0;
}
#chatContainer {
max-width: 100%;
width: 100%;
max-width: 420px;
margin: 10px auto;
background: #fff;
padding: 12px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Title */
#chatroom-title {
font-weight: bold;
text-align: center;
margin-bottom: 10px;
font-size: 1.2rem;
}
/* Chat box */
#chat {
height: 60vh;
overflow-y: auto;
border: 1px solid #333;
background: #f9f9f9;
padding: 10px;
border-radius: 6px;
box-sizing: border-box;
}
/* Messages */
#chat .me {
color: blue;
font-weight: bold;
word-wrap: break-word;
}
#chat .other {
color: green;
font-weight: bold;
word-wrap: break-word;
}
#chat .status {
color: gray;
font-style: italic;
word-wrap: break-word;
}
/* Input & Buttons */
input[type="text"], input[type="number"], select {
width: 100%;
padding: 8px;
margin: 6px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
button {
width: 100%;
padding: 10px;
margin-top: 6px;
font-size: 1rem;
background-color: #4285f4;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #3367d6;
}
/* Responsive tweaks */
@media screen and (max-width: 480px) {
#chatContainer {
margin: 5px;
padding: 10px;
box-shadow: none;
}
#chatroom-title {
font-size: 1rem;
}
button {
font-size: 0.95rem;
padding: 9px;
}
} |