Input by vinodjangid07

1.messageBox {
2  width: fit-content;
3  height: 40px;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  background-color: #2d2d2d;
8  padding: 0 15px;
9  border-radius: 10px;
10  border: 1px solid rgb(63, 63, 63);
11}
12.messageBox:focus-within {
13  border: 1px solid rgb(110, 110, 110);
14}
15.fileUploadWrapper {
16  width: fit-content;
17  height: 100%;
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  font-family: Arial, Helvetica, sans-serif;
22}
23
24#file {
25  display: none;
26}
27.fileUploadWrapper label {
28  cursor: pointer;
29  width: fit-content;
30  height: fit-content;
31  display: flex;
32  align-items: center;
33  justify-content: center;
34  position: relative;
35}
36.fileUploadWrapper label svg {
37  height: 18px;
38}
39.fileUploadWrapper label svg path {
40  transition: all 0.3s;
41}
42.fileUploadWrapper label svg circle {
43  transition: all 0.3s;
44}
45.fileUploadWrapper label:hover svg path {
46  stroke: #fff;
47}
48.fileUploadWrapper label:hover svg circle {
49  stroke: #fff;
50  fill: #3c3c3c;
51}
52.fileUploadWrapper label:hover .tooltip {
53  display: block;
54  opacity: 1;
55}
56.tooltip {
57  position: absolute;
58  top: -40px;
59  display: none;
60  opacity: 0;
61  color: white;
62  font-size: 10px;
63  text-wrap: nowrap;
64  background-color: #000;
65  padding: 6px 10px;
66  border: 1px solid #3c3c3c;
67  border-radius: 5px;
68  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
69  transition: all 0.3s;
70}
71#messageInput {
72  width: 200px;
73  height: 100%;
74  background-color: transparent;
75  outline: none;
76  border: none;
77  padding-left: 10px;
78  color: white;
79}
80#messageInput:focus ~ #sendButton svg path,
81#messageInput:valid ~ #sendButton svg path {
82  fill: #3c3c3c;
83  stroke: white;
84}
85
86#sendButton {
87  width: fit-content;
88  height: 100%;
89  background-color: transparent;
90  outline: none;
91  border: none;
92  display: flex;
93  align-items: center;
94  justify-content: center;
95  cursor: pointer;
96  transition: all 0.3s;
97}
98#sendButton svg {
99  height: 18px;
100  transition: all 0.3s;
101}
102#sendButton svg path {
103  transition: all 0.3s;
104}
105#sendButton:hover svg path {
106  fill: #3c3c3c;
107  stroke: white;
108}
109