mirror of
https://github.com/umutcamliyurt/Amnezichat.git
synced 2025-05-05 13:50:48 +01:00
141 lines
3.4 KiB
CSS
141 lines
3.4 KiB
CSS
/* Reset the body to cover the full page */
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: 'Helvetica Neue', Arial, sans-serif; /* Clean sans-serif font */
|
|
background-color: #1e1f22; /* Dark background for the whole page */
|
|
color: #e1e1e1; /* Light text for contrast */
|
|
}
|
|
|
|
/* Center the content and give it full height */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 20px;
|
|
box-sizing: border-box; /* Ensure padding is included in height calculations */
|
|
}
|
|
|
|
/* Styling for the messages area */
|
|
#messages {
|
|
flex-grow: 1;
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
border: 1px solid #333b41; /* Darker border */
|
|
background-color: #2c2f36; /* Dark background for message container */
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px; /* Space between messages */
|
|
margin-bottom: 20px; /* Space between messages and input */
|
|
}
|
|
|
|
/* Styling each message */
|
|
#messages p {
|
|
padding: 10px;
|
|
background-color: #444c56; /* Slightly lighter gray message bubbles */
|
|
border-radius: 20px;
|
|
max-width: 75%; /* Keep messages from stretching too wide */
|
|
}
|
|
|
|
/* Styling input and button area */
|
|
.input-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: flex-end; /* Align input and buttons to the bottom */
|
|
width: 100%; /* Ensure it takes full width */
|
|
}
|
|
|
|
input[type="text"] {
|
|
flex-grow: 1; /* Make the input take up remaining space */
|
|
padding: 10px;
|
|
border-radius: 20px;
|
|
border: 1px solid #444c56; /* Dark border */
|
|
background-color: #2c2f36; /* Dark background */
|
|
color: #e1e1e1; /* Light text for input */
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: #4c8bf5; /* Light blue when focused */
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 20px; /* Rounded buttons */
|
|
background-color: #4c8bf5; /* Signal's blue color */
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #3978d1; /* Slightly darker blue on hover */
|
|
}
|
|
|
|
button:active {
|
|
background-color: #2962a1; /* Even darker blue when pressed */
|
|
}
|
|
|
|
/* Styling for the settings button inside the input container */
|
|
#settingsButton {
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 20px; /* Rounded button */
|
|
background-color: #4c8bf5; /* Signal's blue */
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#settingsButton:hover {
|
|
background-color: #3978d1;
|
|
}
|
|
|
|
#settingsButton:active {
|
|
background-color: #2962a1;
|
|
}
|
|
|
|
/* Modal for settings (hidden by default) */
|
|
#settings {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7); /* Dark background for modal */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-content {
|
|
background-color: #2c2f36; /* Dark background for modal */
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
width: 300px;
|
|
}
|
|
|
|
.settings-content h2 {
|
|
margin-top: 0;
|
|
color: #e1e1e1; /* Light text for headings */
|
|
}
|
|
|
|
.settings-content button {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
background-color: #4c8bf5; /* Blue background for buttons */
|
|
}
|
|
|
|
/* Styling for profile picture preview */
|
|
#profilePicPreview {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%; /* Circular image */
|
|
margin-top: 10px;
|
|
object-fit: cover;
|
|
border: 2px solid #444c56; /* Dark border around the profile picture */
|
|
}
|