caadiq
4cbfeb5168
- index.css: 공통 스타일 (tailwind, 스크롤바, 트랜지션) - pc.css: PC 전용 (min-width, 스크롤바 공간) - mobile.css: 모바일 전용 (레이아웃, 달력 스타일) - 각 Layout 컴포넌트에서 해당 CSS import
85 lines
1.4 KiB
CSS
85 lines
1.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* 기본 스타일 */
|
|
body {
|
|
background-color: #fafafa;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
/* 스크롤바 스타일 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #548360;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #456e50;
|
|
}
|
|
|
|
/* View Transitions API - 앨범 커버 이미지 부드러운 전환 */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.3s;
|
|
}
|
|
|
|
/* 앨범 커버 트랜지션 */
|
|
::view-transition-group(*) {
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
::view-transition-old(*) {
|
|
animation: fade-out 0.3s ease-out both;
|
|
}
|
|
|
|
::view-transition-new(*) {
|
|
animation: fade-in 0.3s ease-in both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 라이트박스 스크롤바 숨기기 */
|
|
.lightbox-no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 스크롤바 숨기기 유틸리티 */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Swiper autoHeight 지원 */
|
|
.swiper-slide {
|
|
height: auto !important;
|
|
}
|