70 lines
1.9 KiB
CSS
70 lines
1.9 KiB
CSS
/* Auto-generated slider styles */
|
|
|
|
/* Ensure full width slider, even inside a container */
|
|
.container .slider {
|
|
width: 100vw !important;
|
|
max-width: none;
|
|
margin-left: calc(-50vw + 50%);
|
|
}
|
|
|
|
/* Ensure only active slide images are affected by hover */
|
|
.slider-image {
|
|
filter: grayscale(100%);
|
|
transition: filter 0.5s ease-in-out;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.carousel-item.active:hover .slider-image,
|
|
.carousel-item:hover .slider-image,
|
|
.slider:hover .carousel-item.active .slider-image {
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
/* If the issue persists, force re-render */
|
|
.slider:hover {
|
|
will-change: filter;
|
|
}
|
|
|
|
/* Optimize Prev/Next button placement and fix potential container padding issues */
|
|
.carousel-control-prev, .carousel-control-next {
|
|
display: flex !important;
|
|
width: 8%;
|
|
max-width: 60px;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 30; /* Ensure higher stacking order */
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
pointer-events: auto; /* Ensure buttons are clickable */
|
|
margin: 0 -10px; /* Fix potential container padding issue */
|
|
}
|
|
|
|
/* Ensure no hidden parent containers block the arrows */
|
|
.slider {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Restore individual indicator colors */
|
|
.carousel-indicators button {
|
|
width: 30px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
margin: 3px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.carousel-indicators .active {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.indicator-color-1.active { background-color: #ffcc00 !important; }
|
|
.indicator-color-2.active { background-color: #ffff66 !important; }
|
|
.indicator-color-3.active { background-color: #0099FF !important; }
|
|
.indicator-color-4.active { background-color: #A3A300 !important; }
|
|
.indicator-color-5.active { background-color: #990000 !important; }
|
|
.indicator-color-6.active { background-color: #29527A !important; }
|