e02ed91721
Adjust an animation. Add localizations. Fix stack behavior that was not updated correctly. (it still has an issue tho.)
144 lines
4.7 KiB
SCSS
144 lines
4.7 KiB
SCSS
:root {
|
|
--toastify-color-light: #fff;
|
|
--toastify-color-dark: var(--dark_950_color);
|
|
--toastify-color-info: var(--sent_400_color);
|
|
--toastify-color-success: var(--primary_400_color);
|
|
--toastify-color-warning: var(--warning_bc_color);
|
|
--toastify-color-error: var(--error_bc_color);
|
|
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
|
|
|
|
--toastify-icon-color-info: var(--toastify-color-info);
|
|
--toastify-icon-color-success: var(--toastify-color-success);
|
|
--toastify-icon-color-warning: var(--toastify-color-warning);
|
|
--toastify-icon-color-error: var(--toastify-color-error);
|
|
|
|
--toastify-container-width: fit-content;
|
|
--toastify-toast-width: 32rem;
|
|
--toastify-toast-offset: 1.6rem;
|
|
--toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
|
|
--toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
|
|
--toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
|
|
--toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
|
|
--toastify-toast-background: #fff;
|
|
--toastify-toast-padding: 1.4rem;
|
|
--toastify-toast-min-height: 6.4rem;
|
|
--toastify-toast-max-height: 80rem;
|
|
--toastify-toast-bd-radius: 0.6rem;
|
|
--toastify-toast-shadow: .0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
|
|
--toastify-font-family: var(--font_family);
|
|
--toastify-z-index: 9999;
|
|
--toastify-text-color-light: #757575;
|
|
--toastify-text-color-dark: var(--dark_basic_text_color);
|
|
|
|
/* Used only for colored theme */
|
|
--toastify-text-color-info: var(--dark_basic_text_color);
|
|
--toastify-text-color-success: var(--dark_basic_text_color);
|
|
--toastify-text-color-warning: var(--dark_basic_text_color);
|
|
--toastify-text-color-error: var(--dark_basic_text_color);
|
|
|
|
--toastify-spinner-color: #616161;
|
|
--toastify-spinner-color-empty-area: #e0e0e0;
|
|
--toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
|
|
--toastify-color-progress-dark: #bb86fc;
|
|
--toastify-color-progress-info: var(--toastify-color-info);
|
|
--toastify-color-progress-success: var(--toastify-color-success);
|
|
--toastify-color-progress-warning: var(--toastify-color-warning);
|
|
--toastify-color-progress-error: var(--toastify-color-error);
|
|
/* used to control the opacity of the progress trail */
|
|
--toastify-color-progress-bgo: 0.2;
|
|
}
|
|
|
|
|
|
.Toastify__toast {
|
|
// --------------------------------------------------------
|
|
// Default Settings
|
|
// --------------------------------------------------------
|
|
position: relative;
|
|
touch-action: none;
|
|
// width: var(--toastify-toast-width);
|
|
min-height: var(--toastify-toast-min-height);
|
|
box-sizing: border-box;
|
|
margin-bottom: 1rem;
|
|
// padding: var(--toastify-toast-padding);
|
|
border-radius: 0.6rem;
|
|
box-shadow: none;
|
|
max-height: var(--toastify-toast-max-height);
|
|
// font-family: "Yu Gothic UI";
|
|
// font-family: var(--toastify-font-family);
|
|
// z-index: 0;
|
|
// display: flex;
|
|
// flex: 1 auto;
|
|
// align-items: center;
|
|
word-break: break-word;
|
|
// --------------------------------------------------------
|
|
// --------------------------------------------------------
|
|
|
|
|
|
// Comment out above and override. Commented out is just for memorization.
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
font-size: 1.4rem;
|
|
width: fit-content;
|
|
max-width: 70vw;
|
|
padding-right: 4rem;
|
|
background-color: var(--dark_950_color);
|
|
gap: 0.6rem;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.Toastify__progress-bar--wrp {
|
|
height: 0.4rem;
|
|
}
|
|
.Toastify__progress-bar--success {
|
|
background: var(--success_bc_color);
|
|
}
|
|
|
|
.Toastify__progress-bar--warning {
|
|
background: var(--warning_bc_color);
|
|
}
|
|
|
|
.Toastify__progress-bar--error {
|
|
background: var(--error_bc_color);
|
|
}
|
|
|
|
|
|
.Toastify__toast-icon {
|
|
width: fit-content;
|
|
max-width: 2.8rem;
|
|
min-width: 2.8rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes fade_in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fade_out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade_in {
|
|
opacity: 0;
|
|
animation-name: fade_in;
|
|
animation-duration: 0.1s;
|
|
animation-timing-function: ease-out;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.fade_out {
|
|
opacity: 1;
|
|
animation-name: fade_out;
|
|
animation-duration: 0.1s;
|
|
animation-timing-function: ease-in;
|
|
animation-fill-mode: forwards;
|
|
} |