/* * ═══════════════════════════════════════════════════════════ * global-overrides.css * ใช้ได้กับทุกหน้าในระบบ — link ใน top-menu.php หรือทุก page * * วิธีใช้: เพิ่ม 1 บรรทัดนี้ใน ทุกหน้า (หรือใน top-menu.php) * * ** ต้องวางหลัง templatemo-style.css และ bootstrap.min.css ** * ═══════════════════════════════════════════════════════════ * * หลักการ: เพิ่ม font +2 ระดับจากเดิม * 10px → 13px | 11px → 14px | 12px → 15px * 13px → 16px | 14px → 17px | 15px → 18px * Base body: 16px (Bootstrap default 14px → 16px) * ═══════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────── 1. GLOBAL BASE ──────────────────────────────────────────── */ html { font-size: 16px; } body { font-size: 16px !important; } /* ──────────────────────────────────────────── 2. NAVBAR / TOP NAVIGATION ──────────────────────────────────────────── */ .custom-navbar .navbar-brand { font-size: 32px !important; /* 28 → 32 */ } .custom-navbar .nav li a { font-size: 15px !important; /* 13 → 15 */ } .custom-navbar .dropdown-menu > li > a { font-size: 14px !important; /* 12 → 14 */ padding: 13px 20px !important; } .templatemo-btn-signin { font-size: 14px !important; /* 12 → 14 */ padding: 9px 20px !important; } /* ──────────────────────────────────────────── 3. TOP BAR (dash-topbar) — ทุกหน้า dashboard ──────────────────────────────────────────── */ .dash-topbar { padding: 26px 40px 30px !important; font-family: 'Montserrat', 'Kanit', sans-serif !important; /* เพิ่ม */ } .dash-topbar .welcome-text .greeting { font-size: 13px !important; font-family: 'Montserrat', 'Kanit', sans-serif !important; /* เพิ่ม */ } .dash-topbar .welcome-text { font-size: 18px !important; font-family: 'Montserrat', 'Kanit', sans-serif !important; /* เพิ่ม */ } /* ──────────────────────────────────────────── 4. MAIN CONTENT WRAPPER ──────────────────────────────────────────── */ .dash-content { padding: 40px 36px 64px !important; max-width: 1200px !important; } /* ──────────────────────────────────────────── 5. SECTION TITLE (dash-section-title) ──────────────────────────────────────────── */ .dash-section-title { font-size: 13px !important; /* 11 → 13 */ letter-spacing: 2px !important; margin-bottom: 22px !important; margin-top: 10px !important; } /* ──────────────────────────────────────────── 6. SECTION LABEL (ป้ายหัวข้อย่อย) ──────────────────────────────────────────── */ .section-label { font-size: 13px !important; /* 11 → 13 */ letter-spacing: 1.5px !important; margin: 28px 0 16px !important; } /* ──────────────────────────────────────────── 7. MENU CARDS (หน้า manage, dashboard — vertical style) ──────────────────────────────────────────── */ .menu-card .card-icon { width: 58px !important; height: 58px !important; } .menu-card .card-icon .fa { font-size: 26px !important; /* 22 → 26 */ } .menu-card .card-label { font-size: 14px !important; /* 12 → 14 */ letter-spacing: 1px !important; } .menu-card { padding: 32px 18px 28px !important; min-width: 160px !important; } /* ── Participant Nav Cards (vertical card style) ── ใช้ class .participant-nav-card แทน .menu-card เพื่อไม่ให้ชนกับ vertical menu card ด้านบน */ a.participant-nav-card { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 22px 24px 18px !important; min-width: 200px !important; width: 200px !important; border-radius: 10px; border: 1px solid #e8edf3; background: #f7f9fc; color: #5a6f84 !important; font-family: inherit; font-size: 13px !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; transition: all 0.18s; line-height: 1.3; } a.participant-nav-card:hover { background: #eff8ff; border-color: #55acee; color: #55acee !important; text-decoration: none !important; } a.participant-nav-card.active { background: #b3d9f7; border-color: #7ec4ef; color: #5a6f84 !important; } a.participant-nav-card .card-icon { width: 44px !important; height: 44px !important; border-radius: 10px; background: rgba(85, 172, 238, 0.12); display: flex !important; align-items: center !important; justify-content: center !important; } a.participant-nav-card.active .card-icon { background: rgba(255, 255, 255, 0.25); } a.participant-nav-card .card-icon .fa { font-size: 18px !important; color: #55acee; } a.participant-nav-card.active .card-icon .fa { color: #fff; } a.participant-nav-card .card-label { font-size: 13px !important; letter-spacing: 0 !important; } /* ──────────────────────────────────────────── 8. CONF NAV CARD (manage-conf / reviewers ฯลฯ) ──────────────────────────────────────────── */ .conf-nav-item { padding: 20px 14px !important; } .conf-nav-icon { width: 46px !important; height: 46px !important; border-radius: 12px !important; } .conf-nav-icon .fa { font-size: 18px !important; /* 16 → 18 */ } .conf-nav-label { font-size: 12px !important; /* 10 → 12 */ display: block !important; } /* ──────────────────────────────────────────── 9. CONFERENCE PANEL ──────────────────────────────────────────── */ .conf-panel-header { padding: 26px 32px !important; } .conf-panel-header .panel-title { font-size: 18px !important; /* 15 → 18 */ } .conf-panel-header p { font-size: 14px !important; /* 12 → 14 */ } /* ──────────────────────────────────────────── 10. BUTTONS — create / primary actions ──────────────────────────────────────────── */ .btn-create-conf { font-size: 14px !important; /* 12 → 14 */ padding: 13px 26px !important; border-radius: 28px !important; } /* ──────────────────────────────────────────── 11. FORM LABELS ──────────────────────────────────────────── */ .form-group label { font-size: 14px !important; /* 11-12 → 14 */ letter-spacing: 0.6px !important; margin-bottom: 8px !important; text-transform: none !important; /* ยกเลิก ALL CAPS ที่อ่านยาก */ } /* ──────────────────────────────────────────── 12. FORM CONTROLS (inputs, selects, textareas) ──────────────────────────────────────────── */ .form-control { font-size: 15px !important; /* 13 → 15 */ height: 50px !important; padding: 12px 16px !important; border-radius: 10px !important; } .form-control::placeholder { font-size: 14px !important; /* 12 → 14 */ } textarea.form-control { height: auto !important; min-height: 110px !important; } .input-icon-wrap .form-control { padding-left: 44px !important; } .input-icon-wrap .fa { font-size: 16px !important; left: 15px !important; } /* ──────────────────────────────────────────── 13. REQUIRED NOTE + HELPER TEXT ──────────────────────────────────────────── */ .required-note { font-size: 13px !important; /* 11 → 13 */ } .row-gap { margin-bottom: 22px !important; } /* ──────────────────────────────────────────── 14. ALERT MESSAGES ──────────────────────────────────────────── */ .alert-custom { font-size: 15px !important; /* 13 → 15 */ padding: 14px 20px !important; border-radius: 10px !important; } /* ──────────────────────────────────────────── 15. REGISTER PAGE ──────────────────────────────────────────── */ .register-header h2 { font-size: 52px !important; } .register-header h4 { font-size: 18px !important; } .register-body { padding: 12px 44px 44px !important; } .btn-register { font-size: 15px !important; /* 13 → 15 */ height: 54px !important; letter-spacing: 1.8px !important; } .login-link { font-size: 14px !important; /* 12 → 14 */ } .pw-strength-label { font-size: 12px !important; /* 10 → 12 */ } /* ──────────────────────────────────────────── 16. EMPTY STATE ──────────────────────────────────────────── */ .empty-state .empty-title { font-size: 18px !important; /* 16 → 18 */ } .empty-state .empty-desc { font-size: 15px !important; /* 13 → 15 */ max-width: 380px !important; } /* ──────────────────────────────────────────── 17. BREADCRUMB ──────────────────────────────────────────── */ .create-conf-wrapper > p, .dash-content > p { font-size: 14px !important; /* 12 → 14 */ } /* ──────────────────────────────────────────── 18. STAT CARDS (หน้า reviewers / submissions) ──────────────────────────────────────────── */ .stat-card-number, .stat-number { font-size: 34px !important; } .stat-card-label, .stat-label { font-size: 13px !important; /* 11 → 13 */ letter-spacing: 1.2px !important; } .stat-card-icon .fa, .stat-icon .fa { font-size: 26px !important; } /* ──────────────────────────────────────────── 19. TABLE (reviewer list, submission list) ──────────────────────────────────────────── */ .table, .table td, .table th { font-size: 15px !important; /* 13 → 15 */ } .table th { font-size: 13px !important; /* 11 → 13 */ letter-spacing: 0.8px !important; } .table td, .table th { padding: 12px 16px !important; } /* ──────────────────────────────────────────── 20. BADGES / STATUS PILLS ──────────────────────────────────────────── */ .badge-status, .status-pill, .label { font-size: 13px !important; /* 11 → 13 */ padding: 5px 12px !important; } /* ──────────────────────────────────────────── 21. FILTER / TAB BUTTONS (All / Active / Pending) ──────────────────────────────────────────── */ .filter-btn, .tab-pill { font-size: 14px !important; /* 12 → 14 */ padding: 8px 18px !important; border-radius: 22px !important; } /* ──────────────────────────────────────────── 22. SEARCH BOX ──────────────────────────────────────────── */ .search-box input, .search-input { font-size: 15px !important; padding: 12px 16px 12px 44px !important; } .search-box .btn, .btn-search { font-size: 14px !important; padding: 12px 24px !important; } /* ──────────────────────────────────────────── 23. PANEL HEADER TITLE (Add Reviewer, Reviewer List ฯลฯ) ──────────────────────────────────────────── */ .panel-section-title, .section-header-title { font-size: 18px !important; /* 15-16 → 18 */ font-weight: 700 !important; } .panel-section-subtitle, .section-header-sub { font-size: 14px !important; /* 12 → 14 */ } /* ──────────────────────────────────────────── 24. LOCK / WARNING BANNERS ──────────────────────────────────────────── */ .lock-banner__body strong { font-size: 16px !important; } .lock-banner__body p { font-size: 14px !important; } .lock-banner__icon { font-size: 28px !important; } /* ──────────────────────────────────────────── 25. MANAGE-CONF SPECIFIC (step wizard) ──────────────────────────────────────────── */ .create-conf-wrapper { max-width: 1200px !important; margin: 36px auto 60px !important; padding: 0 28px !important; } .step-circle { width: 48px !important; height: 48px !important; font-size: 15px !important; } .step-label { font-size: 12px !important; max-width: 96px !important; display: block !important; } .stepper::before, #stepProgress { top: 24px !important; } .step-card-header { padding: 26px 36px !important; } .step-card-header .step-icon { width: 52px !important; height: 52px !important; } .step-card-header .step-icon .fa { font-size: 22px !important; } .step-card-header .step-num { font-size: 12px !important; letter-spacing: 1.8px !important; } .step-card-header .step-title { font-size: 20px !important; } .step-card-body { padding: 32px 36px 28px !important; } .step-nav { padding: 22px 36px 30px !important; } .btn-prev, .btn-next, .btn-submit { font-size: 14px !important; padding: 13px 30px !important; border-radius: 28px !important; } .step-counter { font-size: 13px !important; } .radio-pill span, .check-pill span { font-size: 14px !important; padding: 9px 20px !important; } .reviewer-btn { width: 60px !important; height: 60px !important; font-size: 20px !important; } .tracks-list li { font-size: 15px !important; padding: 12px 16px !important; } .btn-add-track { font-size: 14px !important; height: 52px !important; padding: 0 24px !important; } .upload-box strong { font-size: 15px !important; } .upload-box p { font-size: 14px !important; } .phone-code-select { font-size: 14px !important; width: 100px !important; } .phone-number-input { font-size: 15px !important; } .url-generate-box { font-size: 14px !important; } .url-generate-box .generated-url { font-size: 15px !important; } /* ──────────────────────────────────────────── 26. FOOTER ──────────────────────────────────────────── */ footer p { font-size: 14px !important; /* 12ish → 14 */ } /* ──────────────────────────────────────────── 27. RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 1024px) { .create-conf-wrapper { max-width: 100% !important; padding: 0 20px !important; } .dash-content { max-width: 100% !important; padding: 32px 24px 48px !important; } } @media (max-width: 767px) { .create-conf-wrapper { padding: 0 14px !important; margin-top: 20px !important; } .step-card-body { padding: 22px 18px !important; } .step-card-header { padding: 20px 18px !important; } .step-nav { padding: 18px !important; } .dash-topbar { padding: 20px 16px !important; } .dash-content { padding: 24px 16px 40px !important; } .conf-nav-label { display: none !important; } /* mobile: icon only */ .step-label { display: none !important; } .menu-card { min-width: calc(50% - 8px) !important; flex: none !important; } a.participant-nav-card { flex: 1 1 calc(50% - 8px) !important; justify-content: center; } .form-control { font-size: 16px !important; } /* prevent iOS zoom */ } @media (max-width: 480px) { .menu-card { min-width: calc(50% - 8px) !important; } }