From fb3ee116499cb7bf8aae1263e5aeb1224b641716 Mon Sep 17 00:00:00 2001 From: Mahendra barad Date: Thu, 7 Sep 2017 15:38:55 +0530 Subject: [PATCH] [FIX] web: smaller rainbow man on mobile to prevent it from overflowing the view port --- addons/web/static/src/less/rainbow.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/addons/web/static/src/less/rainbow.less b/addons/web/static/src/less/rainbow.less index ba63437fc2f..ec5a701d31d 100644 --- a/addons/web/static/src/less/rainbow.less +++ b/addons/web/static/src/less/rainbow.less @@ -2,6 +2,7 @@ // Variables @reward-size: 400px; +@reward-size-mobile: 300px; @reward-text-color: #727880; @reward-base-time: 1.4s; @@ -11,6 +12,9 @@ z-index: @zindex-modal + 1; padding: 50px; margin: -5% auto 0 -(@reward-size / 2); + @media (max-width: @screen-xs-max) { + margin: -5% auto 0 -(@reward-size-mobile / 2); + } background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent); background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent); background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent); @@ -18,6 +22,9 @@ .o-animation(reward-fading, @reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards); .o-position-absolute(20%, auto, auto, 50%); .size(@reward-size, @reward-size); + @media (max-width: @screen-xs-max) { + .size(@reward-size-mobile, @reward-size-mobile); + } &.o_reward_fading { display: block; @@ -70,6 +77,9 @@ .o_reward_stars { display: block; .size(@reward-size * 0.75, @reward-size / 2); + @media (max-width: @screen-xs-max) { + .size(@reward-size-mobile * 0.75, @reward-size-mobile / 2); + } .o-position-absolute(18%, 7%); svg {