-
Notifications
You must be signed in to change notification settings - Fork 0
/
messages.css
375 lines (373 loc) · 11 KB
/
messages.css
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
* {
margin: 0;
font-family: "Cabinet Grotesk", sans-serif;
padding: 0;
}
body {
height: 900px;
}
@media only screen and (max-width: 1099px) {
body {
background: white;
}
.sidebar p, .sidebar div, .sidebar a {
display: none;
}
.sidebar h3 {
font-size: 32px;
color: #0F27BD;
margin: 50px 0 0 10vw;
font-weight: 700;
display: inline-block;
}
.sidebar h3 span {
color: #F17105;
}
.sidebar .menu-icon {
float: right;
margin: 50px 12vw 0 0;
}
.main .nav-right p {
display: inline-block;
margin: 50px 20% 0 10vw;
font-size: 20px;
font-weight: 500;
}
.main .nav-right p span {
font-weight: 600;
font-size: 25px;
}
.main .nav-right .circle, .main .nav-right .search {
display: none;
}
.main .main-info {
width: 80vw;
display: block;
margin: 40px auto 0 auto;
border-radius: 8px;
border: 1px solid #A1A4B6;
}
.main .main-info .head {
height: 70px;
border-bottom: 2px solid #A1A4B6;
padding-left: 6%;
line-height: 70px;
font-weight: 700;
font-size: 20px;
}
.main .main-info .message-sections, .main .main-info .message-sections2 {
height: 75px;
border: none;
border-bottom: 1.2px solid #A1A4B6;
}
.main .main-info .message-sections img, .main .main-info .message-sections2 img {
vertical-align: middle;
margin: 10px 2% 0 6%;
}
.main .main-info .message-sections div, .main .main-info .message-sections2 div {
display: inline-block;
vertical-align: middle;
margin-top: 10px;
width: 60vw;
}
.main .main-info .message-sections div :nth-child(1), .main .main-info .message-sections2 div :nth-child(1) {
font-size: 18px;
font-weight: 500;
}
.main .main-info .message-sections div :nth-child(2), .main .main-info .message-sections2 div :nth-child(2) {
font-size: 14px;
margin-left: 6vw;
}
.main .main-info .message-sections div svg, .main .main-info .message-sections2 div svg {
width: 12px;
height: 12px;
}
.main .main-info .message-sections div :nth-child(4), .main .main-info .message-sections2 div :nth-child(4) {
font-size: 15px;
}
.main .main-info .message-sections2 {
background: #E7E9F8;
border-right: 3px solid #0F27BD;
}
.main .right {
display: none;
}
}
@media only screen and (min-width: 1101px) {
.menu-icon {
display: none;
}
.sidebar {
float: left;
background: #E7E9F8;
color: #A1A4B6;
height: 70%;
width: 24vw;
}
.sidebar h3 {
font-size: 32px;
color: #0F27BD;
text-align: center;
margin-top: 50px;
font-weight: 700;
}
.sidebar h3 span {
color: #F17105;
}
.sidebar .menu {
font-size: 16px;
font-weight: 600;
margin: 50px 0 20px 20%;
color: #0F27BD;
}
.sidebar div {
margin: 0 0 40px 20%;
font-size: 18px;
}
.sidebar div svg {
vertical-align: middle;
margin-right: 5px;
}
.sidebar div:hover {
cursor: pointer;
}
.sidebar .messages {
background: white;
padding: 18px 0 18px 15%;
margin-left: 0;
color: #0F27BD;
}
.sidebar .logout {
color: red;
font-weight: 550;
font-size: 15px;
text-align: center;
margin: 50% 20%;
}
.sidebar .logout svg {
vertical-align: middle;
}
.sidebar .logout:hover {
cursor: pointer;
text-decoration: underline;
}
.main {
float: right;
width: 70vw;
}
.main .nav-right {
vertical-align: middle;
margin-top: 50px;
}
.main .nav-right p {
display: inline-block;
margin: 0 20% 0 1vw;
font-size: 20px;
font-weight: 500;
vertical-align: middle;
}
.main .nav-right p span {
font-weight: 700;
font-size: 23px;
}
.main .nav-right input {
width: 20vw;
height: 32px;
background: #FAFAFB;
vertical-align: middle;
border: 1.2px solid #A1A4B6;
border-radius: 8px;
padding: 2px 32px;
}
.main .nav-right input:focus {
border: 2px solid #A1A4B6;
outline: none;
}
.main .nav-right .search::before {
content: "kjjf";
color: transparent;
position: absolute;
top: 0;
margin: 0 0 0 5px;
margin-top: 66px;
background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.17502 16.6832C13.3218 16.6832 16.6834 13.3216 16.6834 9.17484C16.6834 5.0281 13.3218 1.6665 9.17502 1.6665C5.02828 1.6665 1.66669 5.0281 1.66669 9.17484C1.66669 13.3216 5.02828 16.6832 9.17502 16.6832Z' fill='%23717591'/%3E%3Cpath d='M18.325 15.7917C18.05 15.2833 17.4667 15 16.6834 15C16.0917 15 15.5834 15.2417 15.2834 15.6583C14.9834 16.075 14.9167 16.6333 15.1 17.1917C15.4584 18.275 16.0834 18.5167 16.425 18.5583C16.475 18.5667 16.525 18.5667 16.5834 18.5667C16.95 18.5667 17.5167 18.4083 18.0667 17.5833C18.5084 16.9417 18.5917 16.3 18.325 15.7917Z' fill='%23717591'/%3E%3C/svg%3E%0A");
}
.main .nav-right .circle {
background: #E7E9F8;
width: 40px;
height: 40px;
margin-left: 10px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.main .nav-right .circle svg {
margin: 7px auto;
}
.main .main-info {
display: block;
width: 63vw;
height: 90vh;
margin: 40px 0%;
border-radius: 8px;
border: 1px solid #A1A4B6;
}
.main .main-info .left {
float: left;
height: 100%;
width: 39.5%;
border-right: 2px solid #A1A4B6;
}
.main .main-info .left .head {
height: 70px;
border-bottom: 1px solid #A1A4B6;
text-align: center;
line-height: 70px;
font-weight: 700;
font-size: 20px;
}
.main .main-info .left .message-sections, .main .main-info .left .message-sections2 {
height: 75px;
border: none;
border-bottom: 1.2px solid #A1A4B6;
}
.main .main-info .left .message-sections img, .main .main-info .left .message-sections2 img {
vertical-align: middle;
margin: 10px 0% 0 15px;
}
.main .main-info .left .message-sections div, .main .main-info .left .message-sections2 div {
display: inline-block;
vertical-align: middle;
margin-top: 10px;
}
.main .main-info .left .message-sections div :nth-child(1), .main .main-info .left .message-sections2 div :nth-child(1) {
font-size: 18px;
font-weight: 500;
}
.main .main-info .left .message-sections div :nth-child(2), .main .main-info .left .message-sections2 div :nth-child(2) {
font-size: 14px;
margin-left: 1vw;
}
.main .main-info .left .message-sections div svg, .main .main-info .left .message-sections2 div svg {
width: 12px;
height: 12px;
}
.main .main-info .left .message-sections div :nth-child(4), .main .main-info .left .message-sections2 div :nth-child(4) {
font-size: 15px;
}
.main .main-info .left .message-sections2 {
background: #E7E9F8;
border-right: 3px solid #0F27BD;
}
.main .main-info .right {
float: right;
background: #E7E9F8;
width: 60%;
height: 100%;
}
.main .main-info .right .head {
height: 70px;
border-bottom: 1px solid #A1A4B6;
font-weight: 500;
font-size: 16px;
line-height: 70px;
}
.main .main-info .right .head img {
width: 45px;
height: 45px;
text-align: left;
margin-left: 30px;
vertical-align: middle;
line-height: 50px;
}
.main .main-info .right .hr-lines {
position: relative;
max-width: 400px;
margin: 20px auto;
text-align: center;
}
.main .main-info .right .hr-lines:before {
content: " ";
height: 1.5px;
width: 160px;
background: #A1A4B6;
display: block;
position: absolute;
top: 50%;
left: 3%;
}
.main .main-info .right .hr-lines:after {
content: " ";
height: 1.5px;
width: 160px;
background: #A1A4B6;
display: block;
position: absolute;
top: 50%;
right: 3%;
}
.main .main-info .right .sender-message {
height: contain;
margin: 25px 0 15px 3%;
width: 50%;
background: white;
color: black;
font-size: 16px;
padding: 10px;
border-radius: 8px 8px 8px 0px;
}
.main .main-info .right .my-message {
height: contain;
background: #0F27BD;
color: white;
font-size: 16px;
border-radius: 8px 8px 0px 8px;
padding: 8px;
width: 45%;
margin: 12px 4% 0 48%;
}
.main .main-info .right .error {
margin: 12px 2% 0 52%;
color: #0F27BD;
font-size: 14px;
font-weight: 550;
}
.main .main-info .right .error svg {
vertical-align: middle;
margin-right: 3px;
}
.main .main-info .right .error :nth-child(2) {
color: red;
margin-right: 4%;
}
.main .main-info .right .message-bar {
display: block;
width: 90%;
height: 27px;
border-radius: 7px;
border: 1px solid #A1A4B6;
padding: 10px 15px;
margin: 20% 3% 0 3%;
}
.main .main-info .right .message-bar:focus {
border: 2px solid #A1A4B6;
outline: none;
}
.main .main-info .right label::before {
content: "iiiioggi";
position: absolute;
color: transparent;
margin: 15px 15px 0 32%;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='23' viewBox='0 0 14 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5605 5.99853V17.4985C11.5605 19.7085 9.5468 21.4985 7.06055 21.4985C4.5743 21.4985 2.56055 19.7085 2.56055 17.4985V4.99853C2.56055 4.33549 2.85686 3.69961 3.38431 3.23077C3.91175 2.76193 4.62713 2.49854 5.37305 2.49854C6.11897 2.49854 6.83434 2.76193 7.36178 3.23077C7.88923 3.69961 8.18555 4.33549 8.18555 4.99853V15.4985C8.18555 16.0485 7.6793 16.4985 7.06055 16.4985C6.4418 16.4985 5.93555 16.0485 5.93555 15.4985V5.99853H4.24805V15.4985C4.24805 16.1616 4.54436 16.7975 5.07181 17.2663C5.59925 17.7351 6.31462 17.9985 7.06055 17.9985C7.80647 17.9985 8.52184 17.7351 9.04928 17.2663C9.57673 16.7975 9.87305 16.1616 9.87305 15.4985V4.99853C9.87305 2.78854 7.8593 0.998535 5.37305 0.998535C2.8868 0.998535 0.873047 2.78854 0.873047 4.99853V17.4985C0.873047 20.5385 3.64055 22.9985 7.06055 22.9985C10.4805 22.9985 13.248 20.5385 13.248 17.4985V5.99853H11.5605Z' fill='%230F27BD'/%3E%3C/svg%3E%0A");
}
.main .main-info .right label::after {
content: "iiiioggi";
position: absolute;
color: transparent;
margin: -32px 15px 0 34%;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4354 0.581983C18.9352 0.0685981 18.1949 -0.122663 17.5046 0.0786645L1.408 4.75952C0.679698 4.96186 0.163487 5.54269 0.0244302 6.28055C-0.117628 7.0315 0.378575 7.98479 1.02684 8.38342L6.0599 11.4768C6.57611 11.7939 7.24238 11.7144 7.66956 11.2835L13.4329 5.4843C13.723 5.18231 14.2032 5.18231 14.4934 5.4843C14.7835 5.77623 14.7835 6.24935 14.4934 6.55134L8.71999 12.3516C8.29181 12.7814 8.21178 13.4508 8.52691 13.9702L11.6022 19.0538C11.9623 19.6577 12.5826 20 13.2628 20C13.3429 20 13.4329 20 13.513 19.9899C14.2933 19.8893 14.9135 19.3558 15.1436 18.6008L19.9156 2.52479C20.1257 1.84028 19.9356 1.09537 19.4354 0.581983Z' fill='%230F27BD'/%3E%3C/svg%3E%0A");
}
}/*# sourceMappingURL=messages.css.map */