meshkee-websites/moalem-shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero slider pagination dots showing swiper's black/blue defaults

Browse Source 
.swiper-pagination-bullet{background:#fff} had the same specificity as
swiper's own .swiper-pagination-bullet{background:var(...)} rule and lost
the cascade depending on chunk order, so dots rendered swiper's actual
defaults (black inactive, iOS-blue active) instead of white.

Fix: set swiper's own theming variables (--swiper-pagination-bullet-
inactive-color, --swiper-pagination-color, etc.) scoped to .hero-dots
instead of fighting the background property directly - this is swiper's
documented way to theme bullets and is cascade-order-proof. The active
pill shape (22px, 4px radius) has no variable of its own, so that rule
stays as a plain override, scoped under .hero-dots for higher specificity
instead of !important.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
amirhosein.ashourloo
2026-09-06 08:01:06 +03:30
co-authored by Claude Sonnet 5
parent 0ffbd953b3
commit e676397bae
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+17 -8
View File
@@ -65,15 +65,24 @@
font-family: var(--font-en), var(--font-fa), sans-serif;
}
/* Swiper: the package ships its own CSS, these are the site-level overrides. */
.swiper-pagination-bullet {
background: #ffffff;
opacity: 0.55;
width: 8px;
height: 8px;
/* Swiper theming: its own CSS reads these custom properties when drawing
bullets (background: var(--swiper-pagination-bullet-inactive-color, #000)
etc.) — setting a plain .swiper-pagination-bullet{background} rule has the
same specificity as swiper's own rule and lost the cascade depending on
chunk order, which is why the dots were showing swiper's black/blue
defaults instead of white. Setting the variables is the way swiper itself
documents for overriding bullet colors, and it's cascade-order-proof. */
.hero-dots {
--swiper-pagination-bullet-inactive-color: #ffffff;
--swiper-pagination-bullet-inactive-opacity: 0.55;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
}
.swiper-pagination-bullet-active {
opacity: 1;
/* The active pill shape has no swiper variable of its own — .hero-dots
raises specificity (0,2,0) above swiper's base bullet rule (0,1,0) so
this wins without !important. */
.hero-dots .swiper-pagination-bullet-active {
width: 22px;
border-radius: 4px;
}