Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
7 views10 pages

Chat App CSS: Light, Dark, Custom Modes

The document is a CSS stylesheet that defines styles for a web application, including reset styles, global styles, and specific styles for dark mode, custom mode, and various UI components like buttons, sidebars, chat containers, and modals. It also includes responsive design rules and scrollbar styling. The stylesheet emphasizes user interface elements such as login forms, message displays, and input areas, ensuring a cohesive and visually appealing layout across different modes and screen sizes.

Uploaded by

alimudindrive
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
7 views10 pages

Chat App CSS: Light, Dark, Custom Modes

The document is a CSS stylesheet that defines styles for a web application, including reset styles, global styles, and specific styles for dark mode, custom mode, and various UI components like buttons, sidebars, chat containers, and modals. It also includes responsive design rules and scrollbar styling. The stylesheet emphasizes user interface elements such as login forms, message displays, and input areas, ensuring a cohesive and visually appealing layout across different modes and screen sizes.

Uploaded by

alimudindrive
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/ 10

/* styles.

css */

/* Reset Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Global Styles */
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f2f5; /* Light mode background */
color: #000; /* Default text color */
transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode */
body.dark-mode {
background-color: #1e1e1e; /* Dark mode background */
color: #ffffff; /* Text color in dark mode */
}

/* Custom Mode */
body.custom-mode {
background-color: #2e95d3; /* Custom color */
color: #ffffff;
}

/* Mode Buttons */
#mode-buttons {
position: fixed;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
z-index: 1000;
}

#mode-buttons button {
margin-bottom: 10px;
background-color: #fff;
border-radius: 50%;
width: 45px;
height: 45px;
border: none;
font-size: 20px;
color: #555;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#mode-buttons button:hover {
background-color: #f0f0f0;
}

body.dark-mode #mode-buttons button {


background-color: #2c2c2c;
}
body.custom-mode #mode-buttons button {
background-color: #1f70a2;
}

/* Sidebar */
#sidebar {
position: fixed;
top: 0;
left: -250px; /* Tersembunyi di luar layar */
width: 250px;
height: 100%;
background-color: #fff;
overflow-y: auto;
transition: left 0.3s;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
z-index: 1000;
}

#sidebar.open {
left: 0; /* Muncul saat kelas 'open' ditambahkan */
}

#sidebar h2 {
padding: 20px;
background-color: #128c7e;
color: #fff;
margin: 0;
position: relative;
}

#sidebar #close-sidebar {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
border: none;
color: #fff;
font-size: 20px;
}

#sidebar ul {
list-style: none;
padding: 0;
}

#sidebar ul li {
padding: 15px 20px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}

#sidebar ul li:hover {
background-color: #f0f0f0;
}

/* Login & Register Forms */


#login-container, #register-container, #reset-container {
max-width: 400px;
margin: 100px auto;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius: 10px;
}

#login-container h2, #register-container h2, #reset-container h2 {


margin-bottom: 20px;
}

#login-container input, #register-container input, #reset-container input {


width: 90%;
padding: 10px 15px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
}

#login-container button, #register-container button, #reset-container button {


width: 95%;
padding: 10px 15px;
margin-bottom: 10px;
border: none;
border-radius: 20px;
background-color: #128c7e;
color: #fff;
font-size: 16px;
cursor: pointer;
}

#login-container button:hover, #register-container button:hover, #reset-container


button:hover {
background-color: #075e54;
}

#login-container p, #register-container p, #reset-container p {


margin-top: 15px;
}

#login-container a, #register-container a, #reset-container a {


color: #128c7e;
text-decoration: none;
}

#login-container a:hover, #register-container a:hover, #reset-container a:hover {


text-decoration: underline;
}

/* Chat Container */
#chat-container {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
display: flex;
flex-direction: column;
height: 100vh;
}
body.dark-mode #chat-container {
background-color: #2c2c2c;
}

body.custom-mode #chat-container {
background-color: #2e95d3;
}

/* Header */
#header {
background-color: #fff;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ddd;
}

body.dark-mode #header {
background-color: #1e1e1e;
border-bottom: 1px solid #444;
}

body.custom-mode #header {
background-color: #2e95d3;
border-bottom: 1px solid #1f70a2;
}

#header-left {
display: flex;
align-items: center;
}

#header img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 15px;
cursor: pointer;
}

#header #username-display {
font-weight: bold;
font-size: 18px;
}

#header #status-bubble {
margin-left: 5px;
font-size: 14px;
color: #28a745;
}

#header-right {
display: flex;
align-items: center;
}

#header-right button {
background-color: transparent;
border: none;
font-size: 20px;
margin-left: 15px;
cursor: pointer;
color: inherit;
}

#header-right button:hover {
color: #128c7e;
}

/* Messages */
#messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
}

body.dark-mode #messages {
background-color: #1e1e1e;
}

body.custom-mode #messages {
background-color: #2e95d3;
}

.message {
margin-bottom: 15px;
max-width: 70%;
word-wrap: break-word;
position: relative;
padding: 10px 15px;
border-radius: 20px;
font-size: 16px;
display: inline-block;
animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

.message.sent {
background-color: #dcf8c6;
align-self: flex-end;
color: #000;
}

.message.received {
background-color: #fff;
align-self: flex-start;
color: #000;
}
body.dark-mode .message.sent {
background-color: #056162;
color: #fff;
}

body.dark-mode .message.received {
background-color: #262d31;
color: #fff;
}

body.custom-mode .message.sent {
background-color: #1f70a2;
color: #fff;
}

body.custom-mode .message.received {
background-color: #fff;
color: #000;
}

.message .message-info {
font-size: 12px;
margin-top: 5px;
text-align: right;
}

.message img, .message video, .message audio {


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

/* Typing Indicator */
#typing-indicator {
padding: 5px 20px;
font-size: 14px;
color: #999;
display: none;
}

/* Input Area */
#input-area {
padding: 10px 20px;
background-color: #fff;
display: flex;
align-items: center;
border-top: 1px solid #ddd;
}

body.dark-mode #input-area {
background-color: #1e1e1e;
border-top: 1px solid #444;
}

body.custom-mode #input-area {
background-color: #2e95d3;
border-top: 1px solid #1f70a2;
}
#input-area input[type="text"] {
flex: 1;
padding: 10px 15px;
border: none;
border-radius: 20px;
background-color: #f0f0f0;
margin: 0 10px;
outline: none;
font-size: 16px;
}

body.dark-mode #input-area input[type="text"] {


background-color: #2c2c2c;
color: #fff;
}

body.custom-mode #input-area input[type="text"] {


background-color: #1f70a2;
color: #fff;
}

#input-area button {
background-color: transparent;
border: none;
font-size: 24px;
cursor: pointer;
color: #555;
}

#input-area button.send-btn {
background-color: #128c7e;
color: #fff;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}

#input-area button:hover {
color: #128c7e;
}

/* Emoji and Sticker Picker */


#emoji-picker, #sticker-picker {
position: absolute;
bottom: 70px;
left: 20px;
background-color: #fff;
padding: 10px;
border-radius: 15px;
display: none;
flex-wrap: wrap;
max-width: 300px;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
z-index: 10;
}

#emoji-picker span, #sticker-picker img {


font-size: 24px;
margin: 5px;
cursor: pointer;
}

#sticker-picker img {
width: 60px;
height: 60px;
}

body.dark-mode #emoji-picker, body.dark-mode #sticker-picker {


background-color: #2c2c2c;
}

body.custom-mode #emoji-picker, body.custom-mode #sticker-picker {


background-color: #1f70a2;
}

/* Modals */
#profile-modal, #online-users-modal, #video-call-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}

#profile-content, #online-users-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 500px;
position: relative;
}

#online-users-content button {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
border: none;
font-size: 20px;
}

#online-users-content ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
#online-users-content ul li {
padding: 10px;
border-bottom: 1px solid #ddd;
}

/* Video Call Container */


#video-call-container {
background-color: rgba(0,0,0,0.9);
flex-direction: column;
}

#local-video, #remote-video {
width: 45%;
height: auto;
margin: 10px;
}

#end-call-button {
padding: 10px 20px;
background-color: #ff4d4d;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
}

#end-call-button:hover {
background-color: #cc0000;
}

/* Responsive Design */
@media (max-width: 768px) {
#chat-container {
margin: 0;
height: 100vh;
}

#header {
padding: 10px 15px;
}

#input-area {
padding: 10px 15px;
}

#input-area input[type="text"] {
font-size: 14px;
}

.message {
font-size: 14px;
}
}

/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

You might also like