Hugging Face's logo

Spaces:
anshupatel4298
/
bert-chatbot-ui
Build error

App Files Community
AnshuPatel4298 commited on
Commit
53294b5
·
1 Parent(s): 57c59fe

with latest packages

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