@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700;800&display=swap'); /* ========================================================================== DekEnHUB — ชั้นธีมกลางฝั่งลูกค้า (โหลดทุกหน้าผ่าน views/global/v_meta.ejs) ทับบน atom.css โดยไม่แตะโครงสร้าง HTML เดิม ชุดสี/ฟอนต์/ทรงการ์ด อ้างอิงแอปหลังบ้านเด็กเอ็น (idol_front/views/app.ejs) หน้าแรกมีชั้นเสริมของตัวเองอีกไฟล์: public/css/home-refresh.css (โหลดทีหลัง) ========================================================================== */ :root{ /* ชุดสีเดียวกับหน้าเข้าสู่ระบบและแอปหลังบ้านเด็กเอ็นเป๊ะ ๆ ทั้งระบบจะได้โทนเดียวกัน ที่ไม่เอาคือ "สีน้ำเงินที่เป็นสีเน้น" ของธีมเก่า (#67679e, ปุ่มไล่สีชมพู-ฟ้า) ไม่ใช่พื้นชุดนี้ */ /* ตัวอักษรเป็นดำ/เทากลาง ไม่อมน้ำเงิน (ของเดิม #26244B เป็นม่วงอมกรมท่า พอใช้กับตัวหนา ๆ จะเห็นเป็นน้ำเงินชัด) พื้นหลังกับสีเน้นยังเป็นชุดเดียวกับหน้าล็อกอิน */ --dh-ink:#1F1F1F; --dh-ink-soft:#4A4A4A; --dh-muted:#8C8C8C; --dh-line:#E7E9F3; --dh-bg:#F4F5FA; --dh-card:#fff; --dh-brand:#FF6B2C; --dh-grad:linear-gradient(130deg,#FF8E3C,#FF4E6B); --dh-shadow:0 8px 22px rgba(38,36,75,.07); --dh-shadow-lg:0 16px 38px rgba(38,36,75,.14); } /* ฟอนต์ Prompt ไม่เคยถูกโหลดในฝั่งลูกค้ามาก่อน (v_meta โหลดแค่ Bootstrap) ทุกกฎที่เขียน font-family:'Prompt' ไว้จึงตกกลับไปใช้ kanitregular ของธีมเดิมเงียบ ๆ */ html,body{background:var(--dh-bg) !important;color:var(--dh-ink) !important; font-family:'Prompt',sans-serif !important;} .dh-search,.dh-search *,.dh-bottom,.dh-bottom *, .navbar,.navbar *,.search-form,.search-form *, .home-idol,.home-idol *,.category-item{font-family:'Prompt',sans-serif !important;} main,main.container-fluid,.container,.container-fluid{background:transparent !important;} .navbar,nav.navbar{background:var(--dh-bg) !important;box-shadow:none !important;border:none !important;} /* ---------- คำไฮไลต์ → ไล่สีส้ม-ชมพู ---------- */ .banner .txt-hiligh, .txt-hiligh, .brand-hiligh, font[style*="f77b00"]{ background-image:var(--dh-grad) !important; -webkit-background-clip:text !important;background-clip:text !important; color:transparent !important;-webkit-text-fill-color:transparent !important; font-weight:800; } /* ---------- ล้างสีน้ำเงินที่ติดมากับธีมเดิม ---------- */ .home-search-header,.nav-info .name,.nav-info .number, .category-item,.home-idol-des,.home-idol-des label, .des-region h2,.des-region .head{color:var(--dh-ink) !important;} .idol-input-box .region,.idol-check-group .region{border-color:var(--dh-line) !important;} /* ---------- ฟอนต์: บังคับ Prompt ทั้งหน้า ---------- atom.css ตั้ง kanitregular ไว้ที่ body และตั้งซ้ำอีกทีในหลายคอมโพเนนต์ ประกาศที่ body อย่างเดียวจึงไม่พอ ต้องกวาดทุก element */ body,body *:not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]){ font-family:'Prompt',sans-serif !important; } /* ---------- ปุ่มสลับธีมมืดบนแถบเมนู ---------- ธีมมืดของเดิม (.dark ใน atom.css) ยังเป็นชุดสีเก่าทั้งชุด พอมาอยู่บนธีมใหม่ จะได้หน้าเทา-ดำที่ไม่มีใครออกแบบไว้ ปิดสวิตช์ทิ้งและบังคับสว่างที่ atom.js */ .nav-link.theme-holder,.navbar .theme-holder{display:none !important;} /* ========================================================================== แถบเมนูด้านบน ========================================================================== */ /* ========================================================================== เมนูด้านบน — คงพฤติกรรมเดิม (Bootstrap collapse สไลด์ลง) และ "หน้าตาแบบเดิม" คือรายการเปล่า ๆ ไม่มีการ์ดครอบ ไม่มีไอคอน แค่ปรับสีให้เข้าธีมและตัวใหญ่ขึ้น ========================================================================== */ /* ปุ่มสามขีด — ตามดีไซน์: วงกลมขาว 42px เงานุ่มบาง ๆ ขีดสามเส้นยาวไม่เท่ากัน ของเดิมเป็นไฟล์ภาพที่มีเงาฟุ้งอบมาในรูป ลบด้วย CSS ไม่ได้ เลยวาดใหม่เป็น SVG */ /* หมายเหตุ: ห้ามใส่ display:flex !important แบบไม่จำกัดจอ Bootstrap (navbar-expand-md) ซ่อนปุ่มนี้ตั้งแต่ 768px ขึ้นไป ถ้าไปทับมันจะโผล่ มาซ้อนกับโลโก้บนจอคอม */ .navbar-toggler{ width:50px !important;height:50px !important;padding:0 !important;flex:none; align-items:center;justify-content:center; background:#fff !important;border:none !important;border-radius:50% !important; box-shadow:0 4px 14px rgba(38,36,75,.08) !important; } @media (max-width:767.98px){ .navbar-toggler{display:flex !important;} } .navbar-toggler:focus,.navbar-toggler:active{box-shadow:0 4px 14px rgba(38,36,75,.08) !important;outline:none !important;} .navbar-toggler-icon{ width:21px !important;height:16px !important;margin:0 !important;filter:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M1 1h16M1 7h11M1 13h16' stroke='%2326244B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-size:21px 16px !important;background-position:center !important;background-repeat:no-repeat !important; } /* ระยะแถบบน — เทียบของเก่า: โลโก้ใหญ่กว่านี้ ลงมาอีกนิด ชิดซ้ายอีกนิด */ .navbar{padding-top:24px !important;padding-bottom:12px !important;} .navbar > .container-fluid{align-items:center;} @media (min-width:768px){ .navbar{padding-top:14px !important;padding-bottom:10px !important;} } /* ========================================================================== เมนูมือถือ — ชีทสไลด์ลงจากใต้แถบบน (ลอกจากชีทเมนูของแอปฝั่งเด็ก แต่กลับทิศ) ตัวสไลด์ถูกครอบด้วย .dh-sheet-clip ที่ overflow:hidden ตอนปิดจึงซ่อนพ้นขอบบน ========================================================================== */ @media (min-width:768px){ /* จอคอม: ให้ตัวครอบหายไปจากผัง เมนูจะได้เป็นลูกตรงของแถบเหมือนเดิม */ .dh-sheet-clip{display:contents;} .dh-menu-back{display:none !important;} } @media (max-width:767.98px){ .dh-sheet-clip{ /* ดึงขึ้นทับขอบล่างแถบบน 1px — ความสูงแถบเป็นเศษทศนิยม วางที่ 100% พอดีเป๊ะ จะเหลือร่องไม่ถึงพิกเซลให้เห็นฉากหลังทึบ (.dh-menu-back) เป็นเส้นเข้มคาดใต้แถบ */ position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:5; overflow:hidden;pointer-events:none;padding:0 0 26px; } .navbar .navbar-collapse{ display:block !important;height:auto !important;visibility:visible !important; background:#fff !important;border-radius:0 0 28px 28px !important; /* ตอนปิด ตัวชีทถูกดันขึ้นไปพ้นขอบบนของตัวครอบแล้ว แต่ "เงา" ของมันยังทอดลงมาในกรอบ เห็นเป็นแถบเทาคาดใต้แถบเมนูตลอดเวลา ต้องเปิดเงาเฉพาะตอนกางออกมา */ box-shadow:none !important; /* ระยะบนน้อยกว่าข้าง — การ์ดเงินจะได้ไม่ลอยห่างจากแถบบนจนดูโหวง */ /* padding ข้าง 20px = ระยะขอบซ้าย/ขวาของการ์ดเงิน ต้องเท่ากับช่องกลางที่คำนวณไว้ที่ .profile-head-btn */ padding:0 20px max(16px,env(safe-area-inset-bottom)) !important; margin:0 !important;pointer-events:none; transform:translateY(-101%); transition:transform .3s cubic-bezier(.32,.72,0,1); will-change:transform; } .navbar .navbar-collapse.dh-open{ transform:translateY(0);pointer-events:auto; box-shadow:0 26px 54px rgba(38,36,75,.20) !important; } /* ขีดจับด้านล่างแบบชีท (ของฝั่งเด็กอยู่บน เพราะมันเลื่อนขึ้น) */ .navbar .navbar-collapse::after{ content:"";display:block;width:44px;height:5px;border-radius:99px; background:#E4E6F0;margin:12px auto 2px; } @media (prefers-reduced-motion:reduce){ .navbar .navbar-collapse{transition:none;} } /* ชุดเมนูของจอคอมที่ปนอยู่ในนี้ ห้ามโผล่บนมือถือ */ .navbar .navbar-collapse .navbar-nav.hide-mobile{display:none !important;} .navbar .navbar-static.hide-mobile{display:none !important;} /* ธีมเดิมซ่อน .hide-desktop ตั้งแต่ 481px แต่ Bootstrap ยังพับเมนูจนถึง 767px ช่วง 481-767px เลยกดสามขีดแล้วได้ชีทเปล่า ๆ ต้องบังคับให้โผล่ */ .navbar .navbar-collapse .dh-sheet{display:flex !important;margin:0 !important;--bs-gutter-x:0;} /* เส้นคั่นบาง ๆ ใต้แถบบน สีเดียวกับเส้นคั่นเหนือปุ่มออกจากระบบ (.dh-sheet-div) ที่ว่างเปล่า ๆ เหนือการ์ดเงินดูโหวง มีเส้นคั่นแล้วชีทกับแถบบนแยกกันชัดขึ้น */ .navbar .navbar-collapse .dh-sheet{ border-top:1px solid #F1F2F8;padding-top:12px !important; } .navbar .navbar-collapse .dh-sheet > .col-12{padding:0 !important;} /* row ที่ซ้อนอยู่ข้างในมี margin ติดลบ -12px ตามปกติของ Bootstrap ทำให้การ์ดยอดเงินยื่นออกไปชิดขอบชีทกว่ารายการเมนูข้างล่าง ต้องล้างทิ้ง */ .navbar .navbar-collapse .dh-sheet .row{margin-left:0 !important;margin-right:0 !important;--bs-gutter-x:0;} .navbar .navbar-collapse .dh-sheet .row > *{padding-left:0 !important;padding-right:0 !important;} /* การ์ดยอดเงินบนหัวชีท — ตัวเลขต้องอ่านออกจากระยะปกติ ป้ายเป็นตัวรอง */ /* หดการ์ดให้สั้นลง เว้นขอบซ้ายขวาและช่องกลางให้เท่ากันราว 12px */ /* คู่การ์ดขนาดเท่ากัน วางกึ่งกลาง — ให้อยู่แกนเดียวกับรายการเมนูข้างล่างที่จัดกึ่งกลางอยู่แล้ว เคยลองให้กว้างตามเนื้อหาแล้วดันไปคนละฝั่ง สองใบขนาดไม่เท่ากันเลยดูคนละระบบกับเมนู */ /* เคยลอง margin ลบ + space-evenly แล้วช่องออกมาไม่เท่ากันสามช่อง (margin ลบโดนกฎอื่นกิน) วิธีที่ใช้ตอนนี้ไม่พึ่ง margin ลบเลย: ขอบซ้าย/ขวามาจาก padding 20px ของชีทตรง ๆ ส่วนช่องกลางมาจากความกว้างการ์ดที่หักไว้ให้เหลือ 20px พอดี */ .navbar .navbar-collapse .profile-btn-group{ margin:0 0 8px !important;padding:0 !important; /* จัดกึ่งกลางเป็นคู่ ห่างกัน 20px — การ์ดเงินเลยขยับไปทางขวา ปุ่มเติมเงินขยับมาทางซ้าย ที่เหลือกลายเป็นขอบสองข้างเท่ากันเองโดยไม่ต้องคำนวณ */ gap:20px !important;justify-content:center !important; } /* ย่อการ์ดลงให้น้ำหนักใกล้เคียงรายการเมนูข้างล่าง (ตัวอักษร 14.5px ระยะ 11px) ของเดิมการ์ดตัวใหญ่กว่ามาก มองแล้วเหมือนคนละหน้ากัน */ /* เนื้อในการ์ดจัดกึ่งกลาง ของเดิมชิดซ้ายทั้งสองใบเลยดูเทน้ำหนักไปข้างเดียว */ .navbar .navbar-collapse .profile-head-btn{ padding:15px 12px !important;border-radius:14px !important; justify-content:center !important;text-align:center;gap:8px !important; /* ครึ่งหนึ่งของแถว ลบครึ่งของช่องกลาง (20px) — สองใบกว้างเท่ากันเป๊ะเสมอ ไม่ว่ายอดเงินจะยาวแค่ไหน และช่องกลางออกมา 20px เท่าขอบซ้าย/ขวาพอดี */ flex:0 0 calc(50% - 32px) !important;max-width:calc(50% - 32px) !important; /* หดการ์ดแล้วต้องลดระยะข้างในตามด้วย ไม่งั้นยอดเงิน (nowrap) จะไปชนขอบการ์ด */ padding-left:10px !important;padding-right:10px !important; } .navbar .navbar-collapse #cus-money{align-items:center;} .navbar .navbar-collapse .profile-head-btn .ico{height:30px !important;width:30px !important;padding:6px;border-radius:10px;} .navbar .navbar-collapse #cus-money{display:flex;flex-direction:column;line-height:1.25;} .navbar .navbar-collapse #cus-money .k{ font-size:11px !important;font-weight:600;color:var(--dh-muted) !important; } .navbar .navbar-collapse #cus-money .v{ font-size:16px !important;font-weight:800;color:var(--dh-ink) !important; letter-spacing:-.3px;white-space:nowrap; } /* ปุ่มเติมเงินมีบรรทัดเดียว ข้างในเลยดูโล่งกว่าการ์ดเงินที่มีสองบรรทัด ขยายเฉพาะไอคอนกับตัวหนังสือของปุ่มนี้ ตัวการ์ดยังกว้างเท่าเดิมทั้งคู่ */ .navbar .navbar-collapse .profile-head-btn[href="/refill"] p{font-size:16.5px !important;} .navbar .navbar-collapse .profile-head-btn[href="/refill"] .ico{ height:36px !important;width:36px !important;padding:7px;border-radius:11px; } } /* ตอนกางเมนู แถบบนต้องเป็นขาวเท่าชีท ไม่งั้นเห็นเป็นสองแผ่นคนละสีต่อกัน */ @media (max-width:767.98px){ .navbar,nav.navbar{transition:background .22s ease;} body.dh-menu-open .navbar,body.dh-menu-open nav.navbar{background:#fff !important;} } /* ฉากหลังทึบ — อยู่นอก