diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index 05bc84307..b4816ca1f 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -177,3 +177,49 @@ } } } + +body.is-android.animation-level-1 { + #LeftColumn, #MiddleColumn, #RightColumn { + transition: transform var(--layer-transition), opacity var(--layer-transition); + } + + #Main:not(.middle-column-shown) { + #MiddleColumn { + display: none; + } + } + + #Main:not(.middle-column-open) { + #MiddleColumn { + transform: translate3d(10vw, 0, 0); + opacity: 0; + } + } + + #Main.middle-column-open { + #LeftColumn { + transform: translate3d(0, 0, 0); + opacity: 0; + } + } + + #Main:not(.right-column-shown) { + #RightColumn { + display: none; + } + } + + #Main:not(.right-column-open) { + #RightColumn { + transform: translate3d(10vw, 0, 0); + opacity: 0; + } + } + + #Main.right-column-open { + #MiddleColumn { + transform: translate3d(0, 0, 0); + opacity: 0; + } + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 1f2e76acf..8380f5dcc 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -212,6 +212,7 @@ $color-user-8: #faa774; body.is-android { --slide-transition: 200ms ease-in-out; + --layer-transition: 250ms ease-in-out; } --select-transition: 200ms ease-out;