feat.게임 공통 이미지 적용 (video, arrow)

This commit is contained in:
clkim
2025-10-16 14:18:12 +09:00
parent f60cb3d6c5
commit 6dff3787b6
11 changed files with 89 additions and 61 deletions

View File

@@ -1,34 +1,18 @@
/* Button Size Classes */
@layer components {
.btn-base {
@apply overflow-hidden relative inline-flex items-center justify-center font-medium cursor-pointer
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
/* 기본 크기: size-medium */
px-10 h-14 text-base rounded-lg;
}
.btn-base:hover {
@apply after:opacity-20;
}
.btn-base:disabled {
@apply cursor-default
after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
}
.btn-base .btn-content {
@apply relative flex items-center gap-1 z-[1];
}
.size-large {
@apply px-10 h-16 text-lg;
@apply px-10 h-16 text-lg rounded-lg
before:rounded after:rounded;
}
.size-medium {
@apply px-10 h-14 text-base;
@apply px-10 h-14 text-base rounded-lg
before:rounded after:rounded;
}
.size-small {
@apply px-10 h-12 text-sm;
@apply px-10 h-12 text-sm rounded-lg
before:rounded after:rounded;
}
.size-extra-small {

View File

@@ -22,10 +22,10 @@
hover:after:opacity-10;
}
.arrow-prev {
@apply bg-[image:var(--arrow-left)];
@apply bg-[image:var(--arrow-prev)];
}
.arrow-next {
@apply bg-[image:var(--arrow-right)];
@apply bg-[image:var(--arrow-next)];
}
.type-full .arrow-prev {