tailwind.css

/* Note that any color adjustments here must also be reflected in custom.css!! */

@tailwind components;
@tailwind utilities;

:root {
  --primary: theme('colors.gray.800');
  --info: theme('colors.aura.purple');

  /* TODO: remove these once we include the tailwind base module */
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

header a,
footer a {
  color: theme('colors.gray.50');
}

header a:hover,
footer a:hover {
  color: theme('colors.gray.400');
}

.fc-event {
  padding: 1px 2px;
  background-color: theme('colors.gray.600');
  border-color: theme('colors.gray.900');
  color: white;
}

.otherShow {
  background-color: theme('colors.gray.300');
  border-color: theme('colors.gray.400');
  color: theme('colors.gray.900');
}

.otherShow:hover {
  color: theme('colors.gray.900');
  cursor: pointer;
}

.currentShow {
  background-color: theme('colors.aura.purple');
  border-color: theme('colors.indigo.800');
  color: white;
}

.conflict,
.currentShow.emptySlot {
  background-color: theme('colors.red.600');
  border-color: theme('colors.red.800');
  color: white;
}

.noconflict {
  background-color: theme('colors.aura.purple') !important;
  border-color: theme('colors.indigo.800') !important;
  color: white;
}

.timeslot-discarded {
  background-color: theme('colors.red.500');
  opacity: 0.5;
  text-decoration: line-through !important;
  color: white;
}

.timeslot-accepted {
  background-color: theme('colors.aura.purple');
  border-color: theme('colors.indigo.800');
}

.timeslot-partly {
  background-color: theme('colors.aura.purple');
  border-color: theme('colors.indigo.800');
  opacity: 0.5;
  font-weight: bold;
}

thead .fc-day {
  padding: 0.5rem 0;
}

thead .fc-day a {
  color: inherit;
}

thead .fc-day:hover {
  background: theme('colors.gray.200');
  cursor: pointer;
}

thead .fc-day-selected {
  background: theme('colors.red.500');
  color: white;
}

thead .fc-day-selected:hover {
  background: #a490e0;
  color: white;
}

.is-mismatched {
  color: var(--orange);
}

@layer components {
  .btn-default {
    @apply tw-bg-gray-100 tw-border tw-border-solid tw-border-black/5 tw-transition hover:enabled:tw-brightness-95 focus-visible:enabled:tw-brightness-95;
  }

  .aura-table-wrapper {
    @apply tw-bg-white tw-rounded tw-shadow tw-mb-12;
    contain: paint;
  }

  .aura-table {
    @apply tw-border-separate tw-border-spacing-0 tw-w-full;

    & thead th {
      @apply tw-text-sm tw-text-gray-500 tw-border-0 tw-border-b tw-border-solid tw-border-gray-200 tw-font-bold;
    }

    & :is(th, td) {
      @apply tw-py-2 tw-px-4 tw-font-normal;
    }

    & :is(th, td):first-child {
      @apply tw-pl-6;
    }

    & :is(th, td):first-child {
      @apply tw-pr-6;
    }
  }

  .form-control:focus-within {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
}