xxxxxx

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mold Regulation Parameters</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    /* General Box-sizing for consistency */
    * { box-sizing: border-box; }

    /* Main Container Adjustments for Full Width with Padding */
    #mainContent > div { /* Target the inner div inside mainContent */
      max-width: none !important; /* Remove any max-width constraints */
      margin: 0 !important;      /* Remove auto margins */
      padding: 10px !important;  /* Set uniform 10px padding */
      width: 100%;               /* Ensure it takes full width */
      box-shadow: none;          /* Remove the main shadow if it conflicts with full-width aesthetic */
      border-radius: 0;          /* Remove border-radius for full-width look */
    }

    /* Keep the shadow and border-radius for inner sections */
    .max-w-\[95vw\] { /* Re-apply max-width where necessary if other elements use it */
      max-width: 95vw;
      margin-left: auto;
      margin-right: auto;
    }

    /* Existing styles for movement rows, sections, etc. */
    .movement-row, .delay-row {
      display: flex;
      align-items: center;
      height: 48px; /* Fixed height for alignment */
      margin-bottom: 8px;
      padding: 8px;
      border-radius: 6px;
      transition: background-color 0.2s;
    }
    .closing-row, .closing-delay-row { background-color: rgba(34, 197, 94, 0.05); }
    .opening-row, .opening-delay-row { background-color: rgba(59, 130, 246, 0.05); }
    .venting-row, .venting-delay-row { background-color: rgba(234, 179, 8, 0.05); }
    .movement-row:hover, .delay-row:hover { background-color: rgba(0, 0, 0, 0.02); }
    @media (max-width: 1024px) {
     ...