gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. [디자인 QA] 네비게이션 인디케이터가 비활성 상태일 경우 배경을 제외한 이미지에 opacity: 0.5 적용

Browse Source
This commit is contained in:
clkim
2025-11-24 13:41:40 +09:00
parent b1325ec800
commit 34145a3a62
2 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
layers/components/blocks/slide/Thumbnail.vue
View File

@@ -199,6 +199,13 @@ onBeforeUnmount(() => {
.thumbnail-slide.is-active::after {
@apply border-[var(--pagination-active)];
}
.thumbnail-slide:hover img,
.thumbnail-slide.is-active img {
@apply opacity-100;
}
.thumbnail-slide img {
@apply opacity-50 transition-opacity duration-200 ease-in-out;
}
/* 기본 버전 스타일 */
.thumbnail-carousel.thumbnail-default,
@@ -216,7 +223,7 @@ onBeforeUnmount(() => {
@apply right-0;
}
.thumbnail-carousel.thumbnail-default .thumbnail-slide {
@apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[30px]
@apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[15px]
after:hidden md:after:block;
}
.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,

15
layers/templates/GrGallery01/index.vue
View File

@@ -175,22 +175,11 @@ const onArrowClick = (direction, targetIndex) => {
.thumbnail-carousel:deep(.main-splide) {
@apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
}
.thumbnail-carousel:deep(.thumbnail-slide) {
@apply opacity-50;
}
.thumbnail-carousel:deep(.thumbnail-slide:hover),
.thumbnail-carousel:deep(.thumbnail-slide.is-active) {
@apply opacity-100;
}
.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
@apply md:max-w-[720px];
}
.main-slide {
@apply relative aspect-[16/9];
}
.slide-image {
@apply transition-opacity duration-500 ease-in-out;
.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
@apply md:max-w-[720px];
}
.btn-play {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;