Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/663012801/u66301280015/Final/Css/style.css
Arrière
/* นำเข้าฟอนต์ K2D จาก Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=K2D:wght@300;400;500;600&display=swap'); /* Reset และ Base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'K2D', sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; min-height: 100vh; font-size: 16px; } /* ปรับ body สำหรับหน้า login */ body.login-page { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-container { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); text-align: center; width: 100%; max-width: 400px; } .form-group { margin-bottom: 1rem; text-align: left; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { width: 100%; padding: 10px; background-color: #00b894; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; } button:hover { background-color: #019875; } /* Error Message */ .error { color: #dc3545; margin-bottom: 1rem; text-align: center; font-size: 0.9rem; } /* Dashboard Styles */ .dashboard { padding: 0; margin: 0; padding-top: 64px; /* ความสูงของ navbar */ min-height: 100vh; background-color: #f4f4f4; } /* Header section */ .header { margin: 0; padding: 1rem; background-color: white; border-radius: 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .logout-btn { padding: 0.5rem 1rem; background-color: #dc3545; color: white; text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background-color 0.3s ease; } .logout-btn:hover { background-color: #c82333; } /* Modal Styles */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; } .modal.show { display: flex; } .modal-content { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 400px; width: 90%; text-align: center; position: relative; animation: modalFadeIn 0.3s ease; } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .modal-title { color: #dc3545; margin-bottom: 1rem; font-size: 1.5rem; } .modal-message { margin-bottom: 1.5rem; color: #555; line-height: 1.5; } .modal-button { background-color: #4CAF50; color: white; border: none; padding: 0.75rem 2rem; border-radius: 4px; cursor: pointer; font-family: 'K2D', sans-serif; font-size: 1rem; transition: background-color 0.3s ease; } .modal-button:hover { background-color: #45a049; } /* Navbar Styles */ .navbar { background-color: #2c3e50; padding: 1rem 0; position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } .nav-containercd { position: relative; right: 140px; max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } .nav-brand { color: white; font-size: 1.5rem; font-weight: 500; text-decoration: none; } .nav-menu { display: flex; gap: 2rem; align-items: center; } .nav-menucd { position: relative; left: 295px; display: flex; gap: 2rem; align-items: center; } .nav-link { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.3s ease; font-weight: 400; } .nav-link:hover { background-color: rgba(255,255,255,0.1); } .nav-link.active { background-color: #3498db; } /* Attendance Container Styles */ .attendance-container { background: white; border-radius: 0; box-shadow: none; padding: 0; margin: 0; max-width: 100%; } .attendance-controls { display: flex; gap: 1rem; align-items: center; padding: 1rem; background-color: white; border-bottom: 1px solid #eee; } .group-select { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; font-family: 'K2D', sans-serif; font-size: 1rem; min-width: 150px; } .save-btn { padding: 0.5rem 1.5rem; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-family: 'K2D', sans-serif; font-size: 1rem; } .save-btn:hover { background-color: #45a049; } /* Table Styles */ .attendance-table { margin: 0; overflow-x: auto; background-color: white; } table { width: 100%; border-collapse: collapse; margin: 0; } th, td { padding: 1rem; text-align: center; /* เปลี่ยนจาก left เป็น center */ border-bottom: 1px solid #eee; } th { color: rgb(0, 0, 0); background-color: #4CAF50; font-weight: 500; position: sticky; top: 64px; z-index: 10; } /* Status Buttons Styles */ .status-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; /* จัดตำแหน่งปุ่มให้กลางแนวนอน */ align-items: center; /* จัดตำแหน่งปุ่มให้กลางแนวตั้ง */ text-align: center; /* ทำให้ข้อความในแต่ละ label อยู่กลาง */ } .status-buttons label { cursor: pointer; } .status-buttons input[type="radio"] { display: none; } .status-label { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } .status-label.present { background-color: #e8f5e9; color: #2e7d32; } .status-label.late { background-color: #fff3e0; color: #f57c00; } .status-label.absent { background-color: #ffebee; color: #c62828; } .status-label.leave { background-color: #e3f2fd; color: #1565c0; } input[type="radio"]:checked + .status-label.present { background-color: #2e7d32; color: white; } input[type="radio"]:checked + .status-label.late { background-color: #f57c00; color: white; } input[type="radio"]:checked + .status-label.absent { background-color: #c62828; color: white; } input[type="radio"]:checked + .status-label.leave { background-color: #1565c0; color: white; } /* Responsive Design */ @media (max-width: 768px) { .dashboard { padding-top: 56px; } .navbar { height: 56px; } .header { flex-direction: column; padding: 1rem; } .attendance-controls { flex-direction: column; gap: 0.5rem; } .nav-menu { gap: 0.5rem; } .nav-link { padding: 0.25rem 0.5rem; font-size: 0.9rem; } .status-buttons { justify-content: space-between; } .status-label { font-size: 0.8rem; padding: 0.25rem 0.5rem; } } @media (max-width: 480px) { .login-container { margin: 1rem; padding: 1.5rem; } .nav-brand { font-size: 1.2rem; } .modal-content { padding: 1.5rem; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.21 |
proxy
|
phpinfo
|
Réglages