mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-21 14:04:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Making currency switching indicator more obvious with button style (#616)

Browse source
This commit is contained in:
Rockstar Developer 2019-02-26 22:45:58 -06:00 • committed by Nicolas Dorier
parent 316ffa91d1
commit a98402af12
3 changed files with 47 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
BTCPayServer/Views/Invoice/Checkout-Body.cshtml
View file

@ -45,11 +45,13 @@
<div class="single-item-order__right"> <div class="single-item-order__right">
@if (Model.AvailableCryptos.Count > 1) @if (Model.AvailableCryptos.Count > 1)
{ {
<div class="payment__currencies cursorPointer" onclick="openPaymentMethodDialog()"> <div class="paywithRowRight cursorPointer" onclick="openPaymentMethodDialog()">
<img v-bind:src="srvModel.cryptoImage" /> <span class="payment__currencies ">
<span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span> <img v-bind:src="srvModel.cryptoImage" />
<span v-show="srvModel.isLightning">&#9889;</span> <span>{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
<span class="clickable_indicator fa fa-angle-right"></span> <span v-show="srvModel.isLightning">&#9889;</span>
<span class="clickable_indicator fa fa-angle-right"></span>
</span>
</div> </div>
<div id="vexPopupDialog"> <div id="vexPopupDialog">
<ul class="vexmenu"> <ul class="vexmenu">

44
BTCPayServer/wwwroot/checkout/css/normalizer.css
View file

@ -8223,7 +8223,7 @@ a:hover {
} }
.action-button--secondary { .action-button--secondary {
background: #e7e7e7; background: #e0e0e0;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
color: #4A4A4A; color: #4A4A4A;
@ -8397,9 +8397,9 @@ strong {
} }
.currency-selection { .currency-selection {
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #e0e0e0;
position: relative; position: relative;
padding: 4px 15px; padding: 4px 10px 4px 15px;
display: flex; display: flex;
font-weight: 300; font-weight: 300;
color: #565D6E; color: #565D6E;
@ -8516,7 +8516,7 @@ strong {
.payment-tabs { .payment-tabs {
position: relative; position: relative;
background: #fff; background: #fff;
border-top: 1px solid #E9E9E9; border-top: 1px solid #e0e0e0;
display: flex; display: flex;
font-size: 13.5px; font-size: 13.5px;
box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.09);
@ -8605,7 +8605,7 @@ strong {
margin-top: 15px; margin-top: 15px;
padding: 15px; padding: 15px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
max-height: 300px; max-height: 300px;
@ -8701,7 +8701,7 @@ strong {
.manual-box.underpaid-expired__refund-pending > .manual-box__amount { .manual-box.underpaid-expired__refund-pending > .manual-box__amount {
transition: all 250ms cubic-bezier(0.4, 0, 1, 1); transition: all 250ms cubic-bezier(0.4, 0, 1, 1);
border-top-color: #E9E9E9; border-top-color: #e0e0e0;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
} }
@ -8722,7 +8722,7 @@ strong {
padding-bottom: .7rem; padding-bottom: .7rem;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-bottom: 0; border-bottom: 0;
max-height: 300px; max-height: 300px;
} }
@ -8737,7 +8737,7 @@ strong {
text-align: center; text-align: center;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
} }
.flipped .manual-box__amount { .flipped .manual-box__amount {
@ -8776,8 +8776,8 @@ strong {
height: 10px; height: 10px;
width: 10px; width: 10px;
left: 50%; left: 50%;
border-right: 1px solid #E9E9E9; border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #e0e0e0;
transform: rotate(45deg); transform: rotate(45deg);
margin-left: -5px; margin-left: -5px;
bottom: -6px; bottom: -6px;
@ -8800,8 +8800,8 @@ strong {
height: 10px; height: 10px;
width: 10px; width: 10px;
left: 50%; left: 50%;
border-right: 1px solid #E9E9E9; border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #e0e0e0;
transform: rotateZ(45deg); transform: rotateZ(45deg);
margin-left: -5px; margin-left: -5px;
top: -5px; top: -5px;
@ -8813,7 +8813,7 @@ strong {
.manual-box__address > .flipper { .manual-box__address > .flipper {
backface-visibility: hidden; backface-visibility: hidden;
height: 100%; height: 100%;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-top: 0; border-top: 0;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
@ -9155,7 +9155,7 @@ strong {
} }
.bp-input { .bp-input {
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-radius: 2px; border-radius: 2px;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
@ -9482,7 +9482,7 @@ strong {
.payment__scan__qrcode img { .payment__scan__qrcode img {
padding: 15px; padding: 15px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-radius: 5px; border-radius: 5px;
} }
@ -9714,7 +9714,7 @@ strong {
background: #fff; background: #fff;
padding: 30px 15px; padding: 30px 15px;
text-align: center; text-align: center;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
border-radius: 5px; border-radius: 5px;
margin: -5px 0 18px; margin: -5px 0 18px;
font-weight: 300; font-weight: 300;
@ -11335,7 +11335,7 @@ low-fee-timeline {
text-align: center; text-align: center;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
border: 1px solid #E9E9E9; border: 1px solid #e0e0e0;
background: #fff; background: #fff;
} }
@ -11353,7 +11353,7 @@ low-fee-timeline {
} }
.copySectionBox.bottomBorder { .copySectionBox.bottomBorder {
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e0e0e0;
} }
.separatorGem { .separatorGem {
@ -11361,8 +11361,8 @@ low-fee-timeline {
height: 10px; height: 10px;
width: 10px; width: 10px;
left: 50%; left: 50%;
border-right: 1px solid #E9E9E9; border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #e0e0e0;
transform: rotateZ(45deg); transform: rotateZ(45deg);
margin-left: -5px; margin-left: -5px;
top: -5px; top: -5px;
@ -11374,7 +11374,7 @@ low-fee-timeline {
.checkoutTextbox { .checkoutTextbox {
width: 100%; width: 100%;
border: 1px solid #e9e9e9; border: 1px solid #e0e0e0;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
padding: 8px 4px 8px; padding: 8px 4px 8px;
@ -11402,7 +11402,7 @@ low-fee-timeline {
color: #aaa; color: #aaa;
height: 16px; height: 16px;
padding: 0px 4px; padding: 0px 4px;
border-right: 1px solid #e9e9e9; border-right: 1px solid #e0e0e0;
} }
.inputWithIcon.inputIconBg img { .inputWithIcon.inputIconBg img {

33
BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
View file

@ -40,32 +40,35 @@
display: none; display: none;
} }
.paywithRowRight {
margin-top: -1px;
}
.cursorPointer { .cursorPointer {
cursor: pointer; cursor: pointer;
} }
.payment__currencies { .payment__currencies {
font-size: 14px; font-size: 13px;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 6px;
} }
.payment__currencies img { .payment__currencies img {
height: 32px; margin-top: -3px;
height: 24px;
} }
.clickable_underline { .payment__currencies:hover .clickable_underline {
border-bottom: 1px dotted #ccc; border-bottom: 1px dotted black;
font-size: 13px; }
}
.payment__currencies:hover .clickable_underline { .payment__currencies:hover {
border-bottom: 1px dotted black; border: 1px solid #5c6373;
} background: #f8f8f8;
}
.clickable_indicator { .clickable_indicator {
margin-right: -10px; color: #5c6373;
opacity: 0.3;
}
.payment__currencies:hover .clickable_indicator {
opacity: 1;
} }