changed some animations (to review later)
This commit is contained in:
parent
11b039e127
commit
26450e7d39
@ -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;
|
||||
}
|
||||
176
static/style.css
176
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;
|
||||
@ -187,111 +119,3 @@ 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);
|
||||
}
|
||||
}
|
||||
@ -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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user