refactor: migrate hardcoded values in common.css to design tokens
Replace ~150 hardcoded color, spacing, radius, font, and border values with CSS custom property references from tokens.css. Every replacement uses var() with the original value as fallback, ensuring zero visual change while establishing the token-based foundation. Categories migrated: - Colors: button backgrounds, link color, status text, alert bg/text/border - Surfaces: wells, content bg, table stripes, card bg, input bg - Borders: input borders, thumbnails, comment replies, crypto cards - Border radius: buttons, inputs, wells, serp items, alerts, cards - Typography: font-family, font-size, font-weight on buttons/labels - Spacing: padding, margins on buttons, inputs, coupons, notices - Motion: theme toggle transition uses duration/easing tokens Dark mode [data-theme="dark"] blocks left untouched — they override via the existing variable system and will be consolidated in a future pass.
This commit is contained in:
parent
815876daf1
commit
77c7faba40
1 changed files with 148 additions and 149 deletions
|
|
@ -26,7 +26,7 @@ body::after {
|
|||
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: helvetica;
|
||||
font-family: var(--font-family, helvetica);
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
|
@ -171,12 +171,12 @@ table {
|
|||
|
||||
table tr:nth-child(even) {
|
||||
/* Light gray background for even rows */
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--surface-container, #f2f2f2);
|
||||
}
|
||||
|
||||
table tr:nth-child(odd) {
|
||||
/* White background for odd rows (optional, for contrast) */
|
||||
background-color: #ffffff;
|
||||
background-color: var(--surface-base, #ffffff);
|
||||
}
|
||||
|
||||
tr, th, td {
|
||||
|
|
@ -197,7 +197,7 @@ span.asterisk {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #5f6368
|
||||
color: var(--link-color, #5f6368);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -214,22 +214,22 @@ input[type="tel"],
|
|||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="date"] {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
padding: var(--space-2, 8px);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #CCCCCC;
|
||||
border-color: var(--input-border, #CCCCCC);
|
||||
}
|
||||
|
||||
textarea {
|
||||
/* keep the input inside the parents box! */
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
padding: var(--space-2, 8px);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #CCCCCC;
|
||||
border-color: var(--input-border, #CCCCCC);
|
||||
}
|
||||
|
||||
section.shop-name-and-description {
|
||||
|
|
@ -373,7 +373,7 @@ input.mps-keywords {
|
|||
}
|
||||
|
||||
section.content {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--surface-base, #ffffff);
|
||||
margin: 4px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
|
@ -399,8 +399,8 @@ img.logo {
|
|||
}
|
||||
|
||||
img.product-cart-thumbnail {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-default, #ddd);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
max-width:44px;
|
||||
max-height:44px;
|
||||
width: auto;
|
||||
|
|
@ -408,8 +408,8 @@ img.product-cart-thumbnail {
|
|||
}
|
||||
|
||||
img.product-thumbnail {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-default, #ddd);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
max-width:58px;
|
||||
max-height:58px;
|
||||
width: auto;
|
||||
|
|
@ -508,20 +508,20 @@ pre, code {
|
|||
|
||||
.mps-button {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
color: white;
|
||||
background-color: #D4D0C8;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-size: var(--text-sm, 14px);
|
||||
font-weight: var(--weight-bold, bold);
|
||||
min-width: 100%;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-top: var(--space-1, 4px);
|
||||
margin-bottom: var(--space-1, 4px);
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .mps-button {
|
||||
|
|
@ -540,7 +540,7 @@ pre, code {
|
|||
|
||||
a.mps-button-blue,
|
||||
button.mps-button-blue {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.mps-button-blue,
|
||||
|
|
@ -563,7 +563,7 @@ button.mps-button-blue {
|
|||
|
||||
a.mps-button-green,
|
||||
button.mps-button-green {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.mps-button-green,
|
||||
|
|
@ -587,7 +587,7 @@ button.mps-button-green {
|
|||
a.mps-button-red,
|
||||
button.mps-button-red,
|
||||
input.mps-button-red {
|
||||
background-color: #bc2131;
|
||||
background-color: var(--red-color, #bc2131);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
|
@ -614,11 +614,11 @@ input.mps-button-red {
|
|||
.mps-comment-form-button {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
background: var(--surface-dim, #f9f9f9);
|
||||
color: var(--text-primary, #333);
|
||||
font-size: var(--text-sm, 14px);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
|
@ -663,11 +663,11 @@ input.mps-button-red {
|
|||
.moderate-link {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
background: var(--surface-dim, #f9f9f9);
|
||||
color: var(--text-primary, #333);
|
||||
font-size: var(--text-sm, 14px);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
|
@ -767,11 +767,11 @@ input.mps-button-red {
|
|||
.payment-toggle-button {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--input-border, #ccc);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
background: var(--surface-dim, #f9f9f9);
|
||||
color: var(--text-primary, #333);
|
||||
font-size: var(--text-sm, 14px);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
|
@ -792,7 +792,7 @@ input.mps-button-red {
|
|||
}
|
||||
|
||||
a.product-edit-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.mps-button.product-edit-button {
|
||||
|
|
@ -857,23 +857,23 @@ a.product-edit-button {
|
|||
}
|
||||
|
||||
a.product-preview-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
a.product-download-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
a.product-new-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
a.shop-new-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
a.done-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
a.log-out-button {
|
||||
|
|
@ -894,8 +894,8 @@ a.log-out-button {
|
|||
}
|
||||
|
||||
a.shop-switch-button {
|
||||
color: #666666;
|
||||
border-color: #666666;
|
||||
color: var(--text-secondary, #666666);
|
||||
border-color: var(--text-secondary, #666666);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding-top: 10px;
|
||||
|
|
@ -923,7 +923,7 @@ button.cart-remove-link {
|
|||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: #5f6368;
|
||||
color: var(--link-color, #5f6368);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -951,18 +951,18 @@ button.product-preview-button {
|
|||
/* inherits .mps-button defaults */
|
||||
}
|
||||
button.product-download-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
button.product-preview-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
/* Cart action buttons */
|
||||
button.cart-checkout-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
button.cart-save-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
}
|
||||
|
||||
/* Dark mode cart buttons */
|
||||
|
|
@ -980,18 +980,18 @@ button.cart-save-button {
|
|||
border: 2px solid var(--green-color);
|
||||
}
|
||||
button.cart-activate-button {
|
||||
background-color: #5871ad;
|
||||
background-color: var(--color-navy, #5871ad);
|
||||
}
|
||||
button.cart-delete-button {
|
||||
background-color: #CC6958;
|
||||
background-color: var(--color-danger, #CC6958);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* “Make Public” / “Make Private” */
|
||||
button.cart-public-button {
|
||||
background: none;
|
||||
color: #666666;
|
||||
border: 1px solid #666666;
|
||||
color: var(--text-secondary, #666666);
|
||||
border: 1px solid var(--text-secondary, #666666);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
cursor: pointer;
|
||||
|
|
@ -1002,12 +1002,12 @@ button.cart-public-button span.lock {
|
|||
|
||||
/* Continue shopping button */
|
||||
.cart-continue-shopping-button {
|
||||
background-color: #98b6fa;
|
||||
background-color: var(--color-blue, #98b6fa);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.coupon-apply-button {
|
||||
background-color: #a3c765;
|
||||
background-color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -1043,8 +1043,8 @@ section.serp {
|
|||
}
|
||||
|
||||
div.serp-item {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
padding: var(--space-1, 4px);
|
||||
grid-column: span 1;
|
||||
grid-row: span 1;
|
||||
|
||||
|
|
@ -1082,7 +1082,7 @@ div.serp-item:hover {
|
|||
}
|
||||
|
||||
img.serp-thumbnail {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
|
||||
div.edit-page {
|
||||
|
|
@ -1092,7 +1092,7 @@ div.edit-page {
|
|||
}
|
||||
|
||||
hr {
|
||||
color: #EEEEEE;
|
||||
color: var(--border-light, #EEEEEE);
|
||||
}
|
||||
|
||||
section.upload-product-and-preview {
|
||||
|
|
@ -1251,9 +1251,9 @@ section.checkout-page .well {
|
|||
|
||||
.coupon {
|
||||
/* Dotted border */
|
||||
border-radius: 4px;
|
||||
border: 3px dotted #bbb;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
border: 3px dotted var(--text-disabled, #bbb);
|
||||
padding: var(--space-5, 20px);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1264,12 +1264,12 @@ section.checkout-page .well {
|
|||
.StripeElement {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-color: #bbbbbb;
|
||||
border-color: var(--input-border, #bbbbbb);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
background-color: var(--surface-base, white);
|
||||
padding: var(--space-3, 12px);
|
||||
}
|
||||
|
||||
.opacity-60 {
|
||||
|
|
@ -1277,8 +1277,8 @@ section.checkout-page .well {
|
|||
}
|
||||
|
||||
.well, .well2 {
|
||||
background-color: #F9F9FA;
|
||||
border-radius: 10px;
|
||||
background-color: var(--surface-dim, #F9F9FA);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: 10px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
|
@ -1344,8 +1344,8 @@ textarea.markup-editor-textarea {
|
|||
}
|
||||
|
||||
.markup-preview-div {
|
||||
border-top: 1px dotted #bbbbbb;
|
||||
border-bottom: 1px dotted #bbbbbb;
|
||||
border-top: 1px dotted var(--text-disabled, #bbbbbb);
|
||||
border-bottom: 1px dotted var(--text-disabled, #bbbbbb);
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
|
|
@ -1374,7 +1374,7 @@ textarea.markup-editor-textarea {
|
|||
}
|
||||
|
||||
.discounted {
|
||||
color: #a3c765;
|
||||
color: var(--color-green, #a3c765);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
|
@ -1618,7 +1618,7 @@ textarea.markup-editor-textarea {
|
|||
}
|
||||
|
||||
section.content {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--surface-base, #ffffff);
|
||||
margin: 4px;
|
||||
padding-bottom: 42px;
|
||||
}
|
||||
|
|
@ -1711,9 +1711,9 @@ textarea.markup-editor-textarea {
|
|||
}
|
||||
|
||||
div.message-ribbon {
|
||||
color: #ffffff;
|
||||
background-color: #5871ad;
|
||||
background: linear-gradient(to right, #5871ad, #82A8FF);
|
||||
color: var(--text-inverse, #ffffff);
|
||||
background-color: var(--color-navy, #5871ad);
|
||||
background: linear-gradient(to right, var(--color-navy, #5871ad), var(--color-navy-light, #82A8FF));
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
|
@ -1749,9 +1749,9 @@ div.message-ribbon {
|
|||
.not-shown-on-desktop {display: none}
|
||||
}
|
||||
div.message-ribbon {
|
||||
color: #ffffff;
|
||||
background-color: #5871ad;
|
||||
background: linear-gradient(to right, #5871ad, #82A8FF);
|
||||
color: var(--text-inverse, #ffffff);
|
||||
background-color: var(--color-navy, #5871ad);
|
||||
background: linear-gradient(to right, var(--color-navy, #5871ad), var(--color-navy-light, #82A8FF));
|
||||
}
|
||||
|
||||
#alerts {
|
||||
|
|
@ -1791,15 +1791,15 @@ div.message-ribbon {
|
|||
}
|
||||
|
||||
.alert-danger, .alert-error {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: var(--alert-danger-text, #721c24);
|
||||
background-color: var(--alert-danger-bg, #f8d7da);
|
||||
border: 1px solid var(--alert-danger-border, #f5c6cb);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffeeba;
|
||||
color: var(--alert-warning-text, #856404);
|
||||
background-color: var(--alert-warning-bg, #fff3cd);
|
||||
border: 1px solid var(--alert-warning-border, #ffeeba);
|
||||
}
|
||||
|
||||
.alert-info, .alert-notice {
|
||||
|
|
@ -1809,9 +1809,9 @@ div.message-ribbon {
|
|||
}
|
||||
|
||||
.alert-success {
|
||||
color: #155724;
|
||||
background-color: #a3c765;
|
||||
border: 1px solid #c3e6cb;
|
||||
color: var(--alert-success-text, #155724);
|
||||
background-color: var(--color-green, #a3c765);
|
||||
border: 1px solid var(--alert-success-border, #c3e6cb);
|
||||
}
|
||||
|
||||
/* ALERT END */
|
||||
|
|
@ -1844,7 +1844,7 @@ div.message-ribbon {
|
|||
|
||||
/* Status and message styling */
|
||||
.status-message {
|
||||
color: #666;
|
||||
color: var(--text-secondary, #666);
|
||||
}
|
||||
|
||||
.success-indicator {
|
||||
|
|
@ -1856,7 +1856,7 @@ div.message-ribbon {
|
|||
}
|
||||
|
||||
.note-text {
|
||||
color: #666;
|
||||
color: var(--text-secondary, #666);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .note-text {
|
||||
|
|
@ -1965,7 +1965,7 @@ div.message-ribbon {
|
|||
|
||||
.disabled-input {
|
||||
opacity: 0.5;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--surface-container, #f5f5f5);
|
||||
}
|
||||
|
||||
/* Crypto checkout styles */
|
||||
|
|
@ -2021,13 +2021,12 @@ div.message-ribbon {
|
|||
.qr-fallback {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
background: var(--surface-container, #f0f0f0);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: var(--text-xs, 12px);
|
||||
color: var(--text-secondary, #666);
|
||||
border: 1px solid var(--border-default, #ddd);
|
||||
}
|
||||
|
||||
.success-notice {
|
||||
|
|
@ -2049,7 +2048,7 @@ div.message-ribbon {
|
|||
}
|
||||
|
||||
.monospace-address {
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono, monospace);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
padding: 8px;
|
||||
|
|
@ -2100,11 +2099,11 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.warning-banner {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
background: var(--alert-warning-bg, #fff3cd);
|
||||
border: 1px solid var(--alert-warning-border, #ffeaa7);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
color: #856404;
|
||||
border-radius: var(--radius-sm, 5px);
|
||||
color: var(--alert-warning-text, #856404);
|
||||
}
|
||||
|
||||
.warning-banner-alt {
|
||||
|
|
@ -2160,8 +2159,8 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.pending-quote-details {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-size: var(--text-xs, 12px);
|
||||
color: var(--text-secondary, #666);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -2270,10 +2269,10 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.original-comment-box {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--surface-container, #f5f5f5);
|
||||
padding: 15px;
|
||||
border-left: 4px solid #007cba;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid var(--color-navy, #007cba);
|
||||
margin-bottom: var(--space-5, 20px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .original-comment-box {
|
||||
|
|
@ -2286,9 +2285,9 @@ img.crypto-button-icon {
|
|||
/* Comment reply styling */
|
||||
.comment-reply {
|
||||
margin-left: 0px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 2px solid #ddd;
|
||||
padding-left: 10px;
|
||||
margin-bottom: var(--space-5, 20px);
|
||||
border-left: 2px solid var(--border-default, #ddd);
|
||||
padding-left: var(--space-3, 10px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .comment-reply {
|
||||
|
|
@ -2321,11 +2320,11 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.crypto-payment-card {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-default, #dee2e6);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background: #f8f9fa;
|
||||
background: var(--surface-dim, #f8f9fa);
|
||||
}
|
||||
|
||||
.crypto-header-grid {
|
||||
|
|
@ -2341,7 +2340,7 @@ img.crypto-button-icon {
|
|||
|
||||
.crypto-header-subtitle {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary, #6c757d);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
|
@ -2363,45 +2362,45 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.crypto-small-text {
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary, #6c757d);
|
||||
}
|
||||
|
||||
/* Status notice classes */
|
||||
.status-warning-notice {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
background: var(--alert-warning-bg, #fff3cd);
|
||||
border: 1px solid var(--alert-warning-border, #ffeaa7);
|
||||
border-radius: var(--radius-sm, 3px);
|
||||
padding: var(--space-2, 8px);
|
||||
margin-top: var(--space-3, 10px);
|
||||
}
|
||||
|
||||
.status-error-notice {
|
||||
background: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
background: var(--alert-danger-bg, #f8d7da);
|
||||
border: 1px solid var(--alert-danger-border, #f5c6cb);
|
||||
border-radius: var(--radius-sm, 3px);
|
||||
padding: var(--space-2, 8px);
|
||||
margin-top: var(--space-3, 10px);
|
||||
}
|
||||
|
||||
.status-info-notice {
|
||||
background: #d1ecf1;
|
||||
border: 1px solid #bee5eb;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
background: var(--alert-info-bg, #d1ecf1);
|
||||
border: 1px solid var(--alert-info-border, #bee5eb);
|
||||
border-radius: var(--radius-sm, 3px);
|
||||
padding: var(--space-2, 8px);
|
||||
margin-top: var(--space-3, 10px);
|
||||
}
|
||||
|
||||
.crypto-help-section {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
background: var(--surface-container-high, #e9ecef);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
|
||||
.crypto-empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #6c757d;
|
||||
padding: var(--space-10, 40px);
|
||||
color: var(--text-secondary, #6c757d);
|
||||
}
|
||||
|
||||
/* Invoice layout classes */
|
||||
|
|
@ -2417,10 +2416,10 @@ img.crypto-button-icon {
|
|||
}
|
||||
|
||||
.invoice-payment-box {
|
||||
background-color: #f0f8ff;
|
||||
background-color: var(--alert-info-bg, #f0f8ff);
|
||||
padding: 15px;
|
||||
border: 1px solid #4169e1;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--color-navy, #4169e1);
|
||||
border-radius: var(--radius-sm, 5px);
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
|
|
@ -2434,24 +2433,24 @@ img.crypto-button-icon {
|
|||
|
||||
/* Status color classes */
|
||||
.status-success {
|
||||
color: #28a745;
|
||||
color: var(--color-check, #28a745);
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: #ffc107;
|
||||
color: var(--color-gold, #ffc107);
|
||||
}
|
||||
|
||||
.status-info {
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary, #6c757d);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
color: #dc3545;
|
||||
color: var(--color-danger, #dc3545);
|
||||
}
|
||||
|
||||
.code-monospace {
|
||||
font-size: 0.9em;
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
/* Dark Mode Theme System */
|
||||
|
|
@ -2643,11 +2642,11 @@ textarea {
|
|||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
padding: var(--space-2, 8px) var(--space-3, 12px);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: var(--text-sm, 14px);
|
||||
transition: background-color var(--duration-normal, 0.2s) var(--ease-standard, ease);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue