rallly/apps/web/src/style.css

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

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground bg-gray-100;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
  html {
    @apply h-full font-sans text-base text-gray-700;
  }
  body #__next {
    @apply h-full;
  }

  label {
    @apply block text-sm;
  }

  a,
  button,
  input,
  select,
  textarea {
    @apply rounded outline-none focus:ring-gray-300 focus-visible:ring-1;
  }

  #floating-ui-root {
    @apply absolute z-50 w-full;
  }
}

@layer components {
  .text-link {
    @apply rounded-md underline outline-none hover:text-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
  }
  .formField {
    @apply mb-4;
  }
  .input {
    @apply appearance-none border px-2 text-gray-800 placeholder:text-gray-500;
  }
  input.input {
    @apply h-9;
  }
  .input-lg {
    @apply input px-3 py-3;
  }
  .input-error {
    @apply focus:ring-rose-500;
  }
  .checkbox {
    @apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-gray-300 shadow-sm;
  }
  .btn {
    @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;
  }
  a.btn {
    @apply cursor-pointer hover:no-underline;
  }

  .btn-default {
    @apply btn bg-white/50 text-gray-700 hover:bg-gray-50 hover:shadow-sm active:bg-gray-200  active:shadow-none;
  }
  .btn-danger {
    text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
    @apply btn border-rose-700 bg-rose-600 text-white shadow-sm ring-1 ring-inset ring-white/10 hover:bg-rose-500 active:bg-rose-700;
  }
  .btn-link {
    @apply text-primary-600 inline-flex items-center underline;
  }
  .btn.btn-disabled {
    text-shadow: none;
    @apply pointer-events-none border-gray-200 bg-gray-50 text-gray-400 shadow-none;
  }
  .btn-primary {
    text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
    @apply btn border-gray-900 bg-gray-800 text-white shadow-sm ring-1 ring-inset ring-white/10 hover:bg-gray-700 active:bg-gray-900;
  }

  a.btn-primary {
    @apply text-white;
  }

  .segment-button {
    @apply flex h-9 text-center;
  }

  .segment-button button {
    @apply inline-flex grow items-center justify-center border-b border-r border-t bg-gray-50 px-4 text-sm font-medium transition-colors first:rounded-r-none first:border-l last:rounded-l-none hover:bg-gray-50 focus:z-10 active:bg-gray-100;
  }

  .segment-button .segment-button-active {
    @apply pointer-events-none bg-white text-gray-800;
  }

  .menu {
    @apply relative;
  }

  .menu-items {
    @apply absolute z-30 mt-1 overflow-hidden rounded border bg-white shadow-md focus:outline-none;
  }

  .menu-item {
    @apply block w-full select-none truncate px-4 py-2 text-left;
  }

  button[disabled] {
    @apply cursor-not-allowed;
  }

  .card {
    @apply border-y bg-white p-4 shadow-sm md:rounded-lg md:border;
  }
}

@layer components {
  .heading {
    @apply text-primary-600 mb-4 text-xl;
  }
  .subheading {
    @apply mb-16 text-4xl font-bold text-gray-800;
  }
  .heading-sm {
    @apply mb-4 text-xl font-bold text-gray-800;
  }
  .text {
    @apply text-lg leading-relaxed text-gray-500;
  }
}

@layer utilities {
  .bg-lines {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  .bg-pattern {
    background-color: #f9fafb;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.75' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  }
}