/* CaloriesSnap - Mobile Fixes v2.15 */ /* Fixes: Smaller streak card, centered FAB, screenshot enabled */ @media (max-width: 768px) { /* ===== 1. SMALLER STREAK CARD ===== */ .streak-container { padding: 10px 12px !important; /* Was 16px - now more compact */ margin-bottom: 10px !important; /* Was 16px */ border-radius: 10px !important; min-height: auto !important; } .streak-icon { font-size: 32px !important; /* Was 48px - now smaller */ line-height: 1 !important; } .streak-info { padding: 2px 0 !important; } .streak-number { font-size: 20px !important; /* Was 22px - more compact */ font-weight: 700 !important; margin-bottom: 2px !important; /* Was 4px */ line-height: 1.2 !important; } .streak-message { font-size: 12px !important; /* Was 13px - smaller */ line-height: 1.3 !important; opacity: 0.95 !important; } /* Also make streak card in mobile-professional.css smaller */ .streak-card { padding: 10px 12px !important; /* Was 14px */ border-radius: 10px !important; /* Was 12px */ margin-bottom: 10px !important; } /* Profile page streak display */ .streak-display { padding: 10px !important; margin: 8px 0 !important; } .streak-label { font-size: 12px !important; } .streak-emoji { font-size: 28px !important; /* Was larger */ } /* ===== 2. CENTERED & FIXED FAB BUTTON ===== */ .floating-add-btn { /* CRITICAL: Force center position */ position: fixed !important; bottom: 80px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; /* Ensure it stays centered */ width: 60px !important; height: 60px !important; /* Perfect circle */ border-radius: 50% !important; /* White gradient */ background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important; /* Purple border and icon */ border: 2px solid #667eea !important; color: #667eea !important; /* Shadow */ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Icon size */ font-size: 28px !important; /* Center icon */ display: flex !important; align-items: center !important; justify-content: center !important; /* Z-index */ z-index: 999 !important; /* Smooth transitions */ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Remove any animations */ animation: none !important; /* Ensure it's always visible and clickable */ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* FAB active state - keep centered */ .floating-add-btn:active { transform: translateX(-50%) scale(0.9) !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3), 0 1px 4px rgba(0, 0, 0, 0.1) !important; } /* FAB hover state for desktop */ .floating-add-btn:hover { transform: translateX(-50%) scale(1.05) !important; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3), 0 3px 10px rgba(0, 0, 0, 0.12) !important; } /* Remove any pulse or shake animations */ @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1); } } /* Ensure bottom nav doesn't overlap */ .bottom-nav { z-index: 98 !important; /* FAB is 999 */ } /* ===== 3. ENABLE SCREENSHOT CAPABILITY ===== */ /* Remove any user-select restrictions */ * { -webkit-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; -webkit-touch-callout: default !important; -webkit-user-drag: auto !important; } /* Allow text selection */ body, html { -webkit-user-select: auto !important; -moz-user-select: auto !important; user-select: auto !important; } /* Allow long-press context menu on images */ img { -webkit-touch-callout: default !important; -webkit-user-drag: auto !important; pointer-events: auto !important; } /* Enable screenshot on iOS Safari */ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } /* Remove any screenshot blocking */ body::before, body::after { content: none !important; display: none !important; } /* Ensure content is capturable */ .page-content, .app-container, main { -webkit-user-select: auto !important; user-select: auto !important; } /* ===== ADDITIONAL COMPACT ADJUSTMENTS ===== */ /* Make calorie ring card more compact */ .calorie-ring-container { padding: 12px !important; margin-bottom: 10px !important; } /* Compact macro cards */ .macro-card { padding: 10px !important; } .macro-value { font-size: 20px !important; } .macro-label { font-size: 11px !important; } /* Compact recent foods */ .recent-foods-section { margin-bottom: 10px !important; } .recent-food-item { padding: 8px 10px !important; margin-bottom: 6px !important; } /* Compact meal cards */ .meal-card { padding: 10px 12px !important; margin-bottom: 10px !important; } .meal-header { margin-bottom: 8px !important; } /* Compact stats cards */ .stats-card, .chart-container, .weekly-summary { padding: 12px !important; margin-bottom: 10px !important; } /* Compact profile cards */ .profile-section { margin-bottom: 10px !important; } .profile-card { padding: 10px 12px !important; } /* Compact settings */ .settings-section { margin-bottom: 12px !important; } .settings-item { padding: 10px !important; margin-bottom: 6px !important; } } /* ===== DESKTOP FIXES (OPTIONAL) ===== */ @media (min-width: 769px) { /* Centered FAB on desktop too */ .floating-add-btn { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 40px !important; } .floating-add-btn:active { transform: translateX(-50%) scale(0.95) !important; } .floating-add-btn:hover { transform: translateX(-50%) scale(1.05) !important; } } /* ===== UNIVERSAL FIXES ===== */ /* Ensure FAB is always accessible */ .floating-add-btn { cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } /* Remove any overlay that might block screenshots */ .no-screenshot-overlay, .screenshot-blocker, .watermark-overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Ensure everything is screenshot-friendly */ body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }