DonaldFang 方士碩
a6af297623
變更內容： - 所有資料表加上 HR_position_ 前綴 - 整理完整欄位顯示名稱與 ID 對照表 - 模組化 JS 檔案 (admin.js, ai.js, csv.js 等) - 專案結構優化 (docs/, scripts/, tests/ 等) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
111 lines
2.5 KiB
CSS
111 lines
2.5 KiB
CSS
/**
|
|
* Base Styles - 基礎樣式
|
|
* 包含 CSS 變數定義、CSS Reset、全域樣式
|
|
*/
|
|
|
|
/* ==================== CSS Variables ==================== */
|
|
:root {
|
|
/* 主題色 */
|
|
--primary: #1a5276;
|
|
--primary-light: #2980b9;
|
|
--primary-dark: #0e3a53;
|
|
--accent: #e67e22;
|
|
--accent-light: #f39c12;
|
|
--green: #27ae60;
|
|
--green-dark: #1e8449;
|
|
|
|
/* 模組專屬色彩 */
|
|
/* 崗位基礎資料 - 藍色 (Primary) */
|
|
--module-position: #1a5276;
|
|
--module-position-dark: #0e3a53;
|
|
--module-position-shadow: rgba(26, 82, 118, 0.4);
|
|
|
|
/* 職務基礎資料 - 橘色 */
|
|
--module-job: #e67e22;
|
|
--module-job-dark: #d35400;
|
|
--module-job-shadow: rgba(230, 126, 34, 0.4);
|
|
|
|
/* 部門職責 - 紫色 */
|
|
--module-deptfunc: #8b5cf6;
|
|
--module-deptfunc-dark: #6d28d9;
|
|
--module-deptfunc-shadow: rgba(139, 92, 246, 0.4);
|
|
|
|
/* 崗位描述 - 綠色 */
|
|
--module-desc: #27ae60;
|
|
--module-desc-dark: #1e8449;
|
|
--module-desc-shadow: rgba(39, 174, 96, 0.4);
|
|
|
|
/* 崗位清單 - 青色 */
|
|
--module-list: #14b8a6;
|
|
--module-list-dark: #0d9488;
|
|
--module-list-shadow: rgba(20, 184, 166, 0.4);
|
|
|
|
/* 管理者頁面 - 玫紅色 */
|
|
--module-admin: #f43f5e;
|
|
--module-admin-dark: #e11d48;
|
|
--module-admin-shadow: rgba(244, 63, 94, 0.4);
|
|
|
|
/* 背景色 */
|
|
--bg: #f4f6f9;
|
|
--bg-main: #f4f6f9;
|
|
--bg-card: #ffffff;
|
|
--border: #d5dbdf;
|
|
|
|
/* 文字顏色 */
|
|
--text-primary: #2c3e50;
|
|
--text-secondary: #5d6d7e;
|
|
|
|
/* 語義化顏色 */
|
|
--success: #27ae60;
|
|
--warning: #f39c12;
|
|
--danger: #e74c3c;
|
|
|
|
/* 陰影與圓角 */
|
|
--shadow: 0 4px 20px rgba(26, 82, 118, 0.12);
|
|
--radius: 8px;
|
|
}
|
|
|
|
/* ==================== CSS Reset ==================== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ==================== Global Styles ==================== */
|
|
body {
|
|
font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #e8f4fc 0%, #f4f6f9 100%);
|
|
min-height: 100vh;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ==================== Animations ==================== */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes modalIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|