changed some animations (to review later)

static/animations.css

@@ -4,7 +4,7 @@
 
 .message-bot {
     opacity: 1;
-    transition: opacity 1s ease-out;
+    transition: opacity 500ms ease-out;
 }
 
 .message-user.htmx-added {
@@ -13,5 +13,32 @@
 
 .message-user {
     opacity: 1;
-    transition: opacity 1s ease-out;
+    transition: opacity 500ms ease-out;
+}
+
+.message-content.htmx-added {
+    opacity: 0;
+}
+
+.message-content {
+    opacity: 1;
+    transition: opacity 500ms ease-out;
+}
+
+.message-button.htmx-added {
+    opacity: 0;
+}
+
+.message-button {
+    opacity: 1;
+    transition: opacity 500ms ease-out;
+}
+
+.message-icon.htmx-added {
+    opacity: 0;
+}
+
+.message-icon {
+    opacity: 1;
+    transition: opacity 500ms ease-out;
 }

static/style.css

@@ -106,74 +106,6 @@ svg text {
     font-size: 240px;
 }
 
-/* Custom Checkbox Styles */
-.custom-checkbox {
-    display: flex;
-    align-items: center;
-    font-size: 1rem;
-    cursor: pointer;
-    user-select: none;
-    /* Prevent text selection */
-}
-
-.custom-checkbox input {
-    position: absolute;
-    opacity: 0;
-    /* Hide the default checkbox */
-    cursor: pointer;
-}
-
-.custom-checkbox .checkmark {
-    position: relative;
-    height: 14px;
-    width: 14px;
-    background-color: #eee;
-    /* Light grey background */
-    border-radius: 4px;
-    /* Rounded corners */
-    margin-right: 8px;
-    /* Space between checkmark and label text */
-    border: 2px solid #ccc;
-    /* Grey border */
-}
-
-/* On mouse-over, add a grey background color */
-.custom-checkbox:hover input~.checkmark {
-    background-color: #ccc;
-}
-
-/* When the checkbox is checked */
-.custom-checkbox input:checked~.checkmark {
-    background-color: var(--bulma-primary, #126d0f);
-    /* Primary color background */
-    border-color: var(--bulma-primary, #126d0f);
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.custom-checkbox .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-
-/* Show the checkmark when checked */
-.custom-checkbox input:checked~.checkmark:after {
-    display: block;
-}
-
-/* Style the checkmark/indicator */
-.custom-checkbox .checkmark:after {
-    left: 4px;
-    top: 1px;
-    width: 3px;
-    height: 6px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
 /* Message button styles */
 .message-button {
     opacity: 0;
@@ -186,112 +118,4 @@ svg text {
 
 .message-bot:hover .message-button {
     opacity: 1;
-}
-
-/***** MODAL DIALOG ****/
-#modal {
-    /* Underlay covers entire screen. */
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-
-    /* Flexbox centers the .modal-content vertically and horizontally */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    /* Animate when opening */
-    animation-name: fadeIn;
-    animation-duration: 150ms;
-    animation-timing-function: ease;
-}
-
-#modal>.modal-underlay {
-    /* underlay takes up the entire viewport. This is only
-	required if you want to click to dismiss the popup */
-    position: absolute;
-    z-index: -1;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-}
-
-#modal>.modal-content {
-    /* Position visible dialog near the top of the window */
-    margin-top: 10vh;
-
-    /* Sizing for visible dialog */
-    width: 80%;
-    max-width: 600px;
-
-    /* Display properties for visible dialog*/
-    border: solid 1px #999;
-    border-radius: 8px;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
-    background-color: white;
-    padding: 20px;
-
-    /* Animate when opening */
-    animation-name: zoomIn;
-    animation-duration: 150ms;
-    animation-timing-function: ease;
-}
-
-#modal.closing {
-    /* Animate when closing */
-    animation-name: fadeOut;
-    animation-duration: 150ms;
-    animation-timing-function: ease;
-}
-
-#modal.closing>.modal-content {
-    /* Animate when closing */
-    animation-name: zoomOut;
-    animation-duration: 150ms;
-    animation-timing-function: ease;
-}
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeOut {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes zoomIn {
-    0% {
-        transform: scale(0.9);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-@keyframes zoomOut {
-    0% {
-        transform: scale(1);
-    }
-
-    100% {
-        transform: scale(0.9);
-    }
 }

views/partials/message-bot.html

@@ -4,7 +4,8 @@
             <!-- Left column with the icon -->
             {% if IsPlaceholder %}
 
-            <figure class="image is-48x48" style="flex-shrink: 0;" sse-swap="swapIcon-{{ ConversationAreaId }}">
+            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;"
+                sse-swap="swapIcon-{{ ConversationAreaId }}">
                 <img src="icons/bouvai2.png" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
             </figure>
 
@@ -12,7 +13,7 @@
 
             {% for message in Messages %}
             {% if not message.Hidden %}
-            <figure class="image is-48x48" style="flex-shrink: 0;">
+            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
                 <img src="{{ message.Icon }}" alt="User Image" id="selectedIcon-{{ ConversationAreaId }}">
             </figure>
             {% endif %}