Scribd
Upload
2 views2 pages

style.css

The document contains CSS styles for a web application, defining variables for background, text, accent colors, and input styles. It includes styles for body, container, message display area, message input form, and buttons, ensuring a responsive and visually appealing layout. The design emphasizes a dark theme with contrasting text and accent colors.

Uploaded by

alex181672
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

style.css

The document contains CSS styles for a web application, defining variables for background, text, accent colors, and input styles. It includes styles for body, container, message display area, message input form, and buttons, ensuring a responsive and visually appealing layout. The design emphasizes a dark theme with contrasting text and accent colors.

Uploaded by

alex181672
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

:root {

--bg: #0e0f11;
--text: #eee;
--accent: #4eb980;
--input: #1e1e1e;
}

body {
margin: 0;
font-family: sans-serif;
background: var(--bg);
color: var(--text);
height: 100vh;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}

.messages {
flex: 1;
overflow-y: auto;
padding: 10px;
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 10px;
}

#msgForm {
display: flex;
gap: 10px;
}

#msgInput {
flex: 1;
padding: 10px;
border: none;
border-radius: 6px;
background: var(--input);
color: var(--text);
resize: none;
min-height: 40px;
}

button {
background: var(--accent);
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
}

.message {
background: var(--input);
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
}

.message img, .message video {


max-width: 100%;
border-radius: 6px;
margin-top: 5px;
}

You might also like