git / moonbite-network / static/ios-pwa.css · raw

/** * iOS PWA Optimizations * Safe area support, notch handling, gesture-friendly UI *//* iOS Safe Area Support */html.ios-device,html.ios-standalone {  --safe-area-inset-top: env(safe-area-inset-top, 0px);  --safe-area-inset-right: env(safe-area-inset-right, 0px);  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);  --safe-area-inset-left: env(safe-area-inset-left, 0px);}/* Prevent iOS rubber band scroll */html, body {  position: fixed;  width: 100%;  height: 100%;  overflow: hidden;  -webkit-user-select: none;  -webkit-touch-callout: none;  overscroll-behavior: none;}body {  padding: 0;  margin: 0;}/* Scrollable viewport for iOS */main, .content, .app-viewport {  position: absolute;  top: var(--safe-area-inset-top, 0);  left: var(--safe-area-inset-left, 0);  right: var(--safe-area-inset-right, 0);  bottom: var(--safe-area-inset-bottom, 0);  overflow-y: auto;  -webkit-overflow-scrolling: touch;  width: 100%;  height: 100%;}/* Header with safe area support */header, .header, .nav {  padding-top: var(--safe-area-inset-top, 0);  padding-left: var(--safe-area-inset-left, 0);  padding-right: var(--safe-area-inset-right, 0);}/* Footer safe area handling */footer, .footer, .bottom-nav {  padding-bottom: var(--safe-area-inset-bottom, 0);  padding-left: var(--safe-area-inset-left, 0);  padding-right: var(--safe-area-inset-right, 0);}/* Notch awareness for portrait apps */@supports (padding: max(0px)) {  body {    padding-left: max(12px, var(--safe-area-inset-left));    padding-right: max(12px, var(--safe-area-inset-right));    padding-top: max(12px, var(--safe-area-inset-top));    padding-bottom: max(12px, var(--safe-area-inset-bottom));  }  header, .header, .nav {    padding-left: max(12px, var(--safe-area-inset-left));    padding-right: max(12px, var(--safe-area-inset-right));    padding-top: max(12px, var(--safe-area-inset-top));  }  footer, .footer, .bottom-nav {    padding-left: max(12px, var(--safe-area-inset-left));    padding-right: max(12px, var(--safe-area-inset-right));    padding-bottom: max(12px, var(--safe-area-inset-bottom));  }}/* iOS Standalone Mode Optimizations */html.ios-standalone {  /* Disable viewport scaling */  --webkit-user-select: none;}html.ios-standalone body {  /* Full viewport usage when running as app */  margin: 0;  padding: 0;}/* Prevent bounce scroll on iOS */.scroll-container {  -webkit-overflow-scrolling: touch;  overscroll-behavior: contain;}/* Gesture-friendly tap targets (minimum 44x44px) */button, a, [role="button"], .tap-target {  min-height: 44px;  min-width: 44px;  display: flex;  align-items: center;  justify-content: center;}/* Remove iOS default button styling */button, input[type="button"], input[type="submit"], input[type="reset"] {  -webkit-appearance: none;  appearance: none;  background: none;  border: none;  padding: 12px 16px;  font-family: inherit;  font-size: inherit;  cursor: pointer;}/* Remove iOS input styling */input, textarea, select {  -webkit-appearance: none;  appearance: none;  border-radius: 0;  font-size: 16px; /* Prevents auto-zoom on iOS */}textarea {  resize: vertical;  -webkit-user-select: text;}/* iOS input autofill styling */input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {  -webkit-box-shadow: 0 0 0 30px white inset !important;  -webkit-text-fill-color: #333 !important;}/* Prevent iOS selection menu on long press */.no-context-menu {  -webkit-user-select: none;  user-select: none;  -webkit-touch-callout: none;}/* Allow text selection where needed */.selectable {  -webkit-user-select: text;  user-select: text;  -webkit-touch-callout: default;}/* iOS keyboard handling */input:focus, textarea:focus, select:focus {  /* Prevent iOS from zooming when focused */  font-size: 16px;}/* Viewport height fix for iOS keyboard */@media (max-height: 500px) {  body {    height: 100vh;    height: 100dvh; /* Dynamic viewport height (iOS 15+) */  }  main, .content, .app-viewport {    height: 100dvh;  }}/* Smooth scrolling on iOS */* {  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}a, button {  -webkit-tap-highlight-color: transparent;}/* Gesture-aware event handling styles */.swipe-area {  touch-action: pan-y pinch-zoom;  -webkit-user-select: none;}.draggable {  touch-action: manipulation;  cursor: grab;}.draggable:active {  cursor: grabbing;}/* Back gesture compatibility (swipe from left edge) */.gesture-back-area {  position: absolute;  left: 0;  top: 0;  width: 20px;  height: 100%;  z-index: 10;  -webkit-user-select: none;}/* Home indicator safe area (for notched devices) */@supports (padding: max(0px)) {  .home-indicator-safe {    padding-bottom: max(20px, calc(var(--safe-area-inset-bottom) + 20px));  }}/* Modal/Dialog safe area support */.modal, .dialog, [role="dialog"] {  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);}/* iOS landscape orientation handling */@media (orientation: landscape) {  html.ios-device {    --safe-area-inset-top: env(safe-area-inset-top, 0px);    --safe-area-inset-right: env(safe-area-inset-right, 0px);    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);    --safe-area-inset-left: env(safe-area-inset-left, 0px);  }  header, .header {    display: flex;    align-items: center;    justify-content: space-between;    padding-left: max(12px, var(--safe-area-inset-left));    padding-right: max(12px, var(--safe-area-inset-right));  }  main, .content {    margin: 0 var(--safe-area-inset-right) 0 var(--safe-area-inset-left);  }}/* Fixed bottom navigation with home indicator space */.bottom-nav, .tab-bar {  position: fixed;  bottom: 0;  left: 0;  right: 0;  padding-bottom: max(8px, var(--safe-area-inset-bottom));  padding-left: var(--safe-area-inset-left);  padding-right: var(--safe-area-inset-right);  background: var(--bg-color, #fff);  border-top: 1px solid var(--border-color, #eee);  z-index: 100;}/* iOS status bar color support */@media (prefers-color-scheme: dark) {  :root {    color-scheme: dark;  }}@media (prefers-color-scheme: light) {  :root {    color-scheme: light;  }}/* Haptic feedback visual feedback (since haptics aren't standard web) */.haptic-feedback {  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;}.haptic-feedback:active {  transform: scale(0.98);  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}/* Touch action improvements */.no-double-tap-zoom {  touch-action: manipulation;}/* iOS form styling */input[type="range"] {  -webkit-appearance: slider-horizontal;  width: 100%;}/* Fix for iOS Safari select boxes */select {  background: white;  color: #333;  padding: 8px;  border: 1px solid #ccc;  border-radius: 4px;}/* Prevent iOS zoom on input focus in landscape */@media (orientation: landscape) {  input, textarea, select {    font-size: 16px;  }}/* iOS share sheet styling */.share-action {  border-radius: 12px;  overflow: hidden;}/* Bottom sheet modal for iOS */.bottom-sheet {  position: fixed;  bottom: 0;  left: 0;  right: 0;  max-height: 90vh;  background: white;  border-radius: 12px 12px 0 0;  overflow-y: auto;  -webkit-overflow-scrolling: touch;  padding-bottom: max(16px, var(--safe-area-inset-bottom));  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);}.bottom-sheet::before {  content: '';  display: block;  height: 4px;  width: 40px;  background: #ccc;  border-radius: 2px;  margin: 8px auto;}/* Landscape orientation lock for full-screen apps */html.ios-standalone.lock-portrait {  width: 100vw;  height: 100vh;}/* iOS specific scrollbar styling (subtle) */::-webkit-scrollbar {  width: 6px;  height: 6px;}::-webkit-scrollbar-track {  background: transparent;}::-webkit-scrollbar-thumb {  background: rgba(0, 0, 0, 0.2);  border-radius: 3px;}::-webkit-scrollbar-thumb:hover {  background: rgba(0, 0, 0, 0.3);}/* Dynamic viewport height support (iOS 15+) */@supports (height: 100dvh) {  html, body {    height: 100dvh;  }  main, .content, .app-viewport {    height: 100dvh;  }}/* Focus visible for accessibility */:focus-visible {  outline: 2px solid #0066cc;  outline-offset: 2px;}/* Remove outline on mouse click (still visible on keyboard) */:focus:not(:focus-visible) {  outline: none;}