Hugging Face's logo

VinayRevanuru
/
Medical_Chat_App

Model card Files
xet
 Community
Medical_Chat_App / frontend /src /App.css
Vinay Kumar Revanuru
Upload 4092 files
0dd26a3 verified
Raw History Blame Contribute Delete
2.87 kB
:root {
--text-color: rgb(236, 236, 236);
--background-color: rgb(33, 33, 33);
--input-padding: 10px;
--button-padding: 10px 20px;
--user-bg-color: #1e88e5;
--assistant-bg-color: #424242;
--hover-bg-color: #333;
--header-bg-color: #00796b;
}
body {
margin: 0;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
height: 100vh;
overflow: hidden; /* Prevents body from scrolling */
}
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.chat-header {
background-color: var(--header-bg-color);
color: white;
padding: 1rem; /* Reduce padding */
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
height: 10vh; /* Set height to 1/10th of the viewport height */
flex-shrink: 0;
}
.patient-details {
position: relative;
}
.patient-hover-details {
display: none;
position: absolute;
top: 2.5rem;
left: 0;
background-color: var(--hover-bg-color);
padding: 1rem;
border-radius: 8px;
color: white;
}
.patient-details:hover .patient-hover-details {
display: block;
}
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden; /* Prevents scrolling of the entire container */
padding: 0 1rem;
margin-top: 1rem;
}
.messages-container {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto; /* Scroll only messages */
padding-bottom: 2rem;
margin-bottom: 1rem;
}
.message {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
max-width: 60%;
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: auto; /* Align the header at the top */
}
.timestamp {
font-size: 0.8em;
color: #aaa;
align-self: flex-end; /* Align to the bottom right */
margin-top: auto; /* Push it to the bottom */
text-align: right; /* Right-align the timestamp */
}
.user-message {
align-self: flex-end;
background-color: var(--user-bg-color);
color: white;
}
.assistant-message {
align-self: flex-start;
background-color: var(--assistant-bg-color);
color: white;
}
.input-form {
background-color: #212121;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
input[type="text"] {
width: 70%;
padding: var(--input-padding);
}
button {
padding: var(--button-padding);
}
/* Hide scrollbar for Chrome, Safari, and Opera */
.messages-container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge, and Firefox */
.messages-container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}