Here's a concise and descriptive commit message:
``` 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).
This commit is contained in:
@@ -29,22 +29,19 @@ body {
|
||||
|
||||
.background-animation i {
|
||||
position: absolute;
|
||||
background: rgba(72, 202, 228, 0.4); /* #48cae4 with transparency */
|
||||
background: rgba(72, 202, 228, 0.6); /* More visible */
|
||||
border-radius: 50%;
|
||||
animation: float linear infinite;
|
||||
opacity: 0;
|
||||
opacity: 0.8; /* Always visible */
|
||||
right: -100px;
|
||||
top: var(--y-offset);
|
||||
--wave-amplitude: 50px;
|
||||
}
|
||||
|
||||
/* Waveform animation keyframes */
|
||||
/* Continuous floating animation */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
@@ -56,12 +53,9 @@ body {
|
||||
75% {
|
||||
transform: translate(-75vw, calc(var(--wave-amplitude) * -1));
|
||||
}
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translate(calc(-100vw - 100px), var(--wave-amplitude));
|
||||
opacity: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,37 +81,33 @@ body {
|
||||
.background-animation i:nth-child(19) { width: 14px; height: 14px; --y-offset: 75px; --wave-amplitude: 35px; animation-duration: 16s; animation-delay: 9s; }
|
||||
.background-animation i:nth-child(20) { width: 16px; height: 16px; --y-offset: 125px; --wave-amplitude: 55px; animation-duration: 23s; animation-delay: 3s; }
|
||||
|
||||
/* Login container styling */
|
||||
/* Login container styling with enhanced frosted glass effect */
|
||||
.login-container {
|
||||
background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
|
||||
background: rgba(255, 255, 255, 0.2); /* More transparency */
|
||||
backdrop-filter: blur(20px); /* Frosted glass effect */
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 15px 35px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Inner glow */
|
||||
padding: 40px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
transform: perspective(1000px) rotateY(5deg);
|
||||
transition: transform 0.5s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-container:hover {
|
||||
transform: perspective(1000px) rotateY(0deg);
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
height: 80px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #6a11cb;
|
||||
color: #0096c7; /* New blue from palette */
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
border: 2px dashed #6a11cb;
|
||||
border: 2px dashed #0096c7; /* New blue from palette */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -170,11 +160,11 @@ body {
|
||||
}
|
||||
|
||||
.input-group input:focus,
|
||||
.phone-input-wrapper:极focus-within {
|
||||
border-color: #48cae4;
|
||||
box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.2);
|
||||
.phone-input-wrapper:focus-within {
|
||||
transform: translateY(-2px);
|
||||
outline: none;
|
||||
border-color: transparent; /* Remove border */
|
||||
box-shadow: none; /* Remove shadow */
|
||||
}
|
||||
|
||||
/* Phone input styling */
|
||||
@@ -239,7 +229,7 @@ body {
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(37, 117, 252, 0.6);
|
||||
box-shadow: 0 8px 20px rgba(0, 150, 199, 0.6); /* New blue from palette */
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
@@ -261,7 +251,7 @@ body {
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
color: #03045e; /* Darkest blue from palette */
|
||||
color: #023e8a; /* Dark blue from palette */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user