148 lines
2.2 KiB
CSS
148 lines
2.2 KiB
CSS
/* 基本樣式 */
|
|
body {
|
|
font-family: 'Noto Sans TC', sans-serif;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* 導航欄 */
|
|
.navbar {
|
|
background-color: white;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 卡片樣式 */
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* 表單樣式 */
|
|
.form-control:focus {
|
|
box-shadow: none;
|
|
border-color: #0d6efd;
|
|
}
|
|
|
|
/* 按鈕樣式 */
|
|
.btn-group {
|
|
gap: 5px;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
|
|
/* 表格樣式 */
|
|
.table-responsive {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table td, .table th {
|
|
padding: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 操作按鈕列樣式 */
|
|
.table td .btn-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.table td .btn {
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* 日曆樣式 */
|
|
.fc a {
|
|
text-decoration: none !important;
|
|
color: inherit;
|
|
}
|
|
|
|
.fc-daygrid-day-number,
|
|
.fc-col-header-cell-cushion {
|
|
text-decoration: none !important;
|
|
color: inherit;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.fc-header-toolbar {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.fc-toolbar-title {
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
/* 通知樣式 */
|
|
.alert {
|
|
margin-bottom: 1rem;
|
|
border: none;
|
|
}
|
|
|
|
/* 統計資訊樣式 */
|
|
.stats-number {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
/* 手機端優化 */
|
|
@media (max-width: 576px) {
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.table td, .table th {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.fc .fc-toolbar {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* 實用工具類 */
|
|
.gap-1 {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* 確保表單元素在不同瀏覽器中顯示一致 */
|
|
input[type="date"],
|
|
input[type="time"] {
|
|
-webkit-appearance: none;
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
|
|
/* 提升可訪問性 */
|
|
.btn:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 確保表格內容在所有裝置上都能滾動 */
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-width: 100%;
|
|
}
|