tailwind.css

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

@import 'quill/dist/quill.bubble.css';

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

:root {
  --primary: theme('colors.gray.800');
  --info: theme('colors.aura.purple');
  --text-color: #2e3436;
}

body {
  color: var(--text-color);
}

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');
  --fc-event-text-color: white;
}

.fc-scroller {
  background: white;
}

.otherShow {
  background-color: theme('colors.gray.300');
  border-color: theme('colors.gray.400');
  --fc-event-text-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 utilities {
  .tw-grid-area-cover {
    grid-area: 1 / -1 / 1 / -1;
  }

  .tw-bg-stripes {
    --tw-stripes-color: theme('colors.rose.400');
    background-image: linear-gradient(
      135deg,
      var(--tw-stripes-color) 10%,
      transparent 10%,
      transparent 50%,
      var(--tw-stripes-color) 50%,
      var(--tw-stripes-color) 60%,
      transparent 60%,
      transparent 100%
    );
  }
}

@layer components {
  .btn {
    @apply tw-inline-flex tw-gap-1 tw-items-center;
  }

  [data-headlessui-state='open'] {
    position: relative;
  }

  .btn-default {
    @apply tw-bg-gray-100 tw-border tw-border-solid tw-border-black/5 tw-transition hocus:enabled:tw-brightness-95;
  }

  .btn-danger {
    @apply tw-border-2 tw-border-rose-600 tw-bg-white tw-text-rose-600 hocus:tw-bg-rose-600 hocus:tw-text-white;
  }

  .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);
  }
}

.modal-footer:empty {
  display: none;
}