/* * BudgetManagement UI Font Families * ================================= * * Scope: * - Web application screen only * - Login / Auth pages * - Main application pages * - Browser-based reports * * Excluded: * - PDF export * - Excel export * * Default font: * Sarabun * * Optional font: * ChulabhornLikit */ /* ========================================================= ChulabhornLikit Text - Light Weight: 300 ========================================================= */ @font-face { font-family: "ChulabhornLikit Text"; src: url("../fonts/chulabhornlikit/chulabhornlikittext-light.eot"); src: url("../fonts/chulabhornlikit/chulabhornlikittext-light.eot?#iefix") format("embedded-opentype"), url("../fonts/chulabhornlikit/chulabhornlikittext-light.woff2") format("woff2"), url("../fonts/chulabhornlikit/chulabhornlikittext-light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } /* ========================================================= ChulabhornLikit Text - Regular Weight: 400 ========================================================= */ @font-face { font-family: "ChulabhornLikit Text"; src: url("../fonts/chulabhornlikit/chulabhornlikittext-regular.eot"); src: url("../fonts/chulabhornlikit/chulabhornlikittext-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/chulabhornlikit/chulabhornlikittext-regular.woff2") format("woff2"), url("../fonts/chulabhornlikit/chulabhornlikittext-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================= ChulabhornLikit Text - Medium Weight: 500 ========================================================= */ @font-face { font-family: "ChulabhornLikit Text"; src: url("../fonts/chulabhornlikit/chulabhornlikittext-medium.eot"); src: url("../fonts/chulabhornlikit/chulabhornlikittext-medium.eot?#iefix") format("embedded-opentype"), url("../fonts/chulabhornlikit/chulabhornlikittext-medium.woff2") format("woff2"), url("../fonts/chulabhornlikit/chulabhornlikittext-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } /* ========================================================= ChulabhornLikit Text - Bold Weight: 700 ========================================================= */ @font-face { font-family: "ChulabhornLikit Text"; src: url("../fonts/chulabhornlikit/chulabhornlikittext-bold.eot"); src: url("../fonts/chulabhornlikit/chulabhornlikittext-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/chulabhornlikit/chulabhornlikittext-bold.woff2") format("woff2"), url("../fonts/chulabhornlikit/chulabhornlikittext-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================= ChulabhornLikit Display - Medium Weight: 500 เก็บไว้สำหรับหัวข้อหรือ Brand ในอนาคต v4.20 ระยะแรกยังใช้ ChulabhornLikit Text เป็นหลัก ========================================================= */ @font-face { font-family: "ChulabhornLikit Display"; src: url("../fonts/chulabhornlikit/chulabhornlikitdisplay-medium.eot"); src: url("../fonts/chulabhornlikit/chulabhornlikitdisplay-medium.eot?#iefix") format("embedded-opentype"), url("../fonts/chulabhornlikit/chulabhornlikitdisplay-medium.woff2") format("woff2"), url("../fonts/chulabhornlikit/chulabhornlikitdisplay-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } /* ========================================================= Default UI Font ========================================================= */ :root { --ui-font-text: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; --ui-font-display: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; } /* ========================================================= ChulabhornLikit UI Font ========================================================= */ html[data-ui-font-family="chulabhornlikit"] { --ui-font-text: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; /* * ใน v4.20 ระยะแรก ให้หัวข้อใช้ Text family เช่นเดียวกับ * ข้อความทั่วไปก่อน เพื่อให้รูปแบบทั้งระบบสม่ำเสมอ * * ถ้าภายหลังต้องการใช้ Display family กับหัวข้อ * เปลี่ยนค่าแรกเป็น "ChulabhornLikit Display" ได้ */ --ui-font-display: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; } /* ========================================================= Explicit Sarabun selection ========================================================= */ html[data-ui-font-family="sarabun"] { --ui-font-text: "Sarabun", Arial, sans-serif; --ui-font-display: "Sarabun", Arial, sans-serif; } /* ========================================================= PDF Export Font Baseline ========================================================= */ /* * budget-execution-pdf.js adds this class temporarily before * reading computed styles for PDF generation. * * Screen preference is therefore preserved, while PDF export * always uses the existing Sarabun font contract. */ html.app-display-page.ui-font-export-baseline { --ui-font-text: "Sarabun", Arial, sans-serif; --ui-font-display: "Sarabun", Arial, sans-serif; } /* ========================================================= Main Screen UI ========================================================= */ /* * กำหนดเฉพาะ Screen UI * * app.css จะถูกปรับให้ body ใช้ --ui-font-text อีกครั้ง * เพื่อให้ CSS contract หลักของระบบชัดเจน */ body, button, input, select, textarea { font-family: var( --ui-font-text, "Sarabun", Arial, sans-serif ); } /* * Form controls บาง Browser ไม่ inherit font จาก body * จึงกำหนด inherit behavior ให้ชัดเจนอีกชั้นหนึ่ง */ button, input, select, textarea, option { font-family: inherit; } /* ========================================================= Optional Display-font Helper ========================================================= */ /* * Class นี้เตรียมไว้สำหรับอนาคต * ยังไม่จำเป็นต้องนำไปใส่ใน View ของ v4.20 รอบแรก */ .ui-font-display { font-family: var( --ui-font-display, "Sarabun", Arial, sans-serif ); } /* ========================================================= Font Preview - Profile Page ========================================================= */ /* * Preview ต้องบังคับ Font โดยตรง * ไม่ใช้ --ui-font-text * * เหตุผล: * เมื่อผู้ใช้กำลังใช้ ChulabhornLikit อยู่ * ตัวอย่าง Sarabun ก็ยังต้องแสดง Sarabun จริง * และในทางกลับกัน */ .ui-font-preview--sarabun { font-family: "Sarabun", Arial, sans-serif; } .ui-font-preview--chulabhornlikit { font-family: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; } /* ========================================================= Font Preview Sample ========================================================= */ .ui-font-preview-sample { margin-top: 0.35rem; line-height: 1.45; } /* ========================================================= Scope Note ========================================================= */ /* * IMPORTANT * --------- * * ไม่กำหนด Font สำหรับ PDF/Excel ในไฟล์นี้ * * PDF Export: * ใช้ Font contract เดิมของระบบ * * Excel Export: * ใช้ Font contract เดิมของระบบ * * หาก selector สำหรับ PDF/Excel มี font-family กำหนดอยู่ใน * app.css หรือ JavaScript เดิม ให้คงไว้ตามเดิม */ /* ========================================================= Profile - UI Font Selection ========================================================= */ .ui-font-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; } /* --------------------------------------------------------- Font choice card --------------------------------------------------------- */ .ui-font-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; column-gap: 0.85rem; min-height: 92px; padding: 1rem 1.1rem; border: 1px solid #d5dee9; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } /* --------------------------------------------------------- Hover --------------------------------------------------------- */ .ui-font-choice:hover { border-color: #9db4ca; background: #fbfdff; } /* --------------------------------------------------------- Selected choice --------------------------------------------------------- */ .ui-font-choice:has(input[type="radio"]:checked) { border-color: #4e95c4; background: #f4faff; box-shadow: 0 0 0 1px rgba(78, 149, 196, 0.08); } /* --------------------------------------------------------- Radio --------------------------------------------------------- */ .ui-font-choice input[type="radio"] { width: 18px !important; height: 18px !important; min-width: 18px; max-width: 18px; margin: 0.2rem 0 0 0 !important; padding: 0 !important; justify-self: start; cursor: pointer; accent-color: #1478ad; } /* --------------------------------------------------------- Text area --------------------------------------------------------- */ .ui-font-choice-content { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } /* Font name */ .ui-font-choice-content strong { display: block; margin: 0; font-size: 1.05em; font-weight: 700; line-height: 1.3; color: #243246; } /* --------------------------------------------------------- Preview --------------------------------------------------------- */ .ui-font-preview-sample { display: block; margin: 0.15rem 0 0; font-size: 1.1em; line-height: 1.45; color: #526173; } /* * Preview ต้องบังคับ Font โดยตรง * เพื่อให้ตัวอย่างแต่ละ Font แตกต่างกันจริง */ .ui-font-preview--sarabun { font-family: "Sarabun", Arial, sans-serif; } .ui-font-preview--chulabhornlikit { font-family: "ChulabhornLikit Text", "Sarabun", Arial, sans-serif; } /* --------------------------------------------------------- Save button --------------------------------------------------------- */ .ui-font-choice-list + .form-actions { margin-top: 0.25rem; } /* --------------------------------------------------------- Tablet / Mobile --------------------------------------------------------- */ @media (max-width: 800px) { .ui-font-choice-list { grid-template-columns: 1fr; gap: 0.75rem; } .ui-font-choice { min-height: 82px; padding: 0.85rem 0.95rem; } } @media (max-width: 480px) { .ui-font-choice { grid-template-columns: 20px minmax(0, 1fr); column-gap: 0.7rem; padding: 0.8rem 0.85rem; } .ui-font-choice-content strong { font-size: 1em; } .ui-font-preview-sample { font-size: 1em; } }