ecoloop/theme/static_src/src/styles.css

@import "tailwindcss";
@plugin "daisyui";

/**
  * A catch-all path to Django template files, JavaScript, and Python files
  * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
  *
  * If your final CSS file is not being updated after code changes, you may want to broaden or narrow
  * the scope of this path.
  */
@source "../../../**/*.{html,py,js}";
@source "../../../**/widgets/*.html";
/* Include third-party templates that generate Tailwind classes at runtime */
@source "/usr/local/lib/python*/site-packages/crispy_tailwind/**/*.html";
@source "../../../venv/lib/python*/site-packages/crispy_tailwind/**/*.html";
@source "../../../.venv/lib/python*/site-packages/crispy_tailwind/**/*.html";

/* Custom components */
@layer components {
  /* Generic inline layout for checkbox fields: place input and label on one row */
  .checkbox-inline {
    @apply flex items-center gap-2;
  }
  .checkbox-inline label {
    @apply mb-0;
  }

  /* Generalize for crispy-rendered fields without custom templates */
  /* Baseline: make label + checkbox inline when markup is label then input */
  [id^="div_id_"] > label + input[type="checkbox"],
  [id^="div_id_"] > label + input[type="radio"] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
  }
  [id^="div_id_"] > label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0; /* override block label spacing */
  }

  /* Enhancement for modern browsers: use :has to flex-align container when it contains a checkbox/radio */
  [id^="div_id_"]:has(> input[type="checkbox"]),
  [id^="div_id_"]:has(> input[type="radio"]) {
    @apply flex items-center gap-2;
  }
  [id^="div_id_"]:has(> input[type="checkbox"]) > label,
  [id^="div_id_"]:has(> input[type="radio"]) > label {
    @apply mb-0;
  }

  /* Restore native picker icon that crispy-tailwind may hide via appearance-none */
  input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: auto;
    appearance: auto;
    color-scheme: light;
    background-color: #fff;
  }
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
  }
}