/* for noppakun edit */ /* use in xen-core/modules/sales/views/quotation/_detail.php */ .x-lastprice { --bs-bg-opacity: .5; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } /* best @ 13/9/2023 สำหรัน กรณี วันที่ layout เพี้ยน*/ .kv-container-from.field-selectform-date, .kv-container-to.field-selectform-date2, /* ===== */ .kv-container-from.field-selectform-month, .kv-container-to.field-selectform-month2, /* ====== */ .kv-container-from.field-selectform-month_year, .kv-container-to.field-selectform-month_year2 { padding: 0px; } .bootstrap-dialog-title { color: var(--bs-info); } .page-breadcrumb .breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: #013152; } /* 02-04-2025 แก้ปัญหา จอ user ความละเดียดน้อย ทำให้ตกจอ เช่น ใบวางบิล */ /* /xen-core/components/Xu/Xu.php */ /* aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */ table.xu-dataList.dataTable tbody th, table.xu-dataList.dataTable tbody td { padding: 7px; /* e.g. change 8x to 4px here */ } .modal-content .modal-header { padding: 1rem 1rem 0rem; } /* bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb */ /* pum 23-04-2025 */ .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { min-height: calc(100vh - 150px) !important; } /* FIX 2026-08-09: แก้หน้าจอกระพริบทุกครั้งที่เปลี่ยนหน้า style.css:13172 ตั้ง .page-wrapper{display:none} แต่ไม่มี CSS ที่ไหนเปิดกลับ — มีแค่ custom.min.js บรรทัดท้าย $(".page-wrapper").delay(20).show() ที่รันตอน DOM-ready หลังโหลด JS ครบทุกตัว (POS_END) ทำให้เนื้อหาหน้าโผล่ช้ากว่าที่ควร */ .page-wrapper { display: block; } /* FIX 2026-08-10 (1): ปิด transition ที่ทำให้เห็นการ "ค่อย ๆ เปลี่ยนสี" ตอนโหลดหน้า transition 0.2s ทั้ง 3 จุดนี้มีไว้ให้ panel เปลี่ยนธีม (.customizer / .theme-color) animate ตอนผู้ใช้กดเลือก skin — แต่แอปนี้ไม่ได้ render panel นั้นเลย (นับใน HTML = 0) เหลือแค่ผลข้างเคียงคือ ถ้ามี JS ตัวไหน set attribute ทีหลัง จะกลายเป็นภาพ fade = กระพริบ */ .topbar, .topbar .top-navbar .navbar-header, #main-wrapper[data-layout=vertical] .topbar .top-navbar .navbar-header, .page-wrapper { transition: none; } /* FIX 2026-08-10 (2): จองพื้นที่ให้ feather icon กัน layout กระตุกตอนโหลด feather.replace() (custom.min.js, DOM-ready) แปลง เป็น ก่อนแปลง เป็น inline element ที่ width/height ไม่มีผล = กว้าง 0px พอกลายเป็น svg ถึงจะกินที่จริง ทำให้ของรอบ ๆ ขยับ ขนาดต้องตรงกับ style.css:18444 */ i[data-feather] { display: inline-block; vertical-align: middle; width: 24px; height: 24px; } i[data-feather].feather-sm { width: 18px; height: 18px; } i[data-feather].feather-lg { width: 28px; height: 28px; } i[data-feather].feather-xl { width: 35px; height: 35px; } /* td.kv-group-odd { background-color: red!important; } */ /* .select2-container--krajee-bs5 .select2-selection--single { background-color: #242a38 !important; } .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered{ color: #b2b9bf; } */ /* ========================================================================== AUDIT 2026-09-12 — ผลตรวจธีม ข้อ 1,2,5,6,7 ทุกบล็อกด้านล่างเขียนทับ style.css ซึ่ง asset.php โหลดก่อนไฟล์นี้ ถ้าจะย้อนกลับ ลบตั้งแต่บรรทัดนี้ลงไปได้เลย (ไม่มีที่อื่นพึ่งพา) ========================================================================== */ /* -------------------------------------------------------------------------- [1] แถวคู่/แถวคี่ในตาราง สีตัวอักษรไม่เท่ากัน (ต่างกัน 2.6 เท่า) วัดจากหน้าจอจริง (gl/account, gl/trialbalance): แถวคี่ #212529 contrast 15.43:1 แถวคู่ #54667a contrast 5.90:1 ทำให้แถวเว้นแถวดูเหมือนถูก disable ทั้งที่เป็นข้อมูลระดับเดียวกัน ต้นเหตุ: style.css:23590 มี .table-light, .table { color: #54667a; } ซึ่งเขียนทับ .table { color: var(--bs-table-color) } ของ Bootstrap (style.css:1762, ค่า #212529) — ห่างกัน 21,800 บรรทัด แต่ .table-striped > tbody > tr:nth-of-type(odd) > * (style.css:1805) set color ลงที่ "เซลล์" โดยตรง specificity สูงกว่า → แถวคี่ได้ #212529 คืน ผลคือแถวคี่เข้ม แถวคู่จาง เทียบกับ bower-asset/bootstrap 5.2.3 ตัวจริงแล้ว ไม่มีบรรทัดนี้ = เป็น override ที่ MonsterAdmin ใส่มาเอง ไม่ใช่พฤติกรรมของ Bootstrap :not(.table-dark) กันไม่ให้ไปทับ .table-dark { color:#fff } (style.css:23595) ที่ layouts/_actinfo.php ใช้อยู่ -------------------------------------------------------------------------- */ .table:not(.table-dark) { color: var(--bs-table-color); } /* -------------------------------------------------------------------------- [2] หัวตารางค้างไว้ตอนเลื่อน (sticky header) เดิม: thead position:static และไม่มี element ไหนในหน้าเป็น sticky/fixed เลย หน้า gl/trialbalance มี 51 แถว → เอกสารสูง 3,210px = ต้องเลื่อน 5.4 จอ พอเลื่อนถึงแถวที่ 10 หัวคอลัมน์หายหมด ขณะที่คอลัมน์ เดบิต/เคดิต/Balance หน้าตาเหมือนกัน 3 คอลัมน์ติดกัน = เสี่ยงอ่านผิดคอลัมน์ หมายเหตุวิธีทำ (ต่างจากที่เสนอไว้ตอนแรก): ใช้ `thead{position:sticky;top:70px}` เฉย ๆ "ไม่ได้" เพราะ .table-responsive.kv-grid-container มี overflow-x:auto ซึ่งทำให้ overflow-y ถูก compute เป็น auto ไปด้วย → กลายเป็น scroll container ตัว sticky จะอ้างอิงกับ container ตัวนั้นแทนที่จะเป็นหน้าเว็บ และ container ไม่เคยเลื่อนแนวตั้ง (สูงตามเนื้อหา) หัวตารางจึงไม่เคยค้าง (ผสม overflow-x:auto กับ overflow-y:visible ไม่ได้ตามสเปก CSS) จึงให้ container เป็นตัวเลื่อนเองแทน แล้ว sticky ข้างในถึงทำงาน ผลพลอยได้: หน้าไม่ยาว 5.4 จออีกต่อไป, ปุ่มแบ่งหน้า (.card-footer) ไม่หนีไปอยู่ก้นหน้า ทดสอบแล้วบน gl/trialbalance: หัวตารางอยู่นิ่งที่เดิมขณะ body เลื่อน sticky ที่ (ไม่ใช่ที่ ) เพื่อให้หัวตารางที่มี 2 แถว (แถวชื่อคอลัมน์ + แถว filter) ค้างทั้งคู่โดยไม่ต้องคำนวณ top ของแถวที่สอง -------------------------------------------------------------------------- */ .kv-grid-container { /* max() กันกรณีหน้าต่างเตี้ยมาก ไม่ให้ช่องตารางหดจนใช้งานไม่ได้ ใช้ max() แทน min-height เพราะ min-height จะดัน "ที่ว่างเปล่า" ออกมา ในตารางที่มีไม่กี่แถว (เช่น sales/invoice ที่มี 2 แถว) เลข 260px = ส่วนที่อยู่เหนือ/ใต้ตาราง (topbar + breadcrumb + card-header + kv-panel-before + card-footer) ถ้าหน้าไหนมี panel filter เพิ่ม ตารางจะล้นลงไปใต้จอเล็กน้อยและต้องเลื่อนหน้าอีกนิด ซึ่งยอมรับได้ ปรับเลขนี้ตัวเดียวคุมความสูงช่องตารางทั้งระบบ */ max-height: max(240px, calc(100vh - 260px)); overflow: auto; } .kv-grid-container > table.kv-grid-table > thead { position: sticky; top: 0; z-index: 3; background-color: #fff; } /* -------------------------------------------------------------------------- [5] ของที่มองไม่เห็นบน topbar topbar เป็น gradient #013152 -> #4581b3 (เข้มซ้าย อ่อนขวา, style.css:11-21) แต่ของที่วางไว้ "ฝั่งขวา" กลับใช้สีอ่อน วัด contrast จริงได้: .icon-text #95999d 1.49:1 (ต้อง 4.5) i.fa-bug #90a4ae 1.92:1 (ต้อง 3) i.fa-laptop #90a4ae 1.85:1 (ต้อง 3) i.fa-database #b78700 1.44:1 (ต้อง 3) <- แย่ที่สุด ทั้งหมดอยู่บนปลายอ่อนของ gradient พอดี ค่าที่ตั้งใหม่คำนวณให้ผ่านเกณฑ์ที่ "ปลายอ่อนที่สุด" ของ gradient (#4581b3) ผลหลังแก้ (วัดจากหน้าจอจริง): i.fa-bug 3.42:1 ผ่าน (ต้อง 3) i.fa-laptop 3.31:1 ผ่าน i.fa-database 3.61:1 ผ่าน .icon-text 3.58:1 ยังไม่ผ่าน (ต้อง 4.5) ⚠️ .icon-text ผ่าน 4.5 ไม่ได้ ไม่ว่าจะใช้สีอะไร: ตำแหน่งของมันอยู่ขวาสุด ตรงที่ gradient เป็น rgb(67,127,177) วัดแล้ว "สีขาวล้วน" ที่จุดนั้นได้แค่ 4.28:1 = gradient เองคือเพดาน เช่นเดียวกับ .text-danger (สถานะ YII_DEBUG / YII_ENV=dev) ที่เป็นสีแดง ทางแก้ที่ได้ผลกับทุกจุดพร้อมกัน: เปลี่ยน topbar เป็นสีทึบ #013152 ที่พื้นทึบนั้น แม้แต่สีเทาเดิม #95999d ก็ได้ 4.69:1 = ผ่านเลย ถ้าทำ ทุกบรรทัดในบล็อก [5] นี้จะไม่จำเป็นอีก — ยังไม่ได้ทำ รอตัดสินใจ -------------------------------------------------------------------------- */ .topbar .icon-text { color: rgba(255, 255, 255, 0.85); } .topbar .navbar-nav .nav-link > i.text-muted, .topbar .navbar-nav .nav-link.text-muted { color: rgba(255, 255, 255, 0.72) !important; } .topbar .navbar-nav .nav-link > i.text-warning, .topbar .navbar-nav .nav-link > .feather-icon.text-warning { color: #ffe08a !important; } /* -------------------------------------------------------------------------- [6] น้ำหนักตัวอักษรพื้นฐาน 300 -> 400 style.css:185 ตั้ง --bs-body-font-weight:300 (Sarabun Light) ซึ่งเป็นค่า default ของธีมฝรั่งที่ออกแบบบน Latin ภาษาไทยมีสระบน/ล่างและวรรณยุกต์ ที่น้ำหนัก 300 ขนาด 16px ในตารางหนาแน่นจะเริ่มจมและแยกไม่ออก ผลพลอยได้: ชื่อแบรนด์ใน _topbar.php ใช้ .fw-bolder ซึ่งเป็นค่า "สัมพัทธ์" ของ parent — เดิม parent เป็น 300 จึง compute ได้แค่ 400 (ไม่หนาอย่างที่ตั้งใจ) พอฐานเป็น 400 แล้ว fw-bolder จะ compute เป็น 700 ตามที่ควรเป็น -------------------------------------------------------------------------- */ :root { --bs-body-font-weight: 400; } /* -------------------------------------------------------------------------- [7] ความหนาแน่นของหน้ารายการ วัดหน้า gl/account (108 รายการ) ที่ viewport 1366x591 ก่อนแก้: แถวแรกของข้อมูลเริ่มที่ y=353px = 60% ของจอหมดไปกับ chrome เห็นข้อมูลจริงแค่ 5 แถว จาก 20 แถวที่โหลดมา งบประมาณแนวตั้งเดิม: topbar 70 + breadcrumb 49 + padding 64 + card-header 44 + kv-panel-before 59 + thead 111 ลดทีละจุดโดยไม่ตัดข้อมูลอะไรออก: breadcrumb 25px -> 12px บน container 20px -> 12px บน / 30px -> 20px ข้าง card-header 10px -> 6px (แถบน้ำเงิน "Showing x of y") kv-panel-before 10px -> 5px (แถบปุ่ม) filter input 38px -> 31px (ลด padding + font-size) td padding 12px -> 7px (เท่ากับที่ทำไว้แล้วกับ xu-dataList ด้านบน) -------------------------------------------------------------------------- */ .page-breadcrumb { padding: 12px 30px 0; } .page-wrapper > .container-fluid { padding: 12px 20px; } .grid-view > .card > .card-header { padding: 6px 20px; } .grid-view .kv-panel-before { padding: 5px 10px; } .kv-grid-table > thead .form-control, .kv-grid-table > thead .form-select { padding: 3px 8px; font-size: 0.875rem; min-height: auto; } .kv-grid-table > tbody > tr > td, .kv-grid-table > thead > tr > th { padding: 7px 8px; } /* แถว filter ของ kartik เป็น ที่ใช้ ไม่ใช่ จึงไม่โดน selector ด้านบน และยังเหลือ padding 12px เดิมอยู่ ช่อง input มีความสูงของตัวเองแล้ว (29px) แถวนี้จึงไม่ต้องการ padding มาก */ .kv-grid-table > thead > tr.filters > td { padding: 4px 8px; } /* แถบปุ่มเหนือตาราง (.kv-panel-before) สูง 49px เพื่อวางปุ่ม 2 ปุ่ม ย่อปุ่มลงให้เท่ากับความสูงที่ควรเป็นของ toolbar */ .grid-view .kv-panel-before .btn { padding: 3px 10px; } /* -------------------------------------------------------------------------- [8] จอแคบกว่า 1193px มีของเข้าถึงไม่ได้ (รวมปุ่มออกจากระบบ) topbar ต้องการความกว้างขั้นต่ำ 1193px (โลโก้ 240 + เมนูโมดูล 731 + ไอคอน admin 166 + เมนูโปรไฟล์ 56) แต่ navbar-expand-md ทำให้ hamburger โผล่เฉพาะต่ำกว่า 768px เท่านั้น ช่วง 768-1192px จึงไม่มีทั้ง hamburger และไม่มี scrollbar (#main-wrapper{overflow:hidden} + body{overflow-x:hidden} ตัดทิ้งหมด) วัดจาก iframe ที่ viewport จริง ก่อนแก้: 1194px -> เมนูโปรไฟล์ (ออกจากระบบ/เปลี่ยนรหัสผ่าน) หลุดจอ 994px -> + ไอคอน admin ทั้งแถบหลุดจอ 894px -> + เมนูโมดูล "ขนส่ง" กับ "ข้อมูล" หลุดจอ ทุกความกว้าง canScroll=false = ไม่มีทางไปถึงเลย ต้นเหตุ: .navbar-collapse และ ul.navbar-nav มีค่า min-width:auto ซึ่งใน flexbox แปลว่า "ห้ามหดต่ำกว่าขนาดเนื้อหา" มันจึงล้นออกนอกจอ แทนที่จะหดตัว แก้โดยปลด min-width แล้วให้ "แถวเมนูโมดูล" เป็นตัวที่หดและเลื่อนแทน ส่วนไอคอน admin กับเมนูโปรไฟล์ (กลุ่มขวา) จะอยู่ครบเสมอ วิธีนี้ทำงานทุกความกว้างโดยไม่ต้องแตะ breakpoint และไม่เปลี่ยนอะไร ที่จอกว้าง (1470px วัดแล้วเหมือนเดิมทุกอย่าง) ตรวจแล้วว่าแผงเมนู mega ไม่ถูก overflow ของ ul ตัด เพราะ .topbar .mega-dropdown{position:static} (style.css:13790) ทำให้ .dropdown-menu ยึด containing block กับ .topbar ที่ position:relative ไม่ใช่ ul จึงหลุดออกนอก clipping context ได้ (ยืนยันด้วย elementFromPoint: ลิงก์ในแผง 12/12 กดได้จริง + ดูภาพแล้ว) ทดสอบผ่านที่ viewport 1194 / 994 / 894 / 794 / 694 (โหมด hamburger) -------------------------------------------------------------------------- */ .topbar .navbar-collapse { min-width: 0; } .topbar .navbar-collapse > ul.navbar-nav.me-auto { min-width: 0; flex-wrap: nowrap; overflow-x: auto; /* scrollbar บาง ๆ ให้รู้ว่าเลื่อนได้ โดยไม่กินพื้นที่ topbar */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; } .topbar .navbar-collapse > ul.navbar-nav.me-auto::-webkit-scrollbar { height: 4px; } .topbar .navbar-collapse > ul.navbar-nav.me-auto::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 2px; } .topbar .navbar-collapse > ul.navbar-nav.me-auto::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- [11] ลูกศร