You've already forked wc-bootstrap
Fix dark mode rendering for tables, form inputs, and notices
- Override WooCommerce's .input-text background (specificity 0,3,1) with [data-bs-theme="dark"] selector for text inputs and textareas - Remove table-light from <thead> in cart, review-order, orders, and payment-methods templates (forces white in dark mode) - Add .alert.woocommerce-* compound selectors for notice overrides outside .woocommerce wrapper ancestry - Suppress focus ring on programmatically focused notices (woocommerce.js focus_populate_live_region adds tabindex + focus) - Wrap order-details product table in card matching thank-you page style - Fix thank-you alert icon/text line wrap with d-flex align-items-center - Bump version to 0.1.2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -42,12 +42,17 @@
|
||||
when notices are rendered outside our Twig templates.
|
||||
========================================================================== */
|
||||
|
||||
/* Use .woocommerce ancestor to beat woocommerce.css specificity (0,2,0 > 0,1,0).
|
||||
WooCommerce sets border-top: 3px solid, background-color: #f6f5f8, and a
|
||||
WooCommerce icon font ::before on these classes. Override all of it. */
|
||||
/* Override woocommerce.css which sets border-top: 3px solid, background-color:
|
||||
#f6f5f8, and a WooCommerce icon font ::before on notice classes.
|
||||
Two selector patterns at specificity 0,2,0:
|
||||
- .woocommerce .woocommerce-* — notices inside a .woocommerce wrapper
|
||||
- .alert.woocommerce-* — notices rendered by our Twig templates */
|
||||
.woocommerce .woocommerce-info,
|
||||
.woocommerce .woocommerce-message,
|
||||
.woocommerce .woocommerce-error {
|
||||
.woocommerce .woocommerce-error,
|
||||
.alert.woocommerce-info,
|
||||
.alert.woocommerce-message,
|
||||
.alert.woocommerce-error {
|
||||
position: relative;
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
margin: 0 0 1rem;
|
||||
@@ -58,19 +63,22 @@
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.woocommerce .woocommerce-info {
|
||||
.woocommerce .woocommerce-info,
|
||||
.alert.woocommerce-info {
|
||||
color: var(--bs-info-text-emphasis);
|
||||
background-color: var(--bs-info-bg-subtle);
|
||||
border-color: var(--bs-info-border-subtle);
|
||||
}
|
||||
|
||||
.woocommerce .woocommerce-message {
|
||||
.woocommerce .woocommerce-message,
|
||||
.alert.woocommerce-message {
|
||||
color: var(--bs-success-text-emphasis);
|
||||
background-color: var(--bs-success-bg-subtle);
|
||||
border-color: var(--bs-success-border-subtle);
|
||||
}
|
||||
|
||||
.woocommerce .woocommerce-error {
|
||||
.woocommerce .woocommerce-error,
|
||||
.alert.woocommerce-error {
|
||||
color: var(--bs-danger-text-emphasis);
|
||||
background-color: var(--bs-danger-bg-subtle);
|
||||
border-color: var(--bs-danger-border-subtle);
|
||||
@@ -78,10 +86,24 @@
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* WooCommerce JS (woocommerce.js:focus_populate_live_region) adds tabindex="-1"
|
||||
and calls .focus() on notices for screen reader accessibility. The default
|
||||
browser focus ring appears white in dark mode — suppress it since these are
|
||||
non-interactive elements (the focus is only for screen reader announcement). */
|
||||
.alert.woocommerce-info:focus,
|
||||
.alert.woocommerce-message:focus,
|
||||
.alert.woocommerce-error:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Suppress WooCommerce icon font ::before — our templates use Bootstrap Icons */
|
||||
.woocommerce .woocommerce-info::before,
|
||||
.woocommerce .woocommerce-message::before,
|
||||
.woocommerce .woocommerce-error::before {
|
||||
.woocommerce .woocommerce-error::before,
|
||||
.alert.woocommerce-info::before,
|
||||
.alert.woocommerce-message::before,
|
||||
.alert.woocommerce-error::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -405,6 +427,16 @@
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
/* Text inputs & textareas — same issue as <select>: woocommerce.css sets
|
||||
.form-row .input-text { background-color: var(--wc-form-color-background, #fff) }
|
||||
with higher specificity than the theme's checkout form rules. */
|
||||
[data-bs-theme="dark"] .woocommerce .form-row .input-text,
|
||||
[data-bs-theme="dark"] .woocommerce .form-row textarea {
|
||||
background-color: var(--bs-body-bg);
|
||||
color: var(--bs-body-color);
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
/* SelectWoo / Select2 — select2.css hardcodes #fff backgrounds on selection
|
||||
containers and dropdowns. Override to use Bootstrap's dark mode variables. */
|
||||
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
|
||||
|
||||
Reference in New Issue
Block a user