Salastil/creamlinux-installer
1
0
Fork 0
mirror of https://github.com/Novattz/creamlinux-installer.git synced 2026-05-02 04:52:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Broken animation changes but ill fix it

Browse Source
This commit is contained in:
Tickbase
2025-05-18 02:34:29 +02:00
parent 985f804a16
commit e29f44bbd5
5 changed files with 213 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/styles/components/_dialog.scss
View File

@@ -1,6 +1,29 @@
@use '../variables' as *;
@use '../mixins' as *;
// Shared keyframes for both enter and exit animations
@keyframes modal-appear {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes modal-disappear {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
// Progress Dialog
.progress-dialog-overlay {
position: fixed;
@@ -13,22 +36,19 @@
@include flex-center;
z-index: var(--z-modal);
opacity: 0;
animation: modal-appear 0.2s ease-out;
cursor: pointer;
pointer-events: auto; // Ensure clicks work
// When visible, fade in
&.visible {
opacity: 1;
animation: modal-appear 0.2s ease-out forwards;
}
@keyframes modal-appear {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
// When exiting, fade out
&.exiting {
animation: modal-disappear 0.2s ease-out forwards;
pointer-events: none; // Prevent clicks during exit animation
}
}
@@ -36,32 +56,31 @@
background-color: var(--elevated-bg);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); // shadow-glow
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
width: 450px;
max-width: 90vw;
border: 1px solid var(--border-soft);
opacity: 0;
transform: scale(0.95);
cursor: default;
// When visible, show the dialog
&.dialog-visible {
transform: scale(1);
opacity: 1;
transform: scale(1);
transition: transform 0.2s var(--easing-bounce), opacity 0.2s ease-out;
}
// When exiting, hide the dialog
&.dialog-exiting {
opacity: 0;
transform: scale(0.95);
transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
&.with-instructions {
width: 500px;
}
h3 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
}
// Progress bar

24
src/styles/components/_dlc_dialog.scss
View File

@@ -13,10 +13,18 @@
z-index: var(--z-modal);
opacity: 0;
cursor: pointer;
pointer-events: auto; // Ensure clicks work
// When visible, fade in
&.visible {
opacity: 1;
animation: modal-appear 0.2s ease-out;
animation: modal-appear 0.2s ease-out forwards;
}
// When exiting, fade out
&.exiting {
animation: modal-disappear 0.2s ease-out forwards;
pointer-events: none; // Prevent clicks during exit animation
}
}
@@ -34,12 +42,18 @@
opacity: 0;
transform: scale(0.95);
// When visible, show the dialog
&.dialog-visible {
transform: scale(1);
opacity: 1;
transition:
transform 0.2s var(--easing-bounce),
opacity 0.2s ease-out;
transform: scale(1);
transition: transform 0.2s var(--easing-bounce), opacity 0.2s ease-out;
}
// When exiting, hide the dialog
&.dialog-exiting {
opacity: 0;
transform: scale(0.95);
transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
}