/* * shared.css * ============================================================ * CSS Design Tokens ส่วนกลาง - ระบบข้อมูลงานวิจัย วิทยาลัยการคอมพิวเตอร์ * ใช้ร่วมกันทุก layout ในระบบ (public, dashboard, auth) * * วิธีใช้: โหลดไฟล์นี้ใน ก่อน CSS อื่นทุกไฟล์ * ============================================================ */ /* ============================================================ CSS Variables (Design Tokens) ============================================================ */ :root { /* --- Brand / Primary Colors --- */ --brand-900: #0b2e4f; --brand-700: #1075bb; --brand-600: #1f8bd5; --brand-400: #3aa3e8; --brand-100: #dbeafe; /* Alias (backward compatibility) */ --primary: #1075bb; --primary-color: #1075bb; --primary-dark: #0c5f92; --primary-light: #e8f5fe; --primary-text: #003e80; --primary-hover: #1d4ed8; --accent-teal: #4ad1e5; /* --- Surface / Background --- */ --surface-0: #ffffff; --surface-50: #f8fafc; --surface-100: #eef2f7; --bg-light: #f8fafc; /* --- Text --- */ --text-900: #0f172a; --text-700: #334155; --text-500: #64748b; --text-dark: #1e293b; --text-light: #64748b; /* --- Status Colors --- */ --success-600: #16a34a; --success-100: #dcfce7; --warning-600: #f59e0b; --warning-100: #fef3c7; --danger-600: #dc2626; --danger-100: #fee2e2; --neutral-600: #64748b; --neutral-100: #f1f5f9; /* --- Border Radius --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --border-radius-card: 12px; /* --- Shadows --- */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.1); --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12); /* --- Typography --- */ --body-font: "Prompt", "Kanit", "Nunito", system-ui, sans-serif; --heading-font: "Kanit", "Prompt", system-ui, sans-serif; --mono-font: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace; /* --- Spacing Scale --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* --- Transition --- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* --- Z-index --- */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050; --z-tooltip: 1070; } /* ============================================================ Base / Reset ส่วนเพิ่มเติม (เสริม Bootstrap) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); color: var(--text-900); background-color: var(--surface-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: var(--text-900); font-weight: 600; line-height: 1.3; } a { color: var(--brand-700); transition: color var(--transition-fast); } a:hover { color: var(--brand-600); } img { max-width: 100%; height: auto; } /* ============================================================ Shared Utility Classes (ใช้ได้ทุก layout) ============================================================ */ /* Text Helpers */ .text-brand { color: var(--brand-700) !important; } .text-brand-light { color: var(--brand-600) !important; } .text-brand-dark { color: var(--brand-900) !important; } .text-muted-sm { color: var(--text-500); font-size: 0.85rem; } /* Background Helpers */ .bg-brand { background-color: var(--brand-700) !important; } .bg-brand-light { background-color: var(--brand-100) !important; } .bg-surface { background-color: var(--surface-0) !important; } .bg-surface-50 { background-color: var(--surface-50) !important; } .bg-surface-100 { background-color: var(--surface-100) !important; } /* Gradient Helpers */ .bg-brand-gradient { background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 60%, var(--brand-400) 100%); } /* Border Helpers */ .border-brand { border-color: var(--brand-700) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } /* Shadow Helpers */ .shadow-card { box-shadow: var(--shadow-card) !important; } .shadow-soft { box-shadow: var(--shadow-soft) !important; } /* ============================================================ Shared Card Styles ============================================================ */ .card-shared { background: var(--surface-0); border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid rgba(0, 0, 0, 0.06); padding: var(--space-6); transition: box-shadow var(--transition-base), transform var(--transition-base); } .card-shared:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ============================================================ Shared Button Overrides ============================================================ */ .btn-brand { background-color: var(--brand-700); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-family: var(--body-font); font-weight: 500; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; } .btn-brand:hover, .btn-brand:focus { background-color: var(--primary-dark); color: #fff; box-shadow: 0 4px 12px rgba(16, 117, 187, 0.35); text-decoration: none; } .btn-brand:active { background-color: var(--brand-900); } .btn-brand-outline { background-color: transparent; color: var(--brand-700); border: 1.5px solid var(--brand-700); border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-family: var(--body-font); font-weight: 500; transition: all var(--transition-fast); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; } .btn-brand-outline:hover, .btn-brand-outline:focus { background-color: var(--brand-700); color: #fff; text-decoration: none; } /* ============================================================ Shared Form Styles ============================================================ */ .form-control-shared { border: 1.5px solid #d1d5db; border-radius: var(--radius-sm); padding: 0.5rem 0.875rem; font-family: var(--body-font); font-size: 0.9rem; color: var(--text-900); background: var(--surface-0); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; } .form-control-shared:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(16, 117, 187, 0.15); } .form-label-shared { font-size: 0.875rem; font-weight: 500; color: var(--text-700); margin-bottom: var(--space-1); display: block; } /* ============================================================ Shared Badge / Status Styles ============================================================ */ .badge-shared { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; gap: 0.25rem; } .badge-success { background-color: var(--success-100); color: var(--success-600); } .badge-warning { background-color: var(--warning-100); color: var(--warning-600); } .badge-danger { background-color: var(--danger-100); color: var(--danger-600); } .badge-neutral { background-color: var(--neutral-100); color: var(--neutral-600); } .badge-brand { background-color: var(--brand-100); color: var(--brand-700); } /* ============================================================ Shared Page Header ============================================================ */ .page-header-shared { background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 60%, var(--brand-400) 100%); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-10); color: #fff; margin-bottom: var(--space-8); } .page-header-shared h1 { color: #fff; font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-2); } .page-header-shared p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: 0; } /* ============================================================ Shared Table Styles ============================================================ */ .table-shared { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table-shared thead th { background: var(--surface-100); color: var(--text-700); font-weight: 600; padding: 0.75rem 1rem; border-bottom: 2px solid #e2e8f0; text-align: left; white-space: nowrap; } .table-shared tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; color: var(--text-900); vertical-align: middle; } .table-shared tbody tr:hover { background: var(--surface-50); } /* ============================================================ Shared Alert / Flash Messages ============================================================ */ .alert-shared { border-radius: var(--radius-sm); padding: 0.875rem 1.25rem; margin-bottom: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.9rem; } .alert-shared-success { background: var(--success-100); color: var(--success-600); border-left: 4px solid var(--success-600); } .alert-shared-warning { background: var(--warning-100); color: #92400e; border-left: 4px solid var(--warning-600); } .alert-shared-danger { background: var(--danger-100); color: var(--danger-600); border-left: 4px solid var(--danger-600); } .alert-shared-info { background: var(--brand-100); color: var(--brand-700); border-left: 4px solid var(--brand-700); } /* ============================================================ Shared Pagination ============================================================ */ .pagination-shared { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-4) 0 0; flex-wrap: wrap; } .pagination-shared .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-700); background: var(--surface-0); border: 1px solid #e2e8f0; text-decoration: none; transition: all var(--transition-fast); } .pagination-shared .page-item.active .page-link { background: var(--brand-700); color: #fff; border-color: var(--brand-700); font-weight: 600; } .pagination-shared .page-item .page-link:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-700); } .pagination-shared .page-item.disabled .page-link { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ============================================================ Shared Loading / Spinner ============================================================ */ .spinner-shared { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid rgba(16, 117, 187, 0.25); border-top-color: var(--brand-700); border-radius: 50%; animation: spin-shared 0.65s linear infinite; } @keyframes spin-shared { to { transform: rotate(360deg); } } /* ============================================================ Shared No-Results / Empty State ============================================================ */ .empty-state-shared { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-500); } .empty-state-shared .empty-icon { font-size: 3rem; opacity: 0.35; margin-bottom: var(--space-4); } .empty-state-shared h3 { font-size: 1.1rem; color: var(--text-700); margin-bottom: var(--space-2); } .empty-state-shared p { font-size: 0.9rem; margin: 0; } /* ============================================================ Responsive Helpers ============================================================ */ @media (max-width: 767.98px) { .page-header-shared { padding: var(--space-6) var(--space-4); } .page-header-shared h1 { font-size: 1.4rem; } .card-shared { padding: var(--space-4); } } @media (max-width: 575.98px) { .btn-brand, .btn-brand-outline { width: 100%; justify-content: center; } }