diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index 7bb22c807..5c73d70c7 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -18,16 +18,18 @@ } } .item{ - padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw); - i{left:auto;} + padding: 3vh 3vw 3vh 3vw; span{ clear:both; width: 100%; display: inline-block; &.wallet-name{ - margin-top:10px; - margin-bottom:5px; - font-size:13px; + font-size:16px; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-weight: 600; } &.wallet-number{ visibility: hidden; diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 99bc97ea5..6743b1363 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -13,14 +13,17 @@ .scroll{height:100%;} #address { background: #fff; - height: calc(100vh - 34vh); + height: 66vh; display: flex; align-items: center; justify-content: center; position: relative; flex-flow: column; @media(max-height: 600px){ - height: calc(100vh - 36vh); + height: 68vh; + } + @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){ + height: 64vh; } &-info{ height: 100%; @@ -64,15 +67,27 @@ .item { border: none; font-size: .8rem; + z-index: 0; i { font-size: 1.3rem; } } + #qr-options{ + .item{ + font-size:.7rem; + @media(min-width:350px){ + font-size:.9rem; + } + @media(min-width:450px){ + font-size:1rem; + } + } + } .bit-address { font-size: .8rem; // left:10%; position: absolute; - transition: all .4s ease; + transition: all .15s ease; width:100%; height: 100%; z-index: 0; @@ -100,16 +115,24 @@ padding-bottom: 5px; display: inline-block; font-size: .7rem; + @media(min-width:350px){ + font-size:.9rem; + } + @media(min-width:450px){ + font-size:1rem; + } + color:$light-gray; } } .qr { - padding: calc(100vh - 85vh) 0 calc(100vh - 96vh); + padding: 15vh 0 4vh; align-self: center; margin-top: auto; height: 220px; position: relative; justify-content: center; flex: 1; + z-index: 1; div{ transition: all .4s ease; &.current, &.prev, &.next{ @@ -131,7 +154,7 @@ } } @media(max-height: 700px){ - padding: calc(100vh - 90vh) 0 calc(100vh - 96vh); + padding: 10vh 0 4vh; } div{ display: flex; @@ -235,7 +258,8 @@ } .wallets{ position: relative; - height: calc(100vh - 83vh); + height: calc(27vh - 62px); + z-index: 5; .slides { .swiper-container{ position: absolute; @@ -244,15 +268,29 @@ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 450px; + .swiper-wrapper{ + height: auto; + top: 10%; + position:relative; + @media(max-height: 600px){padding-top:.2rem} + @media(min-height: 900px){top:30%;} + } .swiper-slide{ text-align: center; .card{ margin-top:2vh; display: inline-block; width:80%; + @media(min-height: 1000px) and (max-width: 699px){ + .item{ + padding: 2vh 3vw 2vh 3vw; + } + } + } + @media(max-width: 500px){ + &-next{left:-25%;} + &-prev{left:25%;} } - &-next{left:-25%;} - &-prev{left:25%;} } @media (max-height: 600px){ &{ @@ -267,11 +305,17 @@ .wallets{display: none;} #address{ float:left; - height:90vh; - width:65%; + height:100%; + width:calc(100% - 410px); + @media(max-width: 1000px){ + width:65%; + } &-info{ height: 100%; } + #qr-options{ + .item{font-size:1rem;} + } .qr{ height: 70%; div{ @@ -292,7 +336,14 @@ .backup, #bit-address{left:0;} #bit-address{ height: 10%; - padding: calc(100vh - 99vh); + padding: 1vh; + .bit-address{ + .item{ + top: 40%; + transform: translateY(-40%); + font-size:1rem; + } + } } } #wallets{ @@ -302,18 +353,29 @@ display: flex; flex-direction: column; overflow: visible; + max-width: 410px; + @media(max-height: 600px){ + padding-top:.55rem; + } + @media(max-width: 1000px){ + max-width: none; + } #sidebar-wallet{display: block;} .list{height: 100%;overflow: visible;} #wallet-list{ position: absolute; - width: 100%; - overflow-y: scroll; + width: 110%; + overflow-y: auto; height: 100%; left: -6%; } .wallet{ - position: relative; &.current{ + position: relative; + .card{ + opacity: 1; + transform: scale(1); + } &:before { right: 93%; top: 50%; @@ -331,24 +393,30 @@ } .card { max-width: 350px; - box-shadow:$subtle-box-shadow; + box-shadow: 0 1px 36px rgba(0, 0, 0, 0.07); padding:0; border-radius: 6px; padding:2px; width: 80%; position: relative; margin: 1.5rem auto 0; + position: relative; + opacity: .5; + transform:scale(.85); + transition:transform .2s ease; .item{ padding: 6% 10% 6% 8%; - i{left:auto;} span{ clear:both; width: 100%; display: inline-block; &.wallet-name{ - margin-top:10px; - margin-bottom:5px; - font-size:13px; + font-size:16px; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-weight: 600; } &.wallet-number{ visibility: hidden;