fix. 다운로드 버튼 공통 스타일 수정

This commit is contained in:
clkim
2025-10-29 20:31:53 +09:00
parent 8229235704
commit c6caec1dc8
2 changed files with 10 additions and 13 deletions

View File

@@ -123,9 +123,9 @@ const handleClick = () => {
<style scoped>
.btn-base {
@apply overflow-hidden inline-flex relative 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
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
@apply overflow-hidden inline-flex relative font-medium rounded-lg 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:transition-opacity after:duration-300 after:ease-in-out after:opacity-0 after:rounded-lg;
}
.btn-base:hover {
@apply after:opacity-20;
@@ -153,9 +153,8 @@ const handleClick = () => {
/* default */
.btn-base.default {
@apply w-[296px] py-3.5 px-5 rounded-[4px]
md:w-[356px] md:py-4 md:px-6
before:rounded-[4px] after:rounded-[4px];
@apply w-[296px] py-3.5 px-5
md:w-[356px] md:py-4 md:px-6;
}
.btn-base.default .text {
@apply pl-2 pr-4 line-clamp-2 text-[14px]
@@ -176,8 +175,7 @@ const handleClick = () => {
/* duplication */
.btn-base.duplication {
@apply bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat rounded-[4px]
before:rounded-[4px] after:rounded-[4px]
@apply bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat
pt-[22px] pl-[47px] pr-[22px] pb-[7px] text-[11px]
md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:pb-[11px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
}
@@ -200,9 +198,8 @@ const handleClick = () => {
/* single */
.btn-base.single {
@apply justify-center items-center text-[14px]
h-[40px] px-3.5 rounded-[4px]
md:h-[48px] md:rounded-[8px]
before:rounded-[4px] md:before:rounded-[8px];
h-[40px] px-3.5
md:h-[48px];
}
.btn-base.single.no-text {
@apply min-w-[40px] px-0 md:min-w-[48px];

View File

@@ -481,7 +481,7 @@ onBeforeUnmount(() => {
@apply md:block;
}
.btn-start:deep(.nav-1depth) {
@apply w-full h-[48px] px-10 rounded-[8px] md:w-auto;
@apply w-full h-[48px] px-10 md:w-auto;
}
.btn-start:deep(.nav-1depth) .icon-platform {
@apply hidden;
@@ -493,7 +493,7 @@ onBeforeUnmount(() => {
@apply left-[unset] right-[-40px];
}
.btn-start .nav-2depth:deep(.btn-base) {
@apply w-full h-[48px] px-4 bg-transparent rounded-xl before:hidden after:hidden
@apply w-full h-[48px] px-4 bg-transparent before:hidden after:hidden
hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10;
}
.btn-start .nav-2depth:deep(.btn-base) .text {