main.css

@tailwind base;

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

  .icon-decoration {
    @apply align-baseline mr-2;
  }
  .full-size {
    @apply basis-full h-dvh;
  }
  .small-size {
    @apply basis-1/2 2xl:basis-1/3;
  }

  .map-tiles,
  .leaflet-tooltip,
  .leaflet-control {
    @apply dark:saturate-0 dark:invert dark:contrast-[0.80] dark:brightness-[0.85];
  }

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

  .dirty {
    @apply text-sm pill;
    @apply text-amber-600 border-amber-600;
    @apply dark:text-amber-300 dark:border-amber-300;
  }

  textarea,
  select,
  input {
    @apply rounded-xl px-6 py-2 border;
    @apply bg-zinc-100 border-zinc-300 placeholder:text-slate-500;
    @apply dark:bg-zinc-900 dark:border-zinc-700 dark:placeholder:text-slate-500;
    @apply hover:brightness-125 hover:contrast-125;
    @apply focus:brightness-125 focus:contrast-125;
  }
  button.edit,
  button.share {
    @apply border-amber-400;
    @apply bg-amber-300;
    @apply dark:bg-amber-500;
  }
  button.dangerous {
    @apply border-rose-600;
    @apply bg-rose-500;
    @apply dark:bg-rose-700;
  }
  button {
    @apply border-green-600;
    @apply text-white bg-green-500;
    @apply dark:text-white dark:bg-green-700;

    @apply rounded-xl mx-2 px-6 py-2 border font-bold;
    @apply hover:brightness-125 hover:contrast-125;
    @apply focus:brightness-125 focus:contrast-125;
  }

  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:brightness-125 hover:contrast-125;
  }

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

  .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;
    @apply dark:text-amber-100;
  }

  .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.autohide {
        @apply hidden md:contents;
      }
    }
    h1 {
      @apply text-xl md:text-3xl border-b-2 md:border-b-0 mb-3 md:mb-0 pb-3 md: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 {
        @apply rounded-md mx-0 px-2 py-1;
        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;
  }

  .version-notice {
    @apply bg-sky-900 border-sky-600 text-sky-300;
    @apply dark:bg-sky-100 dark:border-sky-400 dark:text-sky-700;
  }

  .notice {
    @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 bg-red-900 border-red-600 text-red-300;
    @apply dark:bg-red-100 dark:border-red-400 dark:text-red-700;
  }
  .version-notice,
  .notice,
  .alert {
    @apply border;
    @apply px-4 py-3 m-5 rounded-md relative;
    a {
      @apply underline;
    }
  }

  .workouts_list_details div {
    @apply w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
  }
  .recent-activity .workouts_list_details div {
    @apply min-w-[100px] max-w-[150px] w-auto;
  }

  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;
        @apply dark:border-neutral-500;
      }
    }
    td,
    th {
      @apply p-2 print:p-0;
      @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;
    }
  }

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

  .selectable-pill {
    @apply pill;
    @apply hover:brightness-125 cursor-pointer;

    @apply bg-red-400  peer-checked:bg-green-400 border-red-500 peer-checked:border-red-500;
    @apply dark:bg-red-800 dark:peer-checked:bg-green-800 dark:border-red-700 dark:peer-checked:border-green-700;
  }

  .pill {
    @apply inline-block rounded-full m-1 min-w-[150px] py-2 px-5 border text-center;
    @apply hover:brightness-110;
    @apply bg-neutral-300 border-neutral-500;
    @apply dark:bg-neutral-700 dark:border-neutral-500;
  }
  .workout-item {
    @apply rounded-xl py-2 px-5 border min-h-[150px];
    @apply hover:brightness-110;
    @apply bg-neutral-300 border-neutral-500;
    @apply dark:bg-neutral-700 dark:border-neutral-500;

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

  .vanish {
    @apply transition-all duration-1000 max-h-0 py-0 my-0 border-0 opacity-0;
  }
}

@tailwind components;
@tailwind utilities;