Context Menu: Fix incorrect position on low animation level (#6272)
This commit is contained in:
parent
cd528299ec
commit
10b26966d8
@ -36,17 +36,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
|
--animation-start-scale: 0.95;
|
||||||
|
|
||||||
transform-origin: top center !important;
|
transform-origin: top center !important;
|
||||||
transform: scale(0.95);
|
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 23.5rem;
|
max-height: 23.5rem;
|
||||||
|
|
||||||
&.open {
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.MenuItem {
|
.MenuItem {
|
||||||
|
|||||||
@ -149,10 +149,6 @@
|
|||||||
background: var(--color-background-compact-menu);
|
background: var(--color-background-compact-menu);
|
||||||
backdrop-filter: blur(25px);
|
backdrop-filter: blur(25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.open) {
|
|
||||||
transform: scale(0.85) !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.StickerButton.custom-emoji, .sticker-set-cover {
|
.StickerButton.custom-emoji, .sticker-set-cover {
|
||||||
|
|||||||
@ -11,6 +11,7 @@
|
|||||||
|
|
||||||
.menuContent {
|
.menuContent {
|
||||||
--border-radius-default: 1.25rem;
|
--border-radius-default: 1.25rem;
|
||||||
|
--animation-start-scale: 0.8;
|
||||||
|
|
||||||
transform-origin: 9rem 4.625rem !important;
|
transform-origin: 9rem 4.625rem !important;
|
||||||
width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
|
width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
|
||||||
@ -27,7 +28,7 @@
|
|||||||
--offset-x: -0.75rem;
|
--offset-x: -0.75rem;
|
||||||
--offset-y: calc(100% + 0.625rem);
|
--offset-y: calc(100% + 0.625rem);
|
||||||
|
|
||||||
transform: scale(0.8) !important;
|
transform: scale(var(--animation-start-scale)) !important;
|
||||||
transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important;
|
transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,13 +37,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
--animation-start-scale: 0.5;
|
||||||
|
|
||||||
right: auto !important;
|
right: auto !important;
|
||||||
left: 50% !important;
|
left: 50% !important;
|
||||||
max-width: min(calc(100% - 1rem), 26.25rem);
|
max-width: min(calc(100% - 1rem), 26.25rem);
|
||||||
|
|
||||||
&:global(.bubble) {
|
&:global(.bubble) {
|
||||||
transform-origin: 0 3.5rem !important;
|
transform-origin: 0 3.5rem !important;
|
||||||
transform: scale(0.5) translateX(-50%) !important;
|
transform: scale(var(--animation-start-scale)) translateX(-50%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.bubble.open) {
|
&:global(.bubble.open) {
|
||||||
|
|||||||
@ -14,13 +14,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
|
|
||||||
--offset-y: calc(100% + 0.5rem);
|
--offset-y: calc(100% + 0.5rem);
|
||||||
--offset-x: 0;
|
--offset-x: 0;
|
||||||
|
--animation-start-scale: 0.85;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: var(--z-menu-bubble);
|
z-index: var(--z-menu-bubble);
|
||||||
transform: scale(0.85);
|
transform: scale(var(--animation-start-scale));
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
@ -56,7 +56,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.no-context-menu-animations & {
|
body.no-context-menu-animations & {
|
||||||
transform: none !important;
|
--animation-start-scale: 1 !important;
|
||||||
|
|
||||||
transition: opacity 0.15s !important;
|
transition: opacity 0.15s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user