AcaMate_Web/wwwroot/css/app.css

106 lines
2.3 KiB
CSS
Raw Blame History

@tailwind base;
@tailwind components;
@tailwind utilities;
/* 색상 변수 정의 */
:root {
--disable-light: #F8F8F8;
--disable-normal: #B8B9B4;
--disable-dark: #8A8B87;
--disable-darker: #40413F;
--point-light: #F9FBFF;
--point-normal: #C2D6FA;
--point-dark: #92A1BC;
--point-darker: #444B58;
--text-title: #1D1D1D;
--text-detail: #545454;
--text-disabled: #8E8E8E;
--text-white: #FFFFFF;
--text-black: #000000;
--text-border: #C6C6C6;
}
/* 클리핑 애니메이션 (왼쪽부터 점점 보임) */
@keyframes clipReveal {
from {
clip-path: inset(0 100% 0 0); /* 왼쪽만 남기고 나머지 잘라냄 */
}
to {
clip-path: inset(0 0 0 0); /* 전체 다 보임 */
}
}
.clip-reveal {
animation: clipReveal 2500ms ease forwards;
}
/* 텍스트 블링크 */
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.animate-blink {
animation: blink 1.2s infinite;
}
/* 로고 마스크 설정 */
.mask-logo {
-webkit-mask-image: url('/logo.png');
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-image: url('/logo.png');
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
}
:root {
/* Disable */
--disable-light: #F8F8F8;
--disable-normal: #B8B9B4;
--disable-dark: #8A8B87;
--disable-darker: #40413F;
/* Information */
--information-light: #F7FBF8;
--information-normal: #B2DBBB;
--information-dark: #86A48C;
--information-darker: #3E4D41;
/* Point */
--point-light: #F9FBFF;
--point-normal: #C2D6FA;
--point-dark: #92A1BC;
--point-darker: #444B58;
/* Second */
--second-light: #F2F0ED;
--second-normal: #79654E;
--second-dark: #5D4C3B;
--second-darker: #2A231B;
/* Normal */
--normal-light: #FDFCFB;
--normal-normal: #EBDFD2;
--normal-dark: #B0A79E;
--normal-darker: #524E4A;
/* Danger */
--danger-light: #FFF9F9;
--danger-normal: #FDC6C3;
--danger-dark: #BE9592;
--danger-darker: #594544;
/* 湲고<E6B9B2> <20>띿뒪<EB9DBF><EB92AA><> <20>곹깭 */
--text-title: #1D1D1D;
--text-detail: #545454;
--text-disabled: #8E8E8E;
--text-white: #FFFFFF;
--text-black: #000000;
--text-border: #C6C6C6;
}