daball/dashersupply
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Carousel buttons weren't vertically centered on iOS Safari.

Browse Source
This commit is contained in:
David Ball 2024-07-14 21:52:34 -04:00
parent a3483ccda9
commit 0e3df605c7
1 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/ImageCarousel.astro
View File

@ -22,9 +22,9 @@ let index = 1;
{images?.map(image => ( {images?.map(image => (
<div class="carousel-slide carousel-fade"> <div class="carousel-slide carousel-fade">
<div class="carousel-number"> <div class="carousel-number">
{index++} / {images.length} {index++} of {images.length}
</div> </div>
<img class="carousel-img" src={image.src} defer /> <img class="carousel-img" src={image.src} />
{image.title && {image.title &&
<div class="carousel-caption" class="text"> <div class="carousel-caption" class="text">
{image.title} {image.title}
@ -34,12 +34,14 @@ let index = 1;
))} ))}
<!-- Next and previous buttons --> <!-- Next and previous buttons -->
<div class="carousel-btn-prev"> <div class="carousel-btn-prev">
<div class="overlay"></div>
<a> <a>
<span>&#10094;</span> <span>&#10094;</span>
<div class="dummy"></div> <div class="dummy"></div>
</a> </a>
</div> </div>
<div class="carousel-btn-next"> <div class="carousel-btn-next">
<div class="overlay"></div>
<a> <a>
<span>&#10095;</span> <span>&#10095;</span>
<div class="dummy"></div> <div class="dummy"></div>
@ -121,37 +123,71 @@ image-carousel {
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
font-size: 0; font-size: 0;
display: flex;
opacity: 0.8; opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;
} }
.carousel-btn-prev { .carousel-btn-prev, .carousel-btn-prev .overlay {
border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px;
} }
.carousel-btn-next { .carousel-btn-next, .carousel-btn-next .overlay {
right: 0; right: 0;
border-radius: 0 7px 7px 0; border-radius: 0 7px 7px 0;
} }
.carousel-btn-prev > a, .carousel-btn-next > a { .carousel-btn-prev > a, .carousel-btn-next > a {
position: absolute; position: relative;
display: block; display: block;
text-align: center; text-align: center;
height: 100%; /* height: 100%; */
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
opacity: 0; opacity: 1;
color: #63666d;
filter: invert(1);
mix-blend-mode: difference;
display: flex;
align-items: center;
justify-content: center;
} }
/* .carousel-btn-prev > a span, .carousel-btn-next > a span {
position: relative;
top: 50%;
bottom: 50%;
width: 40px;
left: 0px;
} */
.carousel-btn-prev .dummy, .carousel-btn-next .dummy { .carousel-btn-prev .dummy, .carousel-btn-next .dummy {
height: 100%; height: 100%;
} }
.carousel-btn-prev .overlay, .carousel-btn-next .overlay {
position: absolute;
top: 0;
width: 100%;
left: 0;
height: 100%;
background-color: transparent;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn-prev span, .carousel-btn-next span { .carousel-btn-prev span, .carousel-btn-next span {
font-size: 1.2rem; font-size: 1.2rem;
position: relative; position: relative;
top: 50%; top: 50%;
} }
.carousel-btn-prev:is(:hover, :focus-within) > a, .carousel-btn-next:is(:hover, ::focus-within) > a { .carousel-btn-prev:is(:hover, :focus-within) > .overlay, .carousel-btn-next:is(:hover, ::focus-within) > .overlay {
background-color: #23262d; background-color: #23262d;
opacity: 0.8; opacity: 0.8;
} }
.carousel-btn-prev:is(:hover, :focus-within) > a, .carousel-btn-next:is(:hover, ::focus-within) > a {
opacity: 0.8;
color: #fff;
/* background-color: #23262d; */
filter: unset;
mix-blend-mode: unset;
}
.carousel-btn-prev:is(:hover, :focus-within), .carousel-btn-next:is(:hover, :focus-within) { .carousel-btn-prev:is(:hover, :focus-within), .carousel-btn-next:is(:hover, :focus-within) {
background-color: #23262d; background-color: #23262d;
background-image: none; background-image: none;
@ -202,10 +238,10 @@ image-carousel {
} }
.carousel-fade { .carousel-fade {
animation-name: fade; animation-name: fade;
animation-duration: 1.5s; animation-duration: 0.6s;
} }
@keyframes .carousel-fade { @keyframes fade {
from {opacity: .4} from {opacity: .1}
to {opacity: 1} to {opacity: 1}
} }
</style> </style>