hskwon
a72e4c4127
- table-swipe.blade.php 컴포넌트 생성 - CSS 터치 스크롤 최적화 및 스크롤바 스타일 추가 - 11개 테이블에 x-table-swipe 컴포넌트 적용 - 모바일에서 스와이프 힌트 애니메이션 표시 (sm 미만)
55 lines
1.1 KiB
CSS
55 lines
1.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ================================
|
|
테이블 스와이프 (모바일)
|
|
================================ */
|
|
|
|
/* 터치 스크롤 최적화 */
|
|
.overflow-x-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 스크롤바 스타일 */
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: #d1d5db;
|
|
border-radius: 2px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
/* 스와이프 힌트 애니메이션 */
|
|
@keyframes swipe-hint {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(4px); }
|
|
}
|
|
|
|
.swipe-arrow-left {
|
|
animation: swipe-hint 1.5s ease-in-out infinite;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.swipe-arrow-right {
|
|
animation: swipe-hint 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* 스와이프 후 힌트 숨기기 */
|
|
.swipe-hint.hidden {
|
|
display: none;
|
|
}
|
|
|
|
:root {
|
|
--color-primary: #570df8;
|
|
--color-primary-content: #e0d2fe;
|
|
--color-secondary: #f000b8;
|
|
--color-base-100: #ffffff;
|
|
--color-base-200: #f9fafb;
|
|
--color-base-300: #f3f4f6;
|
|
--color-base-content: #1f2937;
|
|
}
|