main.css

@tailwind base;

@layer base {
  @media print {
    .pagebreak {
      clear: both;
      page-break-after: always;
    }
  }

  .map-tiles {
    @apply dark:brightness-[0.6] dark:invert dark:contrast-[3] dark:hue-rotate-[200deg] dark:saturate-[0.3];
  }

  table.sortable
    th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(
      .sorttable_nosort
    ):after {
    content: " \25B4\25BE";
  }

  body {
    @apply md:px-20;
    @apply bg-neutral-100 text-zinc-900;
    @apply dark:bg-neutral-900 dark:text-zinc-100;
  }

  ol {
    @apply list-decimal list-inside my-5;
  }

  ul {
    @apply list-disc list-inside my-5;
  }

  button[type="submit"],
  textarea,
  select,
  input {
    @apply rounded-xl px-6 py-2 border;
    @apply bg-zinc-100 border-zinc-300 hover:border-amber-500 placeholder:text-slate-500;
    @apply dark:bg-zinc-900 dark:border-zinc-700 dark:hover:border-amber-500 dark:placeholder:text-slate-500;
  }
  button[type="submit"] {
    @apply font-bold;
  }

  h2 {
    @apply text-xl md:text-2xl mb-5 mx-2 px-2;
    @apply text-zinc-800;
    @apply dark:text-zinc-200;
  }
  h3 {
    @apply text-base md:text-xl mb-5;
    @apply text-zinc-800;
    @apply dark:text-zinc-200;
  }
  a {
    @apply hover:text-amber-500;
    @apply dark:hover:text-amber-300;
  }

  form {
    @apply my-5;
    tr {
      @apply mb-2 gap-4;
      label {
        @apply text-right py-1 block;
      }
    }
  }

  .note {
    @apply text-xs border-l-2 border-amber-500 p-1 pl-3;
    @apply text-zinc-600;
    @apply dark:text-zinc-400;
  }
  .footer {
    @apply flex justify-center gap-10;
  }
  .footer a,
  .content a {
    @apply text-amber-700 hover:text-amber-500;
    @apply dark:text-amber-100 dark:hover:text-amber-300;
  }

  .footer,
  .menu {
    @apply px-6 py-3 items-baseline;
    @apply bg-neutral-200 text-zinc-700;
    @apply dark:bg-neutral-800 dark:text-zinc-300;
    > div {
      @apply print:hidden;
    }
  }
  .footer {
    @apply rounded-t-xl mt-2;
  }
  .menu {
    @apply rounded-b-xl mb-2;
    a {
      @apply mt-5 mr-5;
      span {
        @apply hidden md:contents;
      }
    }
    h1 {
      @apply text-xl sm:text-3xl border-b-2 sm:border-b-0 mb-3 sm:mb-0 pb-3 sm:pb-0;
      @apply text-black border-neutral-500;
      @apply dark:text-white border-neutral-500;
    }
  }
  .actions {
    @apply gap-3 float-right items-baseline flex print:hidden;
    > button,
    > form {
      @apply my-0;

      > button.edit {
        @apply hover:bg-amber-200 bg-amber-300;
        @apply dark:hover:bg-amber-300 dark:bg-amber-500;
      }
      > button.dangerous {
        @apply hover:bg-rose-300 bg-rose-500;
        @apply dark:hover:bg-rose-500 dark:bg-rose-700;
      }
      > button {
        @apply rounded-md px-2 py-1 transition;
        @apply text-white hover:bg-green-300 bg-green-500;
        @apply dark:text-white dark:hover:bg-green-500 dark:bg-green-700;
        a {
          @apply text-white hover:text-white;
          @apply dark:text-white dark:hover:text-white;
          @apply text-center;
        }
      }
    }
  }
  .content {
    @apply rounded-xl py-5 px-1 md:px-10;
    @apply bg-neutral-300;
    @apply dark:bg-neutral-700;
  }
  .inner-form {
    @apply rounded-xl p-2 md:p-5 m-2 border print:border-0;
    @apply bg-neutral-200 border-neutral-200 hover:border-neutral-500;
    @apply dark:bg-neutral-800 dark:border-neutral-800 dark:hover:border-neutral-500;
  }

  .notice {
    @apply border;
    @apply bg-green-900 border-green-600 text-green-300;
    @apply dark:bg-green-100 dark:border-green-400 dark:text-green-700;
  }
  .alert {
    @apply border;
    @apply bg-red-900 border-red-600 text-red-300;
    @apply dark:bg-red-100 dark:border-red-400 dark:text-red-700;
  }
  .notice,
  .alert {
    @apply px-4 py-3 m-5 rounded-md relative;
  }

  table {
    @apply text-sm w-full text-left table-auto border;
    @apply border-neutral-500;
    @apply dark:border-neutral-500;
    tfoot,
    thead {
      @apply uppercase font-bold;
      @apply bg-zinc-100 text-zinc-700;
      @apply dark:bg-zinc-900 dark:text-zinc-300;
    }
    tr {
      @apply border;
      @apply border-neutral-500 hover:border-amber-500;
      @apply dark:border-neutral-500 dark:hover:border-amber-500;
    }
    td,
    th {
      @apply p-2 print:p-0;
      label {
        @apply align-top;
      }
    }
    th {
      @apply text-zinc-700;
      @apply dark:text-zinc-300;
    }
    tbody {
      tr {
        @apply even:bg-neutral-300 odd:bg-neutral-200 hover:bg-amber-100;
        @apply dark:even:bg-neutral-700 dark:odd:bg-neutral-800 dark:hover:bg-amber-800;
      }
    }
  }

  .workout-info {
    th,
    td {
      @apply px-2;
    }
    tr {
      @apply mb-2;
    }
  }

  .workout-tile-info {
    @apply border rounded-lg py-1 px-2 text-xs font-mono;
  }

  .modal {
    @apply hidden fixed inset-0 overflow-y-auto h-full w-full px-4 z-[3000];
    @apply bg-gray-100 bg-opacity-80;
    @apply dark:bg-gray-900 dark:bg-opacity-60;
    .window {
      @apply relative top-40 mx-auto shadow-xl rounded-3xl max-w-md;
      @apply bg-neutral-100;
      @apply dark:bg-neutral-900;

      button.close-modal {
        a {
          @apply bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex;
          @apply text-gray-600 hover:bg-gray-800 hover:text-gray-100;
          @apply dark:text-gray-400 dark:hover:bg-gray-200 dark:hover:text-gray-900;
        }
      }

      .modal-content {
        @apply p-6 pt-0 text-center;
        h3 {
          @apply text-xl font-normal mt-3 mb-10;
          @apply text-zinc-900;
          @apply dark:text-zinc-100;
        }
        button {
          @apply focus:ring-4 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center;
        }
        button.confirm {
          @apply mr-2;
          @apply text-white bg-red-600 hover:bg-red-800 focus:ring-red-300;
          @apply dark:text-black dark:bg-red-400 dark:hover:bg-red-200 dark:focus:ring-red-700;
        }
        button.cancel {
          @apply border;
          @apply text-gray-900 bg-white hover:bg-gray-100 focus:ring-cyan-200 border-gray-200;
          @apply dark:text-gray-100 dark:bg-black dark:hover:bg-gray-900 dark:focus:ring-cyan-800 dark:border-gray-800;
        }
      }
    }
  }
  .user-pill {
    @apply inline-block rounded-full my-3 m-2 min-w-[150px] py-2 px-5 border text-center;
    @apply bg-neutral-300 hover:bg-neutral-400 border-neutral-500;
    @apply dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:border-neutral-500;
  }
  .workout-item {
    @apply rounded-xl py-2 px-5 border;
    @apply bg-neutral-300 hover:bg-neutral-200 border-neutral-500;
    @apply dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:border-neutral-500;

    .meta {
      @apply text-neutral-600;
      @apply dark:text-neutral-400;
    }
  }
}

@tailwind components;
@tailwind utilities;