Input by dzoshi

1.messageBox {
2  width: fit-content;
3  height: 50px;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  background-color: #2d2d2d;
8  padding: 0 15px;
9  border-radius: 14px;
10  border: 1px solid rgb(63, 63, 63);
11}
12.messageBox:focus-within {
13  border: 2px solid rgba(0, 255, 115, 0.692);
14}
15.fileUploadWrapper {
16  width: fit-content;
17  height: 100%;
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  font-family: Play;
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: 20px;
38}
39.fileUploadWrapper label svg path {
40  -webkit-transition: all 0.3s ease-out;
41  -moz-transition: all 0.3s ease-out;
42  -o-transition: all 0.3s ease-out;
43  transition: all 0.3s ease-out;
44}
45.fileUploadWrapper label svg circle {
46  -webkit-transition: all 0.3s ease-out;
47  -moz-transition: all 0.3s ease-out;
48  -o-transition: all 0.3s ease-out;
49  transition: all 0.3s ease-out;
50}
51.fileUploadWrapper label:hover svg path {
52  stroke: #fff;
53}
54.fileUploadWrapper label:hover svg circle {
55  stroke: #fff;
56  fill: #3c3c3c;
57}
58.fileUploadWrapper label:hover .tooltip {
59  display: block;
60  opacity: 1;
61}
62.tooltip {
63  position: absolute;
64  top: -40px;
65  display: none;
66  opacity: 0;
67  color: white;
68  font-size: 12px;
69  text-wrap: nowrap;
70  background-color: #000;
71  padding: 6px 10px;
72  border: 1px solid #3600b4;
73  border-radius: 8px;
74  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
75  -webkit-transition: all 0.3s ease-out;
76  -moz-transition: all 0.3s ease-out;
77  -o-transition: all 0.3s ease-out;
78  transition: all 0.3s ease-out;
79}
80#messageInput {
81  width: 160px;
82  height: 100%;
83  background-color: transparent;
84  outline: none;
85  border: none;
86  padding-left: 12px;
87  color: white;
88  font-family: Play;
89  font-size: 16px;
90}
91#messageInput:focus ~ #sendButton svg path,
92#messageInput:valid ~ #sendButton svg path {
93  fill: #3c3c3c;
94  stroke: #00ff6a;
95}
96
97#sendButton {
98  width: fit-content;
99  height: 100%;
100  background-color: transparent;
101  outline: none;
102  border: none;
103  display: flex;
104  align-items: center;
105  justify-content: center;
106  cursor: pointer;
107  -webkit-transition: all 0.3s ease-out;
108  -moz-transition: all 0.3s ease-out;
109  -o-transition: all 0.3s ease-out;
110  transition: all 0.3s ease-out;
111}
112#sendButton svg {
113  height: 20px;
114  -webkit-transition: all 0.3s ease-out;
115  -moz-transition: all 0.3s ease-out;
116  -o-transition: all 0.3s ease-out;
117  transition: all 0.3s ease-out;
118}
119#sendButton svg path {
120  -webkit-transition: all 0.3s ease-out;
121  -moz-transition: all 0.3s ease-out;
122  -o-transition: all 0.3s ease-out;
123  transition: all 0.3s ease-out;
124}
125#sendButton:hover svg path {
126  fill: #3c3c3c;
127  stroke: #00ff6a;
128}
129