Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background: #43a8f0;
color: #fff;
padding: 7px;
}
.button-container {
display: flex;
justify-content: center;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.btn {
padding: 0.375rem 0.75rem;
font-size: 1rem;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: 1rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: var(--btn-color);
background-color: var(--btn-bg);
}
.btn:hover {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg);
border-color: var(--btn-hover-border-color);
}
.btn:focus {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg);
border-color: var(--btn-hover-border-color);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}
.btn:active {
color: var(--btn-active-color);
background-color: var(--btn-active-bg);
border-color: var(--btn-active-border-color);
}
.primary {
--btn-color: #fff;
--btn-bg: #43a8f0;
--btn-border-color: #43a8f0;
--btn-hover-color: #fff;
--btn-hover-bg: #116bf0;
--btn-hover-border-color: #0a58ca;
--btn-focus-shadow-rgb: 49,132,253;
--btn-active-color: #fff;
--btn-active-bg: #0a58ca;
--btn-active-border-color: #0a53be;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: #fff;
--btn-disabled-bg: #0d6efd;
--btn-disabled-border-color: #0d6efd;
}
.secondary {
--btn-color: #fff;
--btn-bg: #7C4DFF;
--btn-border-color: #7C4DFF;
--btn-hover-color: #fff;
--btn-hover-bg: #8356fd;
--btn-hover-border-color: #8356fd;
--btn-focus-shadow-rgb: 131,83,256;
--btn-active-color: #fff;
--btn-active-bg: #8356fd;
--btn-active-border-color: #8356fd;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: #fff;
--btn-disabled-bg: #8356fd;
--btn-disabled-border-color: #8356fd;
}
.input-group {
display: flex;
flex-direction: column;
}
input {
border: 1px solid #ccc;
outline: none;
padding: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
.card {
box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
border-radius: 3px;
background: #fff;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
display: inline-block;
width: 100%;
}
chat.css
#all-messages {
padding: 50px 25px;
}
.message {
display: flex;
margin-bottom: 20px;
}
.message .image-container {
width: 50px;
align-items: flex-start;
}
.message .message-body {
margin-left: 10px;
width: calc(100% - 50px)
}
.message .message-body .user-info {
font-weight: bold;
}
.message .message-body .user-info .time {
color: #a19c9c;
font-size: 13px;
}
.message .message-body p {
margin-top: 5px;
color: #6e6e6e;
font-size: 14px;
}
.send-message {
background: #3F51B5;
padding: 10px;
display: flex;
}
.send-message input {
width: 100%;
padding: 7px 5px;
}
.send-message button {
margin-left: 10px;
}
register.css
main {
margin-top: 50px;
display: flex;
justify-content: center;
}
main form {
width: 50%;
padding: 20px;
}
main form .input-group label {
text-align: center;
margin-bottom: 5px;
font-weight: bold;
}
main form .button-container {
margin-top: 10px;
}
