mirror of https://github.com/BTCPrivate/copay.git
design(tour): improve tour responsiveness, better scss organization
This commit is contained in:
Jason Dreyzehner
parent
bdbbc1808e
commit
3fbb626141
|
|
@ -1,48 +1,46 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="375px" height="257px" viewBox="0 0 375 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>bitcoin-currency</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="83.858817%" id="linearGradient-1">
|
||||
<stop stop-color="#CDE7FF" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-2">
|
||||
<stop stop-color="#3950B5" offset="0%"></stop>
|
||||
<stop stop-color="#162360" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-3" x="0" y="0" width="130" height="48" rx="4"></rect>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.128877944 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="0.2.2---Tour-2" transform="translate(0.000000, -200.000000)">
|
||||
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)">
|
||||
<g id="bg-2" transform="translate(0.000000, 3.530453)">
|
||||
<polygon id="Line-Copy" fill="url(#linearGradient-1)" opacity="0.0632579291" points="54.267049 126.565292 98.7558134 99.5675085 139.106088 120.429432 185.506195 82.3871008 222.910505 82.3871008 246.706821 49.2534574 278.7801 65.2066927 324.303487 56.6164892 367.788457 36.8590204 374.999986 185.469547 150.148438 185.469547 0.425715204 185.469547 0.425715204 135.155496"></polygon>
|
||||
<polyline id="Line" stroke="#13E5B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0 133.969547 54.2670471 127.792464 97.7211891 98.3403365 140.140716 120.429432 184.629481 81.1599288 222.910503 81.1599288 247.741449 48.0262854 280.849359 67.6610371 321.199634 56.6164892 375.000006 35.469547"></polyline>
|
||||
<path d="M137.25,120.469547 L137.25,183.486924" id="Line-Copy-2" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M77.25,110.469547 L77.25,184.266212" id="Line-Copy-3" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M264.25,64.469547 L264.25,183.870892" id="Line-Copy-4" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M330.25,57.469547 L330.25,183.5043" id="Line-Copy-5" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
|
||||
<path d="M187.5,247.469547 C255.707167,247.469547 311,192.176714 311,123.969547 C311,55.7623804 255.707167,0.469547015 187.5,0.469547015 C119.292833,0.469547015 64,55.7623804 64,123.969547 C64,192.176714 119.292833,247.469547 187.5,247.469547 Z" id="Oval-2" fill="url(#linearGradient-2)" opacity="0.300000012"></path>
|
||||
</g>
|
||||
<g id="price-" transform="translate(122.000000, 0.000000)">
|
||||
<path d="M67,42.5 L67,188.5" id="Line" stroke="#9012FE" stroke-width="2" stroke-linecap="square" opacity="0.639999986"></path>
|
||||
<g id="Rectangle-3" opacity="0.699999988">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#647CE8" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<text id="1-BTC-=-$650" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#FFFFFF">
|
||||
<tspan x="15.1328125" y="28.8046875">1 BTC = $650</tspan>
|
||||
</text>
|
||||
<circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" cx="67.5" cy="83.5" r="4.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 375 257" style="enable-background:new 0 0 375 257;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:6.325793e-02;fill:url(#Line-Copy_1_);enable-background:new ;}
|
||||
.st1{fill:none;stroke:#13E5B6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
|
||||
.st2{opacity:0.3335;fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-linecap:square;stroke-dasharray:4;enable-background:new ;}
|
||||
.st3{opacity:0.3;fill:url(#Oval-2_1_);enable-background:new ;}
|
||||
.st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;}
|
||||
.st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;}
|
||||
</style>
|
||||
<g id="Onboarding">
|
||||
<g id="_x30_.2.2---Tour-2" transform="translate(0.000000, -200.000000)">
|
||||
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)">
|
||||
<g id="bg-2" transform="translate(0.000000, 3.530453)">
|
||||
|
||||
<linearGradient id="Line-Copy_1_" gradientUnits="userSpaceOnUse" x1="-117.185" y1="513.6823" x2="-117.185" y2="512.8358" gradientTransform="matrix(374.5743 0 0 -148.6105 44082.1914 76374.0547)">
|
||||
<stop offset="0" style="stop-color:#CDE7FF"/>
|
||||
<stop offset="1" style="stop-color:#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<polygon id="Line-Copy" class="st0" points="54.3,126.6 98.8,99.6 139.1,120.4 185.5,82.4 222.9,82.4 246.7,49.3 278.8,65.2
|
||||
324.3,56.6 375,35.5 375,185.5 150.1,185.5 0.4,185.5 0.4,135.2 "/>
|
||||
<polyline id="Line" class="st1" points="0,134 54.3,127.8 97.7,98.3 140.1,120.4 184.6,81.2 222.9,81.2 247.7,48 280.8,67.7
|
||||
321.2,56.6 375,35.5 "/>
|
||||
<path id="Line-Copy-2" class="st2" d="M137.2,120.5v63"/>
|
||||
<path id="Line-Copy-3" class="st2" d="M77.2,110.5v73.8"/>
|
||||
<path id="Line-Copy-4" class="st2" d="M264.2,64.5v119.4"/>
|
||||
<path id="Line-Copy-5" class="st2" d="M330.2,57.5v126"/>
|
||||
|
||||
<linearGradient id="Oval-2_1_" gradientUnits="userSpaceOnUse" x1="-117.0223" y1="514.3885" x2="-117.0223" y2="513.4939" gradientTransform="matrix(247 0 0 -247 29092 127054.4453)">
|
||||
<stop offset="0" style="stop-color:#3950B5"/>
|
||||
<stop offset="1" style="stop-color:#162360"/>
|
||||
</linearGradient>
|
||||
<path id="Oval-2" class="st3" d="M187.5,247.5c68.2,0,123.5-55.3,123.5-123.5S255.7,0.5,187.5,0.5S64,55.8,64,124
|
||||
S119.3,247.5,187.5,247.5z"/>
|
||||
</g>
|
||||
<g id="price-" transform="translate(122.000000, 0.000000)">
|
||||
<path id="Line_1_" class="st4" d="M67,42.5v146"/>
|
||||
<circle id="Oval-5" class="st5" cx="67.5" cy="83.5" r="4.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 2.7 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboarding-tour">
|
||||
<ion-nav-bar>
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="primary">
|
||||
<button class="button back-button button-clear" ng-click="goBack()">
|
||||
|
|
@ -7,79 +7,48 @@
|
|||
</button>
|
||||
</ion-nav-buttons>
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">
|
||||
{{'Skip' | translate}}
|
||||
</button>
|
||||
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">{{'Skip' | translate}}</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-slides class="slides" options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-secure" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
You can spend bitcoin at millions of websites and stores worldwide
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
Just scan the code to pay
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
|
||||
Got it <i class="icon ion-ios-arrow-thin-right"></i>
|
||||
<h2 class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</h2>
|
||||
<p class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
|
||||
<div class="onboarding-illustration-secure"></div>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>Just scan the code to pay.</p>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
Got it
|
||||
<i class="icon ion-ios-arrow-thin-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-currency" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 class="col col-75" translate>Bitcoin is a currency</h2>
|
||||
<h2 class="onboarding-topic" translate>Bitcoin is a currency.</h2>
|
||||
<p class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
|
||||
<div class="onboarding-illustration-currency">
|
||||
<div id="onboarding-illustration-currency-exchange-rate">1 BTC = $1,000</div>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
You can trade it for other currencies like US Dollars, Euros, or Pounds
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
The exchange rate changes with the market
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
|
||||
Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>The exchange rate changes with the market.</p>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
Makes sense
|
||||
<i class="icon ion-ios-arrow-thin-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-control" scroll="false">
|
||||
<div class="text-center row">
|
||||
<h2 translate class="col col-80">You control your bitcoin</h2>
|
||||
</div>
|
||||
<div class="text-center row">
|
||||
<p translate class="col col-75 tagline">
|
||||
The BitPay wallet stores your bitcoin with cutting-edge security
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p translate class="col">
|
||||
Not even BitPay can access it
|
||||
</p>
|
||||
</div>
|
||||
<div class="row cta-button">
|
||||
<button class="button button-positive col col-75 get-started" ng-click="createDefaultWallet()">
|
||||
<h2 translate class="onboarding-topic">You control your bitcoin.</h2>
|
||||
<p translate class="onboarding-description">The BitPay wallet stores your bitcoin with cutting-edge security.</p>
|
||||
<div class="onboarding-illustration-control"></div>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>Not even BitPay can access it.</p>
|
||||
<button class="button button-block button-primary" ng-click="createDefaultWallet()">
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
|
||||
<div id="logo-tagline">
|
||||
<img src='img/bitpay-logo.svg' id="logo" />
|
||||
<p translate class="lead">Take control of your money,<br /> get started with bitcoin.</p>
|
||||
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
|
||||
</div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
|
||||
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
|
||||
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: $hovering-box-shadow;
|
||||
background-repeat:no-repeat;
|
||||
background-clip: padding-box;
|
||||
background-size: 103%;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ $roboto-light: "Roboto-Light", sans-serif-light;
|
|||
$dark-gray: #445;
|
||||
$mid-gray: #667;
|
||||
$light-gray: #9b9bab;
|
||||
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Set ionic variables */
|
||||
|
||||
|
|
@ -31,4 +33,4 @@ $tabs-icon-size: 22px;
|
|||
|
||||
$ios-transition-duration: 200ms;
|
||||
|
||||
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
$card-box-shadow: $subtle-box-shadow;
|
||||
|
|
|
|||
|
|
@ -1,69 +1,40 @@
|
|||
#onboard-tour {
|
||||
&-secure {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-phone.svg);
|
||||
height: 17rem;
|
||||
margin-bottom:-1.5rem;
|
||||
}
|
||||
}
|
||||
#onboarding-tour {
|
||||
&-currency {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-currency-bg.svg);
|
||||
height:18rem;
|
||||
}
|
||||
.next-slide {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
&-control {
|
||||
#cta {
|
||||
background-image: url(../img/onboarding-tour-control.svg);
|
||||
margin-bottom: .05rem;
|
||||
height: 15rem;
|
||||
background-position: top;
|
||||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.cta-button{
|
||||
position: absolute;
|
||||
bottom: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px){
|
||||
#onboard-tour{
|
||||
&-secure, &-currency, &-control{
|
||||
#cta{
|
||||
height: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 450px){
|
||||
#onboard-tour{
|
||||
&-secure, &-currency, &-control{
|
||||
#cta{
|
||||
height: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px){
|
||||
#onboard-tour{
|
||||
p, h2, h3{
|
||||
max-width: 600px;
|
||||
}
|
||||
button{
|
||||
max-width: 400px;
|
||||
}
|
||||
#cta{
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
&-control{
|
||||
#cta{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.onboarding-topic,
|
||||
.onboarding-description,
|
||||
.onboarding-tldr {
|
||||
margin: 1rem 3rem .5rem;
|
||||
}
|
||||
.onboarding-topic {
|
||||
font-size: 24px;
|
||||
}
|
||||
.onboarding-description {
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.onboarding-tldr {
|
||||
font-size: 18px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#onboarding-illustration-currency-exchange-rate {
|
||||
background-color: $soft-blue;
|
||||
border-radius: $button-border-radius;
|
||||
box-shadow: $subtle-box-shadow;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
margin: 10px auto 0;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,15 +25,12 @@
|
|||
max-width: 200px;
|
||||
margin: 5rem auto 0;
|
||||
}
|
||||
.lead {
|
||||
#lead {
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
}
|
||||
#cta-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 400px;
|
||||
}
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ $button-secondary-active-border: transparent;
|
|||
&.button-secondary {
|
||||
&.button-block {
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
text-align: center;
|
||||
.bar.bar-header {
|
||||
background: none;
|
||||
border: 0 none transparent;
|
||||
color: #fff;
|
||||
button {
|
||||
color: #fff;
|
||||
|
|
@ -15,9 +16,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.bar.bar-stable {
|
||||
border: 0 none transparent;
|
||||
}
|
||||
ion-content {
|
||||
height: 100%;
|
||||
.scroll{
|
||||
|
|
@ -79,6 +77,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
%cta-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@import "terms-of-use";
|
||||
@import "onboarding-buttons";
|
||||
@import "onboard-welcome";
|
||||
|
|
@ -88,3 +92,28 @@
|
|||
@import "../backup-warning";
|
||||
@import "onboard-disclaimer";
|
||||
@import "onboard-push-notifications";
|
||||
|
||||
%onboarding-illustration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
margin-top: 25vh;
|
||||
top: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.onboarding-illustration {
|
||||
&-secure {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-phone.svg);
|
||||
}
|
||||
&-currency {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-currency-bg.svg);
|
||||
}
|
||||
&-control {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-control.svg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
.select-word {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
|
||||
box-shadow: $hovering-box-shadow;
|
||||
margin: .1rem 0;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue