43 lines
1.3 KiB
CSS
43 lines
1.3 KiB
CSS
/* 페이지네이션 버튼 - 모바일 퍼스트 */
|
|
@layer components {
|
|
.splide-pagination-bullets {
|
|
@apply w-full flex justify-center items-center gap-3 mt-6 z-[5] md:mt-8 md:gap-6;
|
|
}
|
|
|
|
.splide-pagination-bullets.type-full {
|
|
@apply absolute bottom-8 left-0;
|
|
}
|
|
|
|
.splide-pagination-bullet {
|
|
@apply relative w-2 h-2 rounded-full bg-[var(--primary)] opacity-100 md:w-3 md:h-3
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
|
|
}
|
|
|
|
.splide-pagination-bullet.is-active {
|
|
@apply after:opacity-100;
|
|
}
|
|
.splide-arrow {
|
|
@apply hidden absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5] md:block
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
|
|
hover:after:opacity-10;
|
|
}
|
|
.arrow-prev {
|
|
@apply bg-[image:var(--arrow-left)];
|
|
}
|
|
.arrow-next {
|
|
@apply bg-[image:var(--arrow-right)];
|
|
}
|
|
|
|
.type-full .arrow-prev {
|
|
@apply left-10;
|
|
}
|
|
|
|
.type-full .arrow-next {
|
|
@apply right-10;
|
|
}
|
|
|
|
.splide-arrow svg {
|
|
@apply hidden;
|
|
}
|
|
}
|