parcel/style/main.css

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

@layer components {
  body {
    @apply bg-neutral-100 text-neutral-800;
    @apply dark:bg-gray-900 dark:text-neutral-300;
  }

  a {
    @apply text-blue-900 dark:text-blue-200;

    &:hover {
      @apply text-blue-700 dark:text-blue-400;
    }

    &.no-color {
      @apply text-inherit;

      &:hover {
        @apply text-inherit;
      }
    }
  }

  header {
    @apply bg-neutral-100 dark:bg-gray-900;
    @apply text-neutral-800 dark:text-neutral-200;
    @apply border-b border-gray-400 dark:border-gray-700;
    @apply w-full mb-4 shadow-sm;

    nav {
      @apply container mx-auto;
      @apply flex flex-row justify-between;

      > ul {
        @apply list-none flex flex-row;

        li.logo {
          svg {
            @apply relative w-8 -top-0.5;
          }
        }

        li a,
        li span {
          @apply block px-4 py-4;
          @apply text-neutral-800 dark:text-neutral-200;

          &:hover {
            @apply bg-slate-700/25;
            @apply text-neutral-800 dark:text-neutral-200;
          }
        }

        li span {
          @apply cursor-pointer select-none;
        }

        li.dropdown {
          @apply relative;

          ul {
            @apply hidden absolute top-full left-0 w-full;
            @apply bg-slate-900;
            @apply w-max;
            @apply z-50;
          }

          &.open {
            ul {
              @apply block;
            }
          }
        }
      }
    }

    /* Move any drop-downs on the right-hand side of the navigation onto the right */
    nav:last-child > ul > li.dropdown > ul {
      @apply left-auto right-0;
    }
  }

  footer {
    @apply container mx-auto mt-8 mb-4;
    @apply flex flex-col items-center;
    @apply text-sm text-neutral-600 dark:text-neutral-400;

    a {
      @apply text-neutral-500 dark:text-neutral-500;

      &:hover {
        @apply text-neutral-700 dark:text-neutral-300;
      }
    }
  }

  progress {
    @apply rounded-md;
  }

  .form {
    @apply flex flex-col gap-2;
  }

  label {
    @apply block mb-2;
    @apply text-sm font-medium;
    @apply text-gray-900 dark:text-white;
  }

  input + label {
    @apply mt-2;
  }

  .field {
    @apply block w-full p-2.5;
    @apply sm:text-sm;
    @apply outline-none border rounded-lg;
    @apply bg-gray-50 border-gray-300 text-gray-900;
    @apply dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
    @apply focus:ring-primary-600 focus:border-primary-600;
    @apply dark:focus:ring-blue-500 dark:focus:border-blue-500;

    &:disabled {
      @apply bg-gray-100 border-gray-200 text-gray-500;
      @apply dark:bg-gray-800 dark:border-gray-700 dark:text-gray-500;
    }
  }

  .button {
    @apply w-full rounded-lg flex flex-row gap-1;
    @apply px-5 pt-3 pb-2;
    @apply text-white bg-primary-600 hover:text-white hover:bg-primary-700;
    @apply focus:ring-4 focus:outline-none focus:ring-primary-300;
    @apply dark:focus:ring-primary-800;
    @apply text-center text-sm font-medium;

    > svg.lucide {
      @apply relative -top-0.5;
    }

    &:disabled {
      @apply text-white/75 dark:text-white/50;
      @apply bg-primary-400 dark:bg-primary-900;
    }

    &.success {
      @apply bg-green-600 text-white;
      @apply dark:bg-green-500 dark:text-black;

      &:disabled {
        @apply bg-green-600/50 text-white/50;
        @apply dark:bg-green-500/25;
      }
    }
  }

  .buttons {
    @apply flex flex-col md:flex-row md:items-center gap-2;

    &.end {
      @apply justify-end;
    }

    > .button {
      @apply w-auto;
    }
  }

  input + .buttons {
    @apply mt-2;
  }

  .panel {
    @apply w-full;
    @apply flex flex-col;
    @apply border rounded-md shadow-md;
    @apply border-slate-400 dark:border-gray-700 dark:bg-gray-800;
    @apply p-6 sm:p-8;

    &.thin {
      @apply md:w-2/3 lg:w-1/2;
    }

    .heading {
      @apply text-xl md:text-2xl font-bold leading-tight tracking-tight;
      @apply text-gray-900 dark:text-white;
    }
  }

  div.table {
    @apply bg-slate-50 dark:bg-slate-800/25;
    @apply rounded-xl overflow-auto;

    table {
      @apply text-slate-400 dark:text-slate-200;
      @apply border-collapse table-auto;
      @apply w-full my-8 text-sm;

      thead {
        tr {
          th {
            @apply border-b dark:border-slate-600 font-medium p-4;
            @apply pt-0;

            &.slim {
              @apply px-0;
            }

            &:first-child {
              @apply pl-8;
            }

            &:last-child {
              @apply pr-8;
            }
          }
        }
      }

      tbody {
        @apply bg-white dark:bg-slate-800;
        @apply text-slate-500 dark:text-slate-400;

        tr {
          td {
            @apply border-b border-slate-100 dark:border-slate-700 p-4;

            &.slim {
              @apply px-0;
            }

            &:first-child {
              @apply pl-8;
            }

            &:last-child {
              @apply pr-8;
            }
          }

          &:last-child {
            td {
              @apply border-slate-200 dark:border-slate-600;
            }
          }
        }
      }
    }
  }

  .modal {
    @apply fixed top-0 bottom-0 left-0 right-0;
    @apply flex flex-col items-center justify-center;
    @apply bg-black/50;
    @apply backdrop-filter backdrop-blur-sm;

    z-index: 1000;

    animation-name: fadeIn;
    animation-duration: 150ms;
    animation-timing-function: ease;

    > .underlay {
      @apply absolute top-0 left-0 right-0 bottom-0;
      z-index: -1;
    }

    > .content {
      @apply w-full md:w-2/3 lg:w-1/2;
      @apply border border-slate-200 dark:border-slate-600;
      @apply bg-white dark:bg-slate-900;
      @apply rounded-md shadow-md;
      @apply p-4;

      animation-name: zoomIn;
      animation-duration: 150ms;
      animation-timing-function: ease;
    }

    &.closing {
      animation-name: fadeOut;
      animation-duration: 150ms;
      animation-timing-function: ease;

      > .content {
        animation-name: zoomOut;
        animation-duration: 150ms;
        animation-timing-function: ease;
      }
    }
  }

  .lucide {
    @apply inline-block w-4;
  }

  .big-icon {
    > svg {
      @apply w-40 h-40;
    }
  }

  .clipboard-copy {
    @apply cursor-pointer;

    > span:first-of-type {
      @apply block;
    }

    > span:last-of-type {
      @apply hidden;
    }

    &.copied {
      > span:first-of-type {
        @apply hidden;
      }

      > span:last-of-type {
        @apply block;
      }
    }

    > span > svg {
      @apply relative -top-0.5;
    }
  }
}

@layer utilities {
  .text-danger {
    @apply text-red-500 dark:text-red-400;
  }

  .text-success {
    @apply text-green-600 dark:text-green-400;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}