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 => (
<div class="carousel-slide carousel-fade">
<div class="carousel-number">
{index++} / {images.length}
{index++} of {images.length}
</div>
<img class="carousel-img" src={image.src} defer />
<img class="carousel-img" src={image.src} />
{image.title &&
<div class="carousel-caption" class="text">
{image.title}
@ -34,12 +34,14 @@ let index = 1;
))}
<!-- Next and previous buttons -->
<div class="carousel-btn-prev">
<div class="overlay"></div>
<a>
<span>&#10094;</span>
<div class="dummy"></div>
</a>
</div>
<div class="carousel-btn-next">
<div class="overlay"></div>
<a>
<span>&#10095;</span>
<div class="dummy"></div>
@ -121,37 +123,71 @@ image-carousel {
vertical-align: middle;
white-space: nowrap;
font-size: 0;
display: flex;
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;
}
.carousel-btn-next {
.carousel-btn-next, .carousel-btn-next .overlay {
right: 0;
border-radius: 0 7px 7px 0;
}
.carousel-btn-prev > a, .carousel-btn-next > a {
position: absolute;
position: relative;
display: block;
text-align: center;
height: 100%;
/* height: 100%; */
width: 100%;
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 {
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 {
font-size: 1.2rem;
position: relative;
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;
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) {
background-color: #23262d;
background-image: none;
@ -202,10 +238,10 @@ image-carousel {
}
.carousel-fade {
animation-name: fade;
animation-duration: 1.5s;
animation-duration: 0.6s;
}
@keyframes .carousel-fade {
from {opacity: .4}
@keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
</style>