Improved visibility of buttons on image carousel component.

This commit is contained in:
David Ball 2024-07-14 22:34:44 -04:00
parent 6184c710ab
commit 59d101676e

View File

@ -116,7 +116,6 @@ image-carousel {
height: 100%; height: 100%;
color: white; color: white;
font-weight: bold; font-weight: bold;
font-size: 18px;
transition: 0.6s ease; transition: 0.6s ease;
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
@ -149,6 +148,7 @@ image-carousel {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2rem;
} }
/* .carousel-btn-prev > a span, .carousel-btn-next > a span { /* .carousel-btn-prev > a span, .carousel-btn-next > a span {
position: relative; position: relative;
@ -172,8 +172,7 @@ image-carousel {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.carousel-btn-prev span, .carousel-btn-next span { .carousel-btn-prev > a span, .carousel-btn-next > a span {
font-size: 1.2rem;
position: relative; position: relative;
top: 50%; top: 50%;
} }
@ -187,6 +186,7 @@ image-carousel {
/* background-color: #23262d; */ /* background-color: #23262d; */
filter: unset; filter: unset;
mix-blend-mode: unset; mix-blend-mode: unset;
font-size: 4rem;
} }
.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;