Files
waiting-system/static/css/keypad-styles.css
Jun-dev f699a29a85 Add waiting system application files
- Add main application files (main.py, models.py, schemas.py, etc.)
- Add routers for all features (waiting, attendance, members, etc.)
- Add HTML templates for admin and user interfaces
- Add migration scripts and utility files
- Add Docker configuration
- Add documentation files
- Add .gitignore to exclude database and cache files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-14 00:29:39 +09:00

114 lines
3.0 KiB
CSS

/* 키패드 스타일 - Modern (기본) */
.keypad-style-modern .key {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border: 2px solid #e8ecef;
border-radius: 18px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12),
0 3px 6px rgba(0, 0, 0, 0.08),
inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}
.keypad-style-modern .key:hover {
background: linear-gradient(145deg, #3498db, #2980b9);
border-color: #2980b9;
transform: translateY(-4px) scale(1.03);
box-shadow: 0 10px 24px rgba(52, 152, 219, 0.35),
0 6px 12px rgba(52, 152, 219, 0.25);
}
/* 키패드 스타일 - Bold (진한 경계선) */
.keypad-style-bold .key {
background: #ffffff;
border: 4px solid #34495e;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.keypad-style-bold .key:hover {
background: #3498db;
border-color: #2c3e50;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(52, 152, 219, 0.4);
}
/* 키패드 스타일 - Dark (검정 배경, 흰색 글자) */
.keypad-style-dark .key {
background: linear-gradient(145deg, #2c3e50, #34495e);
border: 2px solid #1a252f;
border-radius: 18px;
color: #ffffff !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3),
0 3px 6px rgba(0, 0, 0, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.keypad-style-dark .key:hover {
background: linear-gradient(145deg, #3498db, #2980b9);
border-color: #2980b9;
transform: translateY(-4px) scale(1.03);
box-shadow: 0 10px 24px rgba(52, 152, 219, 0.5),
0 6px 12px rgba(52, 152, 219, 0.3);
}
/* 키패드 스타일 - Colorful (다채로운 그라데이션) */
.keypad-style-colorful .key {
background: linear-gradient(145deg, #667eea, #764ba2);
border: none;
border-radius: 20px;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4),
0 4px 10px rgba(118, 75, 162, 0.3);
}
.keypad-style-colorful .key:hover {
background: linear-gradient(145deg, #f093fb, #f5576c);
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 28px rgba(240, 147, 251, 0.5),
0 6px 14px rgba(245, 87, 108, 0.4);
}
/* 백스페이스 버튼 스타일 오버라이드 */
.keypad-style-modern .key.backspace,
.keypad-style-bold .key.backspace,
.keypad-style-dark .key.backspace,
.keypad-style-colorful .key.backspace {
background: linear-gradient(145deg, #e74c3c, #c0392b);
border-color: #c0392b;
color: #fff !important;
}
/* 폰트 크기 - Small */
.keypad-font-small .key {
font-size: 32px;
}
.keypad-font-small .phone-number {
font-size: 52px;
}
/* 폰트 크기 - Medium */
.keypad-font-medium .key {
font-size: 38px;
}
.keypad-font-medium .phone-number {
font-size: 60px;
}
/* 폰트 크기 - Large (기본) */
.keypad-font-large .key {
font-size: 44px;
}
.keypad-font-large .phone-number {
font-size: 68px;
}
/* 폰트 크기 - XLarge */
.keypad-font-xlarge .key {
font-size: 52px;
}
.keypad-font-xlarge .phone-number {
font-size: 76px;
}