room-craft/lib/styles.css

A lightweight React component for displaying products in both Augmented Reality (AR) and 3D. Perfect for eCommerce applications where you want to showcase your products in an immersive and interactive way.

  .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
  }
  
  .popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .leave-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e0f7fa; /* Soft aqua blue */
    color: #00796b; /* Calm teal */
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .leave-button:hover {
    background-color: #b2ebf2; /* Lighter aqua on hover */
    transform: scale(1.05); /* Gentle hover effect */
  }
  
  .leave-button:active {
    background-color: #80deea; /* Slightly darker on click */
  }
  
  
  .main-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    width: 266px;
    height: 249px;
    background: white;
    overflow: hidden; /* Ensures anything outside the card doesn't display */
  }
  
  .main-image {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while preserving aspect ratio */
  }
  
  
  .left-button,
  .right-button {
    position: absolute;
    bottom: 20px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    border: none;
    cursor: pointer;
  }
  
  .left-button {
    left: 20px;
  }
  
  .right-button {
    right: 20px;
  }
  
  .qr-scanner-card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;    /* Center content horizontally */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    position: relative; /* Required for positioning the cancel button */
    width: 266px;
    height: 249px;
  }
  
  .qr-scanner-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  
  .cancel-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0;
  }
  
  .cancel-button img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image fits well */
  }
  
  .qr-scanner-footer {
    text-align: center;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #4B5563; /* Neutral-600 */
    border-radius: 10px;
    width: 100px;
    margin-top: 10px; /* Space above footer */
  }