.form-control, .form-select { border-radius: 8px; border: 2px solid #e9ecef; padding: 10px 15px; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { border-color: #4a90e2; box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); } .table { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .table thead th { background: #f8f9fa; border-bottom: 2px solid #dee2e6; color: #2c3e50; font-weight: 600; padding: 15px; } .table tbody td { padding: 12px 15px; vertical-align: middle; border-bottom: 1px solid #eee; } @media (prefers-color-scheme: dark) { .form-control, .form-select { background-color: #2d2d2d; color: #ffffff; border-color: #3d3d3d; } .table { background-color: #2d2d2d; color: #ffffff; } .table thead th { background-color: #3d3d3d; color: #ffffff; } } /* 浮动保存按钮样式 */ .floating-save-container { position: fixed; bottom: 30px; right: 30px; z-index: 1000; } .floating-save-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; background: linear-gradient(135deg, #4a90e2, #357abd); } .floating-save-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .floating-save-btn:active { transform: translateY(1px); } .floating-save-btn i { font-size: 1.1em; } /* 暗色模式适配 */ @media (prefers-color-scheme: dark) { .floating-save-btn { background: linear-gradient(135deg, #2980b9, #2c3e50); } } /* 移动端适配 */ @media (max-width: 768px) { .floating-save-container { bottom: 20px; right: 20px; } .floating-save-btn { padding: 10px 20px; } } /* Toast 样式优化 */ .toast { position: fixed; top: 20px; right: 20px; min-width: 300px; padding: 16px 20px; border-radius: 12px; display: flex; align-items: center; gap: 12px; color: white; transform: translateX(120%); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1100; font-weight: 500; } .toast.show { transform: translateX(0); opacity: 1; } /* 优化不同类型的 Toast 样式 */ .toast-success { background: linear-gradient(135deg, #00b09b, #96c93d); border-left: 4px solid #96c93d; } .toast-error { background: linear-gradient(135deg, #ff5f6d, #ffc371); border-left: 4px solid #ff5f6d; } .toast-info { background: linear-gradient(135deg, #2193b0, #6dd5ed); border-left: 4px solid #2193b0; } .toast-warning { background: linear-gradient(135deg, #f2994a, #f2c94c); border-left: 4px solid #f2994a; } /* Toast 图标样式 */ .toast i { font-size: 1.4em; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } /* Toast 堆叠效果 */ .toast + .toast { margin-top: 16px; } /* Toast 文本样式 */ .toast span { flex: 1; font-size: 14px; line-height: 1.4; } /* 暗色模式适配 */ @media (prefers-color-scheme: dark) { .toast { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .toast-success { background: linear-gradient(135deg, #004d40, #1b5e20); border-left: 4px solid #00c853; } .toast-error { background: linear-gradient(135deg, #b71c1c, #c62828); border-left: 4px solid #ff1744; } .toast-info { background: linear-gradient(135deg, #0d47a1, #1976d2); border-left: 4px solid #2196f3; } .toast-warning { background: linear-gradient(135deg, #e65100, #f57c00); border-left: 4px solid #ffd600; } } /* 移动端适配 */ @media (max-width: 768px) { .toast { min-width: auto; width: calc(100% - 32px); margin: 0 16px; padding: 12px 16px; } .toast + .toast { margin-top: 12px; } }