Emmanuel Rizky
e2ce1c0a0d
``` Enhance UI animations and mobile layout; update chat send icon - Update chat send button icon to bi-arrow-right-circle - Revamp floating circles animation with 10 configurable elements and complex movement - Improve mobile layout (header alignment and full-height chat container) - Increase login page animation visibility and continuity - Remove message input focus outline for cleaner UI ``` The message summarizes key changes: 1. Icon update in chat interface 2. Major animation enhancements (both chat background and login page) 3. Mobile layout improvements 4. UX polish (focus state removal) It maintains imperative mood, stays within line limits, and clearly connects changes to their purpose (improved visuals and responsiveness).
491 lines
9.3 KiB
CSS
491 lines
9.3 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: linear-gradient(135deg, #0077b6, #023e8a);
|
|
padding: 20px;
|
|
}
|
|
|
|
.chat-container {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 90vh;
|
|
max-height: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-header {
|
|
padding: 15px 20px;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
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: 100;
|
|
}
|
|
|
|
.chat-header, .input-area {
|
|
background: rgba(173, 232, 244, 0.5);
|
|
backdrop-filter: blur(30px);
|
|
-webkit-backdrop-filter: blur(30px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
z-index: 10;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #0096c7;
|
|
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: rgba(72, 202, 228, 0.5);
|
|
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: rgba(173, 232, 244, 0.8);
|
|
color: #03045e;
|
|
border-bottom-left-radius: 4px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.message.sent {
|
|
align-self: flex-end;
|
|
background: white;
|
|
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: #001f3f; /* 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: #0096c7;
|
|
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(0, 150, 199, 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: #0096c7;
|
|
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 5px 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: #f0f0f0;
|
|
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: #48cae4;
|
|
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;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
align-items: flex-start; /* Header menempel di atas */
|
|
padding: 0;
|
|
}
|
|
|
|
.chat-container {
|
|
height: 100vh; /* Kembali ke viewport height normal */
|
|
max-height: none;
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.message {
|
|
max-width: 85%;
|
|
}
|
|
}
|