Yaswanth56 commited on
Commit
56230b4
·
verified ·
1 Parent(s): 97ccd6b

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +35 -36
static/styles.css CHANGED
@@ -12,9 +12,9 @@ body {
12
 
13
  .chat-container {
14
  width: 100%;
15
- max-width: 400px; /* Maximum width for larger screens */
16
- height: 80vh; /* Use viewport height for responsiveness */
17
- max-height: 600px; /* Maximum height cap */
18
  border: 1px solid #ccc;
19
  border-radius: 10px;
20
  overflow: hidden;
@@ -22,7 +22,7 @@ body {
22
  background-color: white;
23
  display: flex;
24
  flex-direction: column;
25
- margin: 10px; /* Add margin for better spacing on mobile */
26
  }
27
 
28
  .chat-header {
@@ -35,9 +35,9 @@ body {
35
  }
36
 
37
  .chat-messages {
38
- flex: 1; /* Allow messages to take available space */
39
  overflow-y: auto;
40
- padding: 15px; /* Reduced padding for mobile */
41
  box-sizing: border-box;
42
  }
43
 
@@ -48,7 +48,7 @@ body {
48
  border-radius: 5px;
49
  max-width: 70%;
50
  word-wrap: break-word;
51
- font-size: 14px; /* Smaller font for mobile */
52
  }
53
 
54
  .user-message {
@@ -60,7 +60,7 @@ body {
60
  margin-left: auto;
61
  text-align: right;
62
  word-wrap: break-word;
63
- font-size: 14px; /* Smaller font for mobile */
64
  }
65
 
66
  .chat-input {
@@ -72,16 +72,16 @@ body {
72
 
73
  .chat-input input {
74
  flex: 1;
75
- padding: 8px; /* Slightly larger padding for better touch targets on mobile */
76
  border: 1px solid #ccc;
77
  border-radius: 5px;
78
  box-sizing: border-box;
79
- font-size: 14px; /* Smaller font for mobile */
80
- min-height: 40px; /* Ensure input is tappable on mobile */
81
  }
82
 
83
  .chat-input button {
84
- padding: 8px 15px; /* Larger padding for better touch targets on mobile */
85
  margin-left: 10px;
86
  background-color: #f28c38;
87
  color: white;
@@ -89,8 +89,8 @@ body {
89
  border-radius: 5px;
90
  cursor: pointer;
91
  transition: background-color 0.3s;
92
- font-size: 14px; /* Smaller font for mobile */
93
- min-height: 40px; /* Ensure button is tappable on mobile */
94
  }
95
 
96
  .chat-input button:hover {
@@ -99,7 +99,7 @@ body {
99
 
100
  .option-button {
101
  display: inline-block;
102
- padding: 10px 15px; /* Adjusted padding for mobile */
103
  margin: 5px;
104
  background-color: #9c27b0;
105
  color: white;
@@ -107,8 +107,8 @@ body {
107
  border-radius: 5px;
108
  cursor: pointer;
109
  transition: background-color 0.3s;
110
- font-size: 14px; /* Smaller font for mobile */
111
- min-width: 100px; /* Minimum width for readability */
112
  text-align: center;
113
  }
114
 
@@ -124,58 +124,57 @@ body {
124
  opacity: 0.9;
125
  }
126
 
127
- /* Media Queries for Responsiveness */
128
  @media (max-width: 768px) {
129
  .chat-container {
130
- max-width: 100%; /* Full width on mobile */
131
- height: 90vh; /* Use more of the viewport on mobile */
132
- margin: 5px; /* Reduced margin on mobile */
133
  }
134
 
135
  .chat-header {
136
- font-size: 18px; /* Slightly smaller header on mobile */
137
  }
138
 
139
  .chat-messages {
140
- padding: 10px; /* Further reduced padding for mobile */
141
  }
142
 
143
  .chat-input input,
144
  .chat-input button {
145
- padding: 6px; /* Smaller padding on mobile */
146
- font-size: 12px; /* Even smaller font on mobile */
147
- min-height: 35px; /* Adjusted for mobile touch */
148
  }
149
 
150
  .option-button {
151
- padding: 8px 12px; /* Smaller padding for option buttons */
152
- font-size: 12px; /* Smaller font for option buttons */
153
- min-width: 90px; /* Adjusted minimum width */
154
  }
155
  }
156
 
157
  @media (min-width: 769px) {
158
  .chat-container {
159
- margin: 20px; /* Increased margin on larger screens */
160
  }
161
 
162
  .chat-header {
163
- font-size: 22px; /* Slightly larger header on desktop */
164
  }
165
 
166
  .bot-message,
167
  .user-message {
168
- font-size: 16px; /* Larger font for desktop */
169
  }
170
 
171
  .chat-input input,
172
  .chat-input button {
173
- font-size: 16px; /* Larger font for desktop */
174
- min-height: 45px; /* Adjusted for desktop */
175
  }
176
 
177
  .option-button {
178
- font-size: 16px; /* Larger font for desktop */
179
- min-width: 120px; /* Adjusted minimum width */
180
  }
181
  }
 
12
 
13
  .chat-container {
14
  width: 100%;
15
+ max-width: 400px;
16
+ height: 80vh;
17
+ max-height: 600px;
18
  border: 1px solid #ccc;
19
  border-radius: 10px;
20
  overflow: hidden;
 
22
  background-color: white;
23
  display: flex;
24
  flex-direction: column;
25
+ margin: 10px;
26
  }
27
 
28
  .chat-header {
 
35
  }
36
 
37
  .chat-messages {
38
+ flex: 1;
39
  overflow-y: auto;
40
+ padding: 15px;
41
  box-sizing: border-box;
42
  }
43
 
 
48
  border-radius: 5px;
49
  max-width: 70%;
50
  word-wrap: break-word;
51
+ font-size: 14px;
52
  }
53
 
54
  .user-message {
 
60
  margin-left: auto;
61
  text-align: right;
62
  word-wrap: break-word;
63
+ font-size: 14px;
64
  }
65
 
66
  .chat-input {
 
72
 
73
  .chat-input input {
74
  flex: 1;
75
+ padding: 8px;
76
  border: 1px solid #ccc;
77
  border-radius: 5px;
78
  box-sizing: border-box;
79
+ font-size: 14px;
80
+ min-height: 40px;
81
  }
82
 
83
  .chat-input button {
84
+ padding: 8px 15px;
85
  margin-left: 10px;
86
  background-color: #f28c38;
87
  color: white;
 
89
  border-radius: 5px;
90
  cursor: pointer;
91
  transition: background-color 0.3s;
92
+ font-size: 14px;
93
+ min-height: 40px;
94
  }
95
 
96
  .chat-input button:hover {
 
99
 
100
  .option-button {
101
  display: inline-block;
102
+ padding: 10px 15px;
103
  margin: 5px;
104
  background-color: #9c27b0;
105
  color: white;
 
107
  border-radius: 5px;
108
  cursor: pointer;
109
  transition: background-color 0.3s;
110
+ font-size: 14px;
111
+ min-width: 100px;
112
  text-align: center;
113
  }
114
 
 
124
  opacity: 0.9;
125
  }
126
 
 
127
  @media (max-width: 768px) {
128
  .chat-container {
129
+ max-width: 100%;
130
+ height: 90vh;
131
+ margin: 5px;
132
  }
133
 
134
  .chat-header {
135
+ font-size: 18px;
136
  }
137
 
138
  .chat-messages {
139
+ padding: 10px;
140
  }
141
 
142
  .chat-input input,
143
  .chat-input button {
144
+ padding: 6px;
145
+ font-size: 12px;
146
+ min-height: 35px;
147
  }
148
 
149
  .option-button {
150
+ padding: 8px 12px;
151
+ font-size: 12px;
152
+ min-width: 90px;
153
  }
154
  }
155
 
156
  @media (min-width: 769px) {
157
  .chat-container {
158
+ margin: 20px;
159
  }
160
 
161
  .chat-header {
162
+ font-size: 22px;
163
  }
164
 
165
  .bot-message,
166
  .user-message {
167
+ font-size: 16px;
168
  }
169
 
170
  .chat-input input,
171
  .chat-input button {
172
+ font-size: 16px;
173
+ min-height: 45px;
174
  }
175
 
176
  .option-button {
177
+ font-size: 16px;
178
+ min-width: 120px;
179
  }
180
  }