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 base {
  table {
    th,
    td {
      text-align: left;
    }
  }

  code {
    @apply tw-bg-gray-200 tw-rounded;
    font-size: 0.9em;
    padding: 0.2em 0.5em;
  }
}

@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 {
  [data-headlessui-state='open'] {
    position: relative;
  }

  .fc .fc-button {
    all: unset;
  }

  .btn,
  .fc .fc-button.fc-button {
    @apply tw-inline-flex tw-gap-1 tw-items-center tw-rounded;
    font-weight: 400;
    color: theme('colors.gray.800');
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition:
      color 0.15s ease-in-out,
      background-color 0.15s ease-in-out,
      filter 0.15s ease-in-out,
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;

    &:focus {
      outline: none;
    }

    &:disabled {
      opacity: 0.65;
    }
  }

  .btn-default,
  .fc .fc-button.fc-button {
    @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-rose-200 tw-bg-rose-100 tw-text-rose-700 hocus:enabled:tw-bg-rose-600 hocus:enabled:tw-border-rose-600 hocus:enabled:tw-text-white;
  }

  .btn-primary {
    @apply tw-bg-aura-primary tw-text-white hocus:enabled:tw-brightness-125;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
  }

  .form-control {
    @apply tw-rounded;

    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: theme('spacing[1.5]') theme('spacing.3');
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: theme('colors.gray.600');
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid theme('colors.gray.300');
    transition:
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;

    &:focus-within,
    &:focus {
      color: theme('colors.gray.600');
      background-color: white;
      border-color: theme('colors.aura.primary');
      outline: 0;
      box-shadow: 0 0 0 0.2rem theme('colors.aura.primary/0.25');
    }

    &:disabled,
    &[readonly] {
      background-color: theme('colors.gray.200');
      opacity: 1;
    }
  }

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