diff --git a/components/ui/Modal/Modal.less b/components/ui/Modal/Modal.less
index 766181ff6a..949478df2a 100644
--- a/components/ui/Modal/Modal.less
+++ b/components/ui/Modal/Modal.less
@@ -10,13 +10,12 @@
.modal-background {
&:extend(.blur-less);
- background: transparent !important;
+ background: rgba(0, 0, 0, 0.25);
}
.modal-card-body {
- &:extend(.bordered);
&:extend(.round-corners);
- font-weight: normal !important;
+ font-weight: normal;
font-size: @text-size;
width: fit-content;
text-align: left;
@@ -31,12 +30,15 @@
.modal-card {
width: fit-content;
+ box-shadow: @ui-shadow;
+ transform-origin: 50% 200%;
}
-.modal {
+.modal-container {
&:extend(.sixth-layer);
- position: absolute;
+ position: fixed;
}
+
.close {
position: absolute;
right: @large-spacing;
@@ -49,8 +51,9 @@
&:extend(.first-layer);
}
+
.label {
- padding: 0 !important;
+ padding: 0;
}
.modal-card {
@@ -88,7 +91,30 @@
position: absolute;
&:extend(.first-layer);
- background: transparent !important;
+ background: transparent;
backdrop-filter: @light-blur;
}
}
+
+.modal-enter-active,
+.modal-leave-active {
+ &,
+ .modal-background,
+ .modal-card {
+ transition: all @animation-speed-long ease;
+ }
+}
+
+.modal-enter,
+.modal-leave-to {
+ .modal-background {
+ background-color: transparent;
+ backdrop-filter: blur(0px);
+ }
+
+ .modal-card {
+ opacity: 0;
+ transform: perspective(880px) rotateX(0.5deg);
+ filter: @light-blur;
+ }
+}
diff --git a/layouts/chat.vue b/layouts/chat.vue
index e1e1292155..850f9c3bf6 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -18,7 +18,6 @@
isBackgroundCall ? 'has-background-call' : '',
]"
>
-
+