update AI page

This commit is contained in:
Raven Scott 2024-10-02 04:40:18 -04:00
parent 939c5668a0
commit a5cb7efff1

View File

@ -73,63 +73,74 @@
border-radius: 5px; border-radius: 5px;
} }
/* Ensure transparent background for the alert's parent container */ .alert {
#success-alert, #error-alert { margin-top: 10px;
background-color: transparent; /* Remove any background color */
}
/* Success Alert - Blue Theme with no extra background */
.alert-success {
background-color: #007bff; /* Blue background for success */
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
text-align: center; text-align: center;
/* Center the text content */
display: flex; display: flex;
/* Make sure the alert is a flex container */
justify-content: center; justify-content: center;
/* Center flex items horizontally */
align-items: center; align-items: center;
opacity: 0; /* Start hidden */ /* Center flex items vertically (if needed) */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }
}
/* Error Alert - Maroon Red Theme */ body,
.alert-danger { .container {
background-color: #800000; /* Red background for error */ background-color: transparent;
}
/* Success Alert - Blue Theme */
.alert-success {
background-color: #007bff;
/* Blue background similar to your button */
color: white; color: white;
/* White text */
border: none; border: none;
/* Remove border */
padding: 10px 20px; padding: 10px 20px;
/* Padding for spacing */
border-radius: 5px; border-radius: 5px;
/* Rounded corners */
text-align: center; text-align: center;
/* Center text */
display: flex; display: flex;
/* Flex layout */
justify-content: center; justify-content: center;
/* Center horizontally */
align-items: center; align-items: center;
opacity: 0; /* Start hidden */ /* Center vertically */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }
}
/* Common alert styles */ /* Error Alert - Maroon Red Theme */
.alert { .alert-danger {
position: fixed; background-color: #800000;
top: 20px; /* Adjust to your preferred location */ /* Maroon red background */
left: 50%; color: white;
transform: translateX(-50%); /* White text */
z-index: 9999; /* Ensure it stays on top */ border: none;
} /* Remove border */
padding: 10px 20px;
/* Padding for spacing */
border-radius: 5px;
/* Rounded corners */
text-align: center;
/* Center text */
display: flex;
/* Flex layout */
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
}
/* Fade in animation */ /* Common alert styles */
.alert.fade-in { .alert {
opacity: 1; margin-top: 10px;
transform: translateY(0); /* Add margin at the top */
animation: fadeSlideIn 0.5s forwards; font-size: 14px;
} /* Adjust the font size for readability */
}
/* Fade out animation */
.alert.fade-out {
opacity: 0;
transform: translateY(-20px);
animation: fadeSlideOut 0.5s forwards;
}
.message.user { .message.user {
background-color: #3a3a3a; background-color: #3a3a3a;