Hugging Face's logo

Spaces:
RohanHBTU
/
ChattyAI_prototype
Running

App Files Community
RohanHBTU commited on
Commit
f44efdf
•
1 Parent(s): c883fb7

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +237 -237
static/style.css CHANGED
@@ -1,238 +1,238 @@
1
- body,html{
2
- height: 100%;
3
- margin: 0;
4
- background: rgb(255, 255, 255);
5
- background: -webkit-linear-gradient(to right, rgb(196, 200, 195), rgb(201, 216, 241), rgb(192, 192, 237));
6
- background: linear-gradient(to right, rgb(144, 199, 241), rgb(199, 204, 216), rgb(204, 204, 222));
7
- }
8
-
9
- .chat{
10
- margin-top: auto;
11
- margin-bottom: auto;
12
- }
13
- .card{
14
- height: 500px;
15
- border-radius: 15px !important;
16
- background-color: rgba(35, 50, 138, 0.677) !important;
17
- }
18
- .msg_card_body{
19
- overflow-y: auto;
20
- }
21
- .msg_card_body::-webkit-scrollbar {
22
- width: 12px; /* width of the entire scrollbar */
23
- }
24
-
25
- /*.msg_card_body::-webkit-scrollbar-track {
26
- background-color: rgba(35, 50, 138, 0.677) !important;
27
- }*/
28
-
29
- .msg_card_body::-webkit-scrollbar-thumb {
30
- background-color: rgba(35, 50, 138, 0.677) !important;
31
- border-radius: 20px; /* roundness of the scroll thumb */
32
- /*border: 3px solid orange; creates padding around scroll thumb */
33
- }
34
- .contacts_body{
35
- padding: 0.75rem 0 !important;
36
- overflow-y: auto;
37
- white-space: nowrap;
38
- }
39
- .card-header{
40
- border-radius: 15px 15px 0 0 !important;
41
- border-bottom: 0 !important;
42
- background-color: rgba(31, 46, 130, 0.677) !important;
43
- }
44
- .card-footer{
45
- border-radius: 0 0 15px 15px !important;
46
- border-top: 0 !important;
47
- }
48
- .container{
49
- align-content: center;
50
- }
51
- .search{
52
- border-radius: 15px 0 0 15px !important;
53
- background-color: rgb(0, 0, 0) !important;
54
- border:0 !important;
55
- color:white !important;
56
- }
57
- .search:focus{
58
- box-shadow:none !important;
59
- outline:0px !important;
60
- }
61
- .type_msg{
62
- background-color: rgba(0, 0, 0, 0.549) !important;
63
- border:0 !important;
64
- color:white !important;
65
- height: 60px !important;
66
- overflow-y: auto;
67
- }
68
- .type_msg:focus{
69
- box-shadow:none !important;
70
- outline:0px !important;
71
- }
72
- .attach_btn{
73
- border-radius: 15px 0 0 15px !important;
74
- background-color: rgba(201, 13, 13, 0.267) !important;
75
- border:0 !important;
76
- color: white !important;
77
- cursor: pointer;
78
- }
79
- .send_btn{
80
- border-radius: 0 15px 15px 0 !important;
81
- background-color: rgba(0,0,0,0.3) !important;
82
- border:0 !important;
83
- color: white !important;
84
- cursor: pointer;
85
- }
86
- .search_btn{
87
- border-radius: 0 15px 15px 0 !important;
88
- background-color: rgba(0,0,0,0.3) !important;
89
- border:0 !important;
90
- color: white !important;
91
- cursor: pointer;
92
- }
93
- .contacts{
94
- list-style: none;
95
- padding: 0;
96
- }
97
- .contacts li{
98
- width: 100% !important;
99
- padding: 5px 10px;
100
- margin-bottom: 15px !important;
101
- }
102
- .active{
103
- background-color: rgba(0, 0, 0, 0.479);
104
- }
105
- .user_img{
106
- height: 70px;
107
- width: 70px;
108
- /*border:1.5px solid #f5f6fa;*/
109
-
110
- }
111
- .user_img_msg{
112
- height: 40px;
113
- width: 40px;
114
- /*border:1.5px solid #f5f6fa;*/
115
- border: 0;
116
-
117
- }
118
- .img_cont{
119
- position: relative;
120
- height: 70px;
121
- width: 70px;
122
- }
123
- .img_cont_msg{
124
- height: 40px;
125
- width: 40px;
126
- }
127
- .online_icon{
128
- position: absolute;
129
- height: 15px;
130
- width:15px;
131
- background-color: #4cd137;
132
- border-radius: 50%;
133
- bottom: 0.2em;
134
- right: 0.4em;
135
- border:1.5px solid white;
136
- }
137
- .offline{
138
- background-color: #c23616 !important;
139
- }
140
- .user_info{
141
- margin-top: auto;
142
- margin-bottom: auto;
143
- margin-left: 15px;
144
- }
145
- .user_info span{
146
- font-size: 20px;
147
- color: white;
148
- }
149
- .user_info p{
150
- font-size: 10px;
151
- color: rgba(255,255,255,0.6);
152
- }
153
- .video_cam{
154
- margin-left: 50px;
155
- margin-top: 5px;
156
- }
157
- .video_cam span{
158
- color: white;
159
- font-size: 20px;
160
- cursor: pointer;
161
- margin-right: 20px;
162
- }
163
- .msg_cotainer{
164
- margin-top: auto;
165
- margin-bottom: auto;
166
- margin-left: 10px;
167
- border-radius: 25px;
168
- background-color: rgb(212, 75, 75);
169
- padding: 10px;
170
- position: relative;
171
- }
172
- .msg_cotainer_send{
173
- margin-top: auto;
174
- margin-bottom: auto;
175
- margin-right: 10px;
176
- border-radius: 25px;
177
- background-color: #58cc71;
178
- padding: 10px;
179
- position: relative;
180
- }
181
- .msg_time{
182
- position: absolute;
183
- left: 0;
184
- bottom: -15px;
185
- color: rgba(255,255,255,0.5);
186
- font-size: 10px;
187
- }
188
- .msg_time_send{
189
- position: absolute;
190
- right:0;
191
- bottom: -15px;
192
- color: rgba(255,255,255,0.5);
193
- font-size: 10px;
194
- }
195
- .msg_head{
196
- position: relative;
197
- }
198
- #action_menu_btn{
199
- position: absolute;
200
- right: 10px;
201
- top: 10px;
202
- color: white;
203
- cursor: pointer;
204
- font-size: 20px;
205
- }
206
- .action_menu{
207
- z-index: 1;
208
- position: absolute;
209
- padding: 15px 0;
210
- background-color: rgba(0,0,0,0.5);
211
- color: white;
212
- border-radius: 15px;
213
- top: 30px;
214
- right: 15px;
215
- display: none;
216
- }
217
- .action_menu ul{
218
- list-style: none;
219
- padding: 0;
220
- margin: 0;
221
- }
222
- .action_menu ul li{
223
- width: 100%;
224
- padding: 10px 15px;
225
- margin-bottom: 5px;
226
- }
227
- .action_menu ul li i{
228
- padding-right: 10px;
229
- }
230
- .action_menu ul li:hover{
231
- cursor: pointer;
232
- background-color: rgba(0,0,0,0.2);
233
- }
234
- @media(max-width: 576px){
235
- .contacts_card{
236
- margin-bottom: 15px !important;
237
- }
238
  }
 
1
+ body,html{
2
+ height: 100%;
3
+ margin: 0;
4
+ background: rgb(255, 255, 255);
5
+ background: -webkit-linear-gradient(to right, rgb(196, 200, 195), rgb(201, 216, 241), rgb(192, 192, 237));
6
+ background: linear-gradient(to right, rgb(144, 199, 241), rgb(199, 204, 216), rgb(204, 204, 222));
7
+ }
8
+
9
+ .chat{
10
+ margin-top: auto;
11
+ margin-bottom: auto;
12
+ }
13
+ .card{
14
+ height: 600px;
15
+ border-radius: 15px !important;
16
+ background-color: rgba(35, 50, 138, 0.677) !important;
17
+ }
18
+ .msg_card_body{
19
+ overflow-y: auto;
20
+ }
21
+ .msg_card_body::-webkit-scrollbar {
22
+ width: 12px; /* width of the entire scrollbar */
23
+ }
24
+
25
+ /*.msg_card_body::-webkit-scrollbar-track {
26
+ background-color: rgba(35, 50, 138, 0.677) !important;
27
+ }*/
28
+
29
+ .msg_card_body::-webkit-scrollbar-thumb {
30
+ background-color: rgba(35, 50, 138, 0.677) !important;
31
+ border-radius: 20px; /* roundness of the scroll thumb */
32
+ /*border: 3px solid orange; creates padding around scroll thumb */
33
+ }
34
+ .contacts_body{
35
+ padding: 0.75rem 0 !important;
36
+ overflow-y: auto;
37
+ white-space: nowrap;
38
+ }
39
+ .card-header{
40
+ border-radius: 15px 15px 0 0 !important;
41
+ border-bottom: 0 !important;
42
+ background-color: rgba(31, 46, 130, 0.677) !important;
43
+ }
44
+ .card-footer{
45
+ border-radius: 0 0 15px 15px !important;
46
+ border-top: 0 !important;
47
+ }
48
+ .container{
49
+ align-content: center;
50
+ }
51
+ .search{
52
+ border-radius: 15px 0 0 15px !important;
53
+ background-color: rgb(0, 0, 0) !important;
54
+ border:0 !important;
55
+ color:white !important;
56
+ }
57
+ .search:focus{
58
+ box-shadow:none !important;
59
+ outline:0px !important;
60
+ }
61
+ .type_msg{
62
+ background-color: rgba(0, 0, 0, 0.549) !important;
63
+ border:0 !important;
64
+ color:white !important;
65
+ height: 60px !important;
66
+ overflow-y: auto;
67
+ }
68
+ .type_msg:focus{
69
+ box-shadow:none !important;
70
+ outline:0px !important;
71
+ }
72
+ .attach_btn{
73
+ border-radius: 15px 0 0 15px !important;
74
+ background-color: rgba(201, 13, 13, 0.267) !important;
75
+ border:0 !important;
76
+ color: white !important;
77
+ cursor: pointer;
78
+ }
79
+ .send_btn{
80
+ border-radius: 0 15px 15px 0 !important;
81
+ background-color: rgba(0,0,0,0.3) !important;
82
+ border:0 !important;
83
+ color: white !important;
84
+ cursor: pointer;
85
+ }
86
+ .search_btn{
87
+ border-radius: 0 15px 15px 0 !important;
88
+ background-color: rgba(0,0,0,0.3) !important;
89
+ border:0 !important;
90
+ color: white !important;
91
+ cursor: pointer;
92
+ }
93
+ .contacts{
94
+ list-style: none;
95
+ padding: 0;
96
+ }
97
+ .contacts li{
98
+ width: 100% !important;
99
+ padding: 5px 10px;
100
+ margin-bottom: 15px !important;
101
+ }
102
+ .active{
103
+ background-color: rgba(0, 0, 0, 0.479);
104
+ }
105
+ .user_img{
106
+ height: 70px;
107
+ width: 70px;
108
+ /*border:1.5px solid #f5f6fa;*/
109
+
110
+ }
111
+ .user_img_msg{
112
+ height: 40px;
113
+ width: 40px;
114
+ /*border:1.5px solid #f5f6fa;*/
115
+ border: 0;
116
+
117
+ }
118
+ .img_cont{
119
+ position: relative;
120
+ height: 70px;
121
+ width: 70px;
122
+ }
123
+ .img_cont_msg{
124
+ height: 40px;
125
+ width: 40px;
126
+ }
127
+ .online_icon{
128
+ position: absolute;
129
+ height: 15px;
130
+ width:15px;
131
+ background-color: #4cd137;
132
+ border-radius: 50%;
133
+ bottom: 0.2em;
134
+ right: 0.4em;
135
+ border:1.5px solid white;
136
+ }
137
+ .offline{
138
+ background-color: #c23616 !important;
139
+ }
140
+ .user_info{
141
+ margin-top: auto;
142
+ margin-bottom: auto;
143
+ margin-left: 15px;
144
+ }
145
+ .user_info span{
146
+ font-size: 20px;
147
+ color: white;
148
+ }
149
+ .user_info p{
150
+ font-size: 10px;
151
+ color: rgba(255,255,255,0.6);
152
+ }
153
+ .video_cam{
154
+ margin-left: 50px;
155
+ margin-top: 5px;
156
+ }
157
+ .video_cam span{
158
+ color: white;
159
+ font-size: 20px;
160
+ cursor: pointer;
161
+ margin-right: 20px;
162
+ }
163
+ .msg_cotainer{
164
+ margin-top: auto;
165
+ margin-bottom: auto;
166
+ margin-left: 10px;
167
+ border-radius: 25px;
168
+ background-color: rgb(212, 75, 75);
169
+ padding: 10px;
170
+ position: relative;
171
+ }
172
+ .msg_cotainer_send{
173
+ margin-top: auto;
174
+ margin-bottom: auto;
175
+ margin-right: 10px;
176
+ border-radius: 25px;
177
+ background-color: #58cc71;
178
+ padding: 10px;
179
+ position: relative;
180
+ }
181
+ .msg_time{
182
+ position: absolute;
183
+ left: 0;
184
+ bottom: -15px;
185
+ color: rgba(255,255,255,0.5);
186
+ font-size: 10px;
187
+ }
188
+ .msg_time_send{
189
+ position: absolute;
190
+ right:0;
191
+ bottom: -15px;
192
+ color: rgba(255,255,255,0.5);
193
+ font-size: 10px;
194
+ }
195
+ .msg_head{
196
+ position: relative;
197
+ }
198
+ #action_menu_btn{
199
+ position: absolute;
200
+ right: 10px;
201
+ top: 10px;
202
+ color: white;
203
+ cursor: pointer;
204
+ font-size: 20px;
205
+ }
206
+ .action_menu{
207
+ z-index: 1;
208
+ position: absolute;
209
+ padding: 15px 0;
210
+ background-color: rgba(0,0,0,0.5);
211
+ color: white;
212
+ border-radius: 15px;
213
+ top: 30px;
214
+ right: 15px;
215
+ display: none;
216
+ }
217
+ .action_menu ul{
218
+ list-style: none;
219
+ padding: 0;
220
+ margin: 0;
221
+ }
222
+ .action_menu ul li{
223
+ width: 100%;
224
+ padding: 10px 15px;
225
+ margin-bottom: 5px;
226
+ }
227
+ .action_menu ul li i{
228
+ padding-right: 10px;
229
+ }
230
+ .action_menu ul li:hover{
231
+ cursor: pointer;
232
+ background-color: rgba(0,0,0,0.2);
233
+ }
234
+ @media(max-width: 576px){
235
+ .contacts_card{
236
+ margin-bottom: 15px !important;
237
+ }
238
  }