Fix crypto icon sizing and add payment method button styling

- Remove problematic image width rules that broke crypto icons
- Style "Add a credit card payment method" as blue button for both themes
- Ensure crypto payment icons maintain proper 32x32 pixel size
This commit is contained in:
Russell Ballestrini 2025-10-04 19:41:24 -04:00
parent b3f9e7bcaf
commit f6a4d0d4ce
2 changed files with 28 additions and 11 deletions

View file

@ -240,15 +240,6 @@ img {
height: auto;
}
/* Prevent content images from causing horizontal scrollbars */
.content img,
.product-content img,
.well img {
max-width: 100%;
width: auto;
height: auto;
box-sizing: border-box;
}
img.logo {
width: initial;
@ -1323,6 +1314,32 @@ div.message-ribbon {
color: #ffffff !important;
}
/* Add payment method button styling */
.add-payment-method-button {
background-color: var(--blue-color);
color: white;
text-decoration: none;
}
.add-payment-method-button:hover {
background-color: #4a90e2;
color: white;
}
[data-theme="dark"] .add-payment-method-button {
background-color: #2d3748;
background-image: url("/static/img/trans-blue.png");
color: var(--blue-color);
border: 2px solid var(--blue-color);
}
[data-theme="dark"] .add-payment-method-button:hover {
background-color: #2d3748;
background-image: url("/static/img/trans-blue2.png");
color: #ffffff;
border: 2px solid var(--blue-color);
}
.inline-label {
display: inline;
}
@ -1453,7 +1470,7 @@ div.message-ribbon {
opacity: 0.6;
}
.crypto-button-icon {
img.crypto-button-icon {
width: 32px;
height: 32px;
margin-right: 8px;

View file

@ -22,7 +22,7 @@
{% else %}
<h2><b>Payment</b></h2>
<p>No active credit card payment method configured.</p>
<p><a href="/billing" class="shop-theme-link-color">Add a credit card payment method</a>.</p>
<p><a href="/billing" class="add-payment-method-button mps-button">Add a credit card payment method</a>.</p>
<br>
{% endif %}
{% endif %}