Refactor chatbot styling and functionality in style.css

Kavish-Paraswar · Oct 1, 2024 · 5a86951 · 5a86951
1 parent 5472cee
commit 5a86951
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/MedicalBot/style.css b/MedicalBot/style.css
@@ -154,4 +154,41 @@ body {
     max-height: 180px;
     padding: 15px 15px 15px 0;
     font-size: 0.95rem;
+  }
+  .chat-input span {
+    align-self: flex-end;
+    color: #724ae8;
+    cursor: pointer;
+    height: 55px;
+    display: flex;
+    align-items: center;
+    visibility: hidden;
+    font-size: 1.35rem;
+  }
+  .chat-input textarea:valid ~ span {
+    visibility: visible;
+  }
+
+  @media (max-width: 490px) {
+    .chatbot-toggler {
+      right: 20px;
+      bottom: 20px;
+    }
+    .chatbot {
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      border-radius: 0;
+      width: 100%;
+    }
+    .chatbot .chatbox {
+      height: 90%;
+      padding: 25px 15px 100px;
+    }
+    .chatbot .chat-input {
+      padding: 5px 15px;
+    }
+    .chatbot header span {
+      display: block;
+    }
   }