webhooker/static/css/input.css

@import "tailwindcss";

/* Source the templates */
@source "../../templates/**/*.html";

/* Material Design inspired theme customization */
@theme {
  /* Primary colors */
  --color-primary-50: #e3f2fd;
  --color-primary-100: #bbdefb;
  --color-primary-200: #90caf9;
  --color-primary-300: #64b5f6;
  --color-primary-400: #42a5f5;
  --color-primary-500: #2196f3;
  --color-primary-600: #1e88e5;
  --color-primary-700: #1976d2;
  --color-primary-800: #1565c0;
  --color-primary-900: #0d47a1;

  /* Error colors */
  --color-error-50: #ffebee;
  --color-error-500: #f44336;
  --color-error-700: #d32f2f;

  /* Success colors */
  --color-success-50: #e8f5e9;
  --color-success-500: #4caf50;
  --color-success-700: #388e3c;

  /* Warning colors */
  --color-warning-50: #fff3e0;
  --color-warning-500: #ff9800;
  --color-warning-700: #f57c00;

  /* Material Design elevation shadows */
  --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --shadow-elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Material Design component styles */
@layer components {
  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:ring-primary-500 shadow-elevation-1 hover:shadow-elevation-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 active:bg-gray-100 focus:ring-primary-500;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-error-500 text-white hover:bg-error-700 active:bg-red-800 focus:ring-red-500 shadow-elevation-1 hover:shadow-elevation-2;
  }

  .btn-text {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed text-primary-600 hover:bg-primary-50 active:bg-primary-100;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-elevation-1 overflow-hidden;
  }

  .card-elevated {
    @apply bg-white rounded-lg shadow-elevation-1 overflow-hidden hover:shadow-elevation-2 transition-shadow;
  }

  /* Form inputs */
  .input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
  }

  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .form-group {
    @apply mb-4;
  }

  /* Status badges */
  .badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-50 text-success-700;
  }

  .badge-error {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error-50 text-error-700;
  }

  .badge-info {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-50 text-primary-700;
  }

  /* App bar / Navigation */
  .app-bar {
    @apply bg-white shadow-elevation-1 px-6 py-4;
  }

  /* Alert / Message boxes */
  .alert-error {
    @apply p-4 rounded-md mb-4 bg-error-50 text-error-700 border border-error-500/20;
  }

  .alert-success {
    @apply p-4 rounded-md mb-4 bg-success-50 text-success-700 border border-success-500/20;
  }
}