felicity-lims/webapp/assets/css/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
    :root {
      --background: 0 0% 100%;
      --foreground: 240 10% 3.9%;
    
      --card: 0 0% 100%;
      --card-foreground: 240 10% 3.9%;
    
      --popover: 0 0% 100%;
      --popover-foreground: 240 10% 3.9%;
    
      --primary: 240 5.9% 10%;
      --primary-foreground: 0 0% 98%;
    
      --secondary: 240 4.8% 95.9%;
      --secondary-foreground: 240 5.9% 10%;
    
      --muted: 240 4.8% 95.9%;
      --muted-foreground: 240 3.8% 46.1%;
    
      --accent: 240 4.8% 95.9%;
      --accent-foreground: 240 5.9% 10%;
    
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 0 0% 98%;
    
      --border:240 5.9% 90%;
      --input:240 5.9% 90%;
      --ring:240 5.9% 10%;
      --radius: 1rem;
    }
     
    .dark {
      --background:240 10% 3.9%;
      --foreground:0 0% 98%;
    
      --card:240 10% 3.9%;
      --card-foreground:0 0% 98%;
    
      --popover:240 10% 3.9%;
      --popover-foreground:0 0% 98%;
    
      --primary:0 0% 98%;
      --primary-foreground:240 5.9% 10%;
    
      --secondary:240 3.7% 15.9%;
      --secondary-foreground:0 0% 98%;
    
      --muted:240 3.7% 15.9%;
      --muted-foreground:240 5% 64.9%;
    
      --accent:240 3.7% 15.9%;
      --accent-foreground:0 0% 98%;
    
      --destructive:0 62.8% 30.6%;
      --destructive-foreground:0 0% 98%;
    
      --border:240 3.7% 15.9%;
      --input:240 3.7% 15.9%;
      --ring:240 4.9% 83.9%;
    }
}
  

@layer components {
    /* Your custom component classes go here */
    .btn-primary {
      @apply px-4 py-2 text-sm border border-sky-800 text-dark-800 rounded-sm hover:bg-sky-800 hover:text-gray-100 transition-colors duration-150;
    }
    /* More component classes... */
}


/* Hack since tailwind is misbehaving */
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-13 {
    grid-template-columns: repeat(13, minmax(0, 1fr));
}
.grid-cols-14 {
    grid-template-columns: repeat(14, minmax(0, 1fr));
}
.grid-cols-15 {
    grid-template-columns: repeat(15, minmax(0, 1fr));
}
.grid-cols-16 {
    grid-template-columns: repeat(16, minmax(0, 1fr));
}
.grid-cols-17 {
    grid-template-columns: repeat(17, minmax(0, 1fr));
}
.grid-cols-18 {
    grid-template-columns: repeat(18, minmax(0, 1fr));
}
.grid-cols-19 {
    grid-template-columns: repeat(19, minmax(0, 1fr));
}
.grid-cols-20 {
    grid-template-columns: repeat(20, minmax(0, 1fr));
}

.form-input,
.form-textarea,
.form-select,
.form-multiselect {
    padding-top: 4px;
    padding-bottom: 4px;
}