/* ═══════════════════════════════════════════════════════════════════════════ NJ-MOBILE.CSS v1.0 — Universal Mobile Overrides for NanaJung ═══════════════════════════════════════════════════════════════════════════ ใช้ร่วมกันทุก subdomain ของ nanajung.com ต้องใช้คู่กับ nj-device.js (ใส่ .nj-mobile class บน ) โหลดหลัง theme-variables.css, theme-clearsky.css โหลดก่อน component CSS เฉพาะหน้า (feed.css, nj-app.css, etc.) CSS stack: 1. theme-variables.css (colors, spacing) 2. theme-clearsky.css (theme colors) 3. nj-mobile.css ← ไฟล์นี้ 4. feed.css / nj-app.css / sapanbun.css (component) Selector convention: .nj-mobile .xxx { } → mobile phone .nj-tablet .xxx { } → tablet (optional) .nj-desktop .xxx { } → desktop (optional) Font scale: ใช้ --fs-* variables ที่ nj-device.js set ให้ ═══════════════════════════════════════════════════════════════════════════ */ /* ── Prevent horizontal overflow on all devices ── */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100vw; } /* Force all elements to border-box on mobile to prevent width blowout */ .nj-mobile, .nj-mobile *, .nj-mobile *::before, .nj-mobile *::after { box-sizing: border-box !important; } .nj-mobile .feed-layout, .nj-mobile .nj-app-main, .nj-mobile main { max-width: 100vw !important; overflow-x: hidden !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 1: Global Mobile Font Reset ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile { font-size: var(--fs-base) !important; line-height: 1.6 !important; } .nj-mobile * { -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } .nj-mobile p, .nj-mobile span, .nj-mobile li, .nj-mobile td, .nj-mobile th, .nj-mobile label, .nj-mobile div { font-size: inherit; } .nj-mobile h1 { font-size: var(--fs-2xl) !important; } .nj-mobile h2 { font-size: var(--fs-xl) !important; } .nj-mobile h3 { font-size: var(--fs-lg) !important; } .nj-mobile h4 { font-size: var(--fs-md) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 2: App Header (.nj-app-header) — used by nj-app.css pages ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-app-header { height: auto !important; min-height: calc(40px * var(--nj-scale, 1)) !important; } .nj-mobile .nj-app-header-inner { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px; } .nj-mobile .nj-app-logo { font-size: var(--fs-lg) !important; } .nj-mobile .nj-app-logo span:first-child { font-size: var(--fs-xl) !important; } .nj-mobile .nj-app-back { font-size: var(--fs-sm) !important; padding: 10px 16px !important; border-radius: 12px !important; } .nj-mobile .nj-app-header-actions { gap: 8px !important; } .nj-mobile .nj-app-header-actions .btn, .nj-mobile .nj-app-header-actions a { font-size: var(--fs-sm) !important; padding: 10px 16px !important; } .nj-mobile .nj-app-hamburger { display: flex !important; width: calc(28px * var(--nj-scale, 1)) !important; height: calc(28px * var(--nj-scale, 1)) !important; font-size: var(--fs-xl) !important; border-radius: calc(6px * var(--nj-scale, 1)) !important; } .nj-mobile .nj-app-header-nav { display: none !important; } .nj-mobile .nj-app-header-nav.mobile-open { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-light); padding: var(--space-sm); box-shadow: var(--shadow-md); } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 3: Feed Header (.main-header) — used by feed.css pages ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .main-header { height: auto !important; min-height: calc(48px * var(--nj-scale, 1)) !important; } .nj-mobile .main-header-inner { padding: 8px 12px !important; flex-wrap: wrap; gap: 6px; } .nj-mobile .header-left { gap: 8px !important; } .nj-mobile .header-logo { font-size: var(--fs-lg) !important; white-space: nowrap; } .nj-mobile .header-search { display: none !important; } .nj-mobile .header-right { gap: 6px !important; } .nj-mobile .header-icon-btn { width: calc(32px * var(--nj-scale, 1)) !important; height: calc(32px * var(--nj-scale, 1)) !important; font-size: var(--fs-xl) !important; border-radius: calc(6px * var(--nj-scale, 1)) !important; } .nj-mobile .header-avatar { width: calc(32px * var(--nj-scale, 1)) !important; height: calc(32px * var(--nj-scale, 1)) !important; } .nj-mobile .header-profile-name { display: none !important; } .nj-mobile .btn-login { font-size: var(--fs-sm) !important; padding: 10px 20px !important; white-space: nowrap; } .nj-mobile .mobile-menu-toggle { display: flex !important; align-items: center; justify-content: center; font-size: var(--fs-xl) !important; width: calc(32px * var(--nj-scale, 1)) !important; height: calc(32px * var(--nj-scale, 1)) !important; background: var(--bg-secondary) !important; border: 1px solid var(--border-light) !important; border-radius: calc(6px * var(--nj-scale, 1)) !important; color: var(--text-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 4: App Main Content ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-app-main { padding: var(--space-md) var(--space-sm) !important; max-width: 100% !important; } .nj-mobile .nj-app-page-header { margin-bottom: var(--space-lg) !important; } .nj-mobile .nj-app-page-icon { font-size: var(--fs-2xl) !important; } .nj-mobile .nj-app-page-title { font-size: var(--fs-xl) !important; } .nj-mobile .nj-app-page-subtitle { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 5: Feed Layout (sidebar + grid) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .feed-layout { grid-template-columns: 1fr !important; padding: var(--space-xs) !important; gap: var(--space-sm) !important; min-width: 0 !important; } .nj-mobile .feed-main { min-width: 0 !important; } .nj-mobile .search-box-compact { min-width: 0 !important; } .nj-mobile .guest-prompt-text { min-width: 0 !important; } .nj-mobile .equipment-card { max-width: 100% !important; overflow: hidden !important; } .nj-mobile .equipment-body { min-width: 0 !important; overflow: hidden !important; } .nj-mobile .equipment-name { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Left sidebar → mobile drawer */ .nj-mobile .sidebar-left { display: none !important; position: fixed !important; top: var(--header-height, 60px); left: 0; bottom: 0; width: 85vw; max-width: 800px; background: var(--bg-tertiary); z-index: 999; padding: 20px; border-right: 1px solid var(--border-light); overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; flex-direction: column; } .nj-mobile .sidebar-left.open { display: flex !important; transform: translateX(0); } .nj-mobile .sidebar-left .sidebar-nav-item { font-size: var(--fs-lg) !important; padding: 14px 16px !important; } .nj-mobile .sidebar-left .sidebar-nav-item .icon { font-size: var(--fs-xl) !important; width: 40px; } .nj-mobile .sidebar-left .sidebar-nav-title { font-size: var(--fs-sm) !important; padding: 8px 16px !important; } .nj-mobile .sidebar-left .sidebar-divider { margin: 8px 0 !important; } .nj-mobile .sidebar-left .coming-soon { font-size: var(--fs-xs) !important; } /* Right sidebar → hidden or drawer */ .nj-mobile .sidebar-right { display: none !important; } .nj-mobile .sidebar-right.open { display: flex !important; position: fixed !important; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 800px; background: var(--bg-primary); z-index: 1000; padding: 20px; overflow-y: auto; transform: translateX(0); flex-direction: column; gap: 16px; } /* Right sidebar font overrides */ .nj-mobile .sidebar-right .sidebar-card-title { font-size: var(--fs-lg) !important; } .nj-mobile .sidebar-right .activity-link .al-title { font-size: var(--fs-base) !important; } .nj-mobile .sidebar-right .activity-link .al-desc { font-size: var(--fs-sm) !important; } .nj-mobile .sidebar-right .activity-link .al-icon { font-size: var(--fs-xl) !important; } .nj-mobile .sidebar-right .recent-feed-name { font-size: var(--fs-base) !important; } .nj-mobile .sidebar-right .recent-feed-meta { font-size: var(--fs-sm) !important; } .nj-mobile .sidebar-right a { font-size: var(--fs-sm) !important; } .nj-mobile .sidebar-right .btn { font-size: var(--fs-base) !important; padding: 14px 20px !important; } /* Tablet: 2-column feed */ .nj-tablet .feed-layout { grid-template-columns: 240px 1fr !important; } .nj-tablet .sidebar-right { display: none; } /* Desktop: 3-column feed */ .nj-desktop .feed-layout { grid-template-columns: 280px 1fr 300px !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 6: Mobile Search Bar (below header) ═══════════════════════════════════════════════════════════════════════════ */ .mobile-search-bar { display: none; } .nj-mobile .mobile-search-bar { display: flex !important; align-items: center; padding: 10px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); } .nj-mobile .mobile-search-bar .search-wrapper { position: relative; flex: 1; } .nj-mobile .mobile-search-bar input { width: 100%; padding: 14px 20px; background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: 50px; font-size: var(--fs-base); color: var(--text-primary); outline: none; text-align: center; } .nj-mobile .mobile-search-bar input::placeholder { color: var(--text-muted); } .nj-mobile .mobile-search-bar .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: var(--fs-base); color: var(--text-muted); pointer-events: none; } /* Right sidebar toggle button */ .right-sidebar-toggle { display: none; } .nj-mobile .right-sidebar-toggle { display: flex !important; align-items: center; justify-content: center; width: calc(32px * var(--nj-scale, 1)); height: calc(32px * var(--nj-scale, 1)); background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: calc(6px * var(--nj-scale, 1)); cursor: pointer; font-size: var(--fs-xl); color: var(--text-primary); transition: all 0.2s; } .nj-mobile .right-sidebar-toggle:hover { background: var(--theme-primary); color: white; } /* Sidebar close button */ .sidebar-right-close { display: none; } .nj-mobile .sidebar-right .sidebar-right-close { display: flex !important; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 7: Form Cards & Inputs ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-form-card { padding: var(--space-md) !important; border-radius: 16px !important; } .nj-mobile .nj-form-card-title, .nj-mobile .nj-form-section-title { font-size: var(--fs-md) !important; } .nj-mobile .nj-form-label, .nj-mobile .form-label, .nj-mobile label { font-size: var(--fs-base) !important; } .nj-mobile .nj-form-input, .nj-mobile .nj-form-select, .nj-mobile .nj-form-textarea, .nj-mobile .form-select, .nj-mobile .form-input, .nj-mobile input[type="text"], .nj-mobile input[type="email"], .nj-mobile input[type="tel"], .nj-mobile input[type="number"], .nj-mobile input[type="date"], .nj-mobile input[type="password"], .nj-mobile select, .nj-mobile textarea { font-size: var(--fs-base) !important; padding: 14px 16px !important; border-radius: 12px !important; } .nj-mobile .nj-form-input::placeholder, .nj-mobile .nj-form-textarea::placeholder, .nj-mobile input::placeholder, .nj-mobile textarea::placeholder { font-size: var(--fs-sm) !important; } .nj-mobile .nj-form-hint, .nj-mobile .form-hint { font-size: var(--fs-sm) !important; } .nj-mobile .nj-form-row { grid-template-columns: 1fr !important; } .nj-mobile .nj-form-required { font-size: var(--fs-sm) !important; } .nj-mobile .nj-info-box, .nj-mobile .info-box { font-size: var(--fs-sm) !important; padding: var(--space-md) !important; } .nj-mobile .nj-info-box p, .nj-mobile .info-box p { font-size: var(--fs-sm) !important; } .nj-mobile .form-group { margin-bottom: var(--space-md) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 8: Buttons ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-btn-submit, .nj-mobile .btn-primary, .nj-mobile .btn { font-size: var(--fs-base) !important; padding: 16px 24px !important; border-radius: 14px !important; } .nj-mobile .btn-secondary { font-size: var(--fs-sm) !important; padding: 12px 20px !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 9: Stats Grid ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .nj-mobile .nj-stat-value { font-size: var(--fs-xl) !important; } .nj-mobile .nj-stat-label { font-size: var(--fs-xs) !important; } .nj-mobile .stats-banner { grid-template-columns: repeat(2, 1fr) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 10: Item Cards ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-item-card { flex-direction: column !important; padding: var(--space-md) !important; } .nj-mobile .nj-item-icon { width: calc(28px * var(--nj-scale, 1)) !important; height: calc(28px * var(--nj-scale, 1)) !important; font-size: var(--fs-xl) !important; } .nj-mobile .nj-item-name { font-size: var(--fs-base) !important; } .nj-mobile .nj-item-meta { font-size: var(--fs-xs) !important; } .nj-mobile .nj-item-header { flex-direction: column !important; align-items: flex-start !important; } .nj-mobile .item-status { font-size: var(--fs-xs) !important; padding: 6px 14px !important; } .nj-mobile .nj-item-actions { gap: 8px !important; } .nj-mobile .nj-item-actions .btn { font-size: var(--fs-xs) !important; padding: 10px 14px !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 11: Equipment Detail ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-equip-detail { grid-template-columns: 1fr !important; } .nj-mobile .image-gallery .main-image, .nj-mobile .nj-equip-gallery .main-image { height: 250px !important; font-size: var(--fs-2xl) !important; } .nj-mobile .nj-equip-name { font-size: var(--fs-lg) !important; } .nj-mobile .nj-equip-desc, .nj-mobile .nj-equip-meta { font-size: var(--fs-sm) !important; } .nj-mobile .nj-equip-preview { flex-direction: column !important; text-align: center !important; } .nj-mobile .nj-equip-preview-icon { font-size: var(--fs-2xl) !important; } .nj-mobile .nj-equip-preview-name { font-size: var(--fs-base) !important; } .nj-mobile .nj-equip-preview-meta { font-size: var(--fs-xs) !important; } .nj-mobile .nj-equip-status { font-size: var(--fs-sm) !important; gap: 12px !important; } .nj-mobile .nj-equip-status .label { font-size: var(--fs-xs) !important; } .nj-mobile .nj-equip-status .value { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 12: State Screens (loading, error, empty) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-state-screen { padding: var(--space-xl) var(--space-md) !important; } .nj-mobile .nj-state-icon, .nj-mobile .nj-state-loading-icon { font-size: var(--fs-2xl) !important; } .nj-mobile .nj-state-title { font-size: var(--fs-lg) !important; } .nj-mobile .nj-state-desc { font-size: var(--fs-sm) !important; } .nj-mobile .nj-state-loading p { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 13: Tabs ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; } .nj-mobile .nj-tab { flex-shrink: 0 !important; font-size: var(--fs-sm) !important; padding: 12px 20px !important; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 14: Filter Row ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-filter-row { flex-direction: column !important; } .nj-mobile .nj-filter-btn { font-size: var(--fs-sm) !important; padding: 12px 16px !important; justify-content: center !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 15: Tables ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-table-wrap { font-size: var(--fs-xs) !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .nj-mobile .nj-data-table th, .nj-mobile .nj-data-table td { padding: 10px !important; font-size: var(--fs-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 16: Modal ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-modal-overlay { padding: 0 !important; align-items: flex-end !important; } .nj-mobile .nj-modal { max-width: 100% !important; width: 100% !important; max-height: 95vh !important; border-radius: 24px 24px 0 0 !important; } .nj-mobile .nj-modal-header { font-size: var(--fs-lg) !important; padding: 16px 20px !important; } .nj-mobile .nj-modal-body { padding: 20px !important; font-size: var(--fs-sm) !important; } .nj-mobile .nj-modal-close { width: calc(24px * var(--nj-scale, 1)) !important; height: calc(24px * var(--nj-scale, 1)) !important; font-size: var(--fs-lg) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 17: Admin Sidebar ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-admin-sidebar { width: 85vw !important; max-width: 700px !important; left: -85vw !important; } .nj-mobile .nj-admin-sidebar.open { left: 0 !important; } .nj-mobile .nj-admin-nav a { font-size: var(--fs-base) !important; padding: 14px 16px !important; } .nj-mobile .nj-admin-nav-icon { font-size: var(--fs-lg) !important; } .nj-mobile .nj-admin-page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .nj-mobile .nj-admin-page-title { font-size: var(--fs-lg) !important; } .nj-mobile .nj-admin-main { padding: var(--space-md) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 18: Image Upload ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-image-upload-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .nj-mobile .nj-image-upload-item { min-height: 100px !important; } .nj-mobile .nj-image-upload-dropzone { padding: var(--space-lg) var(--space-md) !important; } .nj-mobile .nj-image-upload-dropzone p { font-size: var(--fs-sm) !important; } .nj-mobile .upload-icon { font-size: var(--fs-xl) !important; } .nj-mobile .upload-text { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 19: Rating Stars & Condition Options ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-rating-stars label { font-size: var(--fs-2xl) !important; } .nj-mobile .condition-options { gap: 10px !important; } .nj-mobile .condition-option { padding: var(--space-md) !important; gap: 12px !important; } .nj-mobile .condition-radio { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; } .nj-mobile .condition-option.selected .condition-radio::after { width: 20px !important; height: 20px !important; } .nj-mobile .condition-label { font-size: var(--fs-base) !important; } .nj-mobile .condition-label .stars { font-size: var(--fs-base) !important; } .nj-mobile .condition-label .name { font-size: var(--fs-base) !important; font-weight: 600 !important; } .nj-mobile .condition-label .desc, .nj-mobile .condition-desc { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 20: Toast Notification ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-toast { right: 12px !important; left: 12px !important; max-width: none !important; font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 21: Footer ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-app-footer { padding: var(--space-lg) var(--space-md) !important; } .nj-mobile .nj-app-footer-links { gap: var(--space-sm) !important; flex-wrap: wrap !important; justify-content: center !important; } .nj-mobile .nj-app-footer-links a { font-size: var(--fs-sm) !important; } .nj-mobile .nj-app-footer p { font-size: var(--fs-sm) !important; } .nj-mobile .community-footer { font-size: var(--fs-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 22: Volunteer Page ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .nj-volunteer-header { padding: var(--space-md) !important; } .nj-mobile .nj-volunteer-header h1 { font-size: var(--fs-xl) !important; } .nj-mobile .nj-volunteer-header p { font-size: var(--fs-sm) !important; } .nj-mobile .volunteer-stats { grid-template-columns: repeat(2, 1fr) !important; } .nj-mobile .volunteer-stat-value { font-size: var(--fs-xl) !important; } .nj-mobile .volunteer-stat-label { font-size: var(--fs-xs) !important; } .nj-mobile .request-card, .nj-mobile .activity-item { padding: var(--space-md) !important; font-size: var(--fs-sm) !important; } .nj-mobile .section-title { font-size: var(--fs-lg) !important; } .nj-mobile .request-title, .nj-mobile .request-name { font-size: var(--fs-base) !important; } .nj-mobile .request-meta, .nj-mobile .badge { font-size: var(--fs-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 23: Thank-you / Rating Page ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .page-header { font-size: var(--fs-base) !important; } .nj-mobile .page-icon { font-size: var(--fs-2xl) !important; } .nj-mobile .page-title { font-size: var(--fs-xl) !important; } .nj-mobile .page-subtitle { font-size: var(--fs-sm) !important; } .nj-mobile .thank-card, .nj-mobile .letter-card { padding: var(--space-md) !important; } .nj-mobile .letter-card h3 { font-size: var(--fs-lg) !important; } .nj-mobile .letter-card p, .nj-mobile .thank-message { font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 24: Feed Posts (mobile overrides for feed.css) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .post-text { font-size: var(--fs-base); line-height: 1.65; } .nj-mobile .post-author-name { font-size: var(--fs-sm); } .nj-mobile .post-meta { font-size: var(--fs-xs); } .nj-mobile .post-stats { font-size: var(--fs-xs); } .nj-mobile .post-action-btn { font-size: var(--fs-sm); } .nj-mobile .post-project-tag { font-size: var(--fs-xs); } .nj-mobile .create-post-input { font-size: var(--fs-base); } .nj-mobile .create-post-action { font-size: var(--fs-sm); } .nj-mobile .guest-prompt-text h3 { font-size: var(--fs-lg); } .nj-mobile .guest-prompt-text p { font-size: var(--fs-sm); } .nj-mobile .btn-login-prompt { font-size: var(--fs-sm); } /* Mobile bottom nav */ .nj-mobile .mobile-bottom-nav { display: flex !important; justify-content: space-around; } .nj-mobile .mobile-nav-item { font-size: var(--fs-xs); } .nj-mobile .mobile-nav-item .icon { font-size: var(--fs-lg); } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 25: Inline Style Overrides (for HTML with hardcoded font-size in style="" attributes) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile div[style*="font-size: 6rem"], .nj-mobile div[style*="font-size: 3rem"] { font-size: var(--fs-2xl) !important; } .nj-mobile div[style*="font-size: 2rem"] { font-size: var(--fs-xl) !important; } .nj-mobile div[style*="font-size: 1.8rem"], .nj-mobile h1[style*="font-size: 1.8rem"] { font-size: var(--fs-xl) !important; } .nj-mobile div[style*="font-size: 1.5rem"], .nj-mobile span[style*="font-size: 1.5rem"] { font-size: var(--fs-lg) !important; } .nj-mobile div[style*="font-size: 0.9rem"], .nj-mobile span[style*="font-size: 0.9rem"] { font-size: var(--fs-sm) !important; } .nj-mobile div[style*="font-size: 0.85rem"], .nj-mobile span[style*="font-size: 0.85rem"] { font-size: var(--fs-sm) !important; } .nj-mobile div[style*="font-size: 0.8rem"], .nj-mobile span[style*="font-size: 0.8rem"] { font-size: var(--fs-xs) !important; } .nj-mobile div[style*="font-size: 0.75rem"], .nj-mobile span[style*="font-size: 0.75rem"] { font-size: var(--fs-xs) !important; } .nj-mobile div[style*="font-size: 1.1rem"] { font-size: var(--fs-lg) !important; } .nj-mobile div[style*="font-size: 0.65rem"] { font-size: var(--fs-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 26: Feed Create-Post Modal (uses .modal class from modal.css) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .modal-overlay { padding: 0 !important; align-items: flex-end !important; } .nj-mobile .modal { max-width: 100% !important; width: 100% !important; max-height: 95vh !important; border-radius: 30px 30px 0 0 !important; } .nj-mobile .modal-header { padding: 20px 24px !important; } .nj-mobile .modal-title { font-size: var(--fs-lg) !important; } .nj-mobile .modal-close { width: calc(32px * var(--nj-scale, 1)) !important; height: calc(32px * var(--nj-scale, 1)) !important; font-size: var(--fs-lg) !important; } .nj-mobile .modal-body { padding: 24px !important; max-height: calc(95vh - 260px) !important; } .nj-mobile .modal-footer { padding: 20px 24px !important; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; } /* Author */ .nj-mobile .create-post-author { gap: 16px !important; margin-bottom: 20px !important; } .nj-mobile .create-post-author-avatar { width: calc(40px * var(--nj-scale, 1)) !important; height: calc(40px * var(--nj-scale, 1)) !important; } .nj-mobile .create-post-author-name { font-size: var(--fs-lg) !important; font-weight: 700 !important; } .nj-mobile .create-post-privacy { font-size: var(--fs-sm) !important; padding: 8px 16px !important; margin-top: 8px !important; } /* Project selector */ .nj-mobile .project-selector { padding: 16px 20px !important; border-radius: 16px !important; margin-bottom: 20px !important; } .nj-mobile .project-selector-icon { font-size: var(--fs-lg) !important; } .nj-mobile .project-selector-text { font-size: var(--fs-base) !important; } .nj-mobile .project-selector-arrow { font-size: var(--fs-base) !important; } /* Textarea */ .nj-mobile .create-post-textarea { font-size: var(--fs-base) !important; min-height: 200px !important; line-height: 1.8 !important; } .nj-mobile .create-post-textarea::placeholder { font-size: var(--fs-base) !important; } /* Media action buttons */ .nj-mobile .create-post-media-actions { gap: 4px !important; } .nj-mobile .media-action-btn { font-size: var(--fs-sm) !important; padding: 12px 16px !important; gap: 8px !important; } .nj-mobile .media-action-btn .icon { font-size: var(--fs-lg) !important; } /* Submit button */ .nj-mobile .create-post-submit { font-size: var(--fs-base) !important; padding: 16px 40px !important; border-radius: 16px !important; } /* Poll creator */ .nj-mobile .poll-creator { padding: 20px !important; } .nj-mobile .poll-creator-title { font-size: var(--fs-base) !important; } .nj-mobile .poll-option-input input { font-size: var(--fs-sm) !important; padding: 14px 16px !important; } .nj-mobile .poll-add-option { font-size: var(--fs-sm) !important; padding: 14px 16px !important; } /* Link input */ .nj-mobile .link-input { font-size: var(--fs-sm) !important; padding: 14px 16px !important; } /* Project dropdown */ .nj-mobile .project-dropdown-item { padding: 16px !important; font-size: var(--fs-sm) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 27: Sidebar Right Close Button Details ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .sidebar-right .sidebar-right-close h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0; } .nj-mobile .sidebar-right .sidebar-right-close button { background: var(--bg-secondary); border: none; width: calc(24px * var(--nj-scale, 1)); height: calc(24px * var(--nj-scale, 1)); border-radius: 50%; font-size: var(--fs-lg); cursor: pointer; color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ SECTION 28: Stats Banner & Activity Links (feed widget reusable) ═══════════════════════════════════════════════════════════════════════════ */ .nj-mobile .stats-banner .stat-num { font-size: var(--fs-xl) !important; } .nj-mobile .stats-banner .stat-lbl { font-size: var(--fs-xs) !important; } .nj-mobile .post-action-btn { font-size: var(--fs-sm) !important; padding: 10px 4px !important; } .nj-mobile .post-stats { font-size: var(--fs-xs) !important; padding: 6px 16px !important; } .nj-mobile .create-post-input { font-size: var(--fs-base) !important; padding: 14px 20px !important; } .nj-mobile .create-post-action { font-size: var(--fs-sm) !important; }