create-nexaui-electron/scripts/assets/css/modal_mobile.css

Create Nexa App - Tool untuk membuat aplikasi Nexa Electron

/* Mobile Modal Styles */
@media (max-width: 768px) {
  /* Struktur Dasar Modal */
  .nx-modal-content {
    width: 90% !important;
    margin:auto;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
    margin-bottom:200px;

  }

  /* Modal Centered */
  .nx-modal-centered .nx-modal-content {
    min-height: auto;
    height: auto;
    border-radius: 12px;
    margin: 1rem;
    width: calc(100% - 2rem) !important;
    max-height: 90vh;
  }

  /* Bottom Sheet Style */
  .nx-modal-bottom-sheet .nx-modal-content {
    position: fixed;
    bottom: 0;
    border-radius: 16px;
    max-height: 90vh;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  .nx-modal-bottom-sheet.show .nx-modal-content {
    transform: translateY(0);
  }

  /* Header Optimizations */
  .nx-modal-header {
    padding: 16px;
    min-height: 56px;
  }

  .nx-close {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  /* Body Optimizations */
  .nx-modal-body {
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  /* Footer Optimizations */
  .nx-modal-footer {
    padding: 16px;
    gap: 12px;
    flex-direction: column;
  }

  .nx-modal-footer .btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin: 0;
  }

  /* Gesture Support */
  .nx-modal-content {
    touch-action: pan-y;
  }

  /* Drag Indicator untuk Bottom Sheet */
  .nx-modal-bottom-sheet .nx-modal-header::before {
    content: '';
    width: 36px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Safe Area Support */
  .nx-modal-content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Modal Sizes Override */
  .nx-modal-sm .nx-modal-content,
  .nx-modal-lg .nx-modal-content {
    width: 100% !important;
  }

  /* Scrollable Modal */
  .nx-modal-scrollable .nx-modal-content {
    max-height: 100vh;
  }

  /* Disable Desktop Features */
  .nx-modal-draggable .nx-modal-header,
  .nx-modal-resizable .nx-modal-content::after,
  .nx-modal-controls {
    display: none;
  }

  /* Performance Optimizations */
  .nx-modal {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
    transform: translateZ(0);
  }

  .nx-modal * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Animations */
  @keyframes modalSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .nx-modal-slide-up .nx-modal-content {
    animation: modalSlideUp 0.3s ease-out forwards;
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .nx-modal-content {
      transition: none !important;
      animation: none !important;
    }
  }
}