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

html,
body {
  min-height: 100vh;
}

#app {
  .fc {
    .fc-timegrid-now-indicator-line {
      border-width: 2px 0 0;
      transform: translateY(-1px);
    }

    .fc-timegrid-now-indicator-line,
    .fc-timegrid-now-indicator-arrow {
      --fc-now-indicator-color: hsl(335deg 75% 40% / 80%);
      mix-blend-mode: multiply;
    }
  }
}

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;
  @apply tw-bg-gray-600 tw-border-gray-900 tw-text-white;
  background-color: theme('colors.gray.600');
  border-color: theme('colors.gray.900');
}

.fc-event-main {
  color: inherit !important;
}

.fc-scroller {
  background: white;
}

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

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

  hr {
    @apply tw-my-4;
    border-top: 1px solid rgb(0 0 0 / 0.1);
  }
}

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

  .calendar-event {
    @apply tw-max-h-full tw-overflow-hidden tw-cursor-pointer tw-transition-colors;

    &::before,
    &::after {
      display: none;
    }

    &.calendar-event {
      @apply tw-bg-gray-100 tw-border-gray-200 tw-text-gray-900 hocus:tw-bg-gray-200;
    }

    &.is-mine {
      @apply tw-bg-gray-700 tw-border-gray-800 tw-text-white hocus:tw-bg-gray-800;
    }

    &.is-invalid {
      @apply tw-bg-amber-200 tw-border-amber-300 tw-text-amber-950 hocus:tw-bg-amber-300;
      & .fc-event-main {
        @apply tw-relative tw-h-full;

        &::after {
          @apply tw-absolute tw-inset-0 tw-bg-stripes tw-block tw-bg-transparent;
          content: '';
          background-size: 10px 10px;
        }
      }
    }

    &.is-new {
      @apply tw-bg-emerald-200 tw-border-emerald-300 tw-text-emerald-900 hocus:tw-bg-emerald-300;
    }

    &.is-discarded {
      @apply tw-bg-rose-100 tw-border-rose-200 tw-text-rose-900 tw-line-through hocus:tw-bg-rose-200;
    }

    &.is-cut .fc-event-main {
      @apply tw-relative tw-h-full;

      &::after {
        @apply tw-absolute tw-h-2 tw-inset-x-0 tw-bg-stripes tw-z-50 tw-pointer-events-none;
        content: '';
        background-size: 8px;
      }
    }

    &.is-cut-start .fc-event-main::after {
      @apply tw-top-0;
    }

    &.is-cut-end .fc-event-main::after {
      @apply tw-bottom-0;
    }
  }
}