diff --git a/views/chat.ejs b/views/chat.ejs index 1002242..523c048 100644 --- a/views/chat.ejs +++ b/views/chat.ejs @@ -73,77 +73,63 @@ border-radius: 5px; } - /* Ensure transparent background for the alert's parent container */ - #success-alert, - #error-alert { - background-color: transparent; - /* Remove any background color */ - } +/* Ensure transparent background for the alert's parent container */ +#success-alert, #error-alert { + 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; - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - /* Start hidden */ - transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; - } +/* 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; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; /* Start hidden */ + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; +} - /* Error Alert - Maroon Red Theme */ - .alert-danger { - background-color: #800000; - /* Red background for error */ - color: white; - border: none; - padding: 10px 20px; - border-radius: 5px; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - /* Start hidden */ - transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; - } +/* Error Alert - Maroon Red Theme */ +.alert-danger { + background-color: #800000; /* Red background for error */ + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; /* Start hidden */ + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; +} - /* Common alert styles */ - /* Common alert styles */ - .alert { - position: fixed; - top: 20px; - /* Adjust to your preferred vertical location */ - left: 45%; - /* This centers the alert horizontally */ - transform: translateX(-50%); - /* This ensures the alert is exactly centered */ - z-index: 9999; - /* Ensure it stays on top */ - opacity: 0; - /* Start hidden */ - transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; - } +/* Common alert styles */ +.alert { + position: fixed; + top: 20px; /* Adjust to your preferred location */ + left: 50%; + transform: translateX(-50%); + z-index: 9999; /* Ensure it stays on top */ +} - /* Fade in animation */ - .alert.fade-in { - opacity: 1; - transform: translateY(0); - animation: fadeSlideIn 0.5s forwards; - } +/* Fade in animation */ +.alert.fade-in { + opacity: 1; + transform: translateY(0); + animation: fadeSlideIn 0.5s forwards; +} - /* Fade out animation */ - .alert.fade-out { - opacity: 0; - transform: translateY(-20px); - animation: fadeSlideOut 0.5s forwards; - } +/* Fade out animation */ +.alert.fade-out { + opacity: 0; + transform: translateY(-20px); + animation: fadeSlideOut 0.5s forwards; +} .message.user { background-color: #3a3a3a;