diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss index d0c4cdcb4..394b9acdf 100644 --- a/src/components/middle/FloatingActionButtons.module.scss +++ b/src/components/middle/FloatingActionButtons.module.scss @@ -1,11 +1,13 @@ .root { --base-bottom-pos: 6rem; + --translate-x: 0; + --translate-y: 4.5rem; position: absolute; bottom: var(--base-bottom-pos); right: max(1rem, env(safe-area-inset-right)); opacity: 0; - transform: translateY(4.5rem); + transform: translate(var(--translate-x), var(--translate-y)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; z-index: var(--z-scroll-down-button); pointer-events: none; @@ -28,11 +30,30 @@ } :global(body.no-page-transitions) & { - transform: none !important; + --translate-y: 0 !important; transition: opacity 0.15s; } + @media (min-width: 1276px) { + --translate-x: 0; + + transition: transform var(--layer-transition), opacity 0.2s ease; + + :global(body.no-page-transitions) &, + :global(body.no-right-column-animations) & { + transition: none !important; + } + + :global(body:not(.no-right-column-animations) #Main.right-column-open) & { + transition: transform var(--layer-transition), opacity 0.2s ease; + } + + :global(#Main.right-column-open) & { + --translate-x: calc(-1 * var(--right-column-width)); + } + } + @media (max-width: 600px) { right: 0.5rem; bottom: 4.5rem; @@ -43,7 +64,7 @@ } &.revealed { - transform: translateY(0); + --translate-y: 0; opacity: 1; .unread { @@ -51,12 +72,12 @@ } &.no-composer.no-extra-shift { - transform: translateY(4rem); + --translate-y: 4rem; } } &.hide-scroll-down { - transform: translateY(4rem); + --translate-y: 4rem; .unread { opacity: 0; diff --git a/src/components/middle/ScrollDownButton.module.scss b/src/components/middle/ScrollDownButton.module.scss index 0c64a13c2..0290eeaf8 100644 --- a/src/components/middle/ScrollDownButton.module.scss +++ b/src/components/middle/ScrollDownButton.module.scss @@ -15,25 +15,6 @@ margin-top: 1rem; } } - - @media (min-width: 1276px) { - transform: translateX(0); - - transition: transform var(--layer-transition), opacity 0.2s ease; - - :global(body.no-page-transitions) &, - :global(body.no-right-column-animations) & { - transition: none !important; - } - - :global(body:not(.no-right-column-animations) #Main.right-column-open) & { - transition: transform var(--layer-transition), opacity 0.2s ease; - } - - :global(#Main.right-column-open) & { - transform: translateX(calc(-1 * var(--right-column-width))); - } - } } .button {