emmanuel.rizky
2991cf0685
This commit removes the chat page feature, including its HTML, JavaScript, and CSS files. The color palette documentation has also been updated. The chat page was deemed unnecessary for the current scope of the project.
488 lines
9.1 KiB
CSS
488 lines
9.1 KiB
CSS
/* Reset CSS */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background: #D4EBF8;
|
|
padding: 20px;
|
|
}
|
|
|
|
.chat-container {
|
|
background: #219ebc;
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
|
|
max-height: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.chat-header {
|
|
padding: 15px 20px;
|
|
background: #023047;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 20px 20px 0 0;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-area {
|
|
display: flex;
|
|
padding: 15px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
background: #023047;
|
|
backdrop-filter: blur(30px);
|
|
-webkit-backdrop-filter: blur(30px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-details > * {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #fb8500;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Enhanced floating circles background */
|
|
.floating-circles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
.floating-circles li {
|
|
position: absolute;
|
|
display: block;
|
|
list-style: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #8ECDDD;
|
|
animation: floating 25s linear infinite;
|
|
bottom: -150px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.floating-circles li:nth-child(1) {
|
|
left: 25%;
|
|
width: 80px;
|
|
height: 80px;
|
|
animation-delay: 0s;
|
|
animation-duration: 20s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(2) {
|
|
left: 10%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation-delay: 2s;
|
|
animation-duration: 22s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(3) {
|
|
left: 70%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation-delay: 4s;
|
|
animation-duration: 18s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(4) {
|
|
left: 40%;
|
|
width: 60px;
|
|
height: 60px;
|
|
animation-delay: 0s;
|
|
animation-duration: 24s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(5) {
|
|
left: 65%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation-delay: 0s;
|
|
animation-duration: 16s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(6) {
|
|
left: 75%;
|
|
width: 110px;
|
|
height: 110px;
|
|
animation-delay: 3s;
|
|
animation-duration: 26s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(7) {
|
|
left: 35%;
|
|
width: 150px;
|
|
height: 150px;
|
|
animation-delay: 7s;
|
|
animation-duration: 30s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(8) {
|
|
left: 50%;
|
|
width: 25px;
|
|
height: 25px;
|
|
animation-delay: 15s;
|
|
animation-duration: 45s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(9) {
|
|
left: 20%;
|
|
width: 15px;
|
|
height: 15px;
|
|
animation-delay: 2s;
|
|
animation-duration: 35s;
|
|
}
|
|
|
|
.floating-circles li:nth-child(10) {
|
|
left: 85%;
|
|
width: 150px;
|
|
height: 150px;
|
|
animation-delay: 0s;
|
|
animation-duration: 28s;
|
|
}
|
|
|
|
/* Enhanced floating animation with horizontal movement */
|
|
@keyframes floating {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
opacity: 0.7;
|
|
}
|
|
25% {
|
|
transform: translate(-50px, -250px) rotate(90deg);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: translate(50px, -500px) rotate(180deg);
|
|
opacity: 0.3;
|
|
}
|
|
75% {
|
|
transform: translate(-30px, -750px) rotate(270deg);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translate(0, -1000px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.chat-area {
|
|
flex-grow: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
position: relative;
|
|
background: transparent;
|
|
}
|
|
|
|
.message {
|
|
max-width: 70%;
|
|
padding: 12px 16px;
|
|
border-radius: 18px;
|
|
position: relative;
|
|
animation: fadeIn 0.3s ease;
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
}
|
|
|
|
.message.received {
|
|
align-self: flex-start;
|
|
background: #caf0f8;
|
|
color: #333;
|
|
border-bottom-left-radius: 4px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.message.sent {
|
|
align-self: flex-end;
|
|
background: #caf0f8;
|
|
color: #03045e;
|
|
border-bottom-right-radius: 4px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.message-content {
|
|
word-wrap: break-word;
|
|
line-height: 1.4;
|
|
color: #003366; /* Navy blue text */
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 0.7rem;
|
|
margin-top: 5px;
|
|
opacity: 0.7;
|
|
color: #001f3f; /* Navy blue text */
|
|
}
|
|
|
|
.message.sent .message-time {
|
|
text-align: left; /* Move to left for user bubble */
|
|
}
|
|
|
|
.message.received .message-time {
|
|
text-align: right;
|
|
}
|
|
|
|
.input-area {
|
|
display: flex;
|
|
padding: 15px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.input-wrapper {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.attachment-icons {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.message-input:not(:placeholder-shown) + .attachment-icons {
|
|
opacity: 0;
|
|
transform: translateY(-50%) translateX(20px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.message-input {
|
|
flex-grow: 1;
|
|
padding: 12px 45px 12px 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 12px;
|
|
background: white;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
|
|
width: 100%;
|
|
}
|
|
|
|
.message-input:focus {
|
|
outline: none; /* Remove focus outline */
|
|
}
|
|
|
|
.send-btn {
|
|
background: #fb8500;
|
|
border: none;
|
|
border-radius: 12px;
|
|
width: 50px;
|
|
height: 45px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-area:focus-within {
|
|
box-shadow: 0 0 15px rgba(72, 202, 228, 0.6);
|
|
}
|
|
|
|
.icon-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: rgba(0, 150, 199, 0.1);
|
|
}
|
|
|
|
.icon-btn .bi {
|
|
font-size: 24px;
|
|
color: #5f6368;
|
|
}
|
|
|
|
.send-btn .bi {
|
|
font-size: 24px; /* Same as camera icon */
|
|
color: white;
|
|
}
|
|
|
|
.attachment-icons .icon-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes wave {
|
|
0%, 60%, 100% {
|
|
transform: scaleY(0.4);
|
|
}
|
|
30% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
.small-avatar {
|
|
position: absolute;
|
|
bottom: -15px; /* Move to bottom */
|
|
left: 10px; /* Center horizontally */
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: #fb8500;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px; /* Increase font size for icon */
|
|
border: 2px solid white;
|
|
box-shadow: 0 2px 5极客 rgba(0, 0, 0, 0.2);
|
|
z-index: 5;
|
|
}
|
|
|
|
.message.received {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.message.sent {
|
|
position: relative;
|
|
}
|
|
|
|
.sent-user-icon {
|
|
position: absolute;
|
|
bottom: -15px; /* Move to bottom */
|
|
right: 10px; /* Align to right with some margin */
|
|
font-size: 24px;
|
|
color: #0096c7;
|
|
background: white;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2px solid white;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
z-index: 5;
|
|
}
|
|
|
|
.typing-indicator {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
background: #caf0f8;
|
|
padding: 10px 15px;
|
|
border-radius: 18px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.typing-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 17px;
|
|
}
|
|
|
|
.typing-dots span {
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #219ebc;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.typing-dots span:nth-child(1) {
|
|
animation: wave 1.2s infinite;
|
|
}
|
|
|
|
.typing-dots span:nth-child(2) {
|
|
animation: wave 1.2s infinite 0.2s;
|
|
}
|
|
|
|
.typing-dots span:nth-child(3) {
|
|
animation: wave 1.2s infinite 0.4s;
|
|
}
|