/* ============================================================= THEME.CSS — DieuHanhTU (Main Application) Nguồn gốc duy nhất cho tất cả CSS variables của app chính. Chỉnh sửa file này để thay đổi toàn bộ giao diện. ============================================================= MÀU THƯƠNG HIỆU HIỆN TẠI: • Navbar: gradient từ #ffffff → #CE1110 (từ trắng sang đỏ) • Màu đỏ chính: #CE1110 (lấy từ nav background) • Header row: #835050 (nâu đỏ, dùng cho tiêu đề bảng) • Data group: #000080 (xanh navy, dùng cho nhãn dữ liệu) MỤC LỤC ───────────────────────────────────────────────────────────── 1. Brand Colors — màu thương hiệu chính (đỏ vivid) 2. Semantic Colors — success / warning / danger / info 3. Neutral Colors — trắng, xám, nền trang 4. Typography — font, cỡ chữ, độ đậm 5. Spacing & Radius — padding, margin, bo góc 6. Shadows & Borders — đổ bóng, viền 7. UI: Navbar 8. UI: Card 9. UI: Table 10. UI: Button (Primary) 11. UI: Form / Input 12. UI: Badge 13. UI: Alert / Panel 14. UI: Sidebar ============================================================= */ :root { /* ───────────────────────────────────────────────────────── 1. BRAND COLORS Màu chính lấy từ nav { background-color: #CE1110 } ───────────────────────────────────────────────────────── */ --color-brand: #CE1110; /* đỏ vivid chính (nav bg) */ --color-brand-hover: #b00f0e; /* hover — đậm hơn */ --color-brand-dark: #8b0b0a; /* tiêu đề, sidebar đậm */ --color-brand-darker: #5c0807; /* gradient sâu nhất */ --color-brand-light: #fff5f5; /* nền nhạt thương hiệu */ --color-brand-border: #fca5a5; /* viền nhạt thương hiệu */ --color-brand-text: #ffffff; /* chữ trên nền đỏ */ /* Navbar gradient — từ trắng sang đỏ (hiện tại trong site.css) */ --color-navbar-gradient: linear-gradient(to right, #ffffff 0%, #ffffff 10%, #CE1110 100%); /* Thành phần giao diện kế thừa header-row (nâu đỏ cho table header) */ --color-header-row-bg: #835050; --color-header-row-text: beige; /* Nhãn dữ liệu (navy blue từ .datagroup) */ --color-label-navy: #000080; /* Brand overlays (rgba — hero badge, overlay bg) */ --color-brand-overlay: rgba(206,17,16,.2); --color-brand-overlay-border: rgba(206,17,16,.45); /* ───────────────────────────────────────────────────────── 2. SEMANTIC COLORS ───────────────────────────────────────────────────────── */ --color-success: #198754; --color-success-light: #d1e7dd; --color-success-text: #0a3622; --color-success-bg: #f0fdf4; --color-success-border-light: #86efac; --color-warning: #ffc107; --color-warning-light: #fff3cd; --color-warning-text: #664d03; --color-warning-bg: #fffbeb; --color-warning-border-light: #fde68a; --color-danger: #dc3545; --color-danger-light: #f8d7da; --color-danger-text: #58151c; --color-info: #0dcaf0; --color-info-light: #cff4fc; --color-info-text: #055160; --color-info-bg: #eff6ff; --color-info-border-light: #bfdbfe; /* ───────────────────────────────────────────────────────── 3. NEUTRAL COLORS ───────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-body-bg: #f5f5f5; --color-surface: #ffffff; --color-muted: #6c757d; --color-muted-light: #adb5bd; --color-border: #dee2e6; --color-border-light: #e9ecef; --color-text-primary: #212529; --color-text-secondary: #495057; --color-text-muted: #6c757d; --color-gray-50: #f8f9fa; --color-gray-100: #f1f3f5; --color-gray-200: #e9ecef; --color-gray-300: #dee2e6; /* ───────────────────────────────────────────────────────── 4. TYPOGRAPHY Kế thừa từ mysite.css font-family + font-size: 14px ───────────────────────────────────────────────────────── */ --font-family-base: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-size-xs: 0.72rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; /* 14px — kế thừa font-size:14px */ --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.5; --line-height-tight: 1.25; /* ───────────────────────────────────────────────────────── 5. SPACING & RADIUS ───────────────────────────────────────────────────────── */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-base: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-base: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-pill: 50rem; /* ───────────────────────────────────────────────────────── 6. SHADOWS & BORDERS ───────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 2px 6px rgba(0,0,0,.08); --shadow-base: 0 4px 12px rgba(0,0,0,.10); --shadow-md: 0 6px 20px rgba(0,0,0,.12); --border-width: 1px; --border-color: var(--color-border); --border: var(--border-width) solid var(--border-color); --focus-ring: 0 0 0 0.1rem var(--color-white), 0 0 0 0.25rem var(--color-brand); /* ───────────────────────────────────────────────────────── 7. UI: NAVBAR Gradient từ trắng sang đỏ — kế thừa site.css .bg-navbar-theme ───────────────────────────────────────────────────────── */ --navbar-bg: var(--color-navbar-gradient); --navbar-border-bottom: 2px solid #c82333; --navbar-brand-color: var(--color-brand-dark); --navbar-link-color: var(--color-brand-dark); --navbar-link-hover: var(--color-brand); --navbar-height: 70px; /* kế thừa height: 70px từ .layout-navbar */ /* ───────────────────────────────────────────────────────── 8. UI: CARD ───────────────────────────────────────────────────────── */ --card-bg: var(--color-surface); --card-border: var(--color-border-light); --card-border-radius: var(--radius-base); --card-shadow: var(--shadow-sm); --card-padding: var(--spacing-base); --card-header-bg: var(--color-gray-50); --card-header-weight: var(--font-weight-semibold); --card-header-color: var(--color-text-primary); /* Card accent header — nâu đỏ kế thừa header-row */ --card-accent-bg: var(--color-header-row-bg); --card-accent-color: var(--color-header-row-text); /* ───────────────────────────────────────────────────────── 9. UI: TABLE Kế thừa .header-row (nâu đỏ) và .data-row từ mysite.css ───────────────────────────────────────────────────────── */ --table-border-color: var(--color-border-light); --table-striped-bg: var(--color-gray-50); --table-hover-bg: beige; /* kế thừa .data-row:hover */ --table-header-bg: var(--color-header-row-bg); --table-header-color: var(--color-header-row-text); --table-header-weight: var(--font-weight-bold); --table-font-size: var(--font-size-sm); --table-cell-padding-y: 0.55rem; --table-cell-padding-x: 0.75rem; /* ───────────────────────────────────────────────────────── 10. UI: BUTTON (PRIMARY) ───────────────────────────────────────────────────────── */ --btn-brand-bg: var(--color-brand); --btn-brand-border: var(--color-brand); --btn-brand-color: var(--color-white); --btn-brand-hover-bg: var(--color-brand-hover); --btn-brand-hover-border: var(--color-brand-hover); --btn-brand-shadow: 0 3px 10px rgba(206,17,16,.35); --btn-height-base: 2.25rem; --btn-height-sm: 1.75rem; --btn-radius: var(--radius-md); --btn-font-weight: var(--font-weight-semibold); --btn-font-size: var(--font-size-sm); /* ───────────────────────────────────────────────────────── 11. UI: FORM / INPUT ───────────────────────────────────────────────────────── */ --input-bg: var(--color-white); --input-color: var(--color-text-secondary); --input-border: #ced4da; --input-border-focus: var(--color-brand); --input-radius: var(--radius-sm); --input-height: 2.5rem; --input-font-size: var(--font-size-base); --input-padding-x: 0.75rem; --input-padding-y: 0.375rem; /* ───────────────────────────────────────────────────────── 12. UI: BADGE ───────────────────────────────────────────────────────── */ --badge-font-size: var(--font-size-xs); --badge-font-weight: var(--font-weight-semibold); --badge-padding: 0.35em 0.65em; --badge-radius: var(--radius-pill); /* ───────────────────────────────────────────────────────── 13. UI: ALERT / PANEL ───────────────────────────────────────────────────────── */ --alert-radius: var(--radius-base); --alert-padding: var(--spacing-md) var(--spacing-base); --panel-bg: var(--color-surface); --panel-border-left: 4px solid var(--color-brand); --panel-radius: var(--radius-base); --panel-shadow: var(--shadow-sm); --panel-padding: var(--spacing-base) var(--spacing-lg); --panel-info-left: 4px solid var(--color-info); --panel-success-left: 4px solid var(--color-success); --panel-warning-left: 4px solid var(--color-warning); --panel-danger-left: 4px solid var(--color-danger); /* ───────────────────────────────────────────────────────── 14. UI: SIDEBAR ───────────────────────────────────────────────────────── */ --sidebar-bg: var(--color-surface); --sidebar-border-right: 1px solid var(--color-border-light); --sidebar-item-hover-bg: var(--color-brand-light); --sidebar-item-active-bg:var(--color-brand-light); --sidebar-item-active-color: var(--color-brand); /* ───────────────────────────────────────────────────────── 15. UI: REPORT TABLE TINTS Bảng báo cáo SoLieuTongHopDonVi (Chủ trì/Phối hợp, Tự đánh giá…). Giữ NGUYÊN giá trị hex cũ — chỉ gom về biến để bỏ hardcode trong view. ───────────────────────────────────────────────────────── */ --report-link: #007bff; /* link/nhấn xanh trong báo cáo */ --report-link-hover: #0056b3; --report-accent: #007bff; /* viền nhấn nhóm (group-header) */ --report-chutri-bg: #d8eeff; /* header cột Chủ trì */ --report-chutri-col-bg: #e8f4ff; /* nền ô Chủ trì */ --report-phoihop-bg: #d8ffd8; /* header cột Phối hợp */ --report-phoihop-col-bg: #e8ffe8; /* nền ô Phối hợp */ --report-overdue-text: #c0392b; /* chữ "Quá hạn" */ --report-total-border: #28a745; /* viền dòng tổng nhóm */ --report-grandtotal-bg: #d4edda; /* nền dòng tổng cộng / Hoàn thành */ --report-grandtotal-border:#155724; --report-archive-bg: #d1ecf1; /* "Lưu trữ" */ --report-danger-bg-2: #f5c6cb; /* "VP từ chối" */ --report-pending-bg: #ffeeba; /* "Chưa đánh giá" */ --report-neutral-bg: #e2e3e5; /* "Khác" */ }