Scribd
Upload
9 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
9 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

: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